Scribd
Importer
40 vues81 pages

2 HTML

Ce document décrit les technologies du web, notamment HTML et CSS. Il explique ce qu'est HTML, ses différentes versions, ses balises et attributs. Le document détaille également CSS, ses versions et son rôle de mise en forme des pages web.

Transféré par

HICHAM LABRAHMI
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
40 vues81 pages

2 HTML

Ce document décrit les technologies du web, notamment HTML et CSS. Il explique ce qu'est HTML, ses différentes versions, ses balises et attributs. Le document détaille également CSS, ses versions et son rôle de mise en forme des pages web.

Transféré par

HICHAM LABRAHMI
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 81

TECHNOLOGIES DU WEB

Licence d’Éducation :
Spécialité Enseignement Coordonnateur du module:
Secondaire – Informatique (S5) Pr. Hanane BENOUDA

2023-2024
HTML
HyperText Markup Language

38
HTML
• HTML HyperText Markup Language (langage de balisage
d’hypertexte) est un langage pour décrire des pages web.
• HTML a été inventé par un certain Tim Berners-Lee en 1991 ,
" inventeur " 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

• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) :


• le rôle du CSS est de gérer l'apparence de la page web
(agencement, positionnement, décoration, couleurs, taille du
texte…).
• Ce langage est venu compléter le HTML en 1996.

39
HTML
Sans CSS
• Vous pouvez très bien créer un site
web uniquement en HTML, mais
celui-ci ne sera pas très beau :

• l'information apparaîtra
«brute».

• C'est pour cela que le langage


CSS vient toujours le Avec CSS
compléter.

• Pour vous donner une idée, la figure


suivante montre ce que donne la
même page sans CSS puis avec le
CSS.
40
HTML

• 1990: HTML 1
• 1995: HTML 2
• 1995: HTML+ et HTML3 ( non standards)
• 1997: HTML 3.2 et HTML 4 (W3C: World Wide Web Consortium)
• 2000: XHTML 1.0 (HTML 4 réécrit en XML)
• 2001: XHTML 1.1
• 2003: XHTML 2
• 2008: HTML 5/ XHTML 5

41
HTML
XHTML : eXtensible HTML
• XHTML crée en 2000, il devait à l’origine succéder au HTML.

• En effet, il faut savoir que:


• HTML base sa syntaxe sur le langage SGML (Standard
Generalized Markup Language)
• XHTML se fonde sur le XML (eXtensible Markup Language).

• XHTML est définitivement abandonné en 2009 ou plus exactement


a été en partie intégré dans ce qui allait devenir le HTML5.

• Pour vérifier la validité d'une page, le W3C a mis en place un


validateur qui comptabilise les erreurs et donne les moyens de les
corriger : http://validator.w3.org/
42
HTML
Les versions de CSS
• CSS 1 : dès 1996, on dispose de la première version du CSS.
• Elle pose les bases de ce langage qui permet de présenter sa
page web, comme les couleurs, les marges, les polices de
caractères, etc.
• CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette
nouvelle version de CSS rajoute de nombreuses options.
• On peut désormais utiliser des techniques de
positionnement très précises, qui nous permettent
d'afficher des éléments où on le souhaite sur la page.
• CSS 3 : c'est la dernière version
• Apporte des fonctionnalités particulièrement attendues
comme les bordures arrondies, les dégradés, les ombres,
etc.
43
HTML

• Les éditeurs de texte :


• Ce sont des programmes dédiés à l'écriture de code.
• On peut en général les utiliser pour de multiples langages,
pas seulement HTML et CSS.

44
HTML
• Les WYSIWYG
• What You See Is What You Get - Ce Que Vous Voyez Est Ce
Que Vous Obtenez
• Se sont des programmes qui se veulent très faciles d'emploi,
ils permettent de créer des sites web sans apprendre de
langage particulier.

45
HTML

Exemple WYSIWYG: Exemple des éditeurs de texte


Macromedia Dreamweaver Notepad++

46
HTML
• Le navigateur web est un programme qui permet d'afficher
des sites web.

