Académique Documents
Professionnel Documents
Culture Documents
2
Les objectifs opérationnels
3
Le sommaire
1. Présentation du HTML
2. La structure d’une page HTML
3. Le texte
6. Les listes
7. Les liens
8. Les images
9. Les tableaux
10. Les formulaires
4
Présentation du HTML
HTML (HyperText Markup Language) est un langage chargé de :
• structurer sémantiquement une page Web
• mettre en forme une page Web
• lier des contenus sur le Web
Le HTML permet, entre autres, de :
• publier des documents en ligne contenant du texte, des
tableaux, des listes, des images,…;
• retrouver des informations en un clic de souris;
• concevoir des formulaires permettant de faire des
recherches, d’effectuer des réservations, de commander
des produits, …;
• insérer directement des documents dans d'autres formats,
des sources vidéo et sonores et d'autres applications.
5
Structure d'un document
élément, balise et attribut
Une page HTML est structurée par des éléments sémantiques qui
donnent un sens à son contenu.
Tout élément est matérialisé par une (ou deux) balise(s)
délimitée(s) par les chevrons < et >.
• Exple de balises ouvrante et fermante : <abbr> Mlle</abbr>
• Exples de balises uniques : <br>, <img>
Toute balise ouvrante peut être munie d’attributs prenant des
valeurs.
Ces attributs apportent des informations supplémentaires et
souvent indispensables pour le contenu associé.
Exemples de balises munies d’attributs :
<abbr title="Mademoiselle"> Mlle </abbr>
<img src="chemin/du/fichier-image" >
Les valeurs des attributs doivent être entre des guillemets.
6
Structure d'un document
éléments de base
Les éléments de base d’une page HTML sont:
• html qui délimite la page et contient ainsi les autres éléments
• head qui délimite les métadonnées et éventuellement les
informations nécessaires à l’affichage (CSS) et à l’interactivité
(JS) du contenu de la page ;
• title (« enfant de head ») qui délimite le titre de la page ou de
la fenêtre tel qu'il est montré dans la barre de titre du
navigateur;
• body qui délimite le contenu, la partie « visible » de la page
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<title>Ma première page HTML</title>
</head>
<body>
<!-- la ligne suivante est le contenu de la page -->
Bonjour tout le monde !!!
</body>
8
</html>
Le texte
présentation
9
Le texte
codage
h1, h2,…, h6 : délimitent les titres et sous titres dans la page
<br>: effectue un simple retour à la ligne
p: délimite un paragraphe en produisant un double br
<hr> : insère un trait horizontal comme séparateur
em: délimite une insistance raisonnable (en italique)
strong: délimite une insistance assez forte (en gras)
abbr: délimite une abréviation (explicitée par l’attribut title)
acronym: délimite une abréviation (explicitée par l’attribut title)
composée des initiales du terme.
sub: délimite un texte, généralement très court, en indice.
sup: délimite un texte en exposant.
10
Le texte
les caractères spéciaux
Pour s’assurer que les caractères spéciaux (lettre accentuée,
lettre grecque, symbole mathématique ou tout caractère non
ASCII) soient correctement affichés par tous les navigateurs, il
faut les coder.
Caractères accentués : &LettreCode_accent;
code_accent : acute(aigu), grave(grave), circ(^), uml(¨), tilde(~)
Exemples: é (é), â (â), ü (ü)
Autres caractères : ç (ç), © (©), & (&),
(espace insécable), " ("), > (>), < (<),
«(« ), »(»), œ(œ), &euro(€), °(°),
®(®), etc.
http://www.erwanhome.org/web/guide-html/chapitre2.php
11
Le texte
texte.html
Titre de niveau 1
Titre de niveau 2
accent
accent Paragraphe
Ligne suivante
Titre de niveau 2 Trait horizontal
accent
Paragraphe
indice exposant
acronyme
14
Les listes
listes.html
15
Les liens
présentation
Premier titre
<h1 id="haut"> premier titre</h1>
18
Les liens
signet inter-pages (même dossier)
page2.html
site
page1.html
page2.html
page1.html
<p>
<a href="page2.html#fin">
Aller au dernier titre de la page 2
Allez au dernier titre de la page 2
</a>
</p>
19
Les liens
signet inter-pages (niveaux différents)
site
page2.html
page1.html
rep
page2.html
<h3 id="fin"> dernier titre</h3>
page1.html
<p>
<a href="rep/page2.html#fin"> Bas de page 2 </a>
</p>
20
Les liens
signet inter-pages (dossiers différents)
site
page2.html
rep1
page1.html
rep2
<h3 id="fin"> dernier titre</h3>
page2.html
<p>
<a href="../rep2/page2.html#fin"> Bas de page 2 </a>
</p>
21
Les liens
application
Dans le fichier texte.html:
1. A la fin du contenu, ajouter et tester un lien vers Google et un
lien permettant un envoi de courriel au webmaster
2. a) Répéter plusieurs fois le code source de la partie en dessous
du trait horizontal pour rallonger la page
b) Juste après la dernière copie du code précité, créer un lien
permettant d’afficher le titre de la leçon
3. Créer un lien vers la pages listes.html
4. Créer un lien permettant d’afficher la liste de définition de la
page listes.html.
NB : rallonger d’abord la page listes.html en répétant par
exemple plusieurs fois le code des listes non ordonnée et
ordonnée, juste avant celui de la liste de définition. 22
Les images
présentation
Avantage : « une image vaut mille mots »
Inconvénient : sa taille peut retarder le chargement de la page
Solution : compression (réduction de la taille)
23
Les images
principaux formats Web
Image lien:
<a href="adresse/relative/de/la/cible">
<img src="adresse/relative/de/l’image_lien" >
</a> 25
Les images
image.html
26
Les tableaux
présentation et codage
Un tableau permet de présenter l’information d’une manière
concise
Un tableau (table) est constitué de lignes (rows), elles-mêmes
constituées de cellules qui contiennent les données (data).
Indications
• Le tableau est quadrillé et occupe 80% de la page
• Toute fusion de cellules de ce tableau est constituée de 2 cellules
• Par défaut, à l’affichage :
- une donnée entête est centrée et est en gras
- une donnée simple est à gauche et n’est pas en gras
29
- un titre de tableau est au dessus du tableau
Les formulaires
présentation
Les formulaires permettent d’interagir avec l'internaute.
Parmi leurs utilisations courantes on peut noter :
• récupérer des informations sur l'utilisateur;
• procéder à des authentifications ;
• permettre à l'utilisateur de contribuer à un site ;
• opérer des recherches ou sélections sur le site ;
L'internaute entre les données en remplissant des champs
texte (une ou +sieurs lignes), en cochant une (ou +sieurs)
case(s) ou en sélectionnant un (ou des) élément(s) dans une
liste.
Ensuite l'internaute soumet les données en cliquant sur un
bouton de soumission.
La soumission envoie les données généralement à un script
côté serveur sous forme de paires nom/valeur, c'est-à-dire un
ensemble de données représentées par le nom de l'élément
de formulaire, le caractère "=", puis la valeur associée.
30
Les formulaires
élément form
32
Les formulaires
élément select
34
Les formulaires
éléments d’accessibilité
35
Les formulaires
formulaire.html
36