SlideShare une entreprise Scribd logo
HTML
Version du 3 septembre 2017
“
http://thomas-bodin.com/cours/iim/html.pdf
2
Hello!
Je m’appelle Thomas et je suis co-fondateur d’Hidden.market,
une startup dans le domaine du recrutement IT !
Retrouvez moi sur Twitter @ThomasBodinFr
3
Planning
4
Introduction
HTML 5
Environnement
Planning
5
Cours théorique avec des
live démo/live code
Mise en pratique avec des exercices
HTML (1/3)
Introduction
6
1. Définition du HTML
2. Histoire du HTML
3. Les normes
7
1. Définition du
HTML
HTML (HyperText Markup Language) :
il a fait son apparition dès 1991 lors du lancement du Web. Son
rôle est de gérer et organiser le contenu. C'est donc en HTML que
vous écrirez ce qui doit être affiché sur la page : du texte, des
liens, des images…
8
Les langages HTML et CSS
sont à la base du
fonctionnement de tous les
sites web
9
HTML Résultat visible à l’écran
2. Histoire du HTML
▫ HTML 1 : c'est la toute première version créée par Tim
Berners-Lee en 1991.
▫ HTML 2 : apparu en 1994, cette version posa les bases des
versions suivantes du HTML. Les règles et le fonctionnement
de cette version sont donnés par le W3C (tandis que la
première version avait été créée par un seul homme).
▫ HTML 3 : apparue en 1996, cette nouvelle version du HTML
ajoute de nombreuses possibilités au langage comme les
tableaux, les applets, les scripts, le positionnement du texte
autour des images, etc.
10
Au fil du temps, les langages
HTML et CSS ont beaucoup
évolué. Dans la toute
première version de HTML
(HTML 1.0) il n'était même
pas possible d'afficher des
images !
2. Histoire du HTML
▫ HTML 4 : cette version aura été utilisée un long moment
durant les années 2000. Elle apparaît pour la première fois
en 1998 et propose l'utilisation de frames (qui découpent
une page web en plusieurs parties), des tableaux plus
complexes, des améliorations sur les formulaires, etc. Mais
surtout, cette version permet pour la première fois
d'exploiter des feuilles de style, notre fameux CSS !
▫ HTML 5 : c'est LA dernière version. De plus en plus
répandue, elle fait beaucoup parler d'elle car elle apporte de
nombreuses améliorations comme la possibilité d'inclure
facilement des vidéos, un meilleur agencement du contenu,
de nouvelles fonctionnalités pour les formulaires, etc. C'est
cette version que nous allons découvrir ensemble.
11
3. Les normes
Le W3C ou World Wide Web Consortium, est un organisme
international qui développe des standards pour le Web afin que
les gens puissent communiquer efficacement à travers Internet,
autour de formats ouverts.
W3C :
https://www.w3.org/
Valider son code aux normes w3c :
https://validator.w3.org/
12
Standards et validation w3c
HTML (2/3)
Environnement
13
1. Nom de domaine
2. Hébergement
3. FTP
4. Éditeur de texte
5. Débugger
14
1. Nom de domaine
Il s'agit en fait d'une adresse sur le Web : google.fr est par
exemple un nom de domaine.
Un nom de domaine est constitué de deux parties :
▫ Le nom de domaine proprement dit. Il s'agit d'un nom que
l'on peut en général choisir librement, tant que personne ne
l'a réservé avant nous.
▫ L'extension .fr pour la France, .be pour la Belgique, .ca pour
le Canada, etc.
15
Entre 7 et 12 euros par an
1. Nom de domaine
Pour réserver un nom de domaine, deux solutions :
▫ Passer par un registrar spécialisé. C'est un organisme qui
sert d'intermédiaire entre l'ICANN (l'organisation qui gère
l'ensemble des noms de domaine au niveau international) et
vous. 1&1, OVH et Gandi sont de célèbres registrars français.
▫ Encore mieux : vous pouvez commander le nom de domaine
en même temps que l'hébergement. De cette manière, vous
faites d'une pierre deux coups, vu que vous aurez de toute
façon besoin de l'hébergement et du nom de domaine.
16
2. Hébergement
Sur Internet, tous les sites web sont stockés sur des ordinateurs
particuliers appelés serveurs. Ce sont des ordinateurs
généralement très puissants, qui restent tout le temps allumés. Ils
contiennent les pages des sites web et les délivrent aux
internautes qui les demandent, à toute heure du jour et de la nuit.
L'hébergeur est une entreprise qui se charge de gérer des baies
de serveurs. Elle s'assure du bon fonctionnement des serveurs
24h/24, 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites
présents sur la machine deviennent inaccessibles (et cela fait des
clients mécontents).
17
~ 44 euros par an
3. FTP
FTP signifie File Transfer Protocol et, pour faire court et simple,
c'est le moyen que l'on utilise pour envoyer nos fichiers sur le
serveur.
18
Envoyez votre site sur le
web
19
1. En haut, vous verrez apparaître les
messages qu'envoie et reçoit le logiciel.
2. C'est votre disque dur. Dans la partie du
haut, vous avez les dossiers et, dans la
partie du bas, la liste des fichiers du
dossier actuel.
3. À droite, c'est la liste des fichiers envoyés
sur le serveur sur Internet.
4. Enfin, en bas, vous verrez apparaître les
fichiers en cours d'envoi (et le
pourcentage d'envoi).
4. Éditeur de texte
Il en existe des dizaines qui sont le plus souvent gratuits.
Nous utiliserons un outil dédié pour cela et qui a l’avantage de
vous aider à coder :
Sublime Text
On l'utilise aussi bien pour développer en HTML et CSS que dans
d'autres langages (Python, Ruby, etc.). Il fonctionne sur Windows,
Mac OS X et Linux.
Il a l'avantage d'être simple, épuré et facile à lire dès le départ. Pas
de centaines de boutons dont on ne comprend pas à quoi ils
servent.
20
De quel logiciel vais-je
avoir besoin pour créer mon
site web ?
5. Debugger
▫ Le validateur W3C
Le validateur HTML va valider votre code et vous dire
l’ensemble de vos erreurs, il est très pratique pour débugger
mais également pour vous faire apprendre dès le départ les
bonnes pratiques.
▫ Chrome > Inspecter l’élément
Obligatoire pour créer un site web et comprendre ce qu’il se
passe.
▫ Éditeur de texte
Votre éditeur comprend ce que vous faites, il vous alertera
quand il trouvera quelque chose de bizarre. Un peu comme
word quand vous faites une faute.
21
Se faire aider quand ça ne
marche pas
22
Éditeur de texte : Sublime Text ou Brackets
Debugger : Google Chrome
Acheter un serveur et un nom de domaine: ovh
FTP pour transférer vos fichiers sur Internet: FileZilla
Pré-requis
Un éditeur de texte pour coder
Télécharger Sublime Text
23
Un navigateur pour debugger
Télécharger Google Chrome
Mise en place de l'environnement :
1) Créer un dossier “HTML” sur votre ordinateur
2) Vous mettrez dans ce dossier des sous-dossiers pour
chaque exercice de ce cours
3) Ouvrez le dossier “HTML” dans Sublime Texte
4) Créer un fichier index.html dans le dossier “HTML”
5) Ecrire dans ce fichier : Hello world !
6) Ouvrir votre fichier index.html avec Google Chrome en
double cliquant dessus
24
HTML (3/3)
HTML 5
25
1. Balises
2. Attributs
3. Structure d’une page web
4. Commentaire HTML
5. Présentation de balises HTML5
26
1. Balises
Les balises définissent la nature du contenu qu'elles encadrent
Elles veulent dire par exemple :
« Ceci est le titre de la page »,
« Ceci est une image »,
« Ceci est un paragraphe de texte »,
Etc.
<balise>Mon contenu</balise>
27
1. Balises
<titre>Mon titre</titre>
On distingue une balise ouvrante :
<titre>
et une balise fermante :
</titre>
qui indique que le titre se termine.
Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces
deux balises… n'est pas un titre !
28
2. Attributs Les attributs sont des paramètres que l’on applique aux balises.
Cela va nous êtes très utile quand nous ferons du CSS.
<balise attribut="valeur">
...
</balise>
29
3. Structure d’une
page web
Le document html de base se présente ainsi :
30
3. Structure d’une
page web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<!-- Contenu de votre site -->
</body>
</html>
31
3. Structure d’une
page web Le doctype : La toute première ligne s'appelle le doctype. Elle est
indispensable car c'est elle qui indique qu'il s'agit bien d'une page
web HTML.
La balise <html> : C'est la balise principale du code. Elle englobe
tout le contenu de votre page. Comme vous pouvez le voir, la
balise fermante </html> se trouve tout à la fin du code !
32
3. Structure d’une
page web
Une page web est constituée de deux parties :
L'entête <head> : cette section donne quelques informations
générales sur la page comme son titre, l'encodage (pour la gestion
des caractères spéciaux), etc. Cette section est généralement
assez courte. Les informations que contient l'en-tête ne sont pas
affichées sur la page, ce sont simplement des informations
générales à destination de l'ordinateur. Elles sont cependant très
importantes !
et le corps <body> : c'est là que se trouve la partie principale de
la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à
l'intérieur du corps que nous écrirons la majeure partie de notre
code.
33
3. Structure d’une
page web
L’encodage : C'est lui qui détermine comment les caractères
spéciaux vont s'afficher (accents, idéogrammes chinois et
japonais, caractères arabes, etc.).
La balise <title> : C’est le titre principal de la page web. Celui-ci
ne s’affiche pas dans la page mais dans l’onglet du navigateur et
comme texte principale sur Google
34
3. Structure d’une
page web
Les balises s'ouvrent et se ferment dans un ordre précis !
Par exemple, la balise <html> est la première que l'on ouvre et
c'est aussi la dernière que l'on ferme (tout à la fin du code, avec
</html>).
35
Exemples
<html>
<body>
</body>
</html>
Cela est correct, une balise qui est ouverte à l'intérieur d'une
autre doit aussi être fermée à l'intérieur.
<html>
<body>
</html>
</body>
Cela est incorrect, les balises s'entremêlent.
36
4. Commentaire
Il est possible d’écrire des commentaires dans son code. Cela ne
sera pas affiché par le navigateur, les commentaires vous servent
pour vous repérez et pour prendre des notes directement dans le
code.
<!-- Titre principal de la page web. Cela s’affiche dans
l’onglet du navigateur et comme texte principale sur Google
-->
<title>Mon titre</title>
37
Exercice 1 :
1. Créer votre première page web en utilisant la structure
HTML5.
2. Faire apparaître dans votre onglet de navigateur votre nom
et votre prénom.
3. Afficher un texte “lorem ipsum” sur votre page web.
4. Faire valider votre site au w3c
38
39
5. HTML5
Titres et sous-titres
Une page web est structuré comme un document word. On définit
des titres pour chaque partie avec des sous parties.
La balise est <h1> avec le numéro qui peut aller de 1 à 6. Le HTML
propose 6 niveaux de titres avec deux règles :
▫ Le h1 est unique et obligatoire pour chaque page web
▫ Les autres h sont possible que si il existe un hn-1 (h3 n’est
pas possible si il n’y a pas de h2)
40
5. HTML5
Titres et sous-titres
<h1>Titre très important</h1>
<h2>Titre important</h2>
<h3>Sous-titre</h3>
<h4>Titre moins important</h4>
<h5>Titre pas important</h5>
<h6>Titre pas du tout important</h6>
41
5. HTML5
Paragraphe
Pour afficher du texte, un paragraphe, sur une page web il existe
la balise <p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo Consequat.
</p>
42
5. HTML5
Saut de ligne
Il est possible de sauter des lignes dans un paragraphe ( balise
<p> ) à l’aide de la balise <br>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo Consequat.
</p>
43
Exercice 2 :
Réaliser une page html composée des éléments suivants
(exemple ci-dessous) :
▫ un titre de niveau 1
▫ deux titres de niveau 2
▫ deux paragraphes avec des sauts de lignes
Penser à faire valider votre site au w3c
44
45
5. HTML5
Liste
La création d’une liste à puce ou à numéros comme sur word se
fait 2 balises.
Une balise <ul> qui définit le début et la fin d’une liste et la balise
<li> qui définit une puce.
Si vous préférez des numéros à la place des puces, il suffit de
changer <ul> en <ol>
<ul>
<li>Master</li>
<li>Licence</li>
<li>DUT</li>
</ul>
46
5. HTML5
Liste
Il est tout à fait possible d’imbriquer une liste dans une autre liste.
Il faut ajouter à l’intérieur d’un <li> une balise d’ouverture de liste
(<ul> ou <ol>)
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
</ul>
47
Exercice 3 :
Créer des listes numérotés et des listes à puce comme dans
l’exemple ci-dessous.
Penser à faire valider votre site au w3c
48
49
5. HTML5
Hyperlien
Un hyperlien est un lien menant vers un autre site web. Vous
pouvez donc définir un contenu (texte, image,...) qui est cliquable
et qui pointe vers un site web.
La balise doit être accompagnée d’un attribut obligatoire qui est
href. Sa valeur est l’url du site avec le “http://”
<a href="https://google.fr">lien vers google</a>
50
5. HTML5
Lien relatif
Ce type de lien va vous permettre de construire votre menu. En
cliquant sur ce type de lien vous accéderez aux autres pages de
votre site.
La balise doit être accompagnée d’un attribut obligatoire qui est
href. Sa valeur est le chemin vers votre fichier.
<a href="experience.html">Mes expériences</a>
51
5. HTML5
Lien relatif
La valeur du href change en fonction du nom et de l’emplacement
du fichier de destination.
Deux pages situés dans un même dossier :
<a href="experience.html">Mes expériences</a>
<a href="index.html">Accueil</a>
52
Exercice 4 :
Créer plusieurs page web :
▫ Accueil : textes de l’exercice 2
▫ Expériences : liste avec lien vers les sites des entreprises
▫ Formations : liste de l’exercice 3
▫ Contact : formulaire de l’exercice 6
Permettre à chaque page web de naviguer vers les autres pages.
Penser à faire valider votre site au w3c
53
54
5. HTML5
Image
Pour afficher une image la balise est particulière. En effet, elle est
auto fermante, c’est à dire que la balise s’ouvre et se referme sur
elle même.
La balise doit être accompagnée de deux attributs obligatoires qui
sont src et alt
src : permet de définir la source de l’image (son chemin)
alt : description de l’image
<img src="img/foret.jpg" alt="Fôret">
55
Exercice 5 :
Sur la page “Expériences” de l’exercice précédent, faire
apparaître les logos des différentes entreprises à la place des
noms tout en gardant le lien sur l’image.
Ces logos doivent être dans un dossier “img”.
Penser à faire valider votre site au w3c
56
57
5. HTML5
Formulaire
Le formulaire est incontournable sur un site web.
Pour récupérer et traiter les données (en PHP) d’un formulaire il
faut le définir en HTML en mettant les champs et le bouton de
validation à l’intérieur des balises <form>
<form>
...
</form>
58
5. HTML5
Formulaire
La création d’un champs se fait avec la balise auto-fermante
<input>. Cette balise contient des attributs dont le type de
champs qui peut être text, email, url, tel, date, number,...
<input type="text">
59
5. HTML5
Formulaire
Pour les champs de type radio ou de type checkbox, cela se fait
également avec la balise <input>.
▫ Le type radio signifie que le choix est simple (ex: Homme -
Femme)
▫ Le type checkbox permet de cocher 1 ou plusieurs choix (ex:
dut, licence, master, doctorat)
<input type="radio" name="gender">
<input type="checkbox" name="education">
60
5. HTML5 Formulaire
Chaque champs à une description permettant de savoir ce qu’il
faut faire, c’est la balise <label>
<label>Email :</label>
<input type="email">
61
5. HTML5
Formulaire
Pour faire une liste déroulante dans un formulaire il faut définir le
début et la fin de cette liste avec <select> et pour chaque
possibilité la balise <option>
<label>Pays :</label>
<select>
<option>Belgique</option>
<option>France</option>
<option>Suisse</option>
</select>
62
5. HTML5
Formulaire
La balise <input> peut permettre de définir un champs de type
texte. Mais si nous voulons une plus grande zone de texte, il faut
utiliser la balise <textarea>
<label>Messsage : </label>
<textarea></textarea>
63
5. HTML5
Formulaire
Pour envoyer/valider le formulaire il faut terminer celui-ci par un
bouton.
<button type="submit">Envoyer</button>
64
Exercice 6 :
Insérer les différents types d'input html afin de réaliser un
formulaire d'inscription.
Créer un formulaire (voir l’exemple ci-dessous) qui contient les
éléments suivants :
▫ Deux boutons radio pour le choix du sexe
▫ Champs de saisie de nom, prénom et e-mail
▫ Deux boutons radio pour connaître l’âge
▫ Une liste de choix pour les pays
▫ Des cases à cocher pour choisir les domaines d'activités
▫ Un champs texte pour sa biographie
Penser à faire valider votre site au w3c
65
66
67
Merci !
@ThomasBodinFr
hi@thomas-bodin.com

