Cours 2 initiation-HTML

Initiation HTML
Apprendre les bases du langage

pour créer des sites web
1
Les bases d’un site web
• Un fichier HTML est un format de fichier « texte » éditable dont les
éléments ont du sens
• Au format .html
• Peut contenir du texte, des images, des liens,
des médias, etc.
• Peut être liée à une autre page via des liens
Un site Web c’est ...
• Un ensemble de pages liées entre elles

• Accessible en ligne depuis n'importe où
Mais pas que ...
• Contenus textuels dans le fichier HTML, mais aussi images, sons,

vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers
sont chargés dans le navigateur pour créer une page web.
La syntaxe HTML : balises,
éléments et attributs
Le principe de balise
• Les balises structurent le contenu de la page (texte, images, etc.)

• Chaque balise a un rôle et donne du sens au contenu présenté
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
<p> Hooo un bloc !! </p>

<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>
• Touche < du clavier pour ouvrir : <

• Touche maj + < pour fermer : >
• Le nom des balises est prédéfini dans les spécifications HTML, on

ne peut donc PAS en inventer !
• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.

• Par convention et pour faciliter la lecture du code, toute balise

ouverte doit être fermée (sauf exception).
• La balise gauche est appelée la balise ouverte tandis que la
balise droite est appelée la balise fermante
• La balise fermante possède un "forward slash /" après le

premier crochet d'angle
• Certaines balises bien particulières n’ont pas besoin d’être fermées,

on les dit « auto-fermantes », elles n’ont ni contenu ni balise
fermante.
• Note : je mets le / final par convention, mais pas obligatoire.

Imbrication
Il faut ouvrir et fermer les balises dans le bon ordre :

<a><b></b></a> et non <a><b></a></b>
Règles : pas possible de mettre n’importe quelle balise

n’importe où. (En théorie du moins...)
<table>
<tr>
<th>A1</th>
<th>B1</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
</table>
Attributs et valeurs
• Certaines balises peuvent être complétées par des attributs

précisant certains paramètres (l'adresse des liens, source d'une
image à afficher, etc.)
• Une balise peut contenir plusieurs attributs
Balise et attributs doivent être écrite en lettres miniscules

Attributs et valeurs
! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

en « inventer »
! On peut les mettre entre simple quote, double quote ou rien. Par
convention nous choisissons les doubles quotes " "
<div id="kittens"> // <div id=kittens>
! Les attributs sont toujours dans la balise ouvrante

Exemples d’attributs
! src=" " : donner la source (d’une image par exemple)

– <img src="monimage.png" width="400" height="250" alt="image
de chatons" /> 
! href=" " : donner la destination d’un lien

– <a href="http://www.google.fr"> Texte du lien </a>
Exemples d’attributs
! id=" " : donner un identifiant à l’élément que l’on pourra utiliser en
CSS.  
Les Ids doivent être uniques par page
– <p id="monid"> contenu </p> 
! class=" " : donner une classe à l’élément que l’on pourra utiliser en
CSS.  
Les classes peuvent être dupliquées sur la page
– <p class="maclasse"> contenu </p>
Remarque
Les commentaires sont placés entre des balises en utilisant la syntaxe
<-- comment -->
Doctype, html, body : structure
d'un document valide
Structure d’un document HTML simplifié
Décomposons balise par balise !

La notion de doctype
• Permet au navigateur de savoir quelle version de HTML (ou

XHTML) est utilisée sur la page
• Obligatoire pour valider une page (validateur W3C)
• Pas de doctype = « Quirks » mode : le navigateur fait ce qu’il peut
avec ce qu’il trouve, en mode rétro-compatibilité => peut expliquer
certains bugs sur IE
<!doctype html>
Dans ce code, la partie html donne le nom de l’élément racine du

document
La balise <html>
• Tout document HTML commence par la balise <html> qui se ferme

en fin de document : </html>
• La balise <html> contient nécessairement deux balises définissant
l'entête (<head>) et le corps (<body>) du document.
<html lang="fr" dir="ltr">
L'attribut lang
• Permet de spécifier la langue de traitement du document global
– Indexation dans la bonne langue par les moteurs de recherche
– Synthèse vocale
– Vérification orthographique des formulaires
L'attribut dir
• Permet de spécifier le sens de lecture du texte de la page
– la valeur ltr pour le texte qui se lit de gauche à droite
– la valeur ltr pour le texte qui se lit de droite à gauche

La balise <head>
• L’entête (optionnel) du document HTML est délimité par l’élement

HEAD qui contient des informations sur le document, tels que son
titre (élément TITLE obligatoire), et d’autres données (les
métadonnées - méta-informations) qui ne sont pas considérées
comme faisant partie du contenu du document (BODY).
• On y ajoutera également les appels pour les feuilles de style CSS et
certains JavaScripts
La balise <title>
• On y trouve la balise <title> qui sera le titre du document