• Il lit les langages HTML et CSS pour savoir ce qu'il


doit afficher.

• Il existe de nombreux navigateurs web différents :


• Google Chrome, Mozilla Firefox, Internet Explorer,
Safari, Opera…

• Chacun affiche un site web de manière légèrement différente


des autres navigateurs.

47
HTML
Code HTML vs. Visualisation
Pour voir le code HTML d'une page :
Menu Affichage / Code source

• Les navigateurs Internet (comme


Internet explorer, Firefox ou Chrome
par exemple) sont capables de lire les
documents HTML et de les afficher,
sous forme de pages web.

• Certains éléments, comme <html>,


<body>, <b> etc... ne sont pas affiché
sur la page web.
48
HTML

• Il contient des commandes, implémentées par des balises

• pour marquer les différents types de texte (titres,


paragraphe, listes …) ,

• pour inclure des images, des formulaires, des liens …

• C'est un langage à balisage qui décrit la structure logique


d'un document hypertexte.

49
HTML
Les balises et leurs attributs

• Les pages HTML sont remplies de ce qu'on appelle des balises.

• Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles


permettent à l'ordinateur de comprendre ce qu'il doit afficher.

• Elles sont entourées de « chevrons », c'est-à-dire des symboles


< et >, comme ceci : <balise>

• On distingue deux types de balises :


• les balises en paires
• les balises orphelines.
50
HTML
Les balises et leurs attributs
les balises en paires:
• Elles s'ouvrent, contiennent du texte, et se ferment plus loin.

<titre> Ceci est un titre </titre>

balise ouvrante balise fermante

• Cela signifie pour l'ordinateur tout ce qui n'est pas entre ces
deux balises… n'est pas un titre.
Ceci n'est pas un titre <titre> Ceci est un titre </titre> Ceci n'est pas un titre

51
HTML
Les balises et leurs attributs

les balises orphelines:

• Les deux en une (auto-fermantes):

• Ce sont des balises qui servent le plus souvent à insérer un


élément à un endroit précis (par exemple une image).

<image />

52
HTML
Les balises et leurs attributs
• Les attributs sont les options des balises.
• Ils viennent les compléter pour donner des informations
supplémentaires.

• L'attribut se place après le nom de la balise ouvrante

• Elle a le plus souvent une valeur, comme ceci :

<balise attribut="valeur">
• Exemple:
<img src="images/montagne.jpg" />
53
HTML
Les balises et leurs attributs
<balise attribut="valeur">
• Exemple:
<img src="images/montagne.jpg" />

• L'ordinateur comprend alors qu'il doit afficher l'image


contenue dans le fichier photo.jpg.

• Dans le cas d'une balise fonctionnant « par paire », on ne


met les attributs que dans la balise ouvrante et pas dans
la balise fermante.
<table border="2" > </table>
54
HTML
Structure de base d'une page HTML5
un fichier a l'extension .html (par exemple : test.html).
<!DOCTYPE html>
<html>
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title> Titre </title>
</head>
<body>
<!-- Corps de la page -->
</body>
</html>
55
HTML
Structure de base d'une page HTML5
• <HTML> <HEAD><TITLE>…</TITLE>…</HEAD><BODY>…</BODY></HTML>
• <HTML>…</HTML> Début et fin de fichier Html
• <HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
• <TITLE>...</TITLE> Titre affiché par le navigateur (élément de HEAD)
• <BODY>...</BODY> Début et fin du corps du fichier Html
• <BODY bgcolor=colcod> Couleur d'arrière-plan
• <BODY background=urlimg> Image d'arrière-plan

• Le Doctype aussi appelé DTD, sert à indiquer au navigateur à quelles règles


d’écriture obéit le code source de la page html. Il utilisera celles-ci pour
afficher la page selon les standards de W3C.

• <meta charset=utf-8" /> Cette méthode d'encodage permet d'afficher sans


aucun problème pratiquement tous les symboles de toutes les langues de
notre planète .
56
HTML
Structure de base d'une page HTML5

