Initiation au html

Initiation au HTML
M. DIENG Abdoulaye Août 2014

Objectif général
Concevoir la structure sémantique du contenu d’un site web
2

Les objectifs opérationnels
Formater du texte, des listes et des liens
Afficher une image simple ou cliquable
Établir un tableau
Concevoir un formulaire
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

é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
 Les commentaires sont délimités par les signes .

 Les commentaires sont destinés à fournir une aide-mémoire,
des informations ou des instructions à la personne visualisant ou
rédigeant le code.
 Le navigateur ignore les commentaires.
7

intro.html
8
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<title>Ma première page HTML</title>
</head>
<body>

Bonjour tout le monde !!!
</body>
</html>

Le texte
présentation
 Le texte est le moyen le plus courant pour transmettre un
message sur une page web.
 Un texte peut être composé d'un titre et de plusieurs
paragraphes annoncés par des sous-titres.
 Sans oublier les degrés d’importance de certains mots, les
abréviations, les acronymes et la mise en indice ou en exposant.
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

 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), " ("), > (>), < (<),
«(« ), »(»), &oelig;(oe), &euro(€), °(°),
®(®), etc.
http://www.erwanhome.org/web/guide-html/chapitre2.php
11
Le texte
les caractères spéciaux

Le texte
texte.html
Titre de niveau 1
12
Titre de niveau 2
accent
accent
Ligne suivante
Titre de niveau 2 Trait horizontal
Paragraphe
acronyme
Abréviation
accent
indice exposant
Mise en relief
Paragraphe

Les listes
présentation
• Une liste est une suite de données généralement simples.
• Une liste ne doit pas être contenue dans un paragraphe mais
peut être annoncée par celui-ci.
• Il y’a trois types de listes:
– Listes non-ordonnées utilisées lorsqu'il n'y a pas d'ordre
prédéfini pour leurs items. Le type de puces se fait via les
feuilles de style (CSS).
– Listes numérotées utilisées lorsque les items sont
ordonnées. Le type de numérotation se fait via les CSS.
– Listes de définitions utilisée pour l'affichage d'une liste
possédant des termes accompagnés de leurs définitions
respectives.
13

Les listes
codage
 ul (unordered list) : délimite une liste non
numérotée
li (list item) : enfant de ul, délimite un élément
de la liste
 ol (ordered list) : délimite une liste numérotée
li : enfant de ol, délimite un élément de la liste
 dl (definition list) : délimite une liste de définition
dt (definition term) : enfant de dl, délimite un terme de la liste
dd (definition description) : enfant de dl, délimite une description
d’un terme de la liste
14

Les liens
présentation
 Les liens hypertextes sont l'essence même du World Wide
Web, qui n'existerait pas s'il était impossible de naviguer d'un
contenu à l'autre.
 Cliquer sur un lien permet de naviguer vers :
– un autre endroit d’une même page ;
– une autre page du même site
– un document quelconque
– un autre site web
– un autre service d’Internet
 En général, un lien est indiqué par du texte souligné ou par un
changement d’apparence du pointeur de la souris.
 Dans un navigateur, le passage du pointeur sur un lien fait
afficher la cible sur la barre d’état
16

Les liens
codage
 L’élément a permet de créer un hyperlien.
 Principaux attributs:
• href : précise le chemin de la cible
• title : explicite la cible (info bulle sur navigateur graphique)
 Lien extra-site:
<a href="URL_de_la_cible"> texte pour l’internaute </a>
 Lien intra-page:
1. créer le point d’ancrage en rajoutant à n’importe quelle
balise (de la partie qui sera ciblée) l’attribut id avec un
identifiant comme valeur.
2. créer le lien vers la partie identifiée par identifiant avec :
<a href="#identifiant"> texte pour l’internaute </a>.
 Liens intra-site :
<a href="chemin/relatif/de/la/cible"> texte pour ... </a>
<a href="chemin/rel/de/la/page.html#identifiant"> texte <1/7a>

Les liens
lien intra-page
<h1 id="haut"> premier titre</h1> Premier titre
<p><a href="#haut"> haut de page </a></p>
haut de page
18

Les liens
signet inter-pages (même dossier)
site
page1.html
page2.html
page2.html
<h3 id="fin"> Dernier titre</h3>
page1.html
<p>
<a href="page2.html#fin">
Aller au dernier titre de la page 2
</a>
</p>
Dernier titre
Allez au dernier titre de la page 2
19

Les liens
signet inter-pages (niveaux différents)
page2.html
<h3 id="fin"> dernier titre</h3>
page1.html
site
page1.html
rep
page2.html
<p>
<a href="rep/page2.html#fin"> Bas de page 2 </a>
</p>
20

Les liens
signet inter-pages (dossiers différents)
page2.html
<h3 id="fin"> dernier titre</h3>
site
rep1
page1.html
rep2
page2.html
page1.html
Remonter d’un dossier
<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)
 Deux principales techniques de compression :
– compression destructive : supprimer des couleurs qu’un
humain n’est pas censé déceler. Cependant un fort taux de
compression peut entamer la qualité de l’image.
– compression non destructive : ce type de compression ne
détruit absolument pas l'image
23