– Sert en référencement (repris dans les résultats de recherche)
– Affichée dans l’onglet du navigateur 

La balise <head> : les balises meta
• L’élément META représente un mécanisme générique pour spécifier

des métadonnées. On peut utiliser l’élément META pour identifier
les propriétés d’un document (par exemple, l’auteur, la date
d’expiration, une liste de mots-clés, etc.) et assigner des valeurs à
ces propriétés.
• L’élément META et les propriétés du document : Chaque
élément META spécifie un couple propriété/valeur. L’attribut name
identifie la propriété et l’attribut content en spécifie la valeur.
exemple : <META name="Auteur" content="Cherifi Walid">
• L’élément META et les en-têtes HTTP : l’attribut http-equiv (à

la place de name), a un sens particulier quand les documents sont
ramenés via le protocole HTTP.
exemple :<META http-equiv="Expires" content="Tue, 20 Aug 1996
14:25:27 GMT">
• L’élément META et les moteurs de recherche : une utilisation

courante consiste à spécifier des mots-clés qu’un moteur de
recherche peut utiliser pour améliorer la pertinence du résultat
d’une recherche.
exemple :
<META name="keywords" lang="fr" content="vacances, soleil">
<META name="description" content="description pour le

référencement"/>
•
On peut utiliser l’élément META pour spécifier les informations par
défaut sur un document dans les cas suivants :
- le langage de script par défaut ;
- le langage de feuille de style par défaut ;
- l’encodage de caractères du document.
L’exemple suivant spécifie l’encodage de caractères du document
comme étant "UTF-8" :
<META http-equiv="Content-Type" content="text/html;

charset=UTF-8">
La balise <body>
! Le corps du document (élément BODY) représente le contenu du
document.
! Le contenu est constitué de texte, images, graphiques et autres
éléments qui seront affichés
! Puisque les feuilles de style (CSS) sont désormais le moyen
conseillé de spécifier la présentation d’un document, les
attributs de présentation des éléments sont donc proscrits.
Le W3C recommande aux auteurs et aux développeurs

de séparer la structure et la présentation.
<body> 
Contenu de la page 
</body>
En résumé
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Titre de ma page </title>
</head>
<body>
Contenu de la page
</body>
</html>
C’est valide !
- La validation inspecte les erreurs et vérifie que la page est conforme
au standard (HTML5)
- La validation reste un outil et non une fin en soi, mais un code

non valide a des chances de poser des soucis plus tard
Les commentaires dans le HTML
Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
Les éléments de structuration
du contenu
La balise « division » <div>
• <div> est un conteneur

• Cette balise n’a aucune valeur sémantique (aucun « sens »)
• Élément de type bloc qui peut inclure n’importe quel autre balise
HTML
• Suivi d’un passage à la ligne

• Permet de regrouper d’autres blocs de HTML (paragraphes,
tableaux, etc.)
• L'élément <div> n'affecte pas l'apparence de la page, mais il

est communément utilisés avec CSS pour associer des styles
communs à des sections de page.
La balise « division » <div>
Grille en div
La balise paragraphe <p>
• Les paragraphes sont des éléments de type « bloc », suivis d’un

passage à la ligne et d'une marge par défaut
• On peut imbriquer un paragraphe dans un div
• On ne doit PAS mettre un paragraphe dans un paragraphe
La balise paragraphe <p>
Paragraphes et retours à la ligne
Deux éléments fréquents :
- <p> est utilisé pour construire des nouveaux paragraphes
- <br> est utilisé pour créer des reours à la ligne
Rremarque 1: l'élément <br> est vide "auto-fermante".
Remarque 2: Quelque soit le nombre d'espaces

consécutifs, seul un espace est affiché. Cela est connu
sous le terme de "white space collapsing"
• Il existe des entités HTML pour encoder certains caractères

spéciaux comme les espaces :
Caractères spéciaux - Liste de quelque caractères
Le tableau ci-dessous donne quelques exemples de caractères

spéciaux
Caractère Code Caractère Code

& & ¶ ¶
€ € À À
< < Ç Ç
> > È È
Espace É É
§ § Ê Ê
© © À à
® ® é é
± ± è è
copypastecharacter.com
Les titres h1 – h6
• Il existe six niveaux de titre <h1> <h2> <h3> <h4><h5> et <h6>

(pas un de plus ! )
• Un nouveau niveau provoque un passage à la ligne, les éléments
de titre étant des éléments de bloc.
• La hiérarchisation visuelle est automatique (peut être modifiée via
CSS)
• Il est possible d’avoir plusieurs titres de même niveau
• On ne peut pas mettre un Hn dans un p, ou un p dans un Hn
Les titres h1 – h6
Bien construire sa hiérarchie de titres

Les éléments de « mise en
forme » de texte
Éléments en ligne « inline »
• Ces éléments sont des éléments dit « inline »

• On les place autour du contenu (et du texte)
• Ne crée pas de retour à la ligne