• <html> <body> </body> </html> : correct.

• Une balise qui est ouverte à l ' intérieur d une autre


doit aussi être fermée à l'intérieur .

• <html> <body> </html> </body> : incorrect.

57
HTML
Les Balises: Le texte
Mise en forme des caractères

• <B>...</B> Texte en gras


• <BIG>...</BIG> Agrandissement de la taille des caractères
• <BLINK>...</BLINK> Texte clignotant (Netscape seul)
• <EM>...</EM> Texte en italique
• <FONT color=colcod>...</FONT> Texte en couleur
• <FONT size=X>...</FONT> Taille des caractères où X est une valeur de 1 à 7
• <I>...</I> Texte en italique
• <PRE>...</PRE> Texte préformaté, affichage des espaces et des sauts de ligne
• <SMALL>...</SMALL> Réduction de la taille des caractères
• <STRONG>...</STRONG> Mise en gras du texte
• <SUB>...</SUB> Texte en indice
• <SUP>...</SUP> Texte en exposant
• <U>...</U> Texte souligné
58
HTML
Les Balises: Le texte
Mise en forme du texte

• <!--...--> Commentaire ignoré par le navigateur


• <BR> A la ligne
• <BLOCKQUOTE>...</BLOCKQUOTE> Citation (introduit un retrait du texte)
• <CENTER>...</CENTER> Centre tout élément compris dans le tag
• <DIV align= halign> ...</DIV> Aligne l'élément (center, left, right, justify)
• <Hx>...</Hx> Titre où x a une valeur de 1 à 7
• <Hx align=halign>...</Hx>halign peut avoir les valeurs center, left, right, justify
• <P>...</P> Paragraphe
• <P align=halign>...</P> halign peut avoir les valeurs center, left, right, justify

59
HTML
Les Balises: Le texte
Exemple : Ouvrir l'éditeur de texte

60
HTML
Les Balises: Le texte
Exemple : Ouvrir le browser

61
HTML
Les Balises: Le texte
Exemple : Ouvrir le browser

Exemple :
<BODY BGCOLOR=”black” TEXT= “white”>...</BODY>

62
HTML
Les Balises: Le texte
Exercice:

Réalisez en HTML le système d'équations suivant :


X2 = X1 cos(a + b) - Y1 sin(a + b)
Y2 = X1 sin(a + b) + Y1 cos(a + b)
Z2 = X1 sin(a2 + b) + Y1 cos(a + b3) Solution:
<CENTER>
<B>X<SUB>2</SUB></B> = X<SUB>1</SUB> cos(a + b) - Y<SUB>1</SUB> sin(a + b)
<BR>
<B>Y<SUB>2</SUB></B> = X<SUB>1</SUB> sin(a + b) + Y<SUB>1</SUB> cos(a + b)
<BR>
<B>Z<SUB>2</SUB></B> = X<SUB>1</SUB> sin(a <SUP> 2</SUP>+ b) +
Y<SUB>1</SUB> cos(a + b<SUP>3</SUP>)
</CENTER>
63
HTML
Les Balises: Le texte
Les Balises: les listes
• <UL [type=type]>Liste non numérotée (dite à puces)
• <LI>… </LI><LI>…</LI>…Eléments de liste
• </UL>(type peut être "disc", "square" ou "circle")

• <OL [type=type]>Liste numérotée


• <LI>…</LI><LI>…</LI>…(type peut être "1" (1,2,3), "a"
(a,b,c), "A" (A;B;C), "I" (I,II,III,IV)ou "i" (i,ii,iii,iv))
• </OL>

• <DL> Liste de glossaire/définition


• <DT>...</DT> Terme de glossaire (sans retrait)
• <DD>...</DD> Explication (DETAIL) du terme (avec retrait)
• </DL> 64
HTML
Les Balises: Le texte
Exemple : Ouvrir l'éditeur de texte
Les Balises: les listes
Exemple : Ouvrir le browser

