[go: up one dir, main page]
Scribd
Importer
26 vues32 pages

Dev Web Client-HTML

Cours de HTML

Transféré par

miftahsalma134
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
26 vues32 pages

Dev Web Client-HTML

Cours de HTML

Transféré par

miftahsalma134
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/ 32

TP

DEVELOPPEMENT
Cours WEB
CLIENT
- HTML -

Projet

https://filalireda.wixsite.com/elearning-center

Pr Filali Reda
ESTC – DEP GI
OBJECTIFS
filalireda.wixsite.com/elearning-center

Maitriser les fondements du


Développement Web Client

 Comprendre le processus du développement web.


 Etudier le langage HTML 5
 Aborder les notions avancées des CSS 3
 Améliorer la présentation des sites web et ajouter de
l’interactivité par JavaScript

1
2
CONCEPTS Partie 1
GENERAUX HTML 5

filalireda.wixsite.com/elearning-center

• HTML : HyperText Markup Langage.


o Langage permettant de créer des pages Web.
o Utilise une structure formé avec des balises permettant la mise en forme du texte.
o Nécessite un navigateur web pour la visualisation.
• WEB :
o Composé de pages web stockées sur des serveurs web,
o Chaque page web, est identifiée par une adresse unique appelée URL.
• SITE WEB :
o Ensemble cohérent de pages web liées par des liens hypertextes et articulées
autour d'une home page.
• BROWSER (Navigateur) :
o Logiciel client capable d'interroger les serveurs web, d'exploiter leurs résultats et
de mettre en page les informations grâce aux instructions contenues dans la page
HTML. Les plus utilisés:
 Mozilla Firefox
 Google Chrome
 Opéra
Travail • Il faut définir :
Préliminaire o Les objectifs
o Le contenu du site
o la liste des éléments multimédias tels que: 2
(images, sons, séquence vidéo, arrière plans…etc.)
3
o Choix de la structure
CONCEPTS Partie 1
GENERAUX HTML 5

filalireda.wixsite.com/elearning-center

Choix de la  Structure séquentielle : Adaptée aux sites


structure Web d'apprentissage, aux tutoriaux et aux
thèmes progressant du général au
particulier. Elle est limitée aux petits sites.

• Structure hiérarchique : Indiquée pour organiser


des blocs d'information complexes. Les
différents thèmes dépendent d'une seule et
unique page appelée [homepage].

 Structure en réseau: Absence d’une démarche


logique dans sa création. L’internaute
cherchera l’information sans avoir l’impression
d’être dirigé.
 Structure évolutive (A adopter): permet de
garder un équilibre entre les différents blocs
d’information. Cela donne un accès rapide à
l'information et une compréhension intuitive
de la façon dont les éléments sont organisés.
3
CONCEPTS Partie 1
GENERAUX HTML 5

filalireda.wixsite.com/elearning-center
Outils  Editeur HTML : Deux types :
Nécessaires o Editeur de textes : nécessite une connaissance du langage HTML. Il
pour la
est surtout utilisé dans une orientation de développement professionnel ou
Création Web
une correction manuelle est impérative.
o Editeur graphiques : ne nécessite pas la connaissance du HTML. Il permet
de créer rapidement et simplement des pages web.
Les plus célèbres sont :
o Microsoft Front page
o Dream Weaver
o Allaire Home Site
 Editeur D’Images : Logiciel de traitement d’images
 Autres Outils: nécessaires pour incorporer les éléments multimédia audio et
vidéo, divers logiciels sur le net sont disponibles et gratuitement

Je ne donnerai aucune indication sur les outils pour la création Web. Chacun travaillera
avec les outils avec lesquels il est habitué.

4
5
CONCEPTS Partie 1
GENERAUX HTML 5

filalireda.wixsite.com/elearning-center

 Dernière Version de HTML : De nombreuses améliorations :