• Servent à donner du sens aux parties du texte/contenu
L’ élément <strong>
• <strong> élément sémantique qui marque du texte comme comme

fortement mis en valeur
• « en gras » par défaut dans les navigateurs
L’ élément <strong>
L’ élément <em>
• <em> balise sémantique qui marque du texte comme en emphase

(mis en évidence) sert à « insister » sur une partie du texte
• en « italique» par défaut
L’ élément <em>
L’ élément <span>
• Un élément « générique » structurant de type « inline »

• Permet de styler facilement des morceaux de texte en CSS
• Par défaut affiche son contenu sans le modifier

• Aucune valeur sémantique
• (l’équivalent d’un div, en ligne)

L’ élément <span>
D’autres éléments
• L'élément <sup> permet d’afficher un texte exposant 

 
L'élément <sub> permet d’afficher un texte en indice 
• L'élément <small> représente des annotations et des petits

caractères comme les informations légales ou liées au copyright
Les liens dans les documents
HTML
Les liens
• Les liens sont l’essence même du web car ils permettent de relier des
pages entre elle.
• Les liens entre les pages sont la source de l’analogie entre internet et
la toile d’araignée (web).
• Le bon choix du contenu et de la disposition des liens est primordial

pour la navigabilité du site.
Fonction d'un lien
• Le lien est un élément cliquable qui renvoie l’utilisateur sur une

nouvelle page (ou lui permet de télécharger un fichier)
• Il est souvent stylé différemment (bleu souligné par défaut)
• Il peut renvoyer :
– vers un autre site (lien externe)
– vers une autre page du site (lien interne)
– vers des fichiers (image, .PDF, etc.)

La balise <a>
• On appelle « ancre de lien » le texte à l’intérieur de la balise

• On ajoute l’attribut href="cible_du_lien" pour indiquer vers quelle
page on veut envoyer l’utilisateur
• On peut ajouter l’attribut title="titre du lien" pour ajouter une
infobulle au survol et indiquer à l’utilisateur où il va arriver 
 
<a href="index.html" title="titre"> Ancre du lien</a>
La balise <a> pour les liens
URLs absolues et URLs relatives
• Chaque ressource dans le web a un identifiant unique qui s’appelle
URL (UnifiedResource Locator).
• Une URL absolue commence par le nom de domaine du site
contenant la ressource.
• Quand les pages appartiennent au même site, on peut faire usage
des URLs relatives.
• Les URLs relatives ne commencent pas par le nom de domaine mais
indiquent une position par rapport à la page en cours.

Lien externe vers un autre site
• La cible sera l’url (ou adresse) complète du site, http:// compris

• Il s’agit d’un lien absolu car on indique l’adresse complète
<a href="http://www.google.fr" title="Moteur de recherche

google"> lien externe vers google </a>
Liens internes et hiérarchisation du site
• Un site est constitué d'un ensemble de pages au sein d'un dossier

(appelé racine du site).
• Ces pages peuvent être organisées dans une hiérarchie de sous-
dossiers.
Liens internes et hiérarchisation du site
• Par convention, le fichier « racine » sera appelé index.html.

• C’est lui qui est affiché en priorité s'il existe quand l’utilisateur
demande le dossier.
Lien vers un fichier du même répertoire
• Lorsque deux fichiers sont dans le même répertoire, il suffit

d’appeler le nom du fichier comme cible.
• Ce sont des liens relatifs, car relatifs au site et dossier dans lequel
ils se trouvent. 
 
<a href="page1.html" title="ma 1ere page"> ma page</a> 
 
<a href="index.html" title="accueil du site">l'accueil</a>
Mon premier site
Liens vers un autre répertoire
• On peut avoir des répertoires et sous-répertoires

• On ajoute le nom du répertoire pour descendre : monrepertoire/
mapage.html
• On ajoute ../ pour remonter si on se trouve dans un sous répertoire :
../index.html
Descendre dans un sous répertoire
! Depuis la racine index vers page2 :  

<a href="page_interne/page2.html">page 2</a> 
! Si on avait d’autres sous-répertoires : 