65
HTML
Les Balises: Le texte
Les Balises: les listes
Exemple : Ouvrir l'éditeur de texte
• Les paragraphes et les en-têtes peuvent
s'aligner à gauche, au centre ou à droite.
• Les listes peuvent s'imbriquer.

Exemple : Ouvrir le browser

66
HTML
Les Balises: Le texte
Les Balises: Listes de définition

Exemple : Ouvrir l'éditeur de texte

mon premier terme


définition de mon premier terme
mon second terme
définition de mon second terme

67
HTML
Les Balises: Le texte
Les Balises: Exercices Listes
Réalisez les différentes listes suivantes :

Liste à puce :

•Adresse : EPFL, CH-1015 Lausanne


•Tél : +41 (0)21 693 27 73
•Fax : +41 (0)21 693 27 27
•E-mail : [email protected] Solution:
<UL>
<LI>Adresse : EPFL, CH-1015 Lausanne
<LI>Tél : +41 (0)21 693 27 73
<LI>Fax : +41 (0)21 693 27 27
<LI>E-mail : [email protected]
</UL> 68
HTML
Les Balises: Le texte
Les Balises: Exercices Listes
Réalisez les différentes listes suivantes :

Liste dont les puces sont constituées d'une image :


Test 1
Test 2
Solution:
<UL STYLE="list-style-image: URL(‘star.gif’);">
<LI> Test1
<ul style="list-style-image: url('/favicon.png');" >
<li>Exemple liste à puce HTML – sans puce 1</li> <LI> Test2
<li> Exemple liste à puce HTML – sans puce 2</li> </UL>
</ul> ou
<IMG SRC=star.gif> Test 1<BR>
<IMG SRC=star.gif> Test2<BR>
69
HTML <OL>
<LI>Ecole primaire :
Les Balises: Le texte <UL TYPE="disc">
Les Balises: Exercices Listes <LI>1ère : Yverdon
<LI>2e-3e : Echallens
Réalisez les différentes listes suivantes :
</UL>
Combinaison de listes numérotée et à puce : <LI>Ecole secondaire :
1. Ecole primaire : <UL TYPE="circle">
• 1ère : Yverdon <LI>1ère-3e : Echallens
• 2e-3e : Echallens <LI>4e-6e scient. : Lausanne, Béthusy
2. Ecole secondaire : </UL>
• 1ère-3e : Echallens <LI>Gymnase :
• 4e-6e scient. : Lausanne, Béthusy <UL TYPE="square">
3. Gymnase : <LI>Lausanne, La Cité
• Lausanne, La Cité </UL>
4. Université : <LI>Université :
• Lausanne, faculté Physique <UL TYPE="square">
<LI>Lausanne, faculté Physique
</UL>
</OL> 70
HTML
Les Balises: Le texte
Les Balises: Exercices Listes
Réalisez les différentes listes suivantes :

Solution:
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="I" start="5">


<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> 71
HTML
Les Balises: Le texte
Les Balises: Exercices Listes
Réalisez les différentes listes suivantes :

Solution:
Liste descriptive : <DL>
<DT><B>1990</B>
1990 <DD>Certificat de fin d'études secondaires
Certificat de fin d'études secondaires <DT><B>1993</B>
1993 <DD>Maturité scientifique
Maturité scientifique <DT><B>1998</B>
1998 <DD>Licence en physique. Travail de mémoire
Licence en physique. Travail de réalisé dans le domaine des capteurs...
mémoire réalisé dans le domaine des </DL>
capteurs...

72
HTML
Les Balises: Le texte
Les Balises: Caractères spéciaux

• Il existe plusieurs caractères spéciaux qu’il faut encoder parfois de


façon particulière.

• Par exemple les caractères utilisés par le code html comme <,>,” et &

• Ces différents signes doivent êtres encodés en utilisant les entités


suivantes:
• < : &lt ;
• > : &gt;
• & : &amp ;
• “ : &quot ;

73
HTML
Les Balises: Le texte
Les Balises: Caractères spéciaux
• Accents : soit # une lettre
• Accent Grave : &#grave;
• Accent Aigu: &#acute;
• Accent Circonflexe: &#circ;
• Cédille : &#cedil;