Les images
principaux formats Web
Format Couleurs Compression Usage
jpeg
(Joint
Photographic
Experts Group)
16 777 216 destructive Photographies
gif
(Graphics
Interchange
Format)
256
Non
destructive
Logos, images animées,
transparence à 2 niveaux
(transparent ou opaque).
png 8 bits
(Portable
Network
Graphic)
256
Non
destructive
Boutons graphiques , flèches de
navigation et petites icônes
png 24 bits 16 777 216
Non
destructive
Logos, boutons graphiques
détaillés, captures d’écran et
transparence à plusieurs niveau24x

Les images
codage
 <img src="adresse/relative/de/ l'image" > :
affiche l'image avec ses dimensions intrinsèques
 Autres attributs de img:
• width=? : largeur (en pixels ou en pourcentages)
• height=?: hauteur (en pixels ou en pourcentages)
• alt="court texte descriptif de l’image": texte alternatif
obligatoire pour que tout agent (malvoyants, navigateur texte,
incidents techniques, robots) ne pouvant voir l’image puisse
avoir un texte alternatif.
• title : expliciter l’image (info bulle sur navigateur graphique)
 Image lien:
<a href="adresse/relative/de/la/cible">
<img src="adresse/relative/de/l’image_lien" >
</a>
25

Les images
image.html
1. Créer un dossier nommé « images » dans le répertoire de
travail (répertoire qui contient les fichiers texte.html et
listes.html)
2. Mettre une image dans le dossier images. (Ce dossier ne
doit contenir que des images)
3. A l’aide d’un éditeur, créer le fichier image.html chargé
d’afficher l’image par un navigateur.
image.html sera enregistré dans le répertoire de travail
NB : tester tous les attributs de img
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).
 table : délimite un tableau
– border="n": épaisseur des bordures du tableau et des cellules
– align="left|right|center": alignement horizontal du tableau
– width="n%": largeur relative du tableau
– summary= "texte descriptif du contenu du tableau pour les
navigateurs brailles ou vocaux"
 tr (table row) : enfant de table, délimite une ligne du tableau
– valign="middle|top|bottom": alignement vertical
– align="left|right|center": alignement horizontal
27

Les tableaux
suite du codage
 td (table data) : enfant de tr, délimite une cellule d’une ligne
– valign et align (prioritaire sur <tr>)
– colspan="n" : fusion horizontale de n cellules
– rowspan="n" : fusion verticale de n cellules
NB : un rowspan annexe la (ou les) cellule(s) de la (ou des)
ligne(s) inférieure(s)
 Ajouter de la sémantique à un tableau en :
– donnant une légende (ou titre) au tableau avec l’élément
caption juste après la balise ouvrante <table> .
L’élément caption délimite la légende avec comme attribut
align = "top|bottom"
– remplaçant les td qui contiennent des en-têtes (de ligne
et/ou de colonne) par des th (table header).
28

Les tableaux
tableau.html
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 :
29
- une donnée entête est centrée et est en gras
- une donnée simple est à gauche et n’est pas en gras
- 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
form délimite un formulaire et ses principaux attributs sont :
 action="adresse_script_cible"
script côté serveur qui traitera les données du formulaire.
 method="get|post"
• spécifie la méthode HTTP employée pour envoyer les
données du formulaire à l'agent de traitement.
• "get", valeur par défaut, annexe les données du formulaire à
l'URL du script cible
(ex : script.php?nomChamp1=valeur1&nomChamp2=valeur2& ...)
• "post" est la valeur qui incorpore les données du formulaire
dans la requête HTTP.
 enctype="multipart/form-data"
si un fichier doit être joint au formulaire
31

Les formulaires
élément input
input, enfant de form, définit une zone de saisie, une case à
cocher, un bouton, etc. Ses principaux attributs sont :
 name= "nomDuChamp" (attribut obligatoire)
indique au script l’emplacement de la donnée transmise
 type= "text |password |checkbox
|radio | submit |file "
précise le type de l’élément.
 value="valeurTransmise"
obligatoire lorsque type≠ "text|password|file"
 checked="checked"
pré-selectionne un bouton radio ou une case checkbox
32

Les formulaires
élément select
 select : délimite une liste déroulante ou non
– name="nomDuChamp"
– size="n": n options visibles d’une liste non déroulante
– multiple = "multiple": permet le choix multiple dans une liste
non déroulante. ( Dans ce cas, name = "nomDuChamp[ ]")
 option : enfant de select, délimite un choix dans une liste
– value : valeur transmise si l’option délimitée est choisie
– selected = "selected": pour pré-sélectionner une option
33

Les formulaires
élément textarea
 textarea: délimite une zone de saisie multilignes
– name: nom transmis
– rows="n ": nombre de lignes visibles
– cols="n ": nombre de caractères visibles par ligne
34

Les formulaires
éléments d’accessibilité
 label : permet d‘associer un texte « cliquable » à un élément de
formulaire.
Cette relation entre le texte (délimité par label) et l’élément peut
se faire en donnant la même valeur à l'attribut for du label et à
l'attribut id de l’élément.
 fieldset : organise un formulaire en plusieurs sous parties ou
thèmes qu’il délimite.
 legend : enfant de fieldset, permet de donner un titre à chacun
des thèmes. Cet élément délimite le titre de la sous-partie
35

Les formulaires
formulaire.html
36

Initiation au html

Contenu connexe

Tendances

En vedette

Similaire à Initiation au html

Plus de Abdoulaye Dieng

Initiation au html