Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
6 Click
Les formulaires
to add title in
7 Les balises de structure 2
Présentation générale
3
Qu’est ce que HTML ?
Introduction
9
Les balises
Introduction
10
Les balises
Introduction
14
Casse, balise fermante et auto-fermante
16
Titres et sous-titres
Introduction
Il s'agit ici des titres qui s'afficheront dans la page web: ce sont les
en-têtes de sections ou paragraphes
Il existe six niveaux de titres d'importance décroissante (du plus grand
au plus petit en taille), un nouveau niveau provoque un passage à la
ligne, les éléments de titre étant des éléments de bloc
<h1>Titre de niveau 1</h1> : pour les gros titres du document
<h2>Titre de niveau 2</h2> : pour les sections du document
<h3>Titre de niveau 3</h3> : pour les sous-sections du document et ainsi de suite
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>
Remarque: il ne faut pas la confondre à la balise <title>, cette dernière affiche
le titre de la page dans la barre de titre du navigateur 17
Introduction
Mise en forme au niveau paragraphe et phrase
19
Les liens hypertextes, Les listes
20
Lien hypertexte: lien externe
Introduction
22
Lien hypertexte: lien externe
Introduction
<a href="mailto:al.capone@gmail.com">courriel</a>
25
Les listes
Introduction
27
Les tableaux
Introduction
28
Exemple
Introduction
29
Fusion de cellules
Introduction
30
Forme du tableau
Introduction
légende
cellule d'entête
cellules multi-colonnes
et multi-lignes
31
Diviser un tableau
Introduction
32
Les images
Introduction
Formats reconnus : GIF (pour les images animées), JPEG (pour les
photos), PNG (pour les illustrations)
Pour afficher une image on utilise la balise img (pas de retour à la ligne)
<img src= "CheminImageàAfficher" alt="description" />
L'attribut src (obligatoire) permet de spécifier l’emplacement du
fichier image
L’attribut alt est facultatif permet d’afficher un texte alternatif à
l’image lorsque l’image, pour différentes raisons, n'apparaît pas
L'attribut title permet d'afficher une infobulle au survol de l'image
Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
33
Les images
Introduction
34
Balises de contenu embarqué
35
Les nouvelles balises
36
Syntaxe minimale
38
Les attributs
Attribut Description
source utilisé pour spécifier plusieurs sources vidéos, c’est au navigateur
de choisir le format pris en compte
width /height définit la largeur/hauteur de la vidéo
controls booléen qui permet d’afficher les contrôles visuels du lecteur vidéo
(lecture, arrêt, avancement et volume)
autoplay permet la lecture automatique du fichier vidéo
loop permet de jouer en boucle le fichier vidéo
preload permet de télécharger le fichier vidéo au chargement de la page,
par défaut valeur none, valeur auto pour chargement automatique
poster permet d’afficher une image en attendant le téléchargement de la
vidéo 39
Les formats pris en charge
41
La balise <audio>
Attribut Description
source utilisé pour spécifier plusieurs sources audio, c’est au
navigateur de choisir le format pris en compte
controls booléen qui permet d’afficher les contrôles visuels du lecteur
audio (lecture, arrêt, avancement et volume)
autoplay permet la lecture automatique du fichier audio
loop permet de jouer en boucle le fichier son
preload permet de télécharger le fichier audio au chargement de la
page, par défaut valeur none, valeur auto pour chargement
automatique
43
Les formats pris en charge
La balise <figure> est utilisée pour regrouper des éléments comme des
images et des vidéos
La balise <figcaption>, est utilisée avec la balise <figure> permet de
rajouter une légende aux éléments regroupés
<figure>
<img width="200" src="images/horse.jpg" alt = "Un cheval"/>
<figcaption> Cliquez pour entendre le son du cheval!
<audio controls>
<source src="audios/horse.ogg" type="audio/ogg" />
<source src="audios/horse.mp3" type="audio/mp3" />
ne prend pas en charge les formats audio proposés
</audio>
</figcaption>
45
</figure>
Les formulaires
46
Les formulaires
Introduction
Un formulaire est un ensemble de composants (appelés contrôles ou
champs) qui permettent à l'utilisateur (le client) d'entrer des données,
d'exprimer des choix puis d'émettre ces données vers un serveur
Exemples typiques d’utilisation de formulaire: login, formulaire de
contact, etc.
47
Les balises d’un formulaire
Déclaration
Introduction
La balise <form> délimite le contenu du formulaire
Attributs principaux ( <form action=… method=… name=…>
name : nom attribué au formulaire
action : définit le script à exécuter lorsque l’utilisateur validera le
formulaire : url vers laquelle envoyer les données saisies (mailto :
ou adresse d’une page php qui va traiter les données)
method: définit la méthode utilisée pour envoyer les données
<html >
<body >
<form method=" " action="script.php" name="formulaire">
URL du script où les données du formulaire
</form> doivent être soumis pour traitement
</body > get les données envoyées seront visibles dans l’URL
</html> post les données seront cachées à privilégier 48
Contenu d’un formulaire
Introduction
<html >
<body >
<form action="script.php">
<fieldset> Permet de regrouper des champs de formulaire
ayant une sémantique proche (avec une bordure)
<legend></legend> Permet d’ajouter un titre au groupe de champs
<p>
Entoure
chaque
champ du
</p> formulaire
</fieldset>
</form>
pas de champs de formulaire "en vrac"
</body >
</html>
49
Les balises
La balise <input>
Introduction
L’attribut type permet de préciser le type du champ à utiliser et name permet de
spécifier un nom au champ pour qu’on puisse récupérer sa valeur
TYPE SYNTAXE
text <input type=text name="nom champ" size="nb.car." maxlength="nb.max.car."
value="val.prédéf."> : value pour donner la valeur originale
password <input type=password name="nom champ" size="nb.car."
maxength="nb.max.car." value="val.prédéf.">
checkbox <input type=
type=checkbox name="nom
="nom champ" value="valeur retournée" {{checked}> }>
checked rend la case cochée initialement. la paire nom/valeur envoyée si la case
est cochée
radio <input type=radio name="nom champ" value="valeur retournée" {checked}> :
tous les boutons doivent avoir le même name. un bouton et un seul peut être
pressé.
submit <input type=submit value="nom bouton" > : value pour changer le titre du bouton
reset <input type=reset value="nom bouton"> : value pour changer le titre du bouton
50
La baliseettextarea
Introduction
Balises attributs
Chaque champ du formulaire (autre qu’un bouton d’envoi) doit posséder
une étiquette (balise <label> … </label> pour nommer un champ)
La balise label comporte un attribut for qui doit prendre pour valeur la
valeur de l’attribut id du champ auquel est associé le label
L'attribut title permet d’associer une info-bulle à un champ
L'attribut value (autre que textearea) donne une valeur par défaut au champ
L'attribut required permet de rendre obligatoire la saisie d’un champ
L'attribut placeholder permet de donner une indication de ce que devrait
contenir un champ input : s’efface dés que l’utilisateur active le champ
L'attribut tabindex="num" permet de définir l'ordre de sélection des
champs d'un formulaire lorsque l'on utilise la touche tab
<p> <label for="nom">Quel est votre nom ?</label>
<input type="text" name="nom" id="nom" tabindex="1" />
</p> 51
Les
Casebalises
à cocher
Introduction
Une case (une option; un input)
On peut pré-cocher avec checked="checked"
Plusieurs cases à cocher, toutes peuvent être cochées
Les cases à cocher peuvent avoir un attribut name distincts, ou identique
<label>Vos Options :</label>
<input type="checkbox" id="mus" name="option" value="Musique">
<label for ="mus">Musique</label>
<input type="checkbox" id="des" name="option" value="Dessin">
<label for ="des">Dessin</label>
52
Les balises
Bouton d’option
Introduction
Une case (une option; un input)
On peut pré-cocher avec checked="checked"
Un seul choix possible parmi tous les boutons d’option
La valeur (value) est importante : c’est elle qui est renvoyée au serveur
Pour que le navigateur comprenne que des éléments forment un groupe, il
faut leur donner le même attribut name
<label>Donnez votre deuxième langue :</label>
<input type="radio" id="fr" name="langue"
="langue" value="Français">
<label for ="fr">Français</label>
<input type="radio" id="an" name="langue" value="Anglais">
<label for ="an">Anglais</label>
53
Les balises
Balises textarea et select
Introduction
La balise <textarea>
< </textarea> permet de créer une zone de texte
de plusieurs lignes (multiligne)
l’attribut rows permet d’indiquer le nombre de lignes
l’attribut cols permet d’indiquer le nombre de colonnes
l’attribut readonly permet de préciser que la zone est en lecture seule
<label for="adresse">Quelle est votre adresse?</label>
<textarea name="adresse" Cols="25" Rows="3" id="adresse">
</textarea>
La balise <select> </select> permet de créer une liste de choix ou
d'options parmi lesquelles l'utilisateur doit opérer un choix (unique ou
multiple), chaque élément est décrit par la balise <option>
54
La balise
Types textarea
de listes
Introduction
listes déroulantes
<select name = "nom champ" size="nb.articles">
<option selected> article_menu
………..
</select>
listes à ascenseur
Physique
<select name = "nom champ" size="nb.articles" multiple> Informatique
Philosophie
<option> article_liste Mathématiques
Langues
………….. SVT
Histoire
</select> EPS
57
99.999.999
http://www.monsite.tn
Nouveaux attributs type de la balise <input/> Html5
Nombre : type="number" permet d’ajouter un champ
numérique
Intervalle : type="range" permet de sélectionner un nombre
avec un curseur
Date : type="date" permet de sélectionner le jour, le mois
et la date
Il existe d'autres types de champs semblables à date :
datetime (date et heure), month (mois), week
(le numéro de la semaine) et time (heure et minutes)
58
Autres attributs
61
Les balises de structure
Balise Description
header Pour le bloc d'entête, il peut y avoir un header pour la page, un header par
section, par article, etc. . L’en-tête de la page contiendrait habituellement un
titre , un logo,…, l’en-tête de l’article contiendrait, le titre de l’article, l’auteur,
etc.
footer Elle regroupe les éléments de pied de page ou d’une longue section ou d’un
long article. Le pied de page contiendrait un lien de contact, un copyright, etc.
main Pour le bloc de contenu principal. Il contient le contenu spécifique à une page.
Il ne peut y avoir qu'un seul <main> dans une page. 62
Les balises de structure
Balise Description
nav Contenant une série de liens hypertextes pour la navigation sur le site (menu
de navigation), elle peut être placée à gauche au dessous du header
aside Pour le bloc latéral. Section dont le contenu n’est pas nécessairement
directement lié au contenu principal qui l'entoure, mais pour fournir des
informations supplémentaires au contenu
article Définit une partie indépendante du document qui possède une identité à
part, comme un commentaire, un article de blog composé d’un titre, d’une
illustration et d’un texte
section Détermine une partie du contenu de la page se rapportant à un thème
déterminé 63
Exemple
<header id="entete">
<h1>Balises sémantiques HTML5 et le modèle Flexbox</h1>
<nav>
<ul>
<li><a href="">Lien1</a><br></li><li><a href="">Lien2</a></li>
</ul>
</
</nav>
</header>
<div class="row">
<main>
<article><h2>A propos de cette page</h2>
<p>Les balises de structure et le modèle FlexBox</p>
</article> 64
Exemple
<article>
<h2>Testez!</h2>
<p>Testez cette page:</p>
</article>
</main>
<aside>
<h2>HTML</h2>
<p>Signifie Hypertext Markup Language. La norme actuelle
est HTML5.</p>
</aside>
</div>
<footer>Février, 2017</footer>
65