0122 Crswebhtml
0122 Crswebhtml
0122 Crswebhtml
page au format .html. Le Html, HyperText Markup Language est le langage dans lequel ces pages
sont rédigées. On met ensuite ces pages en forme (en couleur, avec des encadrements, etc...) à l'aide
d'un autre langage : le Css, Cascading Style Sheet.
Logiciels indispensables
Pour concevoir des pages Html et des feuilles Css, on utilisera deux types de logiciels :
Parmi tous les navigateurs disponibles (notamment sur «smartphone»), on peut citer :
Microsoft Edge, un navigateur déconseillé car il pose régulièrement problème de non respect des
standards du web.
Document HTML
Un fichier .html a une structure d'éléments emboîtés appelés balises.
• Ces balises ont des noms différents selon les informations qu'elles définissent/délimitent.
• Une balise nommée <balise> marque le début d'une information. Cette partie doit être
fermée avec </balise> (notez le slash « / » dans la balise fermante).
• Les balises s'imbriquent dans l'ordre, comme les parenthèses (ou les crochets) en
mathématiques : <a> ... <b> ... </b> ... </a>
• Certaines balises comportent des attributs qui permettent de préciser davantage le contenu
des balises. La valeur de chaque attribut est à indiquer entre guillemets :
<balise attribut = "valeur">
Un navigateur internet est très tolérant. il n'y a pas besoin de balises pour afficher de l'information à
l'écran. Cependant ce sont ces balises qui permettront de mettre en forme (en couleur par exemple)
les parties de texte qui nous semblent les plus importantes.
Structure minimale d'un fichier .html
Toutes les pages Html doivent donc avoir la structure minimale présentée ci-dessous. Les
indentations (décalages vers la droite ou tabulations) ainsi que les commentaires ne sont pas
obligatoires mais ils permettent de mieux se repérer dans le fichier source.
Mise en forme :
Le Css (Cascading Style Sheets) est le langage de mise en forme et de mise en page des
pages .html.
Mise en forme : souligner du texte, le mettre en gras, en rouge, encadrer...
Mise en page : disposer les blocs les uns par rapport aux autres dans la page.
Le code Css s'écrit principalement dans un fichier (feuille) .css. C'est un fichier écrit avec un éditeur
de texte auquel les pages .html accèdent grâce à un lien hypertexte déclaré entre les balises <head>
(ligne 3 ci-dessous) :
Dans une feuille .css, on écrit des règles de style. Pour cela :
• on débute par un sélecteur qui précise à quelle balise Html les règles de style s'appliquent ;
• on ouvre une accolade ;
• on déclare les propriétés de style à modifier selon les valeurs indiquées (attention aux deux-
points et au point-virgule) ;
• on referme l'accolade :
Les couleurs :
De nombreux éléments d'une page web peuvent être mis en couleur et ils peuvent l'être de plusieurs
manières. Par exemple :
• la propriété color modifie la couleur du texte écrit dans la «boîte» ;
• la propriété background-color modifie la couleur d'arrière-plan ;
• la propriété border-color modifie la couleur des bordures...
Parmi les différents formats de codage de couleur qui coexistent, le codage RGB (Red - Green -
Blue) consiste à donner, sous la forme de trois entiers compris entre 0 et 255, l'intensité de rouge,
celle de vert et celle de bleu. Ainsi, pour mettre l'arrière plan d'un paragraphe en rouge à l'aide du
codage RGB, on peut utiliser la règle de style :
p{
background-color: red;
}
p{
background-color: rgb(255, 0, 0);
}
p{
background-color: #FF0000;
}
Remarques :
Evolutions
En pratique, on ne se lance pas au hasard pour concevoir une page web ! On prépare un croquis qui
permet d'anticiper la structure de la page. Cette structure sera évidemment améliorée au fur et à
mesure de la construction de la page (et du site) web, mais elle sera un bon point de départ.
Arborescence :
De manière générale, un site internet (voire le web dans son intégralité) peut être représenté comme
un répertoire (un dossier) contenant des fichiers et/ou des dossiers :
Pour «passer» d'une page web à une autre, pour afficher des images sur ces pages ou pour
télécharger des documents à partir d'un site, il faut créer des liens hypertextes entre ces fichiers en
déclarant leur URL (Uniform Resource Locator).