1
HTML: CHAPITRE 1
Mr CHAOULID
HTML
2
HTML est le langage de présentation des pages Web.
HTML est le langage universel utilisé pour communiquer
sur le Web.
HTML permet de décrire les parties logiques d'un
document. En tant que langage de marquage, HTML
contient donc des ordres pour marquer les éléments
typiques d'un document tels les titres, les paragraphes, les
listes, les tableaux ou les références de graphiques
Mr CHAOULID
Versions HTML
3
Mr CHAOULID
Balise HTML
4
Le contenu de fichiers HTML est placé dans des balises
HTML.
C'est une information qui s'adresse au navigateur. Elle ne
sera pas affichée.
Tout tag commence par un < et se termine par un >
<tag> fermeture de tag </tag>
Une balise HTML n’est pas sensible à la casse.
Exemple : <b>Ma Page</b>
Mr CHAOULID
Attribut HTML
5
Un attribut est un paramètre qui fournit des
indications à une balise.
Il possède un nom et très souvent une valeur à
préciser (nom = "valeur").
Il se rajoute dans la balise de début, c'est à dire
toujours entre les < > après le nom de la balise.
Exemple : <head title="about HTML">…</head>
Mr CHAOULID
Structure d’un document HTML
6
Mr CHAOULID
Structure d’un document HTML
7
<html> et </html> : informe votre navigateur qu'il
va afficher une page HTML.
<head> et </head> : les informations relatives au
document. Les informations que l’on peut retrouver
dans cette partie du document n’apparaissent pas
dans l’écran du navigateur.
<body> et </body> : C'est là que vous allez placer
textes, images et tout ce que contiendra votre page.
Mr CHAOULID
Structure d’un document HTML
8
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Mr CHAOULID
Structure d’un document HTML
9
Démonstration
Mr CHAOULID
Définir des titres
10
HTML distingue 6 niveaux de titres pour former une hiérarchie
dans les documents.
<h[1-6]> introduit un titre. Le N° indique le niveau du titre. 1 est le
niveau le plus élevé, 6 le niveau le plus bas. Après vient le texte du
titre .
Exemple :
<body>
<h1>Titre N°1</h1>
<h2>Titre N°2</h2>
<h3>Titre N°3</h3>
<h4>Titre N°4</h4>
<h5>Titre N°5</h5>
<h6>Titre N°6</h6>
</body>
Mr CHAOULID
Paragraphe
11
Les paragraphes servent à l'articulation optique d'un texte.
Pour l'établissement de fichiers HTML il ne suffit pas
d'insérer un brutal passage à la ligne dans l'éditeur. Les
navigateurs WWW ignorent de tels passages à la ligne.
La balise <p>..</p> permet de marquer un paragraphe.
Exemple1 :
<p>Ici commence un paragraphe et ici il se termine.</p>
<p>Ici commence un nouveau paragraphe et ici il se
termine.</p>
Mr CHAOULID
Paragraphe
12
Exemple 2:
<p>This poem will display as one line:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Mr CHAOULID
Mise en forme
13
Tout document Html contiendra en majorité du texte.
Voyons comment le mettre en forme par quelques balises
élémentaires.
Balise Mise en forme
<b>..</b> Gras
<strong>..</strong> Gras (important)
<i>..</i> italic
<em>..</em> Italic (important)
<mark>..</mark> marqué
<del>..</del> rayé
<ins>..</ins> souligné
<sub>..</sub> indice
<sup>..</sup> Exposant
<!--….--> Commentaire
Mr CHAOULID
Les styles HTML
14
Pour ajouter un style au contenu d’une balise HTML,
On utilise l’attribut Style. (Recommandation HTML5)
style=« property:value »
Style Exemple
Couleur <p style="color:red">This is a paragraph.</p>
Font <h1 style="font-family:verdana">This is a heading</h1>
taille <p style="font-size:16">This is a paragraph.</p>
alignement <h1 style="text-align:center">Centered Heading</h1>
Arrière plan <body style="background-color:lightgrey">
Mr CHAOULID
Créer des liens
15
Html (Hyper Text Markup Language) est un langage
hypertexte (et hypergraphique) qui vous permet en
cliquant sur un mot, généralement souligné (ou une
image) de vous transporter:
vers un autre endroit du document.
vers un autre fichier Html situé sur votre ordinateur.
vers un autre ordinateur situé sur le Web
<a href="url">link text</a> : permet de créer des
liens.
Mr CHAOULID
Créer des liens
16
Exemple 1: Lien externe
<A HREF= « [Link] »>Cliquez
ici</A>
Exemple 2: Lien local
Chemin absolu: <a href= « [Link] »>page 2</a>
Chemin relatif:
Le même répertoire :<a href= «[Link] »>page 2</a>
Sous répertoire : <a href= « dossier2/[Link] »>page 2</a>
Sur répertoire : <a href= « ../[Link] »>page2</a>
Mr CHAOULID
Créer des liens
17
Exemple 3: Ancre
<a name="ancre1">BLALALALALALALALALALAL</a>
<a href="#ancre1">detail</a>
Exemple 4: Ancre
<h2 id="tips">Useful Tips Section</h2>
<a href="#tips">Visit the Useful Tips Section</a>
Mr CHAOULID
Autres Balises
18
<br>: faire un retour à la ligne.
<hr>: insérer une ligne horizontale.
<pre>..</pre>: insérer un texte pré-formaté.
<q>..</q>: mettre des quotes
<blockquote>..</blockquote>: texte en retrait.
<adress>..</adress>: insérer une adresse (personne)
  ;: ajouter un espace.
Mr CHAOULID