docBalises dans head> En-tête d`un document HTML : l`élément
download 
Plainte Transcription
Balises dans head> En-tête d`un document HTML : l`élément
SysCom
SysCom
En-tête d'un document HTML :
l'élément <head>
Balises dans
• L'en-tête, head, d'un document HTML peut contenir 5 balises :
– title - titre du document
<head>
– link - pour importer un fichier
– script - pour insérer un programme JavaScript
– style - pour définir de styles
– meta - pour définir des méta-données associées au document :
encodage, auteur, date, etc.
1
2
SysCom
SysCom
Balise "meta"
Balise "meta"
• Plusieurs formes de meta :
Exemple :
<meta charset="utf-8" />
<meta http-equiv="refresh" content="20" />
signifie que la page sera rafraîchit toutes les 20 secondes.
<meta http-equiv="nom" content="contenu" />
<meta name="nom" content="contenu" />
Exemple :
• Le contenu des attributs name, http-equiv et content
sont libres. Ils ne sont pas fixés par la DTD.
• Certaines valeurs répandues sont définies par l'usage.
<meta http-equiv="refresh"
content="10; url=a2.html" />
3
/meta/meta0_5.html
4
SysCom
SysCom
Balise "meta"
<meta name="nom" content="contenu" />
Balise "meta"
• On trouve par exemple :
• name="keywords" : fixe des mots-clés pour la page.
• name="description" : associe la page à une description.
Essentiellement utilisé par les moteurs de recherche pour
enrichir leur liste de résultats.
Les attributs name et content de la balise meta
fonctionnent en binôme :
• name nomme la méta-information et
• content fixe le contenu.
• name="robots" : indique au moteur de recherche s'il
doit indexer les mots de la page et suivre les liens.
Valeurs de content : "all" ou "none".
• name="author" : indique l'auteur de la page.
• name="expires". Valeurs de content : "never" ou "date
d'expiration"
5
6
SysCom
SysCom
Balise "meta"
Exemple :
favicon
Un favicon est une icône pour enjoliver un document dans les
navigateurs web.
Exemple :
Code :
7
8
SysCom
SysCom
Le mode d'utilisation
de ces balises évolue.
Structurer une page
• Structure sémantique d'une page :
header, footer, nav, section, article, aside.
Balises structurantes
HTML5
9
10
SysCom
SysCom
Structurer une page
• Exemple concret :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Zozor - Le Site Web</title>
</head>
<body>
<header>
<h1>Zozor</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul><li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
</ul>
</nav>
11
<body>
<header>
<!-- en-tête -->
<h1>Document minimal </h1>
</header>
<nav>
<!-- menu principal -->
</nav>
<section>
<!-- partie principale -->
</section>
<footer>
<!-- pied de page -->
<p>Copyright © Jean Dupont</p>
</footer>
</body>
<section>
<aside>
<h1>À propos de l'auteur</h1>
<p>Je suis né un 23 novembre 2005.</p>
</aside>
<article>
<h1>Je suis un grand voyageur</h1>
<p>Bla bla bla bla (texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright Zozor Tous droits réservés</p>
</footer>
</body>
</html>
exempleConcret.html
Structurer une page
• Positionnement avec CSS.
Importation du fichier "mon_style.css" :
<link rel="stylesheet" href="mon_style.css" />
• fichier "mon_style.css" :
body { width:90%;
margin-left:5%;
border:1px solid gray;
line-height:150%;
}
header {text-size:150%;
padding:0.5cm;
color:white;
background-color:gray;
}
12
SysCom
SysCom
Structurer une page
3ème Exemple : positionnement
suite fichier "mon_style.css" :
13
footer { padding:0.2cm;
color:white;
background-color:gray;
clear:left;
}
nav { float:left;
width:140px;
margin:0px;
padding:1em; /* marge interne : taille d'un caractère */
font-size:80%;
}
section {margin-left:160px;
border-left:1px solid gray;
padding:1em;
}
aside { float:right;
width:200px;
background-color:#ffdada;
border:1px solid gray;
}
exempleConcret2.html
14
SysCom
SysCom
Nouveautés
Glisser-déposer. L'attribut draggable permet de rendre un élément
déplaçable.
contenteditable. Cet attribut indique qu'une zone est éditable.
L'utilisateur peut en changer le contenu.
Autres nouvelles
balises de html5
Médias et applications web <audio> et <video>. Ces balises sont
utilisés pour les contenus multimédia.
Source :
http://www.alsacreations.com/article/lire/750-HTML5-nouveautes.html
15
Canvas (zone dessin). <canvas> permet de créer des éléments
graphiques 2D en Javascript à la volée.
16
SysCom
SysCom
audio
Balise <audio> de HTML5.
Exemple de code :
video
La balise <video> (cousine de <audio>) offre en HTML5
une solution simple, pour l'intégration d'une vidéo.
Exemple de code :
<audio controls="controls">
<source src="audio/horse.ogg" type="audio/ogg">
<video width="400" height="220" controls="controls">
<source src="audio/horse.mp3" type="audio/mpeg">
<source src="ter.mp4" type="video/mp4" />
Votre navigateur ne supporte pas le format audio.
<source src="ter.webm" type="video/webm" />
</audio>
<source src="ter.theora.ogv" type="video/ogg" />
Alternative en cas de pb
</video>
audio.html
video.html
17
18
SysCom
SysCom
HTTP: hypertext transfert protocol
Formulaires
Source pour html5 :
http://html5demo.braincracking.org/demo/input.php
19
20
SysCom
SysCom
Formulaires
21
Exemple formulaire
22
SysCom
SysCom
Création de formulaire
Balise form
<input . . . />
Balise input :
<form action="URL" method="post">
. . .
</form>
• Balise de type Bloc précédée et suivie d'un saut de ligne.
• Attributs de form :
23
24
<form action="traitement.php" method="post">
Votre pseudo
<input type="text" name="pseudo" />
<input type="submit" value="Envoyer" />
</form>
SysCom
SysCom
<input . . . />
HTML5 apporte de nombreuses fonctionnalités nouvelles permettant
de contraindre les valeurs saisis dans un input.
<input . . . />
Exemple "date" et "time"
Tous les navigateurs n'acceptent pas toutes ces fonctionnalités.
Possibles valeurs de type :
• text :
Texte
• submit : Pour envoyer le formulaire
• date :
Calendrier perpétuel.
• time :
Saisir une heure.
• number : Saisir un nombre.
• range : Slider.
• color :
Saisir une couleur.
• email : Saisir une adresse mail.
• url :
Saisir une URL.
• file :
Fichier.
<form action="testdate.php" method="post">
<input type="date" name="maDate"
value="2009-01-15" />
<input type="time" name="monHeure"
value="08:16" />
<input type="submit" value="Envoyer" />
</form>
inputDate.html
26
25
SysCom
SysCom
<input . . . />
Exemple "date" et "time"
27
Autres possibles valeurs de type :
<form action="testNumero.php" method="post">
<input type="number" name="n1" value="10"
min="8" max="12" step="2" />
0
<input type="range" name="n2" value="0"
min="0" max="10" step="2"/>
10
<input type="submit" value="Envoyer" />
</form>
inputNumber.html
SysCom
•
Pour saisir un mot de passe : type="password"
•
Pour avoir un bouton : type="button"
•
Pour effacer : type="reset"
•
Pour avoir un bouton à cocher : type="checkbox"
•
Pour les boutons multiples : type="radio"
28
SysCom
<button>...</button>
La balise button c'est une alternative à <input type="button" />
Exemple :
form3_1.html
Les autres balises
• Texte libre sur plusieurs lignes : <textarea> </textarea>
• Menu déroulant : <select> <option> </option> </select>
• Exemples :
valeurs possibles :
button, submit, reset
29
<input . . . />
30
form5.html
SysCom
Exploitation des formulaires
Un formulaire sert à saisir des données pour être exploitées par :
1) Un programme JavaScript exécuté par le navigateur,
2) Un programme externe exécuté par un serveur http.
1) Programme JavaScript :
Le navigateur comporte un interpréteur de
JavaScript.
Vous pouvez faire appel à un programme défini
dans la même page pour un traitement local des
informations saisies dans le formulaire.
Exemple :
31
Documents pareils
Programmation par Contraintes PPC Contenu - Index of
si A est une affectation no-consistante return false
si A est une affectation totale return true
sinon { /*A est une affectation partielle consistante*/
sélectionner Xi de X non-instanciée en A
pou...