• Exemple : ça va Jérôme ? =>


• &ccedil;a va J&eacute;r&ocirc;me ?

• Remarque : en principe si le caractère existe dans le jeu de caractères (charset)


déclaré dans le document, il n’est pas nécessaire d’écrire les caractères spéciaux
au moyen des entités.
• Ainsi dans l’encodage ISO-8859-15, le é existe et il n’est pas donc nécessaire
d’avoir recours à l’entité &eacute;
74
HTML
Les Balises: Le texte
Les Balises: Ligne de séparation
• <HR> Trait horizontal (centré par défaut)

• <HR width="x%"> Largeur du trait en %

• <HR width=x> Largeur du trait en pixels

• <HR size=x> Hauteur du trait en pixels

• <HR align=halign> Trait centré (par défaut), aligné à gauche ou à droite

• align="left"|"right"|"center"|"justify"

• <HR noshade> Trait sans effet d'ombrage

75
HTML
Les Balises: Le texte
Les Balises: Ligne de séparation

Exemple : Ouvrir l'éditeur de texte

Exemple : Ouvrir le browser

76
<HTML>
<HEAD>
HTML <TITLE> Farid ALAMI </TITLE>
</HEAD>
Les Balises: Le texte <BODY>
Les Balises: Ligne de séparation
<H1 ALIGN=CENTER>Farid ALAMI</H1>
<HR SIZE="7">
Réaliser la page Web illustrée ci-dessous <H2>Mes coordonnées</H2>
Farid ALAMI<BR>
Tél: 06 20 20 30 12<BR>
Email: [email protected]<BR>
Adr: Rue Mohamed V, Rabat
<HR WIDTH="50%">
<H2>Mon curriculum vitae</H2>
J'ai fréquenté l'école primaire de ...<P>
J'ai suivi ensuite ...
<HR WIDTH="50%">
<H2>Mes hobbies</H2>

à remplir...
<HR>
<I>Farid ALAMI / révision 3.3.2019</I>
</BODY>
</HTML> 77
HTML
Les Balises: Les liens
Un lien vers un autre site
•Utilisez l' élément <a> pour définir un lien

•Utilisez l' attribut href pour définir l'adresse du lien

•Utilisez l' attribut target pour définir où ouvrir le document lié.

•Utilisez l'élément <img> (à l'intérieur <a>) pour utiliser une image en tant
que lien.

•Utilisez l' attribut id (id = " valeur ") pour définir les signets dans une page.

•Utilisez l'attribut href (href = "# valeur ") pour créer un lien vers le signet.

78
HTML
Les Balises: Les liens
Un lien vers un autre site

• La balise <a>, avec son attribut href permet de créer un hyperlien


vers une autre page
• <a href= "URI" > libellé </a>

• URI : Uniform Ressource Identifier

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

79
HTML
Les Balises: Les liens
Un lien vers un autre site
L' attribut target peut avoir l'une des valeurs suivantes:

•_blank - Ouvre le document lié dans une nouvelle fenêtre ou


un nouvel onglet
•_self - Ouvre le document lié dans la même fenêtre / onglet
que celui sur lequel il a été cliqué (par défaut)
•_parent - Ouvre le document lié dans le cadre parent
•_top - Ouvre le document lié dans le corps de la fenêtre
•framename - Ouvre le document lié dans un cadre nommé

Exemple:
<a href="https://www.google.com/“ title="Go to google“ target="_blank">
Visit google site!</a>

80
HTML
Les Balises: Les liens
Créer un signet

• Les signets HTML permettent aux lecteurs d’accéder à des parties


spécifiques d’une page Web.

• Les signets peuvent être utiles si votre page Web est très longue.

• Pour créer un signet, vous devez d'abord le créer, puis lui ajouter un
lien.

• Lorsque le lien est cliqué, la page défilera jusqu'à l'emplacement


contenant le signet.

81
HTML
<html>
<body> Les Balises: Les liens
<p><a href="#C4">Jump to Chapter 4</a></p> Créer un signet
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>


