HTML


Comme nous l'avons vu précédemment, HTML est un langage à balises. Ainsi, l'intégralité du code HTML d'une page Web sera composée de balises et d'informations.

Voici le corps d'une page HTML de base, sans DTD :
<html >

	<head>
	</head>

	<body>
	</body>

</html>
On remarque que le document HTML commence par une balise html ouvrante : <html >, et se termine par une balise html fermante </html>

Ensuite, viennent deux partie :

– La première, comprise en <head> et </head> : c'est l'en-tête, la partie de la page qui sera chargée en premier. En général, on y met des informations non visibles telles que le TDT, la langue de la page, une feuille de style CSS ou une référence vers celle-ci, etc, et une information visible : le titre de la page Web.

– La seconde, comprise entre <body> et </body> : c'est le corps de la page, on y place le reste des informations, tout ce qui doit s'afficher dans le navigateur.

Notez qu'un fichier (x)HTML porte l'extension htm ou html. Un fichier CSS porte l'extension css.


Dans l'en-tête, on peut donc placer :

– un titre, compris entre les balises <title> et </title>

– une référence à une feuille de style CSS via la syntaxe : <link rel="stylesheet" type="text/css" href="feuille_de_style.css" / >

– un jeu de caractères pour lire la page, exemple avec le jeu de caractères Européen Ouest (Européen Occidental) avec le symbole € (Euro) : <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" / >

Et dans le corps, on a droit à une multitude de balises :

– <strong> ... </strong> pour définir une zone de texte en gras.

– <br /> pour sauter une ligne.

– <pre> ... </pre> pour définir une zone de texte préformaté.

– <em> ... </em> pour définir une zone de texte en italique.

– <p> ... </p> pour constituer un paragraphe.

– <table> ... </table> pour définir un tableau de données. Il faut ensuite définir ses lignes et cellules.

– <tr> ... </tr> pour définir une ligne du tableau dans lequel il se trouve.

– <td> ... </td> pour définir uen cellule de la ligne du tableau où il se trouve.

– Etc.

Notez qu'en XHTML, toutes les balises sont obligatoirement fermantes. Si la balise est seule, on marque sa fermeture à la fin de la balise, exemple : <balise />. S'il sagit d'une paire de balises, la deuxième ferme la zone : <strong> ... </strong>.

En HTML, toutes les balises ne sont pas fermantes, ainsi le saut de ligne peut s'écrire <br>. Cependant, si la balise fonctionne par paire, il faut obligatoirement les deux balises : l'ouvrante puis la fermante.

CSS



Une feuille de style (fichier d'extension Css, ou simple code entre balises spécifiques dans la page (x)HTML) est destinée à donner un style personnalisé à chacune des balises utilisées dans la ou les pages Web utilisées.

Ainsi, le code suivant redéfinit les balises <em> et <strong> :<br /> 
p{
	color: red;
	font-size: small;
}
strong {
	color: #010066;
}
– Le texte entre les balises <p> et </p> sera de couleur rouge, et de petite taille.

– Le texte entre les balises <strong> er </strong> sera d'une couleur personnalisée (0x01 en niveau de rouge, 0x00 en vert, et 0x66 en bleu). Cependant, la balise <strong> définissant une zone de texte en gras, et la code CSS ne redéfinissant pas cette propriété, celle-ci persiste. Le texte de cette zone sera donc aussi en gras.