Bonjour,
Nous allons voir comment utiliser le HTML, puis le CSS. Mais d'abord à quoi ça sert :
- le HTML sert à donner une structure et un sens à votre page et son contenu
- le CSS sert à rendre votre page belle.
sommaire :
I. le HTML
II. Le CSS
II.a la méthode crade
II.b la méthode passe partout
II.c la méthode optimale
III annexes utiles
I. le HTMLune balise HTML se présente sous deux formes :
une balise fermée :
- Code:
-
<img src="lien de l'image" alt="le texte quand l'image ne charge pas">
ou ouvrante :
- Code:
-
<div id="maDiv" class="uneClass"></div>
src, alt, id et class renferment des informations pour le bon fonctionnement de la balise HTML. On appelle cella
un attributCertains attribut ne corresponde qu'à une balise (src, alt pour img) ou sont plus génériques comme class et id qui sont utiles avec du CSS.
liste des éléments en HTML5
II. Le CSSle CSS est l'ensemble des règles définissant l'aspect visuel de votre page.
une règle, généralement appelée propriété, se présente ainsi :
- Code:
-
color : red;
color est le nom de la propriété.
red est la valeur de la propriété.
: est le séparateur entre le nom et la valeur.
; marque la fin de la propriété. Mettez toujours un ; à la fin de vos propriété. Il y a des cas où ce n'est pas obligatoire mais vous éviterez bien des bugs en le mettant toujours.
comment mettre du CSS dans le HTML ? Il y a trois méthodes :
II.a la méthode cradeon va se servir de l'attribut style pour faire :
j'écrit en vert
- Code:
-
<div style="color:green">j'écrit en vert</div>
Mais ça marche bien et on voit bien où est la propriété. Alors pourquoi est-ce crade ?
Parce que sur un gros code, une PA par exemple, ce ne sera pas lisible !
Pour exemple voilà le début d'un code :
- Code:
-
<div style=" text-align: center; background-color:#090909;width:500px;"><div style="padding:10px; text-align:justify;"><span style="display: block; width:480px; height: 150px; background: url(http://image.noelshack.com/fichiers/2016/20/1463923446-01pub11.jpg) top; ceter; border:2px solid darkcyan;border-top-left-radius:5px;border-top-right-radius:5px;opacity:0.5;"></span><div style="margin-bottom:0px; background-color:#090909; text-transform:small-caps;font-size:18px; text-align:center;width:478px;color:darkcyan;">texte </div></div></div>
je vous épargne la suite qui n'est pas plus lisible.
II.b la méthode passe partoutlà il va falloir utilisé une balise HTML qui s'appelle style. Attention, je ne parle pas de l'attribut, mais bien d'une balise que nous allons découvrir ensemble.
Il nous faudrat aussi comprendre un nouveau concept en CSS, les selecteurs.
Un sélecteur est un bout de code qui va nous dire sur quel(s) élément(s)
appliqué un ensemble de propriété CSS. Ce qui nous donne :
- Code:
-
selecteur { propriétés css}
transformons notre code de tout à l'heure. et utilisons des class CSS. Une class CSS est juste un nom marquant une balise HTML Prenons par exemple une class nommé "pleinDePropriété" son selecteur serat ".pleinDePropriété". Et oui il suffit de rajouter un "." pour en faire un selecteur
texte
- Code:
-
<style>.pleinDePropriété{margin-bottom:0px; background-color:#090909; text-transform:small-caps;font-size:18px; text-align:center;width:478px;color:darkcyan;}</style>
<div class="pleinDePropriété">texte </div>
comme on le voit, il suffit de mettre la balise style avant le reste et de mettre le CSS dedans. On ne mets qu'une seule balise style et on peut mettre tout son css dedans. Le gros avantage de cette méthode est d'être utilisable en temps que simple membre sur FA.
note : On peut mettre plusieurs class sur un élément à condition de les séparer par des espace comme class="class1 class2 class3"
II.c la méthode optimalepour passé du code propre à l'optimal, il suffit de :
- mettre le contenu de style dans un fichier nommé blabla.css
- supprimer la balise style pour la remplacer par
- Code:
-
<link rel="stylesheet" href="lien vers blabla.css">
il ne faut pas oublié d'héberger le fichier, comme par exemple sur http://www.petit-fichier.fr/.
note : Par contre sur FA, on ne peut pas utiliser l'optimal sauf si on fait des iframe ou qu'on est admin. Je la cite car elle est utile quand on fait une page html depuis le panneau d'admin.
III annexes utiles :liste des éléments en HTML5
listes des propriétés CSS
liste des selecteurs CSS