<p>This chapter explains ba bla bla</p>

<!– Répéter jusqu’au Chapitre 23 -->

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html> 82
HTML
Les Balises: Les liens

83
HTML
Les Balises: Les liens
Un lien vers une autre page de son site

1. Créer la page 1.html

2. Créer la page 2.html

84
HTML
Les Balises: Les liens
Un lien pour envoyer un e-mail

Le contenu de l’attribut href doit commencer par le préfixe

mailto: suivi de votre adresse e-mail

Exemple:

<a href="mailto:[email protected]">Envoyez-moi un message! </a>

85
HTML
Les Balises: Les images
• Les formats d’image:
• JPEG,JPG (Joint Photographic Expert Group) : pour les photos ;
• PNG (Portable Network Graphics): pour toutes les autres illustrations ;
• GIF (Graphics Interchange Format): similaire au PNG, plus limité en
nombre de couleurs mais qui peut être animé.
• La balise: <img /> insérée dans un paragraphe <p> </p>
• Nécessite deux attributs obligatoires:
• src: précise le chemin vers l’image que vous voulez afficher.
• alt : indique un texte de remplacement (dit « texte alternatif»)
pour votre image.
• Ce texte sera affiché à la place de votre image si celle-ci ne
peut pas être affichée.
 <img src="photo.jpg" alt="ma photo " />
• Une image cliquable: combiner les balises <a> et <img /> :
 <a href="http://www.google.fr"><img src="photo.jpg" alt=" ma photo "/></a>
86
HTML
Les Balises: Les images

• <IMG src=urlimg> Insertion d'une image au format gif, jpg ou png

• <IMG ... width=x height=y> Mise à l'échelle de l'image en pixels

• <IMG ... border=x> Définition de la bordure d'une image

• <IMG ... alt=text> Texte alternatif lorsque l'image n'est pas affichée

• <IMG ... align="left|right|middle|top|bottom"> l'alignement d'une


image en fonction de l'élément environnant

• <IMG ... hspace=x> Espacement horizontal entre l'image et le texte

• <IMG ... vspace=y> Espacement vertical entre l'image et le texte

87
HTML
Les Balises: Les tableaux

88
HTML
Les Balises: Les tableaux
Les attributs de <table>

• Fusion des colonnes: L'attribut colspan


• Fusion des lignes: L'attribut rowspan
89
HTML
Les Balises: Les tableaux

90
HTML
Les Balises: Les tableaux

91
HTML
Les Balises: Audio
• <Audio> définit une musique ou d'autres flux sonores.
• <audio> balise a pris en charge les formats de fichiers tels que mp3, wav, etc.
• HTML4 ne supporte pas la balise <audio>.
• balise <audio> est nouveau pour html5.

92
HTML
Les Balises: Vidéo
• L'élément <video> spécifie les flux vidéo ou des clips vidéo.

• Il existe trois formats pris en charge pour les balises vidéo, ils sont Mp4,
WebM et Ogg.

• HTML4 ne pas supports balise <video>.

• La balise <video> est nouvelle en HTML5.

• Balise <video> affiche le clip.


• <Source> balise utilisée pour définir le fichier vidéo source.
• Controls attribut utilisé pour spécifie que les commandes audio
doivent être affichés.
• autoplay Indique que l'audio commencera à jouer dès qu'il est prêt

<video width="320" height="240" autoplay>


93
HTML
Les Balises: Vidéo

94
HTML
Formulaires
• La balise FORM peut contenir des attributs :

• NAME=nom qui permet de différencier plusieurs formulaires sur une même


page.

• ACTION="adresse_url"

• METHOD="méthode" pour utiliser un script situé à adresse_url avec la


méthode qui est post ou get.

• Les éléments de formulaire sont différents types d'éléments d'entrée, tels


que les champs de texte, les cases à cocher, les boutons radio, les boutons
d'envoi, etc.

Exemple : <form> .form elements. </form>