Contenu connexe

Tendances

Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMSChi Nacim
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
Chi Nacim
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPressChi Nacim
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Ghilas BELHADJ
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
Ghodhbane Mohamed Amine
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
G²FOSS ENIT
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
François Huynh
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Aurélien Denis
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
Chris Gaillard
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
IZZA Samir
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
Aymen Hamdouni
 

Tendances (19)

Formation web
Formation webFormation web
Formation web
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
Html de base
Html de baseHtml de base
Html de base
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 
Cours html
Cours htmlCours html
Cours html
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Manuel wordpress ad avenue
Manuel wordpress   ad avenueManuel wordpress   ad avenue
Manuel wordpress ad avenue
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 
Sécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du webSécuriser un site WordPress - Semaine du web
Sécuriser un site WordPress - Semaine du web
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 

Similaire à Html 5

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Html
HtmlHtml
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
YassineZARIOUH
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
IrinaTsimpilova1
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
AnouAr42
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
Extrait chap1
Extrait chap1Extrait chap1
Extrait chap1mvaudano
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
El Habib NFAOUI
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
Manel Ben Sassi
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
piera5
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
kadarabdillahi125
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
shikaneza
 
UElibre_Internet.pdf
UElibre_Internet.pdfUElibre_Internet.pdf
UElibre_Internet.pdf
AliELKSIMI1
 