HTML 5
o Possibilité d'inclure facilement des vidéos.
o Un meilleur agencement du contenu
o De nouvelles fonctionnalités pour les formulaires. .
Codage
• Balises et Attributs :
HTML
o Le langage HTML est constitué de mots-clés (des balises) pouvant être
complétés par des attributs.
o En général, elles vont par paires : une balise de début et une balise de fin.
o La balise de fin se distingue de celle du début par le caractère /
• Syntaxe : <balise attribut="valeur"> Contenu </balise>
• Commentaires : Tout texte écrit entre les symboles <! et > est du commentaire
(non affiché dans la page Web).
• Exemple: <!-- Ceci est un commentaire -->

5
STRUCTURE DE BASE Partie 1
D’UNE PAGE HTML5 HTML 5

filalireda.wixsite.com/elearning-center

<!DOCTYPE html> On a un certain nombre de "balises " indispensables.


<html>
<!--début de la page HTML--> • <!DOCTYPE html> : Page écrite en HTML5.
<head> • <html>: Contenu d’une page HTML
<!--l'en-tête--> Règle : <html> … </html>
<meta charset="utf-8" />
<title>Titre du site</title> • <head> : En-tête de la page
</head> o Partie non visible
<!--fermeture de l'en-tête--> o Contient les informations permettant aux moteurs
<body>
<!--début du corps de la page--> de recherche et de trouver le site.
insérer textes, images, formulaires etc…. Règle : <head> … </head>
</body>
<!--fermeture du corps de la page--> • <meta charset="utf-8"/>: Indique l'encodage
</html> utilisé
<!--fermeture de votre fichier HTML--> o détermine comment les caractères spéciaux vont
s’afficher (accents, idéogrammes chinois et
japonais, caractères arabes, etc.).
• <tiltle>: Définit le titre de la page
Règle : <tiltle> … </title>
• <body>: Corps de la page
o Partie visible
o Contient les éléments à afficher.
6
Règle : <body> … </body> 7
Partie 1
ORGANISER LE TEXTE HTML 5

filalireda.wixsite.com/elearning-center

ACTION EXEMPLE

Les Paragraphes

<p> définit un paragraphe et nécessite un marqueur de fin.


Elle a pour attribut align qui peut prendre left, center, right <p ALIGN= "left"> Texte </p>
ou justify.

Saut de ligne

< br /> est une balise orpheline pour faire un saut de ligne.
Dans l’exemple, Texte1 et Texte2 apparaitront dans deux
lignes différentes. Texte1<br />Texte2
<br /> doit être utilisée à l’intérieur d’un paragraphe.

7
8
Partie 1
ORGANISER LE TEXTE HTML 5

filalireda.wixsite.com/elearning-center

ACTION EXEMPLE
Définir la taille d’un titre
<h1> définit la taille des titres et nécessite un
marqueur de fin. <h1>Texte </h1>
6 tailles de titres sont disponibles, de h1 à h6.
Cette dernière est la plus petite.

Afficher un texte
En gras <strong>Texte</strong>
En italique <em>Texte</em>
Surligné <mark>Texte</mark>
Supprimé (Barré) <del>Texte</del>
Ajouté (Souligné) <ins>Texte</ins>
En indice <sub>Texte</sub>
En exposant <sup>Texte</sup>

8
Partie 1
LES LISTES HTML 5

filalireda.wixsite.com/elearning-center

Non Ordonnées

 texte 1
<UL><LI> texte 1 </LI><LI> texte 2 </LI></UL>  texte 2
Ordonnées
<OL> <LI> texte 1 </LI><LI> texte 2 </LI></OL> 1. texte 1
2. texte 2
De Définition
<DL> Terme 1 à définir
<DT>Terme 1 à définir</DT> Définition du terme 1
<DD>Définition du terme 1</DD> Terme 2 à définir
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD> Définition du terme 2
</DL>

ON PEUT AUSSI IMBRIQUER LES LISTES !

