Vous êtes sur la page 1sur 3

1) Anatomie du document HTML

a) <!DOCTYPE html> : le type du document


b) <html> : balise ouvrante
</html> : balise fermante
Elles encadrent tout le contenu de la page. Cet élément est parfois appelé l'élément racine.

c) <head></head> Cet élément est utilisé comme un container pour toutes les choses
qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans
cet élément qu'on mettra des mots-clés, une description de la page qui apparaîtra
sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en
forme, etc…
d) <body></body> : contient tout le contenu que vous souhaitez afficher pour qu'il soit
vu par les visiteurs.
e) <meta charset="utf-8"> : Cet élément définit le jeu de caractères qui devrait être
utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des
caractères connus utilisés dans les différents langages humains.
f) <title></title> C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée.
C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez
dans vos marques-pages.

4) Contenu de la balise <body></body> : le contenu à afficher

a) les titres <h1> </h1> à <h6></h6> : permettent de définir certains textes comme
des titres ou sous-titres. HTML contient des éléments pour 6 niveaux de titres :
<h1>–<h6>

b) les paragraphes : <p> sont utilisés pour contenir des paragraphes

c) les listes ordonnées et non ordonnées :


i) Non ordonnées : La balise utilisée pour ces listes est l'élément <ul> (ul signifie
unordered list liste non-ordonnée en anglais)
ii) La balise utilisée pour ces listes est l'élément <ol> (ol signifie ordered list liste
ordonnée en anglais)
Chaque élément d'une liste est balisé avec un élément <li> (list item).
Exemple : on veut créer une liste ordonnée pour le paragraphe suivant :

d) les liens : l’élément <a> : Pour ajouter un lien suivez les étapes suivantes:
5) Les éléments imbriqués :
Imbriquer : placer des éléments au sein d’autres éléments
Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez
placer le mot « très » dans un élément <strong>, signifiant que le mot sera fortement mis
en relief :

6) Les éléments vides : sans contenu comme les images


Les balises ouvrante <img> et fermante </img> sont remplacées par une balise
auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image
n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit
où l'élément est placé.

L'attribut alt (pour alternatif). Il contient un texte descriptif de l'image si quelque chose s'est
mal passé et l'image n'a pas pu être affichée.

Vous aimerez peut-être aussi