Similaire à Html 5 (20)

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Html
HtmlHtml
Html
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Extrait chap1
Extrait chap1Extrait chap1
Extrait chap1
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
 
UElibre_Internet.pdf
UElibre_Internet.pdfUElibre_Internet.pdf
UElibre_Internet.pdf
 

Dernier

Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
MustaphaZhiri
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
Txaruka
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
mohammadaminejouini
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
Morzadec Cécile
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
frizzole
 
Margaux Laurens - Neel.pptx
Margaux        Laurens     -     Neel.pptxMargaux        Laurens     -     Neel.pptx
Margaux Laurens - Neel.pptx
Txaruka
 

Dernier (7)

Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
 
Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
 
Margaux Laurens - Neel.pptx
Margaux        Laurens     -     Neel.pptxMargaux        Laurens     -     Neel.pptx
Margaux Laurens - Neel.pptx
 

Html 5

  • 1. HTML Version du 3 septembre 2017
  • 3. Hello! Je m’appelle Thomas et je suis co-fondateur d’Hidden.market, une startup dans le domaine du recrutement IT ! Retrouvez moi sur Twitter @ThomasBodinFr 3
  • 5. Planning 5 Cours théorique avec des live démo/live code Mise en pratique avec des exercices
  • 7. 1. Définition du HTML 2. Histoire du HTML 3. Les normes 7
  • 8. 1. Définition du HTML HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… 8 Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web
  • 9. 9 HTML Résultat visible à l’écran
  • 10. 2. Histoire du HTML ▫ HTML 1 : c'est la toute première version créée par Tim Berners-Lee en 1991. ▫ HTML 2 : apparu en 1994, cette version posa les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version avait été créée par un seul homme). ▫ HTML 3 : apparue en 1996, cette nouvelle version du HTML ajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc. 10 Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images !
  • 11. 2. Histoire du HTML ▫ HTML 4 : cette version aura été utilisée un long moment durant les années 2000. Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style, notre fameux CSS ! ▫ HTML 5 : c'est LA dernière version. De plus en plus répandue, elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. C'est cette version que nous allons découvrir ensemble. 11
  • 12. 3. Les normes Le W3C ou World Wide Web Consortium, est un organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet, autour de formats ouverts. W3C : https://www.w3.org/ Valider son code aux normes w3c : https://validator.w3.org/ 12 Standards et validation w3c
  • 14. 1. Nom de domaine 2. Hébergement 3. FTP 4. Éditeur de texte 5. Débugger 14
  • 15. 1. Nom de domaine Il s'agit en fait d'une adresse sur le Web : google.fr est par exemple un nom de domaine. Un nom de domaine est constitué de deux parties : ▫ Le nom de domaine proprement dit. Il s'agit d'un nom que l'on peut en général choisir librement, tant que personne ne l'a réservé avant nous. ▫ L'extension .fr pour la France, .be pour la Belgique, .ca pour le Canada, etc. 15 Entre 7 et 12 euros par an
  • 16. 1. Nom de domaine Pour réserver un nom de domaine, deux solutions : ▫ Passer par un registrar spécialisé. C'est un organisme qui sert d'intermédiaire entre l'ICANN (l'organisation qui gère l'ensemble des noms de domaine au niveau international) et vous. 1&1, OVH et Gandi sont de célèbres registrars français. ▫ Encore mieux : vous pouvez commander le nom de domaine en même temps que l'hébergement. De cette manière, vous faites d'une pierre deux coups, vu que vous aurez de toute façon besoin de l'hébergement et du nom de domaine. 16
  • 17. 2. Hébergement Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés serveurs. Ce sont des ordinateurs généralement très puissants, qui restent tout le temps allumés. Ils contiennent les pages des sites web et les délivrent aux internautes qui les demandent, à toute heure du jour et de la nuit. L'hébergeur est une entreprise qui se charge de gérer des baies de serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24, 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites présents sur la machine deviennent inaccessibles (et cela fait des clients mécontents). 17 ~ 44 euros par an
  • 18. 3. FTP FTP signifie File Transfer Protocol et, pour faire court et simple, c'est le moyen que l'on utilise pour envoyer nos fichiers sur le serveur. 18 Envoyez votre site sur le web
  • 19. 19 1. En haut, vous verrez apparaître les messages qu'envoie et reçoit le logiciel. 2. C'est votre disque dur. Dans la partie du haut, vous avez les dossiers et, dans la partie du bas, la liste des fichiers du dossier actuel. 3. À droite, c'est la liste des fichiers envoyés sur le serveur sur Internet. 4. Enfin, en bas, vous verrez apparaître les fichiers en cours d'envoi (et le pourcentage d'envoi).
  • 20. 4. Éditeur de texte Il en existe des dizaines qui sont le plus souvent gratuits. Nous utiliserons un outil dédié pour cela et qui a l’avantage de vous aider à coder : Sublime Text On l'utilise aussi bien pour développer en HTML et CSS que dans d'autres langages (Python, Ruby, etc.). Il fonctionne sur Windows, Mac OS X et Linux. Il a l'avantage d'être simple, épuré et facile à lire dès le départ. Pas de centaines de boutons dont on ne comprend pas à quoi ils servent. 20 De quel logiciel vais-je avoir besoin pour créer mon site web ?
  • 21. 5. Debugger ▫ Le validateur W3C Le validateur HTML va valider votre code et vous dire l’ensemble de vos erreurs, il est très pratique pour débugger mais également pour vous faire apprendre dès le départ les bonnes pratiques. ▫ Chrome > Inspecter l’élément Obligatoire pour créer un site web et comprendre ce qu’il se passe. ▫ Éditeur de texte Votre éditeur comprend ce que vous faites, il vous alertera quand il trouvera quelque chose de bizarre. Un peu comme word quand vous faites une faute. 21 Se faire aider quand ça ne marche pas
  • 22. 22 Éditeur de texte : Sublime Text ou Brackets Debugger : Google Chrome Acheter un serveur et un nom de domaine: ovh FTP pour transférer vos fichiers sur Internet: FileZilla
  • 23. Pré-requis Un éditeur de texte pour coder Télécharger Sublime Text 23 Un navigateur pour debugger Télécharger Google Chrome
  • 24. Mise en place de l'environnement : 1) Créer un dossier “HTML” sur votre ordinateur 2) Vous mettrez dans ce dossier des sous-dossiers pour chaque exercice de ce cours 3) Ouvrez le dossier “HTML” dans Sublime Texte 4) Créer un fichier index.html dans le dossier “HTML” 5) Ecrire dans ce fichier : Hello world ! 6) Ouvrir votre fichier index.html avec Google Chrome en double cliquant dessus 24
  • 26. 1. Balises 2. Attributs 3. Structure d’une page web 4. Commentaire HTML 5. Présentation de balises HTML5 26
  • 27. 1. Balises Les balises définissent la nature du contenu qu'elles encadrent Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », Etc. <balise>Mon contenu</balise> 27
  • 28. 1. Balises <titre>Mon titre</titre> On distingue une balise ouvrante : <titre> et une balise fermante : </titre> qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre ! 28
  • 29. 2. Attributs Les attributs sont des paramètres que l’on applique aux balises. Cela va nous êtes très utile quand nous ferons du CSS. <balise attribut="valeur"> ... </balise> 29
  • 30. 3. Structure d’une page web Le document html de base se présente ainsi : 30
  • 31. 3. Structure d’une page web <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> <!-- Contenu de votre site --> </body> </html> 31
  • 32. 3. Structure d’une page web Le doctype : La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. La balise <html> : C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code ! 32
  • 33. 3. Structure d’une page web Une page web est constituée de deux parties : L'entête <head> : cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes ! et le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code. 33
  • 34. 3. Structure d’une page web L’encodage : C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.). La balise <title> : C’est le titre principal de la page web. Celui-ci ne s’affiche pas dans la page mais dans l’onglet du navigateur et comme texte principale sur Google 34
  • 35. 3. Structure d’une page web Les balises s'ouvrent et se ferment dans un ordre précis ! Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). 35
  • 36. Exemples <html> <body> </body> </html> Cela est correct, une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur. <html> <body> </html> </body> Cela est incorrect, les balises s'entremêlent. 36
  • 37. 4. Commentaire Il est possible d’écrire des commentaires dans son code. Cela ne sera pas affiché par le navigateur, les commentaires vous servent pour vous repérez et pour prendre des notes directement dans le code. <!-- Titre principal de la page web. Cela s’affiche dans l’onglet du navigateur et comme texte principale sur Google --> <title>Mon titre</title> 37
  • 38. Exercice 1 : 1. Créer votre première page web en utilisant la structure HTML5. 2. Faire apparaître dans votre onglet de navigateur votre nom et votre prénom. 3. Afficher un texte “lorem ipsum” sur votre page web. 4. Faire valider votre site au w3c 38
  • 39. 39
  • 40. 5. HTML5 Titres et sous-titres Une page web est structuré comme un document word. On définit des titres pour chaque partie avec des sous parties. La balise est <h1> avec le numéro qui peut aller de 1 à 6. Le HTML propose 6 niveaux de titres avec deux règles : ▫ Le h1 est unique et obligatoire pour chaque page web ▫ Les autres h sont possible que si il existe un hn-1 (h3 n’est pas possible si il n’y a pas de h2) 40
  • 41. 5. HTML5 Titres et sous-titres <h1>Titre très important</h1> <h2>Titre important</h2> <h3>Sous-titre</h3> <h4>Titre moins important</h4> <h5>Titre pas important</h5> <h6>Titre pas du tout important</h6> 41
  • 42. 5. HTML5 Paragraphe Pour afficher du texte, un paragraphe, sur une page web il existe la balise <p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Consequat. </p> 42
  • 43. 5. HTML5 Saut de ligne Il est possible de sauter des lignes dans un paragraphe ( balise <p> ) à l’aide de la balise <br> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Consequat. </p> 43
  • 44. Exercice 2 : Réaliser une page html composée des éléments suivants (exemple ci-dessous) : ▫ un titre de niveau 1 ▫ deux titres de niveau 2 ▫ deux paragraphes avec des sauts de lignes Penser à faire valider votre site au w3c 44
  • 45. 45
  • 46. 5. HTML5 Liste La création d’une liste à puce ou à numéros comme sur word se fait 2 balises. Une balise <ul> qui définit le début et la fin d’une liste et la balise <li> qui définit une puce. Si vous préférez des numéros à la place des puces, il suffit de changer <ul> en <ol> <ul> <li>Master</li> <li>Licence</li> <li>DUT</li> </ul> 46
  • 47. 5. HTML5 Liste Il est tout à fait possible d’imbriquer une liste dans une autre liste. Il faut ajouter à l’intérieur d’un <li> une balise d’ouverture de liste (<ul> ou <ol>) <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> </ul> 47
  • 48. Exercice 3 : Créer des listes numérotés et des listes à puce comme dans l’exemple ci-dessous. Penser à faire valider votre site au w3c 48
  • 49. 49
  • 50. 5. HTML5 Hyperlien Un hyperlien est un lien menant vers un autre site web. Vous pouvez donc définir un contenu (texte, image,...) qui est cliquable et qui pointe vers un site web. La balise doit être accompagnée d’un attribut obligatoire qui est href. Sa valeur est l’url du site avec le “http://” <a href="https://google.fr">lien vers google</a> 50
  • 51. 5. HTML5 Lien relatif Ce type de lien va vous permettre de construire votre menu. En cliquant sur ce type de lien vous accéderez aux autres pages de votre site. La balise doit être accompagnée d’un attribut obligatoire qui est href. Sa valeur est le chemin vers votre fichier. <a href="experience.html">Mes expériences</a> 51
  • 52. 5. HTML5 Lien relatif La valeur du href change en fonction du nom et de l’emplacement du fichier de destination. Deux pages situés dans un même dossier : <a href="experience.html">Mes expériences</a> <a href="index.html">Accueil</a> 52
  • 53. Exercice 4 : Créer plusieurs page web : ▫ Accueil : textes de l’exercice 2 ▫ Expériences : liste avec lien vers les sites des entreprises ▫ Formations : liste de l’exercice 3 ▫ Contact : formulaire de l’exercice 6 Permettre à chaque page web de naviguer vers les autres pages. Penser à faire valider votre site au w3c 53
  • 54. 54
  • 55. 5. HTML5 Image Pour afficher une image la balise est particulière. En effet, elle est auto fermante, c’est à dire que la balise s’ouvre et se referme sur elle même. La balise doit être accompagnée de deux attributs obligatoires qui sont src et alt src : permet de définir la source de l’image (son chemin) alt : description de l’image <img src="img/foret.jpg" alt="Fôret"> 55
  • 56. Exercice 5 : Sur la page “Expériences” de l’exercice précédent, faire apparaître les logos des différentes entreprises à la place des noms tout en gardant le lien sur l’image. Ces logos doivent être dans un dossier “img”. Penser à faire valider votre site au w3c 56
  • 57. 57
  • 58. 5. HTML5 Formulaire Le formulaire est incontournable sur un site web. Pour récupérer et traiter les données (en PHP) d’un formulaire il faut le définir en HTML en mettant les champs et le bouton de validation à l’intérieur des balises <form> <form> ... </form> 58
  • 59. 5. HTML5 Formulaire La création d’un champs se fait avec la balise auto-fermante <input>. Cette balise contient des attributs dont le type de champs qui peut être text, email, url, tel, date, number,... <input type="text"> 59
  • 60. 5. HTML5 Formulaire Pour les champs de type radio ou de type checkbox, cela se fait également avec la balise <input>. ▫ Le type radio signifie que le choix est simple (ex: Homme - Femme) ▫ Le type checkbox permet de cocher 1 ou plusieurs choix (ex: dut, licence, master, doctorat) <input type="radio" name="gender"> <input type="checkbox" name="education"> 60
  • 61. 5. HTML5 Formulaire Chaque champs à une description permettant de savoir ce qu’il faut faire, c’est la balise <label> <label>Email :</label> <input type="email"> 61
  • 62. 5. HTML5 Formulaire Pour faire une liste déroulante dans un formulaire il faut définir le début et la fin de cette liste avec <select> et pour chaque possibilité la balise <option> <label>Pays :</label> <select> <option>Belgique</option> <option>France</option> <option>Suisse</option> </select> 62
  • 63. 5. HTML5 Formulaire La balise <input> peut permettre de définir un champs de type texte. Mais si nous voulons une plus grande zone de texte, il faut utiliser la balise <textarea> <label>Messsage : </label> <textarea></textarea> 63
  • 64. 5. HTML5 Formulaire Pour envoyer/valider le formulaire il faut terminer celui-ci par un bouton. <button type="submit">Envoyer</button> 64
  • 65. Exercice 6 : Insérer les différents types d'input html afin de réaliser un formulaire d'inscription. Créer un formulaire (voir l’exemple ci-dessous) qui contient les éléments suivants : ▫ Deux boutons radio pour le choix du sexe ▫ Champs de saisie de nom, prénom et e-mail ▫ Deux boutons radio pour connaître l’âge ▫ Une liste de choix pour les pays ▫ Des cases à cocher pour choisir les domaines d'activités ▫ Un champs texte pour sa biographie Penser à faire valider votre site au w3c 65
  • 66. 66