95
HTML
Formulaires
L'élément <input>
• L'élément <input> est l'élément de formulaire le plus important.
• L'élément <input> peut être affiché de plusieurs façons, en
fonction de l' attribut type .
• Voici quelques exemples:
• <input type = "text">
• Définit un champ de saisie de texte d'une ligne
• <input type = "radio">
• Définit un bouton radio (pour sélectionner l'un des
nombreux choix)
• <input type = "submit">
• Définit un bouton de soumission (pour soumettre le
formulaire)
96
HTML
Formulaires
L'élément <input>

• <input type = "text"> définit un champ de saisie d'une ligne pour la


saisie de texte.

• Exemple:

<form>
First name:<br>
<input type="text" name="firstname"> <br>
Last name:<br>
<input type="text" name="lastname" MAXLENGTH=8>
</form>

97
HTML
Formulaires
L'élément <input>
• <input type = "radio"> définit un bouton radio .
• Les boutons radio permettent à un utilisateur de sélectionner
UN parmi un nombre limité de choix:

Exemple:

<form>
<input type="radio" name="gender" value="male" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
</form>
98
HTML
Formulaires
L'élément <input>
• <input type = "checkbox"> définit des cases à cocher

• Exemple

<form>
<input name="couleurs" type="checkbox" value="rouge">Rouge
<BR>
<input name="couleurs" type="checkbox" value="vert">Vert
<BR>
<input name="couleurs" type="checkbox" value="bleu">Bleu <BR>
</form>

99
HTML
Formulaires
L'élément <input>
• <input type = "submit"> définit un bouton pour soumettre les données du
formulaire à un gestionnaire de formulaires .
• Le gestionnaire de formulaires est généralement une page de serveur avec un
script pour le traitement des données d'entrée.
• Exemple
<form action=" /page1.html">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name: <br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
• L'attribut action définit l'action à effectuer lors de la soumission du formulaire.
100
HTML
Formulaires
L'élément <input>
• L' attribut target spécifie si le résultat soumis s'ouvrira dans un nouvel
onglet du navigateur, un cadre ou dans la fenêtre en cours.

• La valeur par défaut est " _self ", ce qui signifie que le formulaire sera
soumis dans la fenêtre en cours.

• Pour rendre le résultat du formulaire ouvert dans un nouvel onglet du


navigateur, utilisez la valeur " _blank ":

• Exemple

<form action="/page1.html" target="_blank" >

101
HTML
Formulaires
L'élément <input>
• L' attribut method spécifie la méthode HTTP ( GET ou POST ) à utiliser lors
de l'envoi des données de formulaire

• Exemple <form action="/page1.html" method="get">

• les données de formulaire soumises seront visibles dans le champ d'adresse


de la page :
/page1.html?firstname=Mickey&lastname=Mouse

• Remarque:
• N'utilisez jamais GET pour envoyer des données sensibles! (sera
visible dans l'URL)
• La longueur d'une URL est limitée (environ 3000 caractères)
102
HTML
Formulaires
L'élément <input>
• Exemple
• <form action="/page1.html" method="post" >

• Remarque:

• Utilisez toujours POST si les données du formulaire contiennent des


informations sensibles ou personnelles.

• La méthode POST n'affiche pas les données de formulaire soumises


dans le champ d'adresse de la page.

• POST n'a aucune limitation de taille et peut être utilisé pour envoyer
de grandes quantités de données.

103
HTML
Formulaires
L' élément <fieldset>
• L' élément <fieldset> est utilisé pour regrouper les données associées dans
un formulaire.

• L' élément <legend> définit une légende pour l'élément <fieldset>.

• Exemple
<form action="/page1.html">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
104
</form>
HTML
Formulaires
L' élément <select>
• L' élément <select> définit une liste déroulante
• Exemple
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• Les éléments <option> définissent une option pouvant être sélectionnée.

• Par défaut, le premier élément de la liste déroulante est sélectionné.

• Pour définir une option présélectionnée, ajoutez l' attribut selected à l'option:
• Exemple <option value="fiat" selected >Fiat</option>
105
HTML
Formulaires
L' élément <select>
• L' élément <select> définit une liste déroulante