<a href="page_interne/autre_sous_rep/page2.html">page 2</a>
Remonter d’un répertoire
! Depuis la page2 vers la racine :  

 
<a href="../index.html"> l'accueil</a> 
! Si on veut remonter plusieurs répertoires (autant de ../ que de

répertoires:  
 
<a href="../../index.html"> l'accueil</a>
Mon premier site
Des liens « internes » ou ancres internes
! Comme dans Word, permet de renvoyer l’utilisateur à l’intérieur

d’une page
! La cible est définie par un id="ancre_du_lien"
! On utilise <a href="#ancre_du_lien"> pour créer le lien
! Utilisé pour les liens « retour en haut de page », wikipedia, etc.
! L’ancre apparaît dans l’url :  
 
https://fr.wikipedia.org/wiki/
Hypertext_Markup_Language#Description_de_HTML
Un lien vers une adresse mail
! <a href="mailto:monmail@gmail.com"> permet

de créer un lien qui ouvrira automatiquement le
client mail de la personne (à éviter car mail en
dur donc récupérable pour spam => formulaire
de contact )
! <a href="tel:13371337"> : permet de définir un

numéro de téléphone à appeler
 
 
Les éléments de liste
Listes dans HTML
• HTML inclut plusieurs types de listes : listes ordonnées, listes

non ordonnées et listes de définitions.
• Les listes ordonnées contient une séquence d’éléments dont
la position dans la liste est importante.
• Les listes non ordonnées contient des éléments dont l’ordre n’est
pas important.
• Les listes de définitions contiennent des listes de termes et leurs
définitions.
• Il est possible d’incorporer une liste dans une autre.
Les listes non ordonnées <ul>
Les listes non ordonnées <ul>
• La balise <ul> permet de créer une liste non ordonnée (unordered

list). Il faut l’ouvrir en début de liste et la fermer après le dernier
élément de la liste
• La balise <li> permet de créer UN élément de la liste

Les listes ordonnées <ol>
Les listes ordonnées <ol>
• La balise <ol> permet de créer une liste ordonnée et numérotée

(par défaut dans le navigateur). Il faut l’ouvrir en début de liste et la
fermer après le dernier élément de la liste.
• La balise <li> permet de créer UN élément de la liste

/LVWHVGHGpILQLWLRQVGO!
/LVWHVGHGpILQLWLRQVGO!
donne sa définition
• La liste de définitions est définie par la balise <dl>.

• La balise <dt> introduit un terme et la balise <dd> donne sa définition
Contenu d’une liste
• Les éléments <ul> et <ol> ne peuvent contenir que des éléments

<li>
• Chaque élément <li> peut contenir des éléments de bloc ou des
éléments incorporés (p, div, blockquote, h1, etc.).
• Les listes peuvent s'imbriquer
• On peut mélanger <ul> et <ol> à condition de les fermer
correctement
Exemple d’imbrication
Exemple d’imbrication
Les listes en pratique – les onglets
http://getbootstrap.com/javascript/#tabs
Les listes en pratique – les navigations
http://www.mobify.com/
Les listes en pratique – • http://
les navigations flexslider.woothemes.com/
Ajouter des images avec la
balise <img>
Introduction aux images
• Peut-on imaginer le web sans les images ?

• Une image est plus parlante qu’un millier de mots
• Les images sont très importantes à la fois en terme de contenu

et aussi en terme de design
• Choisir les bonnes images est un facteur crucial pour la bonne
conception d’un site

La balise <img>
• Balise de type inline : pas de retour à la ligne, peut-être insérée

dans le corps du texte. On la place généralement dans un <p> ou
un <div> mais peut se placer n’importe où dans le body
• Balise auto-fermante  
 
<img src="ref_image" alt="description de l’image" />
La balise <img> et source de l'image
• Un attribut src="image.jpg" pour donner le chemin vers la source

de l’image
– chemin sur le serveur
– url de stockage
– même principe que pour les liens

La balise <img> et attribut « alt »
• Un attribut alt="description du contenu de l'image" texte

alternatif qui décrit le contenu de l’image et la remplace si l’image
n’est pas téléchargée
La balise <img> et attribut « alt »
• L'attribut est obligatoire, mais il peut être vide pour les images
décoratives
– Lu vocalement par les lecteurs d'écran
– Aide les personnes en situation de déficience visuelle à comprendre

Attributs width et height
• Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
• Sans width/height le navigateur « devine » la taille ce qui crée des
sauts de page quand l’image se charge
• En général, il vaut mieux la redimensionner avant dans un logiciel,
plutôt que charger une grande image et la rétrécir (performance)
• Attention à garder les proportions !
<img src="monimage.jpg" alt="description de l’image" width="300" height="450" />

Exemple
Initiation HTML CSS - Stéphanie Walter - 2016 / 2017

L'attribut title
Attribut facultatif qui permet d’afficher une info-bulle au survol de l’image

Les tableaux HTML
Les tableaux, introduction
• Un tableau sert à organiser des informations structurées sous forme

tabulaire
• Il se compose de lignes organisées elles-mêmes en cellules
Créer un tableau : <table>
! La balise <table> </table> permet d’indiquer le début et la fin du

tableau.
! La balise <tr> caractérise une nouvelle ligne
! La balise <td> marque le contenu d’une cellule dans une ligne
Exemple de tableau simple
Exemple de tableau simple
! Le nombre d'éléments <td> au sein des éléments <tr> doit rester le

même dans la mesure ou chaque ligne possède un même nombre de
cellules, nombre qui correspond au nombre de colonnes du tableau.
Un avant-goût de CSS
• Pour la suite et y voir plus clair, nous allons ajouter une bordure à
notre tableau avec la propriété CSS
Ajouter une entête avec ! <th> peut remplacer <td>
<th>
pour créer une cellule
d’entête au tableau
! Par défaut affiché en gras
et centré dans les
navigateurs
Ajouter un titre au ! On utilise <caption> pour
tableau
donner un titre au tableau
! La balise se place au
début du tableau
! Il est possible de fusionner
Fusion de cellules certaines cellules entre elles avec
l’attribut colspan="
nombredecellules" qui se place
sur la cellule (th ou td)
! La valeur numérique de cet
attribut précise le nombre de
colonnes du tableau que
couvre la cellule.
Bonus - Fusion de • Il est possible de fusionner
lignes des lignes avec l’attribut
rowspan="
nombredelignes" qui se
place sur la cellule (th ou td)
Les formulaires
Les formulaires sont partout autour de nous
• Le formulaire sert à récupérer des données que l’utilisateur va entrer

et les envoyer au serveur pour un traitement (en PHP par exemple) :
login, formulaire de contact et même le chat de Facebook
Attention
HTML est utilisé uniquement pour présenter le formulaire à l'utilisateur,
il ne permet pas de traiter directement les données du forulaire
Les formulaires sont partout autour de nous
Une fois que l'utilisateur a rempli le formulaire, il doit typiquement

cliquer sur un bouton pour envoyer les données vers un serveur. Les
données sont envoyées au serveur sous la forme de couples nom/
valeur, un couple par composant du formulaire :
* le nom corresponds au nom du composant du formulaire
* la valeur est celle que l'utilisateur a entrée ou sélectionnée
Attention
Chaque élément <form> doit être accompagné au mois des 2 attributs
action et method.
La balise <form>
• Balise principale du formulaire

• Deux méthodes :
– method="get" : limitée à 255 caractères, informations passées dans la
barre d’adresse
– method="post" : envoie les données dans le corps de la requête sans

passer par la barre d’adresse, c’est la méthode la plus utilisée
• Action : l’adresse du fichier ou programme qui va traiter les données
<form method="post" action="traitement.php">

Attention
Un formulaire peut contenir des éléments tels que des paragraphes,
des en-têtes ... mais ne peut pas contenir un autre formulaire.
Exemple de la balise form en action
Par défaut si elle est vide, c’est comme n’importe quel élément, rien n’est
affiché
Il existe d'autres attributs optionnels qui peuvent être utilisés avec la balise
<form>
 enctype spécifie la manière dont les données doivent être encodées
avant d’être envoyées ; utiliser "multipart/form-data" comme valeur quand
un composant de formulaire est un "file upload control".
 onsubmit et onreset peuvent être utilisées pour lancer une procédure de
contrôle (e.g. avec Javascript) quand l’utilisateur clique sur un bouton de
type submit ou reset
La zone de texte monoligne <input>
Le champ de saisie est créé avec l’élément <input> dont l’attribut

type vaut "text".
 La balise input est auto-fermante.
 Ne génère pas de retour à la ligne.
 Il faut lui donner un nom avec l’attribut « name » pour que l’on puisse
récupérer sa valeur (éviter les espaces dans le name). Le nom n’est PAS
visible sur la page
En plus des attributs universels, les autres attributs de <input> sont :

 size: spécifie la largeur du champ en terme de caractères pouvant être
affichés
 maxlength: spécifie le nombre maximal de caractères qu’un utilisateur
peut entrer
 disabled, readonly, tabindex et accesskey
Le label
 Son rôle est de décrire à un être humain la fonction du champ

 (puisque name est invisible)Ajouter un for="nom" au label
 Ajouter id="nom" au champ
Remarque
Pour un champ de saisie, il est habituel de placer le label à gauche,
tandis que pour les cases à cocher et les boutons radios c’est à
droite.
Remarque
Une alternative est d’utiliser l’élément <label> en tant que conteneur,
mais cela ne permet pas de contrôler complètement l’endroit ou le label
sera positionné.
Associer le label au champ
• Permet à l’utilisateur de cliquer sur le label pour sélectionner le

champ (le for et l’id doivent être identiques mais peuvent être
différents du name)
• Balise inline, pas de retour à la ligne

L'attribut « value »
! value=" " : donne une valeur par défaut au champ

! Vide (ou inexistant) si on n'a pas de données récupérées dans la
base de donnée du site
L'attribut « value »
En résumé pour n'importe quel champ il faut toujours au
moins
• Un label (avec un for=" ")

• Un champ avec :
– Un id (qui a la même valeur que le for)
– Un name pour entrer la valeur dans la base de donnée
• Facultatif : un attribut value (qui peut être vide) pour récupérer la

valeur dans la base de donnée.
Les placeholder (ne sont pas des labels ! )
! placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.
Attention, ne remplace PAS le label
! Pas supportés partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un polyfill)
Zone de texte multiligne <textarea>
Un tel composant est créé avec l'élément <textarea>. Il permet à

