Guide du routard

My Twitter

Aperçu

Aperçu

My Google+

Cours complet d'HTML5 -1



GÉNÉRAL

Type de document
<HTML></HTML>
(au début et à la fin du document)
Titre
<TITLE></TITLE>
(nom du fichier; doit être dans l'en-tête)
En-tête
<HEAD></HEAD>
(titre de description)
Corps
<BODY></BODY>
(corps du document)

Liste récapitulative des éléments de section HTML5
Le tableau suivant récapitule les nouveaux éléments de section et leur usage le plus commun, tel que décrit par la spécification.
Nom
Détails
<section>
Section générique regroupant un même sujet, une 
même
fonctionnalité, de préférence avec un en-tête, ou bien
section d'application web
<article>
Section de contenu indépendante, pouvant être 
extraite
individuellement du document ou syndiquée 
(flux RSS ou
équivalent), sans pénaliser sa compréhension
<nav>
Section possédant des liens de navigation principaux
(au sein du document ou vers d'autres pages)
<aside>
Section dont le contenu est un complément par 
rapport
à ce qui l'entoure, qui n'est pas forcément en lien 
direct
avec le contenu mais qui peut apporter des 
informations
supplémentaires.
<header>
Section d'introduction d'un article, d'une autre 
section
ou du document entier (en-tête de page).
<footer>
Section de conclusion d'une section ou d'un article, 
voire
du document entier (pied de page).




DÉFINITION STRUCTURALE

En-tête
<H?></H? >
(6 niveaux d'en-têtes)

En-tête alignée
<H? ALIGN=LEFT|CENTER|RIGHT></H?> [*]

Division
<DIV></DIV>

Division alignée
<DIV ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>
Bloc en retrait
<BLOCKQUOTE></BLOCKQUOTE>[ *]


Emphase
<EM></EM>
(habituellement présenté en italique)

Forte emphase
<STRONG></STRONG>
(habituellement présenté en gras)

Citation
<CITE></CITE>
(habituellement en italique)

Code
<CODE></CODE>
(pour l'affichage de fichier de programmation)

Échantillon de sortie
<SAMP></SAMP>


Entrée au clavier
<KBD></KBD>


Variable
<VAR></VAR>


Définition
<DFN></DFN>
(non officiel)
Adresse de l'auteur(e)
<ADDRESS></ADDRESS>


Grande police de caractères
<BIG></BIG>


Petite police de caractères
<SMALL></SMALL>


FORMAT DE PRÉSENTATION

Gras
<B></B>


Italique
<I></I>

N3.0b
Souligné
<U></U>
(non officiel)

Rayé
<STRIKE></STRIKE>
(non officiel)
N3.0b
Rayé
<S></S>
(non officiel)

Indice
<SUB></SUB>


Exposant
<SUP></SUP>


Imprimé
<TT></TT>
(présenté dans une police de caractères à simple espacement)

Préformaté
<PRE></PRE>
(affiche le texte dans son format original)

Largeur
<PRE WIDTH=?></PRE>
(s'applique aux caractères)

Centré
< CENTER></CENTER> [*]
(pour le texte et les images)
N1.0
Clignotement
<BLINK>< /BLINK>
(étiquette tournée en dérision)

Grandeur de la police
<FONT SIZE=?></FONT>
(entre 1-7)

Changement de la grandeur de la police
<FONTSIZE=+|-?></FONT>

N1.0
Grandeur de la police de base
<BASEFONT SIZE=?>
(entre 1-7; par défaut 3)

Couleur de la police
<FONT COLOR="#$$$$$$"></FONT>

N3.0b
Sélection de fonte
<FONT FACE="***"></FONT>

N3.0b
Texte en multi-colonnes
<MULTICOL COLS=?></MULTICOL>

N3.0b
Longueur de la colonne
<MULTICOL GUTTER=?></MULTICOL>
(défaut est 10 pixels)
N3.0b
Largeur de la colonne
<MULTICOL WIDTH=?></MULTICOL>

N3.0b
Espaceur
<SPACER>

N3.0b
Type d'espaceur
<SPACER TYPE=horizontal| vertical|block>

N3.0b
Grandeur d'espaceur
<SPACER SIZE=?>

N3.0b
Dimensions de l'espaceur
<SPACER WIDTH=? HEIGHT=?>

N3.0b
Alignement de l'espaceur
<SPACER ALIGN=left|right|center>



LIENS ET IMAGES

Lier quelque chose
<A HREF="URL"></A>


Lier un pointeur
<A HREF="URL#***"></A>
(si c'est dans un autre document)


<A HREF="#***">< /A>
(si c'est dans le même document)
N2.0
Fenêtre cible
<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>


Définition du pointeur
<A NAME="***"></A>


Relation
<A REL="***"></A>
(pas largement implanté)

Relation inverse
<A REV="***"></A>
(pas largement implanté)
Afficher une image
<IMG SRC="URL">


Alignement
<IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

N1.0
Alignement
<IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>


Alternative
<IMG SRC="URL" ALT="***">
(si l'image n'est pas affichée)

Carte-image
<IMG SRC="URL" ISMAP>
(requiert un exécutable)

Carte-image client
<IMG SRC="URL" USEMAP="URL">
(requiert un exécutable)

Nom de la carte
<MAP NAME="***"></MAP>
(décrit la carte)

Sections de la carte
<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>


Dimensions
<IMG SRC="URL" WIDTH="?" HEIGHT="?">
(en pixels)

Bordure
<IMG SRC="URL" BORDER=?>
(en pixels)

Espace environnant
<IMG SRC="URL" HSPACE=? VSPACE=?>
(en pixels)
N1.0
Low-Res Proxy
<IMG SRC="URL"LOWSRC="URL">

N1.1
Appel client
<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">

N2.0
Objet encastré
<EMBED SRC="URL">
(insert un objet dans la page)
N2.0
Dimension de l'objet
<EMBED SRC="URL" WIDTH=? HEIGHT=?>


SÉPARATEURS

Paragraphe
<P></P> [* ]
(étiquette de fin souvent pas nécessaire)

Alignement du texte
<P ALIGN=LEFT|CENTER|RIGHT></P> [*]
(double retour)

Fin de ligne
<BR>
(simple retour)

Alignement forcé
<BR CLEAR=LEFT|RIGHT|ALL>


Ligne horizontale
<HR>


Alignement
<HR ALIGN=LEFT|RIGHT|CENTER>


Épaisseur
<HR SIZE=?>
(en pixels)

Largeur
<HR WIDTH=?>
(en pixels)
N1.0
Largeur
<HR WIDTH=%>
(en tant que pourcentage de la largeur de la page)

Ligne pleine
<HR NOSHADE>
(sans l'effet 3D)
N1.0
Sans-coupure
<NOBR></NOBR>
(prévient la coupure des lignes)
N1.0
Coupure de mot
<WBR>
(endroit où couper une ligne si nécessaire)

LISTES


Liste non-ordonnée
<UL><LI></UL>
(<LI> avant chaque item de la liste)

Compacte
<UL COMPACT></UL>

N1.0
Type d'indicateur
<UL TYPE=DISC|CIRCLE|SQUARE>
(pour la liste entière)


<LI TYPE=DISC|CIRCLE|SQUARE>
(celui-ci & subséquent)

Liste ordonnée
<OL><LI></OL>
(<LI> avant chaque item de la liste)

Compacte
<OL COMPACT></OL>

N1.0
Type de nombres
<OL TYPE=A|a|I|i|1>
(pour la liste entière)


<LI TYPE=A|a|I|i|1>
(celui-ci & subséquent)
N1.0
Nombre de départ
<OL START=?>
(pour la liste entière)


<LI VALUE=?>
(celui-ci & subséquent)

Liste de définitions
<DL><DT><DD></DL>
(<DT>=terme, <DD>=définition)

Compacte
<DL COMPACT></DL>


Liste de menus
<MENU><LI></MENU>
(<LI> avant chaque item de la liste)

Compacte
<MENU COMPACT></MENU>


Liste de répertoires
<DIR><LI></DIR>
(< LI> avant chaque item de la liste)

Compacte
<DIR COMPACT></DIR>


ARRIÈRE-PLAN ET COULEURS
N1.1
Couleur d'arrière-plan
<BODY BGCOLOR="#$$$$$$"> [*]
(ordre est rouge/vert/bleu)

Texture
<BODY BACKGROUND="URL"> [*]

N1.1
Couleur du texte
<BODY TEXT="#$$$"> [*]

N1.1
Couleur des liens
<BODY LINK="#$$$"> [*]


Couleur des liens visités
<BODY VLINK="#$$$"> [*]

N1.1
Liens actifs
<BODY ALINK="#$$$">



CARACTÈRES SPÉCIAUX

code ISO
&#?;
(où le ? représente le code ISO8859-1)

< 
&lt;


> 
&gt;


&
&amp;


"
&quot;


Registered TM
&reg;


Copyright
&copy;


Espace
&nbsp;

(Une liste complète est disponible à http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMULAIRES

Formulaire
<FORM ACTION="URL" METHOD=GET|POST></FORM>

N2.0
Transfert de fichier
<FORM ENCTYPE="multipart/form-data></FORM>


Champ d'entrée de données
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN| SUBMIT|RESET">

Nom du champ
<INPUT NAME="***">


Valeur du champ
<INPUT VALUE="***">


Vérifié?
<INPUT CHECKED>
(boutons de vérification et boutons radio)

Grandeur du champ
<INPUT SIZE=?>
(en caractères)

Longueur maximum
<INPUT MAXLENGTH=?>
(en caractères)

Liste de sélection
<SELECT></SELECT>

Nom d'une liste
<SELECT NAME="***"></SELECT>


Nombre d'options
<SELECT SIZE=?></SELECT>


Choix multiples
<SELECT MULTIPLE>
(permet une sélection multiple)

Option
< OPTION>
(items qui peuvent être sélectionnés)

Option par défaut
<OPTION SELECTED>


Grandeur de la boîte d'entrée de données
<TEXTAREA ROWS=? COLS=?>
</TEXTAREA>


Nom de la boîte
<TEXTAREA NAME="***">
</TEXTARE A>


"Wrap Text"
<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA>


TABLEAUX

Définition d'un tableau
<TABLE></TABLE> [*]


Bordure du tableau
<TABLE BORDER=?></TABLE>


Espace des cellules
<TABLE CELLSPACING=?>


Espace de la bordure des cellules
<TABLE CELLPADDING=?>


Largeur
<TABLE WIDTH=?>
(en pixels)

Largeur
<TABLE WIDTH=%>
(pourcentage de la page)

Lignes du tableau
<TR></TR>


Alignement
<TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Cellules du tableau
<TD></TD>
(doit apparaître à l'intérieur des lignes d'un tableau)

Alignement
<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Sans-coupure
<TD NOWRAP>


Débordement d'une colonne
<TD COLSPAN=?>


Débordement des lignes
<TD ROWSPAN=?>

N1.1
Largeur
<TD WIDTH=?>
(en pixels)
N1.1
Largeur
<TD WIDTH=%>
(en pourcentage du tableau)
N3.0b
Couleur de cellule
<TD BGCOLOR="#$$$$$$">


En-tête du tableau
<TH></TH>
(semblable aux données, centré et gras)

Alignement
<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>

Sans-retour
<TH NOWRAP>


Débordement de colonnes
<TH COLSPAN=?>


Débordement de lignes
<TH ROWSPAN=?>

N1.1
Largeur
<TH WIDTH=?>
(en pixels)
N1.1
Largeur
<TH WIDTH=%>
(en pourcentage du tableau)
N3.0b
Couleur de cellule
<TH BGCOLOR="#$$$$$$">


Légende du tableau
<CAPTION></CAPTION>


Alignement
<CAPTION ALIGN=TOP|BOTTOM>
(sur ou sous le tableau)

CADRES
N2.0
Cadre du document
<FRAMESET></FRAMESET>
(au lieu de <BODY>)
N2.0
Hauteur des lignes
<FRAMESET ROWS=,,,></FRAMESET>
(en pixels ou pourcentage)
N2.0
Hauteur des lignes
<FRAMESET ROWS=*></FRAMESET>
(* = grandeur relative)
N2.0
Largeur des colonnes
<FRAMESET COLS=,,,></FRAMESET>
(en pixels ou pourcentage)
N2.0
Largeur des colonnes
<FRAMESET COLS=*></FRAMESET>
(* = grandeur relative)
N3.0b
Lageur de la bordure
<FRAMESET BORDER=?>

N3.0b
Bordures
<FRAMESET FRAMEBORDER="yes|no">

N3.0b
Couleur de la bordure
<FRAMESET BORDERCOLOR="#$$$$$$">

N2.0
Définition d'un cadre
<FRAME>
(items d'un cadre individuel)
N2.0
Afficher le document
<FRAME SRC="URL">

N2.0
Nom du cadre
<FRAME NAME="***"|_blank|_self|_parent|_top>

N2.0
Largeur de la marge
<FRAME MARGINWIDTH=?>
(marges à gauche et à droite)
N2.0
Hauteur de la marge
<FRAME MARGINHEIGHT=?>
(marges en haut et en bas)
N2.0
Défilement du texte
<FRAME SCROLLING="YES|NO|AUTO">

N2.0
Défilement du texte
<FRAME NORESIZE>

N3.0b
Bordures
<FRAME FRAMEBORDER="yes|no">

N3.0b
Couleur de la bordure
<FRAME BORDERCOLOR="#$$$$$$">

N2.0
Contenu non-encadré
<NOFRAMES></NOFRAMES>
(pour les lecteurs WWW incapables d'utiliser les cadres)

JAVA

Applet
<APPLET></APPLET>


Nom de fichier applet
<APPLET CODE="***">


Paramètres
<APPLET PARAM NAME="***">


Position de l'applet
<APPLET CODEBASE="URL">


Identificateur Applet
<APPLET NAME="***">
(pour faire référence ailleurs dans une page)

Alternative en texte
<APPLET ALT="***">
(pour les navigateurs non-java)

Alignement
<APPLET ALIGN="LEFT|RIGHT|CENTER">


Grandeur
<APPLET WIDTH=? HEIGHT=?>
(en pixels)

Espacement
<APPLET HSPACE=? VSPACE=?>
(en pixels)

DIVERS

Commentaires
<!--***-->
(n'est pas affiché par le lecteur WWW)

Prologue HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML 3.2//EN"> [*]

Indicateur de recherche
<ISINDEX>
(indique un index de recherche)
N1.0
Ligne de commande
<ISINDEX PROMPT="***">
(texte pour indiquer l'entrée de données)

Envoie de la recherche
<A HREF="URL?***"></A>
(utiliser un point d'interrogation)

URL de ce fichier
<BASE HREF="URL">
(doit être dans l'en-tête du document)

Nom de base de la fenêtre
<BASE TARGET="***">
(doit être dans l'en-tête du document)

Relation
<LINK REV="***" REL="***" HREF="URL">
(dans l'en-tête du document)

Information META
<META>
(dans l'en-tête du document)

Feuilles de styles
<STYLE></STYLE>
(pas supporté largement)

Scripts
<SCRIPT></SCRIPT>
(pas supporté largement)
Introduction 
Le langage HTML est un langage informatique qui permet de créer et structurer des pages Web. Par définition, toutes les pages Web sont faites de code HTML, le langage hypertexte. Toutefois, ces pages HTML sont souvent générées en tout ou partie automatiquement, par exemple sur Wikipédia, dans le cas contraire, elles sont écrites avec un éditeur de texte.
Si le langage HTML permet d'afficher des pages d'une grande variété de contenus, de mise en forme ou d'animations, et caetera, il a également la qualité de pouvoir être écrit avec un simple éditeur de texte, ce qui évite l'achat d'une application spécifique. Vous pouvez rédiger du HTML vous même dans le cas d'une page statique, ou bien laisser un script produire du HTML à la volée.
Il suffit de créer un fichier portant le suffixe .html et de l'ouvrir dans un navigateur web, en donnent le chemin du fichier préfixé du protocole file:// ou en effectuant un clic droit et sélectionner ouvrir avec votre navigateur web.
L'un des ses inconvénient est que l'affiche est dépendant du terminal, notamment, de la taille de l'écran, du navigateur, du niveau de zoom, des polices de caractères disponibles, etc.
Ceci nécessite donc de tester les pages avec différents terminaux. Pour éviter les mauvaises surprises, veillez à respecter les standards du Web !

Le langage HTML/Introduction

HTML est un langage de description de document utilisé sur Internet pour faire des pages Web. Son sigle signifie « HyperText Markup Language » en anglais, littéralement « langage de marquage hypertexte ». Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web.
Le XHTML est quant à lui une évolution du HTML ; le sigle signifie Extensible Hypertext Markup Language. Nous verrons plus loin la différence entre les deux, mais la plupart des informations sont valables pour les deux langages. Le terme (X)HTML signifie donc « HTML ou XHTML ».
La formulation du langage HTML est fort simple, en effet des balises permettent d'appliquer différents formatages. Elles sont délimitées par les deux symboles "supérieur à" et "inférieur à". Dans le cas des balises en paires, chaque balise ouverte doit être fermée,
Finalement, ce langage a abouti à une nouvelle version : le HTML5. Cette version possède des ajouts pour les médias (audio, vidéo, application interactives avec CSS3/JavaScript). C'est de cette version que ce livre traitera.

Pourquoi apprendre le HTML5 ?


Un document HTML5 est avant tout un document texte (c'est-à-dire lisible par un humain), qui contient une certaine syntaxe afin de mettre en forme ou de décrire ce document. Son nom de fichier a généralement le suffixe .html (réduit à .htm sur les systèmes d'exploitation ne supportant pas plus de 3 caractères de suffixe).
L'immense majorité des internautes réalisent leur page Web à l'aide d'un logiciel avec une interface graphique, en utilisant la souris et en ayant un rendu immédiat ; il en existe des gratuits. Ce logiciel génère du code HTML5.
Pourquoi alors vouloir taper soi-même du code ?
Chacun aura sa réponse à cette question. Cela peut être par curiosité, pour comprendre comment marche le Web ; ou bien encore pour « nettoyer » le code HTML généré par le logiciel, le rendre plus léger.

Description de document ou mise en forme ?


Il faut bien comprendre la différence entre « description de document » et « mise en forme ». « Décrire » un document, c'est indiquer la « fonction » de telle ou telle partie du texte : citation, passage important, titre, paragraphe… La mise en forme, elle, est du ressort du navigateur : c'est lui qui décide comment sera mis en forme un paragraphe (en général avec un espace vertical avant et après), une citation (en général avec une marge plus importante), un passage important (en général en italique ou en gras), un titre (en général en plus grand avec un espace vertical avant et après)…
Vous pouvez donner des indications au navigateur en utilisant une feuille de style (voir Le langage CSS mais il est préférable de lire Le langage HTML avant).
Bien sûr, pour des raisons esthétiques — tout à fait louables — certains voudront faire du « placement au millimètre ». C'est tout à fait possible, mais plus vous voulez faire des choses compliquées, plus le code devient compliqué… Et surtout, le risque est de faire « n'importe quoi ». Il est par exemple simple de créer des tableaux imbriqués pour placer le texte comme on veut, mais avez-vous pensé aux mal-voyants ? S'ils utilisent un logiciel de lecture vocale, celui-ci lit le contenu des cellules linéairement, de gauche à droite et de haut en bas ; est-ce bien ce que vous désirez ? Voir à ce sujet l'article de Wikipédia Accessibilité du Web.
Dans un premier temps, le recours au HTML5 revient à renoncer à la mise en forme pour la déléguer au navigateur. Ceci peut être frustrant, mais vous gagnez en simplicité et en universalité. La mise en forme viendra dans un deuxième temps, avec le CSS — Rome ne s'est pas faite en un jour…
Notons que le HTML ayant été créé avant le CSS, il contient de nombreux éléments de mise en forme. On trouvera donc de nombreuses références (ouvrages, pages en lignes) et de nombreux exemples (pages Web) utilisant ces balises. Nous vous invitons à ne pas suivre ces « mauvais exemples ».

Balises et compagnie


Pour faire une page HTML (c'est à dire une page Web) vous n'avez pas besoin d'un logiciel spécial, il suffit d'utiliser un éditeur de texte standard (comme le Bloc-note de Windows ou TextEdit sur Mac) et d'enregistrer vos pages avec un nom finissant par .html. Une page Web est en fait un simple fichier texte contenant du code HTML qui est ensuite interprété par le navigateur.

Note
Dans le protocole HTTP, ce n'est pas l'extension du fichier qui définit qu'un fichier est du HTML, mais l'en-tête (voir plus loin)… en théorie. Si un fichier HTML devrait pouvoir avoir n'importe quelle extension, dans la pratique, le navigateur se base souvent sur l'extension du fichier et non pas sur l'en-tête.

Un document HTML est constitué de texte normal — la plupart du temps c'est ce que vous voulez afficher à l'écran — et de HTML à proprement parler sous formes de balises (ou tags en anglais). Les balises servent à dire des choses au navigateur comme « ça c'est un titre », « ça c'est en emphase », « là je veux une image », « là je veux un lien » etc. Affichez ensuite la page dans votre navigateur. Une balise est facilement reconnaissable car elle est toujours entre < et >.
Voici un texte en <em>emphase</em>.
donne :
'
Voici un texte en emphase.
Dans cet exemple, seul le mot « emphase » sera en emphase car il est borné par les balises <em> et </em>.[1]
On voit déjà qu'il y a deux types de balises. Les balises qui vont par deux, pour dire des choses comme « là, commence le texte en emphase » et « là, termine le texte en emphase », et les balises qui sont toutes seules, comme pour le « là je veux une image ». Observez qu'une balise de fin s'écrit exactement comme la balise de début mais avec une barre de fraction « / » (slashen anglais) avant son nom (em). On appelle tout ce qui est situé entre une balise de début et de fin un élément. On a donc ici un élément « em » contenant le texte « emphase ».
Une balise de début peut également contenir un ou plusieurs attributs, qui sont des paramètres permettant de préciser certaines caractéristiques de l'élément. Le nom de la balise dit de faire quelque chose, et un attribut donne des précisions sur comment le faire. Par exemple, la balise pour faire un lien est « a » (pour anchor, « ancre »). Mais si on fait juste <a>mon super lien</a>, le navigateur ne saura pas où doit mener ce lien. Pour ça il y a l'attribut « href » 

L'attribut « href » indique la destination du lien. Comme vous pouvez le voir dans l'exemple, les attributs sont placés dans la balise de début (il ne faut pas les remettre dans la balise de fin), après le nom de l'élément. Le contenu d'un attribut est toujours délimité par deux guillemets « " » ou deux apostrophes « ' », précédés du signe égal « = ». Vous pouvez bien sûr mettre plusieurs attributs en les séparant par des espaces. Dans certains cas, le navigateur comprendra ce que vous voulez même si vous ne mettez pas les guillemets, mais il vaut mieux prendre l'habitude d'en mettre partout.

Le langage HTML/Structure de base d'un document HTML


Les documents HTML doivent tous avoir une structure minimale. C'est-à-dire des balises qui sont toujours présentes et au milieu desquelles vous allez ajouter votre propre contenu. Ce chapitre présente cette structure en donnant quelques explications sur les mots-clefs principaux (aussi appelés balises).
Voici un exemple de page minimale :
<!DOCTYPE html>
 
<html>
 
  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>
 
  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>
 
</html>

La page minimale


<!DOCTYPE html>
 
<html>
 
  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>
 
  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>
 
</html>

Importance du DOCTYPE


Sans un DOCTYPE, vous ne pourrez pas faire passer votre page par un validateur.

Le HTML 5


<!DOCTYPE html>

Le HTML 5


<!DOCTYPE html>

Les Balises


Nous retrouvons ici notre exemple du haut de page, pour en expliquer les principales balises.
<!DOCTYPE html>
 
<html>
 
  <head>
    <title>Titre affiché dans la barre de titre du navigateur</title>
  </head>
 
  <body>
    <!-- C'est ici que vous mettrez votre contenu  -->
  </body>
 
</html>

La balise <html>


Un document HTML est entièrement compris dans une balise html. Même si le navigateur s'y attend, vous êtes poli et vous lui dites que vous commencez votre document HTML, puis que vous le terminez. Ainsi la balise <html> sera toujours la toute première après le doctype, et la balise </html> la toute dernière.
À l'intérieur on trouve deux parties principales : un en-tête et un corps, placé respectivement dans les balises head et body. L'en-tête est constitué de déclarations générales concernant la page HTML, destinées au navigateur, aux moteurs de recherche etc. Le corps contient le document lui-même : ce qui sera affiché par le navigateur dans la fenêtre de rendu. Cette partie ne contient aucun élément obligatoire.

La balise <head>


La balise <head> délimite l'en-tête de la page dont on vient de parler. On y trouve des informations qui ne seront pas affichées directement dans la zone de rendu du navigateur. Par exemple le titre de la page, le lien vers la feuille de style, une description et des mots clés, etc... L'en-tête des documents HTML est l'objet du chapitre L'en-tête.

La balise <title>


L'en-tête contient un élément obligatoire : title qui indique le titre de la page. C'est le titre qui s'affiche ensuite en haut de la fenêtre du navigateur.
Essayez de mettre un titre pertinent et différent pour chaque page, qui permette d'identifier le site et la page en elle-même. Par exemple, "Sommaire" est un très mauvais choix. Quand votre page se retrouvera dans les favoris de quelqu'un, cette personne sera incapable de savoir de quelle page il s'agit rien qu'en regardant le nom. Préférez des choses du style "Accueil - www.ladressedemonsite.com".

La balise <body>


Tout le corps de notre document est dans la partie body. Elle comprend donc le texte, les liens, la référence des images et tout ce qu'un auteur peut vouloir mettre dans un document HTML.

Les commentaires


Les commentaires sont du texte écrit dans le code HTML qui n'est pas visible dans le rendu de la page. Les commentaires jouent habituellement le rôle de notes pour expliquer ce qui a été fait dans la page, ou bien tout simplement pour indiquer des modifications à faire ultérieurement. Ils sont biens sûr facultatifs, mais ils peuvent vous être utiles !
Un commentaire commence par les caractères <!-- et se termine par les caractères -->.
Pratiquement n'importe quelle chaîne de caractères peut être placée à l'intérieur d'un commentaire : du texte, des balises, mais pas une suite de deux traits d'union adjacents (--).

Conclusion


Dans cette partie vous avez appris vos premières vraies balises. Elles sont importantes car elles doivent toujours être présentes (en dehors des balises de commentaires, qui sont uniquement là à titre de... commentaires).

Le langage HTML/Bien commencer le HTML


Les navigateurs sont plutôt résistants aux erreurs. Ainsi, si vous faites une faute, la seule conséquence sera en général que vous n'obtiendrez pas le résultat attendu mais le texte s'affichera quand même. Dans le pire des cas, votre contenu ne s'affichera pas, mais vous n'aurez pas de « plantage » comme cela arrive avec la programmation.
Du fait de cette tolérance, certains créateurs, ou même logiciels générant du HTML font volontairement des fautes, par exemple ouvrir une balise et ne pas la fermer, par flemmardise. Cela peut sembler sans importance puisque la page s'affichera quand même.
Toutefois,
·         des erreurs consécutives peuvent engender un effet boule de neige et il devient alors difficile de trouver d'où vient le vrai problème.
·         cela empêche la traduction automatique vers d'autre langages, par exemple la conversion du HTML en LaTeX ou en syntaxe wiki.
·         il n'est pas garanti que la page s'affiche correctement sur tous les navigateurs.
Il faut en fait accorder la même rigueur au HTML qu'aux autres langages de programmation, et pour cela utiliser de bons outils et prendre de bonnes habitudes.
Et prendre du recul lorsque l'on s'inspire de pages déjà existantes : la plupart des navigateurs permettent d'afficher le code source de la page, mais celui-ci peut être peu rigoureux.

Un bon exemple vaut mieux qu'un long discours


Nous allons créer notre première page à partir de la page minimale.
Pour cela, ouvrez votre éditeur de texte préféré — nous parlons bien d'éditeur de texte et pas de logiciel de traitement de texte (comme Microsoft Word). Sous Microsoft Windows, le Bloc-Note (Notepad) fait très bien l'affaire. Prenez le texte ci-dessous, copiez-le, et collez-le dans la page vide (ou bien tapez-le).
Exemple
<!DOCTYPE html>

<html>

  <head>
    <title>Premier essai</title>
  </head>

  <body>
    Bonjour le monde.
  </body>

</html>
Puis, utilisez la fonction Fichier | Enregistrer sous, et enregistrez le sous le nom bonjour.html (avec Notepad, il faut choisir « Tous les fichiers » dans le menu déroulant Type de fichier). Si vous double-cliquez dessus depuis l'explorateur de disque (Explorateur Windows, Finder…), cela ouvrira normalement votre navigateur Internet par défaut, et affiche :
« Premier essai » dans la barre de titre ;
« Bonjour le monde. » dans la fenêtre principale.
Réessayez maintenant avec le texte suivant :
 <!DOCTYPE html> <html> <head> <title> Premier essai </title> </head> <body> Bonjour le monde. </body> </html>
(le même texte mais sur une seule ligne, sans mise en forme) — une fois le fichier sauvé, il suffit d'appuyer sur le bouton « rafraîchissement/recharger » du navigateur pour voir la différence. On remarque qu'il n'y en a aucune.
Aucune différence en ce qui concerne le rendu, mais le code source est lui bien moins lisible. Donc moins facilement modifiable, augmentable, corrigible. Il convient donc de prendre des « bonnes habitudes de programmation ».

Bonnes habitudes de programmation


Voici quelques conseils
·         aérer son code :
·         les retours à la ligne n'ont pas d'incidence sur le rendu (si ce n'est un espace) ; n'hésitez donc pas à revenir à la ligne régulièrement afin de structurer votre code ;
·         si vous mettez plusieurs espaces, cela est interprété comme un seul espace, on peut donc jouer sur la « mise en forme » du code pour se repérer, et par exemple mettre un ou plusieurs espace en début de ligne (indentation) ; en général, quand un texte est entre une balise d'ouverture et une balise de fermeture, on décale les différentes lignes de 2 ou 3 espaces par rapport à ce qui précède ;
·         mettez des commentaires pour pouvoir vous repérer ;
·         utilisez un éditeur de texte avec
·         gestion des indentations : il suffit d'appuyer sur la touche de tabulation pour créer un décalage, et le décalage est appliqué automatiquement aux lignes suivantes ;
·         « coloration syntaxique » : les caractères spéciaux et balises sont reconnus et mis en couleur, ce qui facilite la lecture du code.
Voici par exemple un commentaire permettant de se repérer facilement (l'exemple suivant se trouverait au sein d'un code, donc notamment après les balises <!DOCTYPE html> <html> … <body> et avant le </body> </html> final).
…
<!--
*******************
* première partie *
*******************
-->

<h1> Première partie </h1>
…

Le mauvais exemple


Prenez votre traitement de texte favoris. Créez un document vide, et tapez simplement « Bonjour le monde. », puis enregistrez le fichier sous la forme d'un fichier HTML : menu Fichier | Enregistrer sous, et choisissez l'option Page Web (*.htm, *.html) dans le menu déroulant Type de fichier. Appelez ce fichier bonjour1.html.
Ouvrez maintenant ce fichier depuis l'éditeur de texte. Vous voyez que le fichier contient un nombre beaucoup plus important de lignes. Certaines de ces lignes peuvent contenir des informations personnelles, que vous aurez rentrées lorsque vous avez installé votre système d'exploitation, et que vous ne désirez peut-être pas voir figurer sur Internet… Et selon le logiciel (et sa version), vous aurez du code plus ou moins « propre » : dans certains cas, pour un texte long, il redéfinit à chaque paragraphe la police utilisée… Essayez de sauvegarder ainsi au format HTML un texte que vous avez déjà tapé auparavant et constatez les dégâts. Vous remarquez aussi que vous n'avez pas pu définir le titre s'affichant dans la barre de titre.
S'il est simple de générer du code HTML, simple dans le sens « en peu d'opérations et sans connaissance particulières » (« en un clic »), il faut se méfier du résultat, même si le rendu est correct.

Avec quoi écrire un document HTML ?


Comme indiqué plus haut, il existe des éditeurs HTML plus développés, allant de l'amélioration de la présentation du code (exemple : les balises sont distinguées du texte par une couleur spécifique) à l'éditeur WYSIWYG (« What You See Is What You Get », littéralement « ce que vous voyez est ce que vous obtenez », c'est-à-dire que vous voyez directement le résultat apporté par les modifications que vous entreprenez).
Vous devrez tout de même garder en tête la notion (récente) d'encodage des caractères, et faire la différence entre les principaux types (utf-8, ISO-8859-1…), et la nécessité pour votre éditeur de texte de reconnaître et respecter cet encodage, sous peine de voir afficher de drôles de caractères à la place des accents… Voir à ce sujet Caractères spéciaux et entités.
Voici une sélection (à compléter) d'éditeurs libres de qualité :
·         Notepad++ Coloration syntaxique paramétrable, ouverture simultanée de plusieurs sources, support d'une quarantaine de langages, reconnaissance de l'encodage, macro, plugiciels…
·         Emacs Coloration syntaxique, affichage de double fenêtre, barre de navigation, un catalogue complet d'extension, de nombreux raccourci clavier
·         Bluefish
·         JEdit
·         Quanta Plus
·         Atom Coloration syntaxique
·         Brackets
·         Sublime Text 2
·         NVU et Kompozer Ces derniers seraient plutôt des éditeurs WYSIWYG mais permettent d'éditer directement la source d'une page.
Pour choisir, le mieux est de tester. Quelques éléments à prendre en compte pour faire un choix :
·         Le logiciel permet-il la coloration syntaxique ? Quels langages sont supportés (PHP, CSS, HTML, JavaScript ?) ?
·         Peut-on ouvrir plusieurs fichiers dans différents onglets ?
·         Peut-on visionner simplement le résultat ? (par exemple avec une touche voir cette page dans le navigateur)
·         Est-ce que les encodages de caractères sont bien gérés ?
·         Y a-t-il une auto-complétion ? (quand vous écrivez une balise : le logiciel écrit directement la balise fermante)
·         L'indentation est elle facilement modifiable ? Notamment, est-ce que le logiciel comporte une fonction permettant de déplacer tout un bloc de ligne vers la gauche ou vers la droite ?

Le langage HTML/L'en-tête


L'en-tête est la partie du fichier HTML comprise entre les balises <head>…</head>. Cette partie est située juste après le doctype et la balise d'ouverture <html>.
L'en-tête contient des informations sur la page elle-même (« méta-données ») : titre, auteur, description du contenu de la page, mots-clefs, où feuille(s) de style à utiliser…
La structure de l'en-tête est décrite dans le RFC 2616[1].

Note
Nous utilisons ici le HTML5. Pour le XHTML, rajoutez simplement les barres de fraction à la fin des balises isolées, par exemple
XHTML
HTML5
<meta name="propriété" content="attributs" />
<meta name="propriété" content="attributs">

Principaux éléments


Titre
Le titre est compris entre les balises <title>…</title>.
Habituellement, le titre de la page est affiché dans la barre de titre du navigateur (tout en haut), et lorsque le navigateur gère les onglets, dans l'étiquette des onglets.
Cet élément est obligatoire.
Encodage
Si le fichier contient des caractères répondant à la norme ISO-8859-1 « Latin-1 », on mettra la balise
<meta charset="utf-8">
Cette information est très fortement recommandée.
Auteur
Le nom de l'auteur est indiqué avec la balise suivante :
<meta name = "author"
   content = "nom de l'auteur" >
Description de la page
La description du contenu de la page est indiquée avec la balise suivante :
<meta name = "description"
   content = "phrase de description" >
Mots-clefs
Les mots-clefs servent à référencer la page. Cependant, de nombreux moteurs de recherche n'ont plus recours aux mots-clefs car des auteurs utilisaient des mots-clefs sans rapport avec le contenu afin d'augmenter la fréquentation de leur page (cas notamment de nombreux sites pornographiques). Les mots-clefs sont indiqués avec la balise suivante :
<meta name = "keywords"
   content = "liste de mots-clefs" >
Robots
Le robot sert à gérer le référencement de la page. Il prend comme argument follow (permet au robot de suivre les liens de la page), index (permet au robot d'indexer la page), les arguments nofollow et noindex sont les contraires (ne pas suivre et ne pas indexer). Les deux derniers arguments sont all et none qui, comme leur noms l'indique, active ou désactive les deux fonctions. Les instructions pour robots sont indiquées avec la balise suivante :
<meta name = "robots"
    content = "all|(no)follow|(no)index|none" >
Feuille de style
Lorsque la page utilise une feuille de style située dans un autre fichier, on utilise la balise
<link rel= "stylesheet"
   type = "text/css"
   href="nom_du_fichier.css">
On peut aussi écrire la feuille de style (code CSS) directement dans l'en-tête, entre les balises <style type="text/css">…</style>

Balise <meta>


La balise <meta> a été utilisée plusieurs fois ci-dessus. Vous avez remarqué que sa syntaxe générale était :
<meta name="propriété" content="attributs" >

Le langage HTML/Entités


Définition


Le langage HTML utilise un jeu d'entités pour incorporer des caractères spécifiques dans le document. Plus simplement, vous tapez une séquence précise de caractères (oui c'est ça, un mot magique), et miraculeusement il se transforme en un caractère (accentué, spécial, de ponctuation,…) quand vous affichez la page dans un navigateur Web. Ces entités ont toutes la même préfixe : une esperluette « & ». La fin d'une entité est marquée par le caractère point-virgule « ; ».
Il est possible de recourir à deux types d'entités :
·         les entités de type numérique composées d'un nombre précédé du caractère croisillon # (souvent appelé à tort « dièse »[1]) entre l'esperluette et le point-virgule ;
·         les entités de type caractère composées d'une chaîne de caractères entre l'esperluette et le point-virgule.
Ainsi il est possible d'écrire le signe euro (€) de deux manières :
·         &#8364; qui en est l'entité numérique décimale (index dans la table des caractères Unicode) ;
·         &euro; qui en est l'entité caractère.
On peut aussi taper l'entité numérique en hexadécimal, en mettant un « x » entre le croisillon et le nombre. Par exemple, &#196; est la même chose que &#xC4;, c'est-à-dire « Ä ».

Utilité

Les entités permettent d'afficher des caractères qui ne sont pas accessibles depuis le clavier. C'est notamment utile lorsque l'on utilise des symboles mathématiques, ou que l'on veut écrire des mots d'une langue étrangère par rapport au clavier utilisé, ou pour certaines capitales accentuées (comme « É »).
Cela permet également d'utiliser un caractère qui se trouve en dehors du jeu de caractères déclaré en début de fichier (avec <meta http-equiv="Content-Type" content="text/html; charset=…" >, voir le chapitre L'en-tête).
Notons que l'entité numérique fait référence à l'adresse du caractère dans la table Unicode[2], tandis que l'entité caractère est redirigé vers la table selon la définition du type de document (DTD). Ainsi, il est plus simple de retenir l'entité caractère (mnémotechnique), mais l'entité numérique assure la compatibilité quelle que soit l'évolution des DTD.

Liste des entités


Quelques exemples d'entités
Caractère spécial
Entité caractère
Entité numérique
Mnémotechnique
Lettres spéciales (diacritiques, ligaturées, non romaines)
É
&Eacute;
&#201;
E (accent) aigu (acute)
Ò
&Ograve;
&#210;
O (accent) grave
Â
&Acirc;
&#194;
A (accent) circonflexe
Ã
&Atilde;
&#195;
A tilde
Ä
&Auml;
&#196;
A umlaut (inflexion allemande, marquée par un tréma)
Å
&Aring;
&#197;
ring = anneau
Æ
&AElig;
&#198;
A et E ligaturés (E dans l'A)
æ
&aelig;
&#230;
a et e ligaturés (e dans l'a)
Œ
&OElig;
&#338;
O et E ligaturés (E dans l'O)
œ
&oelig;
&#339;
o et e ligaturés (e dans l'o)
Ç
&Ccedil;
&#199;
C cédille
Γ
&Gamma;
&#393;
gamma capitale (lettre grecque)
γ
&gamma;
&#947;
gamma minuscule (lettre grecque)
Caractères typographiques
—
&mdash;
&#8212;
M dash (tiret de la largeur d'un M, tiret long, tiret d'incise, tiret cadratin)
–
&ndash;
&#8211;
N dash (tiret de la largeur d'un N, tiret moyen, tiret d'intervalle, tiret demi-cadratin)
·
&middot;
&#183;
middle dot (point centré, virgule géorgienne)
espace insécable[3]
&nbsp;
&#160;
non breakable space
espace fine[4]
&thinsp;
&#8201;
thin space
espace fine insécable
&#8239;
non breakable thin space
«
&laquo;
&#171;
left angle quote (guillemet angulaire gauche, ouvrant)
»
&raquo;
&#187;
right angle quote (guillemet angulaire droit, fermant)
•
&bull;
&#8226;
bullet (puce)
…
&hellip;
&#8230;
horizontal ellipse (points de suspension)
Symboles commerciaux et mathématiques
™
&trade;
&#8482;
trade mark (marque commerciale)
®
&reg;
&#174;
registred (marque déposée)
©
&copy;
&#169;
copyright (tous droits réservés)
€
&euro;
&#8364;
²
&sup2;
&#178;
superior 2 (2 en exposant, carré)
½
&frac12;
&#189;
fraction 1/2
±
&plusmn;
&#177;
plus minus (plus ou moins)
←
&larr;
&#8592;
left arrow ; voir aussi &rarr; (right →), &uarr; (up ↑), &darr; (down ↓), &harr; (horizontal ↔), &crarr; (carriage return arrow, « retour chariot » ↵)
⇒
&rArr;
&#8658;
right big arrow ; voir aussi &rArr; (right ⇒), &uArr; (up ⇑), &dArr; (down ⇓), &hArr; (horizontal ⇔)
×
&times;
&#215;
times = fois
⋅
&sdot;
&#8901;
scalar multiplication dot (signe de multiplication scalaire)
÷
&divide;
&#247;
divide = diviser
√
&radic;
&#8730;
radical (racine carrée)
‰
&permil;
&#8240;
per (« pour » en latin) mille
∝
&prop;
&#8733;
proportionnel
≃
&#8771;
¦
&brvbar;
&#166;
broken vertical bar (barre verticale interrompue, tube)

A

Note
Les éditeurs de texte n'ont pas toujours accepté les caractères accentués (non-ASCII pur). Pour avoir les caractères accentués, il fallait donc avoir recours à des entités (par exemple &eacute; pour « é »).
Depuis 2011, avec la généralisation de l'utilisation de l'UTF-8 comme encodage des caractères d'une page Web (réalisée en HTML5 entre autres), le recours aux entités HTML tend à devenir obsolète.
Une alternative consiste à afficher une page HTML contenant les caractères spéciaux (par exemple contenant des entités, numériques ou caractères) puis de faire un copier-coller de la fenêtre du navigateur dans votre code HTML.

Exemple
<em>Dungeons &amp; Dragons</em>&trade;
est le premier jeu de rôle de l'histoire&nbsp;;
c'est aussi le plus joué.
donne
'
Dungeons & Dragons™ est le premier jeu de rôle de l'histoire ; c'est aussi le plus joué.

Applications


Espaces


On voit que le HTML propose plusieurs espaces : espace justifiante (espace « classique »), espace insécable et espace fine. On n'en utilise qu'une seule à la fois.
L'espace insécable permet de ne pas séparer deux objets, par exemple :
·         les blocs de trois chiffres d'un nombre long ;
·         un nombre de son unité ;
·         un titre (Dr, M., Mgr, …) ou une particule (de) du nom qui le suit ;
·         une ponctuation double (;:!?) du mot qui le précède.
L'espace fine permet d'éloigner légèrement deux caractères pour faciliter la lisibilité, par exemple après de l'italique : comparer « (l) » et « (l ) ». On peut aussi l'utiliser pour séparer les groupes de trois chiffres par une espace fine :
1 360 000 (espace normale)
1 360 000 (espace fine)
Le problème de ces deux applications est qu'une fin de ligne peut séparer les deux objets (bien que le caractère &thinsp; soit considéré comme insécable par certains navigateurs, il devrait être sécable). Pour une espace fine insécable, on utilisera &#x202f;.
Si l'on veut avoir une espace plus grande, comme pour une tabulation, on pourra utiliser :
·         un tableau sans bordure (cf. Tableaux), permettant d'aligner plusieurs blocs de texte ;
·         du CSS pour insérer une grande espace.
Par exemple, le code CSS pour mettre une espace de 5 cadratins (5 lettres « M ») à gauche serait
<span style="margin-left:5em">texte</span>

Afficher du code HTML


Imaginez que vous vouliez afficher du code HTML sur votre page. Vous voulez par exemple afficher le texte « <em> ». Seulement voilà, le navigateur va croire que c'est une balise, et ne rien afficher mais mettre le texte en italique. La solution est de de ne pas utiliser les caractères < et > mais les entités correspondantes : respectivement &lt; (de l'anglais less than, « inférieur à ») et &gt; (de l'anglais greater than, « plus grand que »). C'est donc &lt;em&gt; qu'il faut taper.
À noter que pour afficher « C'est par là -> », même si le navigateur va en général faire ce qu'on a envie qu'il fasse à savoir afficher le symbole « > » (ou « < » le cas échéant) tel quel, il est de bon ton de remplacer quand même « > » et « < » par leurs entités, sous peine de se faire remonter les bretelles par le validateur.
De la même façon, si vous voulez afficher le texte « &euro; », eh bien il faudra ruser pour que le navigateur ne croit pas qu'on veut afficher le caractère €. On remplacera donc le caractère « & » par l'entité correspondante : &amp;.

Et pour afficher le texte "&amp;" on fait comment ? Je sens que vous avez deviné : &amp;amp;.

Comme pour < et >, si vous voulez afficher le texte « &salut; » (qui n'existe pas comme entité hein, on a juste envie de mettre une esperluette et un point virgule où ça nous chante), « Hey, &salut ça va ? », ou « Machin & Compagnie », il est recommandé de remplacer « & » par &amp;.
Notez que les deux ruses de sioux exposées précédemment sont utilisées sur cette page, vous n'avez qu'à regarder le code source !
Il y a aussi d'autres utilisations des entités. Par exemple elle vous permettent d'utiliser des caractères que vous ne pouvez pas taper au clavier. Par exemple, je ne sais pas, tout le monde ne sait pas taper ∉ (le signe mathématique pour dire « n'appartient pas à ») alors qu'avec un petit &notin; , le tour est joué.

Le langage HTML/Titres et paragraphes


Un document HTML doit être structuré correctement afin d'être bien compris par les lecteurs humains ainsi que les programmes informatiques (par exemple les robots d'indexation des moteurs de recherche). « structuré correctement » signifie divisé en titres, sous-titres et paragraphes.
Cette partie présente la façon de spécifier le découpage du document. Vous remarquerez sûrement que les exemples ont un affichage qui ressemble au web d'il y a dix ans, mais l'important est de structurer correctement vos documents. L'habillage de ceux-ci est expliqué dans le livre sur le CSS (et l'intégration dans la code HTML dans son chapitre Interface HTML). On ne dirait pas comme ça mais c'est un point très important : la séparation entre contenu pour le HTML et aspect visuel pour les CSS est un élément capital pour un site moderne.

Les paragraphes


La balise p


La balise p sert à créer un paragraphe. Habituellement, il est isolé par défaut du reste du texte par un petit espace vertical avant et après (typographie anglaise[1]), mais vous pouvez changer ça avec les fameux CSS. De plus, le texte va automatiquement à la ligne à la fin d'un paragraphe.
Exemple 
<body>
 
    <p>Voici un paragraphe.</p>
    <p>En voici un deuxième.</p>
 
</body>
ce qui donne
'
Voici un paragraphe.
En voici un deuxième.
La balise p indique bien un paragraphe (nature de la portion de texte) et non pas un saut de ligne (forme). On ne doit pas mettre de paragraphe vide. Voir ci-dessous pour avoir un blanc vertical plus grand.

Retours à la ligne

Comme on l'a vu précédemment, les retours de ligne sont interprétés comme une espace. Pour placer un retour de ligne au sein d'un paragraphe, on utilise la balise <br>[2] (break).
L'utilisation de plusieurs balises <br> successives est à proscrire ; il s'agit d'un retour de ligne et pas d'un saut de ligne. Rappelez-vous que le HTML concerne la description de contenu et pas la mise en forme. Pour définir une espace vertical entre deux paragraphe, il faut avoir recours au CSS ; par exemple, pour un paragraphe ponctuel, on pourra utiliser
<p style="margin-top:20px">
…
</p>
pour avoir un espace de 20 pixels (cet espacement ne change pas si l'on modifie la taille de la police), ou bien
<p style="margin-top:2em">
…
</p>
pour avoir un espace de 2 fois la largeur du caractère M (cet espacement est proportionnel à la taille de la police).

Ligne de séparation


Il est possible de mettre une ligne de séparation entre deux paragraphes, avec la balise <hr />[3] (horizontal ruler).

Les titres : balises h


Les titres et le sous titres sont indiqués par la balise h1 à h6 (heading — six niveaux de titres sont possibles).
Le niveau 1 est le niveau le plus haut dans la hiérarchie du document, suivi du niveau 2, etc.
Exemple 
<body>
 
  <h1>Un titre de niveau 1 (un gros titre)</h1>
    <p>Un paragraphe.</p>
 
    <h2>Un titre de niveau 2 (un sous titre)</h2>
      <p>Un paragraphe.</p>
 
      <h3>Un titre de niveau 3 (un sous-sous titre)</h3>
        <p>Etc.</p>
 
</body>
Ce qui donne quelque chose comme
'
Un titre de niveau 1 (un gros titre)

Un paragraphe.


Un titre de niveau 2 (un sous titre)

Un paragraphe.


Un titre de niveau 3 (un sous-sous titre)

Etc.
Il convient de respecter l'ordre hiérarchique des titres : un titre de niveau 2 sera toujours situé sous un titre de niveau 1, un titre de niveau 3 sous un titre de niveau 2…
Attention
Il ne faut pas choisir un titre pour son rendu (taille du texte affiché) mais pour son importance dans la hiérarchie. Ainsi, on ne mettra pas un titre de niveau 2 lorsqu'il s'agit du titre principal. La taille, couleur etc. des titres sera ensuite modifiable en… CSS, vous commencez à comprendre.

Notes


1.    en typographie française, les paragraphes ne sont pas séparés par des espaces verticaux, mais la première ligne est décalée vers la droite (retrait de paragraphe ou « alinéarentrant »)
2.   Aller↑ En XHTML, cela sera <br />
3.   Aller↑ même remarque que précédemment, en HTML « simple », cela sera <hr>

Le langage HTML/Style de texte


Le langage HTML/Style de texte indique au navigateur qu'il a affaire à tel ou tel type de texte pour changer la mise en forme.
Comme pour les titres, la manière dont le texte est mis en forme dépend du réglage du navigateur, ou de la feuille de style (voir Le langage CSS).
Plutôt que de « style de texte », il vaudrait mieux parler d'« éléments de texte » (« éléments de phrase » et « de citation »), puisque les balises décrivent des portions de texte.
Styles de texte les plus courants
Style
Balise
Mnémotechnique
Rendu par défaut
mise en emphase
<em>…</em>
emphase
italique
mise en emphase forte
<strong>…</strong>
« fort »
gras
citation d'une référence
<cite>…</cite>
…
italiques
citation courte dans le texte
<q>…</q>
quote (citation)
entre guillemets
citation à part
<blockquote>…</blockquote>
« bloc de citation »
marge à gauche plus grande
code source
<code>…</code>
…
police à chasse fixe avec empattement (type Courier)
texte préformaté (par exemple pour aligner avec des espaces, ou faire des dessins ASCII)
<pre>…</pre>
preformed(préformatté)
police à chasse fixe, en général avec empattement (type Courier)
La tendance est de préférer utiliser les balises[1] :
·         <i>…</i> par em.
·         <b>…</b> par strong.
En effet, cela revient à définir la description de texte plutôt que faire sa mise en forme, tâche plutôt dévolue au CSS.
Dans la pratique, si cela ne change pas grand chose pour un rendu graphique (sauf si la feuille de style ou le rendu du navigateur en décide autrement), et cela favorise l'accessibilité : s'il est possible pour un lecteur d'interpréter une mise en emphase (par exemple en changeant le ton de la voix), il est en revanche impossible de rendre une variation de mise en forme.
Exemple
<p>Selon Boileau&nbsp;:</p>
<blockquote>
   Vingt fois sur le métier
   remettez votre ouvrage
</blockquote>
<p>bref, <em>ne vous découragez pas&nbsp;!</em>
   <strong>Soyez patient&nbsp;!</strong></p>
 
ce qui donne
'
Selon Boileau :
Vingt fois sur le métier remettez votre ouvrage
bref, ne vous découragez pas ! Soyez patient !
Voici quelques autres styles de texte :
Autres styles de texte
Style
Balise
Mnémotechnique
Rendu par défaut
saisie clavier
<kbd>…</kbd>
keyboard (clavier)
idem <code>
abréviation
<abbr>…</abbr>
abbreviation
souligné par un trait pointillé
acronyme
<acronym>…</acronym>
…
idem abbr
Note
En français, un acronyme est lexicalisé, c'est-à-dire prononcé comme un mot (comme laser, ovni), alors que dans un sigle, les lettres sont prononcées séparément (SNCF). En anglais, langue de référence du HTML, la définition est plus floue : certains distinguent les termes initialism (sigle) et acronym (sigle lexicalisé, même sens qu'en français), alors que pour d'autres acronym désigne un sigle qu'il soit lexicalisé ou non (voir l'article du Wikipédia anglophone Acronym). Dans la pratique, il n'y a pas de différence dans le traitement de <abbr> et de <acronym>, cette dernière disparaît d'ailleurs du XHTML 2.
Même lorsqu'ils ne modifient pas la mise en forme, les balises abbr et acronym sont utiles pour les analyseurs syntaxiques (parsers) et les correcteurs d'orthographe. Ils sont surtout utiles avec le paramètre title (titre), qui permet d'expliciter l'abréviation ; en général, le titre s'affiche dans une info-bulle.
Exemple
Les pages Web sont écrites en <acronym title="Hypertext Markup Language">HTML</acronym>.
donne
'
Les pages Web sont écrites en HTML

Paramètres


Pour les balises de citation (<q> et <blockquote>), on peut préciser la source, avec le paramètre cite indiquant son URL.
Exemple
Selon le site Alsacréations,
<q cite="http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-un-div-et-un-calque">
  cet abus de langage
  est malheureusement demeuré très ancré
  et induit de nombreux amalgames.
</q>

Balises de mise en forme


Avant le CSS, la modification de la police était déjà une préoccupation, le W3C a donc créé des balises permettant ces modifications — donc de la mise en forme — que l'on peut toujours trouver dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.
Autres styles de texte
Style
Balise
Mnémotechnique
affichage écran (idem code source)
<tt>…</tt>
teletype (terminal)
italique
<i>…</i>
italic
gras
<b>…</b>
bold (gras)
grandes lettres
<big>…</big>
(grand)
petites lettres
<small>…</small>
(petit)
texte barré
<strike>…</strike> ou <s>…</s>
(barré)
texte souligné
<u>…</u>
underligned (souligné)


Lire la suite:
Cours complet d'HTML 5 -2 https://combatdetous.blogspot.com/p/blog-page_91.html

Aucun commentaire:

Enregistrer un commentaire

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

Inscription à : Articles (Atom)