9
10
Partie 1
LES LIENS HTML 5

filalireda.wixsite.com/elearning-center

 Syntaxe : <a href="adresse cible"> Cible</a>


La balise <A> comporte obligatoirement l'attribut HREF. C'est lui qui indique le lien avec
une autre page, un autre site. Il permet généralement de préciser l’adresse URL de la cible
soit en absolu, soit en relatif.
 Lien Absolu: Il contient l’adresse URL complète de la page à ouvrir.

Exemple : Lien vers un autre site web

<a href="www.est-uh2c.ac.ma">EST CASA</a>

 Lien Relatif: Il ne comporte pas une adresse URL complète, mais un chemin de
destination par rapport à l’emplacement de départ.

10
11
Partie 1
LES LIENS HTML 5

filalireda.wixsite.com/elearning-center

• Pour mieux appréhender le concept du lien relatif, regardons de près un cas de figure qui
représente un site web articulé autour d’une page d’accueil. Il contient aussi 3 autres pages situées
dans divers dossiers
EXEMPLE 1
Source : Page d’Accueil Cible : Page2
<a href="Dossier 2/Page2.html">Page2</a>
EXEMPLE 2
Source : Page d’Accueil Cible : Page3
<a href="Dossier 2/Page3.html">Page3</a>
EXEMPLE 3
Source : Page2 Cible : Page3
<a href="Page3.html">Page3</a>
EXEMPLE 4
Source : Page3 Cible : Page d’Accueil
<a href="../Acceuil.html">Revenir à la page d'accueil</a>
EXEMPLE 5
Source : Page3 Cible : Page4
<a href="../Dossier 3/Page4.html">Page4</a>

11
12
Partie 1
LES LIENS HTML 5

filalireda.wixsite.com/elearning-center

•Un lien vers une Ancre


Une ancre est un point de repère auquel on peut accéder dans une page HTML sans la parcourir.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.;

EXEMPLE 1 : Ancre dans la même page


Ancre <h1 id= "mon_ancre">Titre</h1>
Lieu Page1.html
Lien <a href= #mon_ancre">aller vers Ancre</a>
EXEMPLE 2 : Ancre Située dans une autre page
Ancre <h1 id= "mon_ancre">Titre</h1>
Lieu Page1.html
Lien depuis
page2.html <a href= "Page1.html#mon_ancre">aller vers Ancre</a>

12
13
Partie 1
LES LIENS HTML 5

filalireda.wixsite.com/elearning-center

 Lien de Téléchargement
Il suffit de créer un lien vers le fichier à télécharger. Suivant où il se situe, on utilisera un lien
relatif ou un lien absolu. Dans l’exemple ci-dessous, on crée un lien qui permet de télécharger un
document se trouvant dans le même dossier que la page html.
<a href= "Document.pdf">Télécharger Document</a>
 Lien vers une adresse mail
<a href="mailto:prof_info@gmail.com">Discuter avec le Prof</A>
 L’attribut target
Cet attribut permet d’ouvrir la page hyper liée dans une nouvelle fenêtre du navigateur en lui
attribuant la propriété "_blank ".
<a target="_blank " href="www.est-uh2c.ac.ma">EST CASA</a>
 L’info bulle avec l’attribut title
La balise <a> offre la possibilité d’afficher une info bulle lorsque le pointeur de la souris survole le
lien. Il suffit d’ajouter l’attribut title à l’intérieure de la balise <a>.
<a href="www.est-uh2c.ac.ma" title="Site Officiel EST" >EST CASA</a>

13
14
ELEMENTS Partie 1
MULTIMEDIAS HTML 5

filalireda.wixsite.com/elearning-center

 Les Images
 Différents formats d'images : jpg, png, gif, bmp, tif, etc…
 Format à adopter dépend du type d’image:
 Insertion d’Image