l'utilisateur d'entrer plus d'une ligne de texte.
Remarque
Les attributs rows et cols sp ecient le nombre de lignes et de colonnes
du composant <textarea>.
Attention
Vous avez toujours besoin d'une balise ouvrante et d'une balise
fermante pour <textarea>, même si le contenu est vide (à cause de
certains navigateurs).
Les cases à cocher <input type="checkbox">
• Une case = une option = un input

• Fournir une simple réponse oui/non avec une case à cocher
• Plusieurs cases, toutes peuvent être cochées
• Éléments inline
• On peut mettre le label à gauche ou à droite
Remarque
Plusieurs cases à cocher peuvent partager le même nom.
!
Les cases à cocher peuvent avoir un attribut name distincts, ou identique
!
Si la cache est cochée, il renvoie « on » lors du traitement, ou peuple le tableau
PHP de sa valeur
On peut pré-cocher une checkbox avec checked="checked" ou just checked

Les boutons radio <input type="radio">
L’utilisateur peut sélectionner une seule option à un m oment donn é

d an s un grou pe q ui a é té dé claré. Un t el com posant e st créé avec
<inp ut > d on t l’att ribut typ e vaut "ra dio".
• La value est importante : c’est elle qui est renvoyée au serveur
• value="femme" : on renvoie donc « femme » au serveur
Remarque
Un groupe de boutons radios correspond à tous les boutons radio
partageant la même valeur de l’attribut name.
Attention
Vous devez fournir au moins 2 boutons radios dans chaque groupe.
Groupe de boutons radio
! Pour que le navigateur comprenne que des éléments forment un groupe, il faut leur
donner le même attribut name
!
On peut pré-cocher un bouton radio avec checked="checked"
Les listes déroulantes <select>
Une liste à choix multiple permet de sélectionner un item dans une