• Utilisez l' attribut size pour spécifier le nombre de valeurs visibles

• Exemple

<select name="cars" size="3" >


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

106
HTML
Formulaires
L' élément <select>
• L' élément <select> définit une liste déroulante

• Utilisez l' attribut multiple pour permettre à l'utilisateur de sélectionner


plusieurs valeurs

• Exemple

<select name="cars" size= " 5" multiple>


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<option value="kia">Kia</option>
</select>
107
HTML
Formulaires
L' élément <textarea>
• L' élément <textarea> définit un champ de saisie multiligne ( une zone de texte )
• Exemple
<textarea name="message" rows="10" cols="30" >
The cat was playing in the garden.
</textarea>
• L' attribut rows spécifie le nombre visible de lignes dans une zone de texte.
• L' attribut cols spécifie la largeur visible d'une zone de texte.
• Vous pouvez également définir la taille de la zone de texte en utilisant CSS

• Exemple
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>

108
HTML
Formulaires
L' élément <button>

• L' élément <button> définit un bouton cliquable

• Exemple

<button type="button" onclick="alert('Hello World!')" >


Click Me!
</button>

109
HTML
Formulaires

Pays: France, Espagne , Italie


Langages: Java, C, C++, PHP, HTML

110
HTML

111
HTML

112
HTML

structuration sémantique du code HTML avant HTML5

113
HTML

HTML5 propose une formalisation plus rigoureuse en proposant de


nouveaux éléments article aside footer header
nav et section particulièrement adaptés à cet usage.
114
HTML5
HTML HTML5

La déclaration HTML Doctype est longue. La déclaration DOCTYPE en HTML5 est simple.

L'encodage des caractères HTML est plus La déclaration de codage des caractères HTML5 est
long. simple.

L'audio et la vidéo ne sont pas des éléments


L'audio et la vidéo font partie du HTML5.
HTML.

Il est possible de dessiner un vecteur à l'aide


Les graphiques vectoriels font partie du HTML5,
d'autres technologies comme Silverlight,
par exemple le canevas, le SVG.
Flash, VML, etc.

Il est impossible d’obtenir la géolocalisation L'API de géolocalisation JS en HTML5 vous permet


réelle d’une personne naviguant sur un site d'identifier l'emplacement de l'utilisateur
Web. parcourant n'importe quel site Web.

115
HTML5
HTML HTML5

HTML propose un stockage local au lieu des HTML5 utilise des cookies pour stocker des
cookies. données.

En HTML, il n'est pas possible de dessiner des En HTML5, il est possible de dessiner des formes
formes basiques. de base.

Il vous permet d'exécuter JavaScript dans un Il vous permet d'exécuter du code JavaScript en
navigateur. arrière-plan.

Vous pouvez utiliser HTML avec tous les anciens Vous pouvez utiliser HTML5 avec tous les
navigateurs. nouveaux navigateurs.

Vous pouvez utiliser le cache de l'application


Vous pouvez utiliser le cache du navigateur comme
(base de données et stockage Web) comme
stockage temporaire.
stockage temporaire.

116
HTML5
HTML HTML5

Vous pouvez établir des canaux de


WebSocket n'est pas disponible. communication en duplex intégral avec un
serveur à l'aide de Web Sockets.

HTML5 prend en charge la gestion des erreurs


Il n'existe aucun processus pour gérer les codes
persistantes via le processus de gestion des
HTML structurellement incorrects.
erreurs improvisé.

Le HTML est moins adapté aux mobiles. HTML5 est adapté aux mobiles.

Les attributs tels que async, charset et ping ne Les attributs async, ping, charset et font partie
sont pas présents en HTML. de HTML5.

HTML n'autorise pas les effets glisser-déposer HTML5 permet des effets glisser-déposer.

Proposez de nouveaux attributs comme tabinex, Ce sont certains attributs qui sont appliqués aux
id, tabinex, etc. éléments HTML 5.
117

Vous aimerez peut-être aussi