Le HTML n'est pas un langage de programmation. C'est un langage de balises nommés également marqueurs ou tags en anglais .
<balise> mon texte </balise>
Chaque balise a un usage particulier et le texte ou les éléments placés entre deux balises s'en trouvent affectés. Les balises marchent par paire : la première est appelée « balise d'ouverture » et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /.Si vous oubliez de fermer une balise, cela affectera la suite du document et vous n'aurez pas la mise en page souhaitée.
Les balises peuvent être imbriquées.
Tout d'abord on indique la nature du document, donc un document HTML. Par convention, l'extension donnée au fichier est .htm ou .html. On précise l'en-tête du document et enfin le corps du document et on ferme toutes les balises que l'on a ouvert, voici ce que cela donne.
<html> → début du document
<head> → en-tête du document
<title> → Titre du document
</title> → fin du titre du document
</head> → Fin de l'en-tête du document
<body> → début du document
.........
</body> → Fin du corps du document
</html> → Fin du document
Les balises html précisent le langage du document. Comme nous avons vu précédemment on y place le dernier code standard :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Entre les deux balises head on place les déclarations comme la feuille de style, meta tags et également les fonctions javascript. Par exemple pour ce site voici ce qu'on y trouve :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="fr">
<link href="html_2009.css" rel="stylesheet" type="text/css" />
Les balises title donnent un titre à votre page, il apparaît dans la zone titre de votre navigateur. N'oubliez cette zone car il est confortable pour les personnes qui visitent votre site de le voir et de le placer dans leurs préférences et si vous utilisez un logiciel de WYSING, le titre par défaut apparaîtra : document sans titre...c'est un signe de négligence.
Entre les balises body vous insérez les éléments qui constitueront votre page, les informations texte, images, les liens, les vidéos, le flash...
Avant d'aller plus loin, je précise que les balises de mise en forme ont longtemps été utilisées dans le HTML, des balises, comme italique (I), gras (B), souligné (U), barré (S). Ces balises sont maintenant dépréciées.
Les propriétés dépréciées les plus connues sont : ALIGN, WIDTH (associé à certaines balises), HEIGHT (associé à certaines balises), SIZE, COLOR, BORDER, BACKGROUND, BGCOLOR, BORDER, FACE, NAME, TARGET,FONT, BASEFONT, CENTER...
Les cours de HTML traditionnels que vous ouvrez trouver sur Internet parlent de ces balises et si je vous les signale pour information, nous n'allons pas les apprendre.
La mise en forme du document se réalise grâce aux feuilles de style. Nous allons donc apprendre tout d'abord les balises de base. Nous travaillerons donc en noir et blanc et ensuite nous allons voir les couleurs, les tailles de caractères, les marges... toute la mise en page.
On peut insérer dans le code HTML des commentaires, ils servent de repères à la personne qui écrit le HTML. On l'écrit entre les signes <!-- et -->.
<!-- Ceci est un commentaire. Il ne sera donc pas affiché. -->Il est aussi important de signer les documents que l'on écrit, et de placer un lien vers une boîte courriel afin que les visiteurs puissent vous contacter. Enfin indiquez la date de la dernière modification afin que le visiteur puisse dater votre document.
Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte :
<h1> → Titre du document, ne s'emploie qu'une seule fois dans chaque page par convention
<h2> → Grand titre
<h3> → Premier sous titre
<h4> → Deuxième sous titre
<h5> → Troisième sous titre
<h6> → Quatrième sous titre
Les paragraphes se rédigent entre les balises <p> et </p>. Cela crée un grand retour chariot.
Pour les retours à la lignes avec un interlignage moins grand, on emploie la balise <br/>, cette balise est particulière car elle ne fonctionne pas par paire, le slash est d'ailleurs placé après br.
Je vais tout de suite parler de l'espace insécable : il s'agit d'une espace entre deux mots qui ne seront pas séparés par un éventuel retour à la ligne. Sa représentation en html est .
Enfin voici une dernière balise : la ligne horizontale que l'on écrit <hr/>. Tout comme la balise br, elle ne fonctionne pas par paire et le slash se place après le hr.
La balise <cite> affiche son contenu avec un style spécifique qui varie suivant les navigateurs. Cette balise n'entraine pas de saut de ligne (ni avant ni après), elle est utilisée pour des citations courtes ou des références alors que le tag BLOCKQUOTE est adapté à des citations longues.
La balise <blockquote> permet de mettre en valeur un paragraphe, une citation par exemple) en effectuant suivant les navigateurs différents effets : un décalage par rapport à la marge courante du document, un retour à la ligne précédent et suivant le bloc de texte ou autres styles (italique ...).
Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela employer un codage particulier.
| Les accents | html | Signes typographiques | html | caractères spéciaux | html |
|---|---|---|---|---|---|
| à | à | < | < | ç | ç |
| â | â | > | > | & | & |
| è | è | « | « | € | € |
| é | é | » | » | £ | £ |
| ê | ê | " | " | © | © |
| î | î | ← | ← | ® | ® |
| ë | ë | ↓ | ↓ | æ | æ |
| ô | ô | ↑ | ↑ | œ hors norme | œ |
| ö | ö | → | → | ¿ | ¿ |
| ù | ù | ′ | ′ | ° | ° |
| û | û | ″ | ″ | ½ | ½ |
>> Voici une page avec ces caractères