liste déroulante, et peut prendre bien moins de place qu’un groupe de
boutons radios. Un tel composant est créé avec <select> contenant
plusieurs.
Les listes déroulantes <select>
- La liste se trouve entre les éléments <select id="nomdeliste"> </select>

- La balise <label for="nomdeliste"> permet de donner le nom de la liste et
est liée à <select>
- On crée un objet de la liste avec la balise <option> Nom </option>
- L’attribut value permet de donner la valeur de l'option de la liste
Parmi les attributs pour <select>, on trouve :

 size: spécifie le nombre de lignes de la liste pouvant être visibles à un
instant donné; on peut alors obtenir une liste avec un ascenseur
 multiple: permet de sélectionner plusieurs items dans la liste
Les Boutons avec <input>
Avec l'élément <input>, le type de bouton que vous créez est

spécifié à l'aide de l'attribut type. Ses valeurs possibles sont :
* "submit": crée un bouton qui soumet automatiquement les

données du formulaire (lorsqu'on clique dessus)
* "reset": crée un bouton qui réinitialise automatiquement les
composants à leurs valeurs initiales
* "button": crée un bouton qui peut être utilisé pour exécuter un
script coté client
Remarques
L'attribut value spécifie le texte affiché sur le bouton. Les attributs
onclick, onfocus et onblur peuvent être utilisés pour lancer une
procédure de contrôle.
Bouton d’envoi input type="submit"
! Pour envoyer le formulaire on utilise input type="submit"

! L’attribut value=" " est obligatoire et permet de donner le « titre » du
bouton
! Le formulaire est envoyé pour traitement au fichier que l’on a défini
dans action=" "
Utiliser des images pour les boutons
Vous pouvez utiliser une image pour un bouton plutôt que
d'utiliser un bouton standard. Un tel composant est créé
avec <input> dont l'attribut type vaut "image". Nous avons
besoin de 2 attributs supplémentaires :
* "src": spécifie la source du fichier contenant l'image

* "alt": fournit une alternative textuelle à l'image
Remarque
Un bouton image est un bouton de type submit. En outre, les coordonnées
x et y de l'endroit ou lutilisateur a cliqué sont envoyées au serveur.
Petit résumé des
champs
input type = text
input type = checkbox
input type = radio
input type= submit
select + option
textarea
Bouton de reset, input type="reset"
• Pour remettre à zéro toutes les données du formulaire on utilise

input type="reset"
• Merci de ne pas en abuser.
Bouton <button type="button">
!
Syntaxe différente de la balise input
! Possibilité d'ajouter des images à l'intérieur (balise non auto-fermante)
! Trois types :
– button : bouton cliquable (utilisable en JavaScript)
– reset : remettre à zéro le formulaire
– submit : envoyer le formulaire
Bouton <button type="button">
http://getbootstrap.com/javascript/#modals
Désactiver un champ : disabled="disabled"
! L’attribut disabled="disabled" peut-être utilisé pour désactiver un

champ.
! Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les données
soient remplies
! Note : on peut aussi juste mettre disabled en attribut
Désactiver un champ : disabled
! Note : on peut aussi juste mettre disabled en attribut

Les champs de mot de passe <input type="password">
Un tel composant est créé avec l'élément <input> dont l'attribut type
vaut "password". Le champ masque les caractères tapés en les
remplaçant par un point ou une astérisque.
input type="password" : permet de masquer un mot de passe
Attention
Les mot-de-passes sont cachés à l'écran mais envoyés au serveur
en clair. De manière à les rendre sécurisés, il faut une connexion
SSL entre le client et le serveur.
Uploader un fichier : type = file
! Pour télécharger vers le serveur un fichier on utilise input

type="file"
! Si on envoie un fichier, il faut permettre au formulaire d’envoyer des
données avec l’attribut enctype="multipart/form-data" sur l’élément
form.
Cacher un champ type="hidden"
Pour passer de l’information entre différentes pages sans que

l’utilisateur ne le voie, vous pouvez utiliser un composant caché. Un tel
composant est créé avec <input> dont l’attribut type est fixé à "hidden".
Attention
L’information contenue dans le composant caché ne doit pas être
confidentielle car elle est visible dans le code source.
Les éléments <fieldset> et <legend>
Pour de grands formulaires, les éléments <fieldset> et <legend>

peuvent aider à grouper les composants :
 <fieldset> crée une bordure.

 <legend> ajoute une légende.
Exemple
Attention
Lorsqu’il est utilisé, l’élément <legend> doit toujours être le premier fils
de l'élément <fieldset>
Les éléments <fieldset> et <legend>
Exemple
Validation HTML
Un test de validation est effectué à chaque soumission (bouton submit)

pour tout controle ayant l’attribut <required>. Pour une
validation instantanée (c’est-à-dire, dés que l’utilisateur quitte un
champ), il faut utiliser Javascript.
Remarque
Pour désactiver (temporairement) la validation au niveau d’un
formulaire, il faut utiliser <novalidate> au niveau de l’élément <form>.
Une alternative est d’utiliser <formnovalidate> au niveau d’un bouton
(submit).
Exemple
Validation : expressions régulières et attribut Pattern
Il est possible d’utiliser l’attribut <pattern> pour forcer le texte tapé à

respecter une certain forme, donnée par une expression régulière.
Exemple
Nouveaux controles (HTML5)
Nouvelles valeurs de <type> pour <input> :
 <email>, adresse unique ou liste (avec la virgule comme séparateur)
si l’attribut <multiple> est positionné.
 <tel>
 <url>
 <number>, nombre avec la possibilité d’encadrer celle-ci avec
les attributs <min> et <max> et de gérer les parties fractionnaires
avec <step>
 <range>, pour choisir un nombre à l’aide d’un slider
 <color>, pour choisir une couleur à l’aide d’une boite de dialogue
 <search>
Exemple
Pour entrer une date ou heure, nous disposons des valeurs suivantes
de <type> pour <input> :
 <date>, pour choisir une couleur à l’aide d’une boite de dialogue ;

format YYYY-MM-DD
 <datetime> format YYYY-MM-DDTHH:mm:ss
 <datetime-local>
 <month>, format YYYY-MM
 <week>, format YYYY-Www (par exemple, 2014-W02)
 <time>, format HH:mm:ss.ss (secondes optionnelles).
Remarque
Possibilité d’utiliser les attributs <min> et <max>. Par exemple :
<input type="date" min="2014-01-01" max="2014-12-31">
Exemple
Element <audio>
Grande simplicité.
Exemple
Remarque
Il est nécessaire d’utiliser une balise ouvrante et une balise fermante
Attributs pour <audio>

 <autoplay> specifies that the audio will start playing as soon as it is
ready
 <controls> specifies that audio controls should be displayed (such as
a play/pause button etc)
 <loop> specifies that the audio will start over again, every time it is
finished
 <muted> specifies that the audio output should be muted
 <src> specifies the URL of the audio file
Element <Video>
Grande simplicité.
Exemple
Remarque
Il est nécessaire d’utiliser une balise ouvrante et une balise fermante
Attributs pour <video>

 <height>
 <width>
 <poster> qui indique le nom d’un fichier contenant une image utilisée
si :
 la première image de la video n’a pas encore été téléchargée
 le fichier video n’est pas trouvé (ou reconnu)
Exemple
Nouveaux éléments sémantiques en HTML5
Plutot que d’utiliser des éléments <div> pour structurer les

pages, lorsque c’est approprié, on utilisera :
 <header> : pour l’en-tete de page (et aussi de parties)

 <footer> : pour le bas de page (et aussi de parties) ; typically
contains the author of the document, copyright information, links to
terms of use, contact information, etc.
 <nav> : définit un ensemble de liens de navigation.
 <aside> : définit du contenu juxtaposé à un autre élément (sidebar)
 <main> : définit le contenu principal de la page ; un seul élément
par page
 <article> : définit du contenu autonome (pouvant etre distribué tel
quel)
 <section> : d´efinit une section de la page (normalement contient
un heading)
Nouveaux éléments sémantiques en HTML5
Element <time>
L’élement <time> est un autre élément sémantique, nouveau en
HTML5, qui permet d’indiquer une date ou un heure, voire les deux. On
utilisera l’attribut <datetime>.
Exemple
On peut préciser le fuseau horaire (voir http://en.wikipedia.org/wiki/Time

zone)
Exemple
Autres éléments sémantiques en HTML5
<figure> et <figcaption> pour les illustrations; <figcaption> doit etre

placé comme premier ou dernier fils.
 <output> : remplace <span> lorsque l’élémentcorrespond au résultat
d’un calcul (effectué par Javascript)
 <mark> : pour attirer l’attention sur du texte qui est devenu
important.
 <details> et <summary>
Exemple
Liste non exhaustive de quelques balises
!
body ! form
! div !
table
! p ! iframe
! h1- h6 ! etc.
! ul
! ol
! li
!
blockquote
Memento des balises HTML

Cours 2 initiation-HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 2 initiation-HTML

Transféré par

Droits d'auteur :

Formats disponibles

Initiation HTML

Apprendre les bases du langage

• Un ensemble de pages liées entre elles

• Contenus textuels dans le fichier HTML, mais aussi images, sons,

• Les balises structurent le contenu de la page (texte, images, etc.)

<p> Hooo un bloc !! </p>

• Touche < du clavier pour ouvrir : <

• Le nom des balises est prédéfini dans les spécifications HTML, on

• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.

• Par convention et pour faciliter la lecture du code, toute balise

• La balise fermante possède un "forward slash /" après le

• Certaines balises bien particulières n’ont pas besoin d’être fermées,

• Note : je mets le / final par convention, mais pas obligatoire.

Il faut ouvrir et fermer les balises dans le bon ordre :

Règles : pas possible de mettre n’importe quelle balise

• Certaines balises peuvent être complétées par des attributs

• Une balise peut contenir plusieurs attributs

Balise et attributs doivent être écrite en lettres miniscules

! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

<div id="kittens"> // <div id=kittens>

! Les attributs sont toujours dans la balise ouvrante

! src=" " : donner la source (d’une image par exemple)

! href=" " : donner la destination d’un lien

Décomposons balise par balise !

• Permet au navigateur de savoir quelle version de HTML (ou

Dans ce code, la partie html donne le nom de l’élément racine du

• Tout document HTML commence par la balise <html> qui se ferme

– Vérification orthographique des formulaires

– la valeur ltr pour le texte qui se lit de droite à gauche

• L’entête (optionnel) du document HTML est délimité par l’élement

• On y ajoutera également les appels pour les feuilles de style CSS et

• On y trouve la balise <title> qui sera le titre du document

– Affichée dans l’onglet du navigateur

• L’élément META représente un mécanisme générique pour spécifier

• L’élément META et les en-têtes HTTP : l’attribut http-equiv (à

• L’élément META et les moteurs de recherche : une utilisation

<META name="keywords" lang="fr" content="vacances, soleil">

<META name="description" content="description pour le

<META http-equiv="Content-Type" content="text/html;

Le W3C recommande aux auteurs et aux développeurs

- La validation reste un outil et non une fin en soi, mais un code

• <div> est un conteneur

• Suivi d’un passage à la ligne

• L'élément <div> n'affecte pas l'apparence de la page, mais il

• Les paragraphes sont des éléments de type « bloc », suivis d’un

Rremarque 1: l'élément <br> est vide "auto-fermante".

Remarque 2: Quelque soit le nombre d'espaces

• Il existe des entités HTML pour encoder certains caractères

Le tableau ci-dessous donne quelques exemples de caractères

Caractère Code Caractère Code

• Il existe six niveaux de titre <h1> <h2> <h3> <h4><h5> et <h6>

Bien construire sa hiérarchie de titres

• Ces éléments sont des éléments dit « inline »

• Ne crée pas de retour à la ligne

• <strong> élément sémantique qui marque du texte comme comme

• <em> balise sémantique qui marque du texte comme en emphase

• Un élément « générique » structurant de type « inline »

• Par défaut affiche son contenu sans le modifier

• (l’équivalent d’un div, en ligne)

• L'élément <sup> permet d’afficher un texte exposant

• L'élément <small> représente des annotations et des petits

• Le bon choix du contenu et de la disposition des liens est primordial

• Le lien est un élément cliquable qui renvoie l’utilisateur sur une

– vers une autre page du site (lien interne)

– Affichée dans l’onglet du navigateur 

• L'élément <sup> permet d’afficher un texte exposant 

! Depuis la racine index vers page2 :  

! Si on avait d’autres sous-répertoires : 

! Depuis la page2 vers la racine :  