On utilise les balises <img /> et les attributs src, alt et title.
 L'attribut src indique l'endroit où se situe l'image.
 L'attribut alt donne un texte alternatif à l'image au cas où l'image n'apparaît pas.
 L'attribut title est facultatif. Il permet d'afficher une bulle d'aide comme pour les liens.
 Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe.
• Code HTML
<p>
<img src="images/estc.jpg" alt="Photo estc" title="Belle Ecole" />
</p>

14
15
ELEMENTS Partie 1
MULTIMEDIAS HTML 5
Miniature cliquable

filalireda.wixsite.com/elearning-center

• Miniature cliquable
Si l’image est très grosse, il est conseillé d’en afficher une miniature (par le biais
d’un logiciel adéquat) sur le site. Ensuite un lien sur cette miniature est créé afin
que les visiteurs puissent afficher l'image en taille originale (Fig2).

• Code HTML

<p>
Image dans sa taille d’origine. Cliquez dessus ! < /br>
<a href="img/Taj_Mahal.jpg"><img src="img/mini_Taj_Mahal.jpg"
alt="Taj Mahal" title="Cliquez pour agrandir" /></a>
</p>
15
ELEMENTS Partie 1
MULTIMEDIAS HTML 5

filalireda.wixsite.com/elearning-center

 Séquences Audio
 Différents formats : Mp3, AAC, OGG, WAV…
 MP3 : format de compression audio le plus utilisé au monde.
 AAC : utilisé majoritairement par Apple
 Ogg Vorbis : très répandu dans le monde du logiciel libre, notamment sous Linux.
 WAV (format non compressé) à éviter car le fichier est très volumineux avec ce format.

 Insertion Séquence Audio


Syntaxe: <audio src="nom_du_fichier_audio"> Message </audio>
Description:
 src permet: spécifie le chemin et le nom du fichier audio. Le chemin peut être de type
relatif ou absolu. Le format du fichier audio peut être (mp3, wav, ogg … ).
 Message: affiché si le navigateur est dans l’incapacité de reconnaître la balise audio.
 Sans autres indications que src, le fichier audio ne sera pas joué automatiquement, et le
lecteur n’est pas affiché dans la page.
Propriété:
 Autoplay : permet de jouer le fichier audio automatiquement dès l’ouverture de la page.
 Controls : permet d’afficher le lecteur ainsi que les boutons « Lecture » et « Pause ».
 Loop : permet de jouer le fichier audio en boucle.
Exemple:
<audio src="musique.mp3" autoplay controls loop > 16
Échec, la balise audio n’est pas reconnue par votre navigateur /audio>
17
ELEMENTS Partie 1
MULTIMEDIAS HTML 5

filalireda.wixsite.com/elearning-center

 Séquences Vidéo
Différents formats : MP4, OGG, WebM, Theora.
 Insertion Séquence Vidéo
<video src="nom_du_fichier_video" poster="image_video" width="…" height="…" >Message </video>
Description
• src : spécifier le chemin et le nom du fichier vidéo.
• poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée.
Par défaut, le navigateur prend la première image de la vidéo
• Width et height : pour modifier la largeur et la hauteur de la vidéo
Propriété:
 Autoplay: permet de jouer le fichier Vidéo automatiquement dès l’ouverture de la page.
 Controls: permet d’afficher le lecteur ainsi que les boutons « Lecture » et « Pause ».
 Loop: permet de jouer le fichier vidéo en boucle.
Exemple : <video src="film.mp4" autoplay controls loop >
balise vidéo non reconnue par votre navigateur
</video>
Pour éviter les problèmes de compatibilité entre les Exemple:
différents navigateurs, on va utiliser l’élément source. <video controls poster="image.jpg" width="600">
<source src="film.mp4">
Ce dernier va référencer plusieurs fichiers vidéo ou
<source src="film.webm">
audio encodés dans différents formats.
<source src="film.ogv"></video>

17
18
Partie 1
TABLEAUX HTML 5

