Le fond et la forme
HTML signifie HyperText Markup Langage (langage de balisage hypertexte et peut on ajouter du balisage des éléments qui structurent la page) : il s'agit ni plus ni moins du principal langage du Web.
De nombreux webmestres, même professionnels, ne connaissent pourtant qu'une infime part de ce langage, leur pratique se limitant souvent à utiliser un logiciel d'édition web qui génère des documents HTML automatiquement.
Ceci ne leur permet pas de contrôler leur réflexion sur la hiérarchisation des contenus ni surtout de séparer cette réflexion de ce qui relève de l'esthétique (couleurs, typographie, positionnement, etc.).
Cela dit commençons par la base...
La base du HTML : les balises
HTML repose sur l'utilisation de balises et d'éléments.
-
Les balises, délimitées par des chevrons ouvrant et fermant <
et >, qualifient des portions de texte ;
sauf exception, elles fonctionnent par paires, et à chaque balise
ouvrante correspond sa balise fermante, débutant par les caractères
</.
-
Un élément est l'ensemble composé :
- d'une balise ouvrante,
- d'un contenu (texte, images et/ou d'autres balises), et
- de la balise fermante correspondante (à ne pas oublier !).
Les attributs
Les balises acceptent parfois des caractéristiques
supplémentaires appelées «
attributs » (propriétés),
la valeur de ses « attributs » est toujours entourée
d'apostrophes (') ou ("),
par exemple, la balise <a> désignant un
lien
hypertexte à pour attribut href dans le code html :
<a href='page2.htm'>allez en page 2</a>
La structure des éléments
Les éléments HTML ont chacun une structure particulière. Il en
existe deux familles :
-
les éléments de type bloc
-
les éléments au fil du texte, dits en ligne (inline)
Le type dictera tous leurs comportements :
- positionnement
- affichage
- etc.
La distinction fondamentale est claire.
-
Les blocs distinguent des parties entières comme des titres, des
paragraphes, des listes, etc.
-
Les éléments en ligne sont prévus pour enrichir (localement) des
portions de texte : lien hypertexte, emphase (italique),
renforcement (gras), etc.
Il en découle des spécificités d'affichage (que nous allons
voir en pratique), consacré au positionnement :
-
Même si dans le code HTML ils sont écrits côte à côte, les
éléments de type bloc sont par défaut placés l'un sous l'autre par le
navigateur
exemple une suite de paragraphes :
<p>Paragraphe 1</p> <p>Paragraphe 2</p>
donne le résultat :
Paragraphe 1
Paragraphe 2
-
Les éléments en ligne s'appliquent à des portions de texte,
comme des groupes de mots dans une phrase
exemple le renforcement et l'emphase d'une partie du texte :
<strong>Toto</strong> et <em>moi</em>
donne le résultat :
Toto et moi
Contenus autorisés selon le type de balises
Ces deux familles de balises diffèrent également
par les contenus qu'elles acceptent, en dehors
du texte à proprement parler.
Un élément en bloc peut
contenir un (ou plusieurs) éléments bloc et/ou en ligne, à
l'exception des éléments de paragraphe <p> et des titres
<h1>, <h2> … limités aux contenus en ligne.
Un élément en ligne ne
peut renfermer que d'autres éléments en ligne.
Il existe aussi deux sortes
d'éléments en ligne : « remplacés » et « non
remplacés ».
Seuls les éléments
remplacés acceptent des attributs de dimentions (height, width).
Il s'agit des éléments <img>, <input>, <textarea>,
<select> et <objet>.
Les autres n'ont pas de
dimension à proprement parler, et n'occupent que la place
nécessaire à leur contenu.
C'est le cas des éléments
<strong>, <em>, <a>, <span>.
Une mise en page se fera donc de
préférence à l'aide de balises de type bloc. La plus indiquée
pour cet usage est <div> (division) : c'est une balise
générique servant de conteneur neutre.
Pratique
Débutons un petit projet qui nous servira de fil conducteur tout
au long du cours de webmestre.
Il s'agit de concevoir un site web de A à Z, de sa structure à
sa mise en page complète, en passant par le placement des différent
éléments et par quelques réflexions sur ses menus et la manière
d'y naviguer suite ... (exercices Html 1 à 4)
Haut de page
Access®, Excel®, Powerpoint®, Word® & Windows®
sont des produits et marques déposés
propriété de
Microsoft, Inc.
Photoshop® &
Dreamweaver
® sont des produits et marques déposés propriété de
Adobe System. |