filalireda.wixsite.com/elearning-center
Tableaux : diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images,
couleurs). Elles peuvent avoir un fond et des bords visibles ou non.
 Insérer un tableau :
<TABLE> et </TABLE> : pour définir un tableau
<CAPTION> et </CAPTION> : pour donner un titre au tableau
<TR> et </TR> : pour définir une rangée ou ligne
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule

<TABLE WIDTH=50% border="1">


<caption> exemple de tableau</caption> :
Langage Html
<TR>
<TD>Langage</TD> <TD>Html</TD>
</TR>
</TABLE>

18
19
Partie 1
TABLEAUX HTML 5

filalireda.wixsite.com/elearning-center

 Mise en forme d’un tableau:


Entre <TD> et </TD> : on peut changer la couleur des caractères, ou celle du fond de la
cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de
bordure, etc...
Exemple :

<TABLE BORDER="2" CELLPADING="2"


cellspacing="3" width="50%"
bordercolor="#000080">
<tr>
<td width="50%" align="left" bgcolor="#008080"
bordercolor="#FF0000">&nbsp;</td>
<td width="50%" align="left" >&nbsp;</td>
</tr></table>

19
20
Partie 1
TABLEAUX HTML 5

filalireda.wixsite.com/elearning-center

 Fusionner les cellules d’un tableau:


Les lignes et colonnes peuvent êtres fusionnés, afin d'obtenir des cellules plus ou moins grandes. Ce
fusionnement est réalisé avec les attributs : rowspan et colspan.
Pour fusionner 2 cellules adjacentes sur une ligne, COLSPAN est requis (pour th ou td).
Pour fusionner 2 cellules adjacentes sur une colonne, ROWSPAN est requis (pour th ou td).

<table border=1>
<tr>
<td>Cellule 1</td>
<td colspan=2>2 cel fus - même ligne</td> 2 cellules fusionnées
Cellule 1
</tr> (sur la même ligne)
<tr> Cellule 2 Cellule 3 2 cellules fusionnées
<td>Cellule 2</td> Cellule 4 Cellule 5 (sur la même colonne)
<td>Cellule 3</td>
<td rowspan=2>2 cel fus - même colonne</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr> 20
</table>
21
Partie 1
TABLEAUX HTML 5

filalireda.wixsite.com/elearning-center
• Un tableau structuré
Pour un tableau plus complexe, il est possible de le
diviser en trois parties :
L’en-tête : balises <thead></thead> ;
Le corps : balises <tbody></tbody> ;
Le pied du tableau : balises <tfoot></tfoot>.

21
22
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center

• BALISE PRINCIPALE <FORM>


Les formulaires permettent aux internautes d'envoyer généralement des données.

La balise <FORM> possède divers attributs :


 Method : cet attribut indique par quel moyen les donnes vont être envoyées.
o method="get" : les informations seront envoyées dans l'adresse de la page
(http://…). Option à déconseiller.
o method="post" : Méthode à privilégier pour les formulaires. Les données
saisies dans le formulaire ne transitent pas par la barre d'adresse.
 Action: permet de spécifier l'adresse (URL ou e-mail) vers laquelle les données
seront envoyées
Exemple:

<Form ACTION="traitement.php" METHOD="post">


<p>Texte à l’intérieur du formulaire</p>
</Form>

22
23
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center
• REMPLIR LE FORMULAIRE
 Champ de saisie simple sur une ligne: <input />
Cette zone de saisie comprend deux parties :
o Label: permet de donner un intitulé à un champ de formulaire. Son utilisation permet aux
navigateurs d’associer cet intitulé au champ de formulaire. Ainsi, un clic sur l’intitulé donnera le
focus au champ de formulaire.
o Zone proprement de saisie représentée par la balise <Input type="text" />
A l'intérieur de la balise <Input type="text" />, un certain nombre d'attributs sont à préciser dont :
o name: nom donné à la zone de texte.
Il servira par exemple à php pour traiter cette information envoyée au serveur.
o id: nom pour lier le label à la zone de texte.
o Maxlength: limiter le nombre de caractères saisis
o Placeholder: donner une indication sur le contenu du champ. Elle disparaîtra dès que le visiteur aura
cliqué à l'intérieur du champ.
Pour terminer l’opération de liaison, il faut ajouter à
la balise <label>, l’attribut for avec le même nom que
l’id du champ.
<form method="post" action="traitement.php">
<p>
<label for="pseudo">Pseudo</label> :
<input type="text" name="pseudo" id="pseudo"
placeholder="Ex : visiteur" size="30"
maxlength="10" /> 23
</p>
</form>
24
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center
• Zone mot de passe : zone de texte avec l’attribut type=" password"
Exemple: <form method="post" action="traitement.php">
<p>
<label for="pseudo">Pseudo :</label>
<input type="text" name="pseudo"
id="pseudo" />
<br />
<label for="pass">Mot de Passe :</label>
<input type="password" name="pass"
id="pass" />
</p>
</form>
 Zones de saisie multilignes : zones servant par exemple à entrer des commentaires et autres remarques
d'une certaine longueur. Elles sont créées par la balise <TEXTAREA> </TEXTAREA>.Elle doit aussi
être nommée par l’attribut NAME. On doit également en définir la taille, par les attributs
ROWS="valeur" et COLS="valeur".
<form method="post" action="traitement.php">
<p>
<label for="ameliorer">Remarques sur le
Site</label><br />
<textarea name="ameliorer" id="ameliorer"
rows="10" cols="50"></textarea>
</p>
</form>
24
25
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center

 Zones de saisies enrichies


Exemple: Action Code HTML Remarques
Saisir une adresse E.mail <input type="email" />
Saisir une URL <input type="url" />
Attributs possibles :
o min: valeur minimale autorisée.
<input type="number" />
Saisir un nombre entier o max: valeur maximale autorisée.
o step: pas de déplacement.
Le type range permet de sélectionner un
Un curseur <input type="range" />
nombre avec un curseur (aussi appelé slider)

• Boutons d'option : Faire un seul choix parmi plusieurs possibilités offertes appelés boutons.
Syntaxe : <INPUT TYPE="radio" NAME="Nom" value=" valeur_option" />
Les options possèdent le même (name), mais chaque option doit avoir une valeur (value) différente.
<form method="post" action="traitement.php">
<p>
Etat Civil :<br />
<input type="radio" name="EC" value="Mr"
id="Mr" />
<label for="Mr">Monsieur</label><br />
<input type="radio" name="EC" value="Madame"
id="Madame" />
<label for="Madame">Madame</label><br />
<input type="radio" name="EC" value="Mde" 25
id="Mde" />
<label for="Mde">Mademoiselle</label>
</p></form> 26
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center
• Bouton checkbox: faire plusieurs sélections parmi les possibilités offertes appelés

Syntaxe : <INPUT TYPE"=checkbox" NAME="Nom" value="valeur_option" />

<form method="post" action="traitement.php">


<p>
SPORTS PREFERES : <br />
<input type="checkbox" name="sport" id="natation"
value="natation" />
<label for="natation">Natation</label><br />
<input type="checkbox" name="sport" id="foot"
value="foot" />
<label for="foot">Foot Ball</label><br />
<input type="checkbox" name="sport" id="Course"
value="Course" />
<label for="Course">Course</label>
</p>
</form>

26
27
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center
• Listes déroulante : faire un choix entre plusieurs valeurs différentes avec la balise <SELECT>. Elle a
pour attribut :
o NAME : nom de la liste
o SIZE (facultatif) dont la valeur unité (par défaut) signifie qu'on a affaire à une liste déroulante.
Sinon c'est une liste normale mais avec barre de défilement
o MULTIPLE (facultatif) : sélectionner plusieurs valeurs. Si MULTIPLE n'est pas spécifié, on ne
fait qu'un unique choix.
Il faut rajouter à <SELECT> autant de balise <OPTION> qu'il y a de choix possibles.

<form method="post" action="traitement.php">


<p> <label for="pays">Pays d’Habitation ?</label><br />
<select name="pays" id="pays">
<optgroup label="Afrique">
<option value="maroc">Maroc</option>
<option value="tunisie">TUNISIE</option>
<option value="egypte">EGYPTE</option>
</optgroup>
<optgroup label="ASIE">
<option value="quatar">Quatar</option>
<option value="em">EMIRATS ARABES
UNIS</option>
<option value="sar">ARABIE SAOUDITE</option>
</optgroup>
</select>
</p>
</form>
27
28
Partie 1
FORMULAIRES HTML 5

filalireda.wixsite.com/elearning-center

• Sélectionner automatiquement un champ :


placer automatiquement le curseur dans l'un des champs du formulaire avec l'attribut autofocus.
<input type="text" name="prenom" id="prenom" autofocus />

• Rendre un champ obligatoire


Pour qu’un champ devienne obligatoire on lui donne l'attribut required.
<input type="text" name="prenom" id="prenom" required />

 Bouton Envoyer
Une fois le formulaire rempli on l’envoie avec le bouton Envoyer.
<INPUT TYPE="submit">. Cette balise possède un attribut VALUE qui a pour valeur le texte affiché sur le
bouton.
Exemple : Code source:
Envoyer <INPUT TYPE="submit" VALUE="Envoyer" />

• Bouton Effacer
permet d’effacer et d'initialiser le formulaire.
Code source:
<INPUT TYPE="reset" VALUE="Effacer" />

28
29
STRUCTURER LA PAGE Partie 1
HTML HTML 5

filalireda.wixsite.com/elearning-center
En général, une page web est constituée par les parties suivantes : (Un en-tête, Des menus de navigation,
Différentes sections au centre, Un pied de page).

Elle fait intervenir de nouvelles balises introduites par HTML 5:


•<header> : l'en-tête
Contient généralement un logo, une bannière, le slogan du site…
<header> Contenu de l'en-tête </header>
•<nav> : principaux liens de navigation
Regroupe les principaux liens de navigation du site.
<nav> Liste des liens </nav>
•<section> : une section de page
Regroupe des contenus en fonction de leur thématique.
<section> Contenu de la section </section>
•<aside> : informations complémentaires
Conçue pour contenir des informations complémentaires au document
visualisé.
<aside> Informations Complémentaires </aside>
•<article> : un article indépendant
Contient une portion généralement autonome ou indépendante de la page
<article> Contenu de l’Article </article>
•<footer> : pied de page
Contient des informations comme des liens de contact, le nom de l'auteur,
les mentions légales, etc.
<footer> Contenu du pied de page </footer> 29
QUELQUES CARACTERES Partie 1
SPECIAUX HTML 5

filalireda.wixsite.com/elearning-center

Nom de l'accent Lettre HTML


e accent grave è &egrave;
E accent grave È &Egrave;
e accent aigu é &eacute;
E accent aigu É &Eacute;
e accent circonflexe ê &ecirc;
E accent circonflexe Ê &Ecirc;
e tréma ë &euml;
E tréma Ë &Euml;
guillemet français ouvrant « &laquo;
guillemet français fermant » &raquo;
esperluette & &amp;
inférieur < &lt;
supérieur < &gt;
guillemet double " &quot;
paragraphe § &para;
copyright © &copy;
espace blanc &nbsp;

30
31
Partie 1
CONCLUSION HTML 5

filalireda.wixsite.com/elearning-center

 Une bonne conception Web, réside dans l’équilibre entre les effets visuels
et le contenu textuel.

 Un bon site Web n’est pas celui dont on exhibe fièrement la preuve, mais
celui qui est visité par des millions de visiteurs.

31
32

Vous aimerez peut-être aussi