1 html - xhtml florence petit université paris-est marne-la-vallée 24 novembre 2009
TRANSCRIPT
![Page 1: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/1.jpg)
1
HTML - XHTML
Florence Petit
Université Paris-Est Marne-la-Vallée
24 novembre 2009
![Page 2: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/2.jpg)
2
Page HTML et navigateur
Une page de site web est souvent un fichier HTML (extension .htm ou .html).
Le fichier est écrit en code HTML ou XHTML (code source).
Le fichier comporte du texte et du marquage de texte. Il peut être visualisé dans un navigateur. Un navigateur est un logiciel qui :
- reconnaît le marquage (X)HTML grâce à un analyseur syntaxique (ou Parser)
- le transcrit en document structuré et l'affiche. Un navigateur est un agent-utilisateur (user-agent).
![Page 3: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/3.jpg)
3
(X)HTML : HTML et XHTML
Langages standards de documents pour le web• HTML : HyperText Markup Language
Langage de marquage hypertexte• XHTML : eXtensible HyperText Markup Language
Langage de marquage hypertexte extensible
Langages avec des commandes sous forme de balises Balise (tag) : élément encadré de chevrons
<élément>texte</élément>
![Page 4: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/4.jpg)
4
HTML : origine
Créé en 1989, publié en 1991par Tim Berners-Lee au CERN
Issu du métalangage SGML né en 1986 Famille des langages de marquage (ou balisage) :
HTML, XHTML, SGML, XML…
![Page 5: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/5.jpg)
5
World Wide Web Consortium
En abrégé : W3C http://www.w3.org Ensemble d'organisations, instituts et entreprises
intervenants dans le Web Créé en octobre 1994 (directeur : Tim Berners-Lee) Missions :
• Conduit les développements du web, gère son évolution et garantit son interopérabilité
• Définit les spécifications du web ("recommandations")
• Assure la promotion des technologies du web : HTML, CSS, XML, RDF, PNG, SVG, SOAP…
![Page 6: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/6.jpg)
6
Evolution du HTML vers le (X)HTML
1991 : HTML 1995 : HTML 2 1996 : CSS 1 1997 : HTML 3.2 (pas de v.3) 1997 : HTML 4 (HTML + CSS) 1998 : CSS 2 1999 : HTML 4.01
norme ISO/IEC 15445:2000 2000 : XHTML 1
Reformulation du HTML en XML 2001 : XHTML 1.1
XHTML 1 strict) 2009 : Vers (X)HTML5 et non XHTML2
Evolutiondes
navigateurs
IESafari
FireFoxMozilla
SeaMonkey ...
![Page 7: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/7.jpg)
7
(X)HTML et CSS
(X)HTML Structure du contenu
•titres, sous-titres•paragraphes•listes•tableaux•liens•...
CSS Mise en forme
•couleurs•polices, taille•alignement de texte•position des éléments•...
![Page 8: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/8.jpg)
8
(X)HTML : balise et élément
• Exemples :<p>Texte d'un paragraphe</p><h2>Titre d'un paragraphe d'en-tête</h2>
• Balise• balise ouvrante : <element>• balise fermante : </element>
• Elément : terme employé dans 2 sens :• nom de la balise
ex : élément p• unité structurante du document
balise ouvrante + contenu + balise fermante
![Page 9: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/9.jpg)
9
Emboîtement sans Chevauchement
<p> texte sans gras<b>texte en gras </b></p>
<p><b> texte en gras</b>texte sans gras</p>
NON
OUI
OUI
<b> <i> texte gras italique </b> </i>
<b> <i> texte gras italique </i> </b>
<p> texte sans gras <b> texte gras </p>
<p> texte gras </b> texte sans gras </p>
NON
![Page 10: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/10.jpg)
10
Elément et attributs
Attribut : paramètre précisant un élément <element attribut1="valeur1" attribut2="valeur2">
...• </element>
Exemples : • <p>Texte du paragraphe</p>• <p id="intro">Texte du paragraphe</p>
Placé dans la balise d'ouverture, mais jamais dans la balise de fermeture
Ordre des attributs sans importance syntaxique.
![Page 11: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/11.jpg)
11
Attributs génériques
S'appliquent à (presque) toutes les balises id : identifiant unique d'un élément dans le document class : pour associer une classe (une "catégorie") à
l'élément title : titre (affiché souvent sous forme de post-it) Choix des valeurs d'id, class et name :
• Lettre (min ou maj) au débutpuis lettres ou chiffres ou signes - _ : .
• Ne pas débuter par un chiffre• Pas d'espace !
Exemple : <p id="R1" class="reponse" title="Question n°1 du sondage">….</p>
![Page 12: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/12.jpg)
12
XHTML et élément vide
Elément avec contenu :<element>contenu</element>
Elément vide en HTML :<element>ou<element></element>
Elément vide en XHTML :<element / > Exemples :<hr /><img alt="..." src="..." />
Exemples : br, hr, img, input, meta…
Simplification de l'écriture :
<element></element>
<element /element>
<element />
![Page 13: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/13.jpg)
13
Différences XHTML-HTML
Eléments et attributs en minuscules<a href="......."> au lieu de <A HREF=".....">
Balise de fermeture obligatoire (élément non vide) <p>…</p> <li>…</li> <td>…</td>
Elément vide <br /> au lieu de <br> ou <br></br> Guillemets " ..." (ou simple quote '...')
autour des valeurs d'attribut : attribut="valeur"<td colspan="2"> au lieu de <td colspan=2>
Valeur d'attribut obligatoirechecked="checked" au lieu de checked
id remplace l'attribut name :- dans a, applet, form, frame, iframe, img, map,…- mais name reste utilisé dans input, select…
![Page 14: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/14.jpg)
14
Balises et attributs généraux
Structure générale DTDBalises de commentaireAttributs génériques
![Page 15: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/15.jpg)
15
Structure simplifiée d'un document HTML
<html>
<head>
<title>Taper le titre</title>
</head>
<body>
Taper ici le contenu du document…
</body>
</html>
![Page 16: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/16.jpg)
16
DTD ou doctype
DTD ou "doctype" : Document Type DefinitionDéclaration de Type de Document : grammaire du langage (éléments, attributs)
Détail sur :http://www.alsacreations.com/article/lire/560-dtd-html-xhtml-comment-choisir.html
![Page 17: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/17.jpg)
17
(X)HTML et DTD
DTD HTML 4.01• Strict
ni frame (cadre), ni d'éléments dépréciés.• Transitional ou loose
éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….)
• Frameset accepte frames et éléments dépréciés
DTD XHTML 1.0• Strict
ni frame (cadre), ni d'éléments dépréciés.• Transitional
éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….)
• Frameset accepte frames et éléments dépréciés
DTD XHTML 1.1• correspond + ou - au XHTML1.0 Strict
![Page 18: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/18.jpg)
18
Structure d'un document XHTML1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>……</title> </head> <body>….</body>
</html>
![Page 19: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/19.jpg)
19
Structure d'un document XHTML1.0 strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>……</title> </head> <body>….</body>
</html>
![Page 20: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/20.jpg)
20
Structure d'un document HTML4 strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>……</title>
</head>
<body>….
</body>
</html>
![Page 21: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/21.jpg)
21
Structure d'un document HTML4 transitionnel
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>……</title>
</head>
<body>….
</body>
</html>
![Page 22: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/22.jpg)
22
A quoi sert la DTD ?
à pouvoir vérifier le code (X)HTML au validateur
Avec DTD, les navigateurs appliquent le rendu correspondant à la DTD (mode Standards).
Sans DTD reconnu, les navigateurs (IE, Firefox, Opera…même de dernière génération) passent en mode Quirks (bizarreries) ou mode compatibilité, afin de pouvoir interpréter les "vieux" codes.
![Page 23: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/23.jpg)
23
DTD et validation
Un validateur permet de vérifier la syntaxe d’un document HTML (X)HTML http://validator.w3.org/
![Page 24: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/24.jpg)
24
Commentaire de code
<!-- tapez ici le commentaire -->
<!-- tapez ici le commentaire sur plusieurs lignessi besoin -->
<!-- tapez ici le commentaire sur plusieurs lignessi besoin
-->
![Page 25: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/25.jpg)
25
Balises situées dans l'en-tête
<head>...</head>
![Page 26: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/26.jpg)
26
<head>…</head>
Située dans la partie <html>…</html> Située avant la partie <body>…</body> Partie qui contient des méta-informations
• titre de la fenêtre du document• jeu de caractères utilisé• mots-clés• description (résumé) du document• ….
![Page 27: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/27.jpg)
27
Codage des caractères
Code ASCII • -> sur 7 bits, 128 caractères (dont 95 affichables)• -> Pas de caractères diacritiques..
Jeux de caractères (charsets) • -> ASCII étendu• -> sur 8 bits (256 caractères )
Plusieurs jeux de caractères selon la langue et ses accents (ex du latin 1 : iso-8859-15) …
• -> UTF8 (sur 1 ou 2 octets)- 0 devant le codage des caractères ASCII- 1 + 15 bits (32768 caractères) plus long à traiter, plus de volume
![Page 28: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/28.jpg)
28
Entités et caractères spéciauxCaractère entité valeur décimale< < <> > >» » » (espace insécable)  & & &" " "Ê Ê Êû û ûè è èé é éï ï ïç ç çñ ñ ñœ œ œ• · ·© © ©€ € €
Indépendance
texte / plateforme
![Page 29: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/29.jpg)
29
Déclaration du jeu de caractères
Doit correspondre à l'encodage du fichier (cf. éditeur de texte)
Caractères latins (Europe occidentale)<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
Caractères latin avec symbole €, œ... <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
Caractères Unicode<meta http-equiv="content-type" content="text/html;charset=utf-8" />
![Page 30: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/30.jpg)
30
Les problèmes d’accents…
Document encodé en UTF-8 lu en ISO-8859-15caractères accentués -> é
Document encodé en ISO-8859-15lu en UTF-8caractères accentués -> ?
![Page 31: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/31.jpg)
31
Problème du saut de ligne dans les éditeurs
Caractères ASCII non imprimables, de contrôle CR (Carriage Return ou retour chariot) : code 0D (13)LF (Line Feed ou saut de ligne) : code 0A (10)
Passage à la ligne dans un fichier texte :UNIX : LF (\n caractère d'échappement New line)Windows : CR LF (\r\n)Mac OS (<X) : CR
Notepad ne sait pas interpréter un LF seul.Wordpad sait interpréter un LF seul.
Lors du transfert en mode ASCII, une conversion est effectuée, alors que lors du transfert binaire, rien n'est modifié dans le fichier.
![Page 32: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/32.jpg)
32
Titre de document
<title>Ceci est le titre</title> placé dans la partie <head></head> placé après la déclaration du jeu de caractères utilisé titre de la fenêtre du navigateur signets (favoris, marque-pages, bookmarks). pris en compte par les moteurs de recherche
![Page 33: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/33.jpg)
33
Balises meta name
<meta name="description" content="Sam-bot : vente en gros de chaussures à prix très compétitifs" />
<meta name="keywords" content="Sam-bot, bottes, SAM BOT, chaussures, botte" />
<meta name="author" content="Jean Dupont" />
<meta name="DC.Date.modified" content="2003-04-27" /> cf.Dublin Core
<meta name="robots" content="index, follow" />
<meta name="robots" content="noindex, nofollow" />
![Page 34: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/34.jpg)
34
Balises meta et langues
<!-- Français --> <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
<!-- Américains -->< meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
<!-- Anglais -->< meta name="keywords" lang="en" content="holiday, Greece, sunshine" />
![Page 35: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/35.jpg)
35
meta http-equiv
Rafraîchissement de la page
<meta http-equiv="refresh"
content="60" /> Redirection de page
<meta http-equiv="refresh"
content="5 ; url=http://www.truc.fr/fic.htm" />
![Page 36: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/36.jpg)
36
Feuille de style CSS externe liée: link
Pour tous périphériques de sortie
<link rel="stylesheet" type="text/css" href="nomfichier.css" />
![Page 37: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/37.jpg)
37
Feuilles de style CSS adaptées
Pour différents périphériques de sortie<link rel="stylesheet" type="text/css" href="nomdufichier1.css" media="screen" /> <link rel="stylesheet" type="text/css" href="nomdufichier2.css" media="print" /><link rel="stylesheet" type="text/css" href="nomdufichier3.css" media="braille" /> <link rel="stylesheet" type="text/css" href="nomdufichier4.css" media="handheld" />
![Page 38: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/38.jpg)
38
Balises situées dans le corps
<body>...</body>
![Page 39: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/39.jpg)
39
<body>…</body>
Doit contenir au moins un élément bloc Ne doit pas contenir directement d'éléments inline Attributs dépréciés remplacés par les styles CSS
• bgcolor (fond)• background (image de fond)• color (texte normal)• link (lien non cliqué)• vlink (lien visité ou cliqué)• alink (lien actif, au moment du clic)
![Page 40: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/40.jpg)
40
Elément bloc / Elément en ligne (in-line)
BlocPlacés par défaut les uns en dessous
des autres. -> structure
div, h1,… h6, p, ul, ol, dl, dt, dd, form, table, tr, blockquote, pre…
<div id="i1">Une boîte jaune </div>
<div id="i2"> >Une boîte verte </div>
En ligne
Placés par défaut les uns à côté des autres.
- Non remplacé (sans dimension): span, em, strong, a, q, abbr, acronym…
- Remplacé (avec dimensions): img, input, textarea, select, object
<span id="i1">Une boîte jaune </span>
<span id="i2"> >Une boîte verte </span>
![Page 41: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/41.jpg)
41
Balises de textes en-ligne
![Page 42: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/42.jpg)
42
Balises physiques / Balises logiques
Balises physiques• <i>texte en italique</i>• <b>texte en gras (bold) </b>
Balises logiques (sémantiques)• <em>emphase (italique) </em>• <strong>renforcement (gras) </strong>
![Page 43: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/43.jpg)
43
Balises physiques de texte<b> gras </b>
<i> italique </i>
<big> gros </big>
<small> petit </small>
<tt> police à chasse fixe </tt>
Balises dépréciées à éviter
<strike> rayé </strike>
<s> rayé </s>
<u> souligné </u>
Balises propriétaires à éviter
<marquee>texte défilant</marquee>
<blink>texte clignotant</blink>
![Page 44: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/44.jpg)
44
Balises logiques de texte<span>portion de texte, texte en-ligne neutre</span> <abbr title="Base de Données">BD</abbr> <acronym title="Objet Volant Non Identifié">OVNI</acronym> <em>mise en évidence (italique)</em><strong>forte mise en évidence (gras)</strong><sub>indice</sub> <sup>exposant</subp> <q cite="source">Brève citation en ligne</q><cite>source de la citation</cite><bdo dir="rtl">texte de droite à gauche</bdo><code>exemple de code (police fixe)</code><dfn>définition (italique)</dfn> <kbd>entrée clavier (police fixe)</kbd><samp>caractères littéraux (police fixe)</samp><var>nom de variable (italique)</var>
![Page 45: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/45.jpg)
45
Balises logiques de ligne
Au survol : Légende de l'abréviation ou de l'acronyme
![Page 46: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/46.jpg)
46
Balises "inline" de type remplacées
• Images• Objets• Applet
![Page 47: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/47.jpg)
47
Image
<img src="URL" alt="texte alternatif" />
Attributs possibles :
width ="300" largeur en pixels
height ="200" hauteur en pixels
alt="" s'il n'y a pas de texte alternatif
URL : en général, chemin et nom du fichier
Mettre la taille réelle de l'image améliore le temps d'affichage
Eviter de redimensionner l'image dans le code HTML car son poids réel reste le poids du fichier.
Attributs dépréciés, remplacés par CSS :
bordervspace
hspace
align
![Page 48: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/48.jpg)
48
Formats d'images
Format Nbcouleurs
max
Compression Nb couleurs de transparence
Animation
GIF 256 Sans perte 1 Oui
PNG 16,7
millions
Sans perte 256 Non
JPG 16,7
millions
Avec perte 0 Non
![Page 49: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/49.jpg)
49
Carte-image réactive côté client
Insertion de l'image
<img src ="url" usemap="#nomcarte" alt="…." />
Description de la carte réactive
<map name="nom_carte" id="nom_carte">
<area href="url" shape="rect" coords="x1,y1,x2,y2" alt="t1" />
<area href="url" shape="circle" coords="x,y,r" alt="t2" />
<area href="url" shape="poly" coords="x1,y1,…,x3,y3" alt="t6" />
</map>
y1x1
x2,y2x,y
r
En cas de superposition, la première zone définie l'emporte.
![Page 50: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/50.jpg)
50
Balises situéesdans le corps de texte
Mise en forme
- saut de ligne
- ligne horizontale
![Page 51: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/51.jpg)
51
Saut de ligne <br />
Ce texte est <br /> à la ligne
Eviter <br> et <br> </br>
Attribut déprécié (à remplacer par CSS) :<br clear="all|right|left" />
Ce texte est à la ligne
<br / >
avec effacement à gauche
![Page 52: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/52.jpg)
52
Ligne horizontale
<hr />
Attributs dépréciés :
width
size
align
noshade
color
![Page 53: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/53.jpg)
53
Balises de blocs de texte
p
h1 à h6
div
blockquote
pre
![Page 54: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/54.jpg)
54
Principales balises de blocs
<p>paragraphe</p> <hn>en-tête ou titre</hn> avec n de 1 à 6 <div>division de texte en bloc "neutre"</div> <blockquote>Bloc de citation</blockquote> <pre>texte préformaté</pre>
Les navigateurs mettent par défaut des marges autour de certains éléments de blocs : p, hn…
![Page 55: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/55.jpg)
55
Les en-têtes hn
<h1>texte de niveau 1 </h1>
<h2>texte de niveau 2 </h2>
<h3>texte de niveau 3 </h3>
<h4>texte de niveau 4 </h4>
<h5>texte de niveau 5 </h5>
<h6>texte de niveau 6 </h6>
![Page 56: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/56.jpg)
56
Texte préformaté
<pre>Bloc de texte préformaté</pre> Police à chasse fixe Saut de ligne conservé Eviter les tabulations Supporte CSS <span> <a>
![Page 57: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/57.jpg)
57
Les listes
liste non ordonnée (à puce)
liste ordonnée (numérotée)
liste de définition
![Page 58: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/58.jpg)
58
Les listes
<ul>liste à puce<li>Terme 1</li><li>Terme 2</li>
</ul>
Liste à puce• Terme 1• Terme 2
Liste numérotée1. Terme 12. Terme 2
<ol>liste numérotée<li>Terme 1</li><li>Terme 2</li>
</ol>
•Attributs dépréciés, à remplacer par CSS<ul type="disc|square|circle"><ol start="3" type="1|I|A|a">•Les navigateurs mettent par défaut une marge autour des listes
![Page 59: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/59.jpg)
59
Listes emboîtées (nested)
Une liste peut être incluse dans une autre.<ul>
<li>Asie</li><li>Europe
<ol><li>France</li><li>Espagne</li>
</ol></li><li>Amérique</li>
</ul>
ne pas mettre ici le </li>
mais
à la fin de la liste imbriquée
![Page 60: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/60.jpg)
60
Liste de définition
<dl>
<dt>Terme 1</dt>
<dd>Description du premier terme.<br />La description peut continuer à la ligne suivante.
</dd>
<dt>Terme 2</dt>
<dd>Description du 2e terme. </dd>
</dl>
Attribut déprécié : <dl compact="compact">
Terme 1Description du premier terme.La description peut continuer à la ligne suivante.
Terme 2Description du 2e terme.
![Page 61: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/61.jpg)
61
Utilisation des blocs et des id/class
![Page 62: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/62.jpg)
62
Utilisation de "div" : ni trop, ni trop peu
Exemple 1<p class="c1">....</p><p class="c1">....</p><p class="c1">....</p><p class="c1">....</p>
Exemple 2<div id="menu1"><ul><li>item1</li><li>item2</li></ul></div>
Exemple 1 amélioré <div class="c1"><p>....</p><p>....</p><p>....</p><p>....</p></div>
Exemple 2 amélioré<ul id="menu1"><li>item1</li><li>item2</li></ul>
![Page 63: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/63.jpg)
63
Utilisation des "class" et "id" : ni trop, ni trop peu
Exemple 3<p><a name="chap1" id="chap1"></a>Chapitre 1</p>
Exemple 4<ul><li class="c1">....</li><li class="c1">....</li><li class="c1">....</li><li class="c1">....</li></ul>
Exemple 3 amélioré<p name="chap1" id="chap1">
Chapitre 1</p>
Exemple 4 amélioré<ul class="c1"><li>....</li><li>....</li><li>....</li><li>....</li></ul>
![Page 64: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/64.jpg)
64
Tableaux
• table• tr• th• td
![Page 65: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/65.jpg)
65
Tableau simple : <table>, <tr>, td>
<table> <tr> <td>Langues</td>
<td>anglais</td><td>espagnol</td><td>italien</td>
</tr> <tr>
<td>Nb</td> <td>50</td><td>10</td><td>10</td>
</tr> </table>Attributs valides
• colspan• rowspan
Attributs dépréciés, remplacés par style CSS : • align, valign, border, bgcolor, cellspacing, cellpadding
Langues anglais espagnol italien
Nb 50 10 10
![Page 66: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/66.jpg)
66
Tableau avec résumé, légende, en-têtes
<table summary="Mettre un résumé pour les mal-voyants, etc."><caption>Légende du tableau</caption> <tr>
<th>langues</th><th>anglais</th><th>espagnol</th><th>italien</th>
</tr> <tr> <th>Nb</th>
<td>50</td><td>10</td><td>10</td>
</tr> </table>
Langues anglais espagnol italien
Nb 50 10 10
Titre du tableau
La balise <caption> se met juste après la balise <table>
Les navigateurs interprète en général le contenu de la balise d'en-tête de tableau
<th> en le mettant en gras centré
![Page 67: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/67.jpg)
67
Tableau à groupe structurel de lignes
•<table>•<table>
<thead> <tr> <th>Mois</th> <th>Montant</th> </tr>• <tr>
<th>-</th> <th>en euros</th> </tr> </thead> <tbody> <tr> <td>Janvier</td> <td>100</td> </tr> <tr> <td>Février</td> <td>80</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>180</td> </tr> </tfoot></table>
Mois Montant
- En euros
Janvier 100
Février 80
Total 180
Ce tableau est mis en forme en associant des styles CSS aux <thead> et <tfoot>
- thead en bleu gras
- tfoot en italique gras
![Page 68: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/68.jpg)
68
Tableau : <col />
•Exemple en XHTML/CSS
•<table>• <col id="nom" /> • <col class="note" /> • <col class="note" />•<tr>…</tr>…•</table>
Nom Note1 Note2
Lise 06 15
Marc 10 11
• Exemple avec style en ligne
• <table>• <col > • <col style="width:50px" />• <col style="width:120px" span="2"
• <tr>…</tr>…• </table>
![Page 69: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/69.jpg)
69
Tableau à groupe structurel de colonne
•<table>•<colgroup />•<colgroup>• <col span="2" /> •</colgroup>•<colgroup />•<thead>
<tr>…</tr></thead>•<tfoot> <tr>…</tr></tfoot>•<tbody><tr>…</tr><tr>…</
tr></tbody>•</table>
Nom Note 1 Note2 moyenne
Dupont 12 16 14
![Page 70: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/70.jpg)
72
Syntaxe :
<a href="URL">lien hypermédia
</a>
Si la source du lien est une image
<a href="URL" ><img src="image.gif" alt="..." />
</a>
Lien
Lien hypermédia Cible 1
Cible 2
![Page 71: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/71.jpg)
73
Les protocoles
port protocole désignation
80 http:// Web
443 https:// Web sécurisé
file:// Fichier local
21 ftp:// Téléchargement
70 gopher:// Gopher
23 telnet:// Connexion distante
25 mailto: Courrier électronique
nntp:// News nntp
119 news: Forums
![Page 72: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/72.jpg)
74
Lien vers adresse électronique
<a href="mailto:[email protected]" >M'écrire
</a>
<a href="mailto:[email protected]?subject=.........."> M'écrire
</a>
![Page 73: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/73.jpg)
75
Lien vers un site webLien vers un site web<a href="http://www.univ-mlv.fr"> site de l'université</a>--> affiche la page par défaut du serveur index.htm, index.html, default.htm, default.html (selon le serveur)
Lien vers un document spécifique du site web <a href="http://www.univ-mlv.fr/dossier/cible.html">page du site de l'université</a>
remarque : Les noms de dossiers et de fichiers sont sensibles à la casse.
Ouverture du document dans une nouvelle fenêtre<a href="http://www.univ-mlv.fr" target="_blank">site de l'université</a>
![Page 74: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/74.jpg)
76
Lien interne au site : adresse relative
Par rapport au document courant
<a href="chemin-doc/cible.htm">lien</a>
Exemples (avec source dans WWW/dossier1/dossier2/page.htm)
<a href="cible.htm">lien</a>
<a href="./cible.htm">lien</a>
<a href="dossier2/cible.htm">lien</a>
<a href="../cible.htm">lien</a>
<a href="../../cible.htm">lien</a>
<a href="../dossier2/cible.htm">lien</a>
Par rapport à la racine du site
<a href="/chemin-racine/page.htm">lien</a>
Exemples à UPE-MLV
<a href="/~login/dossier1/dossier2/cible.htm">lien</a>
WWW
![Page 75: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/75.jpg)
78
Adresse relative au documentWWW
langues
info
espagnol
anglais
bd
access.htm
sgbd.htm
ciudad.htm
index.htm
home.htm
"home.htm"
"../espagnol/ciudad.htm"
city.htm
"../../index.htm"
"info/bd/access.htm"
liste.htm
"langues/liste.htm"
ordi.htm
"../liste.htm"
![Page 76: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/76.jpg)
79
Lien vers emplacement spécifique : Identifiant de fragment
Vers chapitre 1Vers chapitre 2…
Chapitre 1Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Chapitre 2
Chapitre 2Et bla bla bla blaEt bla bla bla bla
Chapitre 3
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Pour faire le lien :
<a href="#chap2">Vers chapitre 2</a>
A l'endroit donné, on place un identifiant de fragment :
<h1><a id="chap2" name="chap2"> Chapitre 2</a><h1>......
<h1 id="chap3">Chapitre3</h1>
Le 1er caractère est une lettre (maj ou min) suivie facultativement de lettres, chiffres et - (tiret) _ (underscore) : (deux-points) . (point)
![Page 77: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/77.jpg)
80
Lien vers un identifiant de fragment
emplacement spécifique dans un document marqué par une étiquette nommé identifiant de
fragment• <a href="URL#label">• Lien hypertexte• </a>
• <a href="dossier/page2.htm#label">• Lien hypertexte• </a>
![Page 78: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/78.jpg)
83
Formulaire : exemple
![Page 79: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/79.jpg)
84
Formulaire : structure générale
<body>
...
...<form method="…" action="...">
...... ...... ......
<input type="submit" value="Envoyer">...
</form>... ...
</body>
2 méthodes : "get" ou "post"
Ex : action="mailto:[email protected]"action="mapage2.php"
éléments du formulaire
![Page 80: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/80.jpg)
85
Formulaire avec regroupement
<form method="..." action="..."> <fieldset>
<legend>légende de la partie 1
</legend>partie avec textes et éléments de formulaire
</fieldset>
<fieldset><legend>
légende de la partie 2</legend>partie avec textes et éléments de formulaire
</fieldset>....
</form>
![Page 81: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/81.jpg)
86
Zones de saisie de texte
Zone de saisie
<input type="text" name="adresse"
size="38" maxlength="38"
value="valeur initiale" />Mot de passe
<input type="password" name="motpasse"
size="10" maxlength="4" />Zone invisible (information masquée)
<input type="hidden" name="client" value="1456" />
Zone de saisie multiligne
<textearea name="com" cols="30" rows="5">
éventuellement contenu de la zone….
</textearea>
<textearea name="com" cols="30" rows="5" />
* * * *
![Page 82: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/82.jpg)
87
Bouton radio - Case à cocher
•Bouton radio (choix exclusif)
<input type="radio" name="genre" value="1" id="M" />
<input type="radio" name="genre" value="2" id="F" />
Case à cocher (choix non exclusif)<input type="checkbox" name="cine" value="cine" /><input type="checkbox" name="info" value="info" />
<input type="checkbox" name="loisir[ ]" value="cine" /><input type="checkbox" name="loisir[ ]" value="info" />
<input type="checkbox" name="brochure" checked="checked" />
![Page 83: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/83.jpg)
88
Liste déroulante et liste multiple
Liste déroulante • <select name="moisAnniv">• <option value="00"> mois</option> • <option value="01">Janvier</option> …• <option value="07">Avril</option>…• </select>
Liste déroulante avec sous-parties• <select name="moisAnniv">• <optgroup label="trimestre 1">
<option value="01">Janvier</option> ...
• </optgroup>• <optgroup label="trimestre 2">
... • </optgroup>• </select>
Liste/menu à choix multiple• <select name="transport" multiple="multiple" size="3">• ...• </select>
![Page 84: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/84.jpg)
89
Etiquette et formulaire
Etiquette de champ de formulaire
<label for="prenom2">Votre prénom :
<input type="text" name="prenom" id="prenom2"
size="20" maxlength="20" />
</label>
<label for="prenom2">Votre prénom : </label>
<input type="text" name="prenom" id="prenom2"
size="20" maxlength="20" />
![Page 85: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/85.jpg)
90
Boutons divers
<input type="image" src="essai.gif" /> remarque : coordonnées pt cliqué x, y / angle image
<button type="button">Légende du bouton
</button>
<button type="submit">Légende du bouton
</button>
<button type="reset"> Légende du bouton
</button>
<input type="file" size="50" />
La légende du bouton peut être :- un texte éventuellement mis en forme :Texte<br />du bouton- une image :<img src="essai.gif" />- une combinaison des 2 : <img src="essai.gif" /><br />texte du bouton
![Page 86: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/86.jpg)
91
Formulaire : envoi de données
Syntaxe:name1=valeur1&name2=valeur2
Exemple:Nom=PETIT&Prenom=florence&mot-de-passe=1234&themes=musique+ classique&saison=%E9t%E9&envoyer=OK
Remarque :& : sépare 2 valeurs + : représente un espaceCodage des caractères : é codé en %E9
![Page 87: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/87.jpg)
92
<form method="post" action="mailto:….">
nom=Le+B%E9rard&prenom=Jean-ran%E7ois&sexe=h&mois=2&sports=ok&voyage=ok&transport=1&transport=2&codesecret=1234&commentaires=Il+n%27y+a+pas+de+commentaire+%21&docu=ok
avec enctype="multipart/form-data" ----------------------------7d438ce403fa
Content-Disposition: form-data; name="nom"
Le Bérard
-----------------------------7d438ce403fa
Content-Disposition: form-data; name="prenom"
Jean-François
-----------------------------7d438ce403fa
Content-Disposition: form-data; name="sexe"
f
-----------------------------7d438ce403fa
Content-Disposition: form-data; name="jour"
1
-----------------------------7d438ce403fa
Content-Disposition: form-data; name="sports"
ok
-----------------------------7d438ce403fa
Content-Disposition: form-data; name="voyage"
ok
….
![Page 88: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/88.jpg)
94
Bouton et gestion d'événement
Quelle est la couleur du cheval blanc ?<input type="button" id="bouton-b" value="Blanc"
onClick="alert('Oui, vous avez cliqué sur la bonne réponse');" />
<input type="button" id="bouton-n" value="Noir" onClick="alert('Non, vous avez cliqué sur la mauvaise réponse');" />
![Page 89: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/89.jpg)
97
Cadres
<frameset cols="150,*">
<frame name="gauche" id="gauche" src="url" />
<frame name="droite" id="droite" src="url" />
</frameset>
<noframes>
<body>Ce site nécessite un navigateur qui puisse lire les cadres….
</body>
</noframes>
</html>
![Page 90: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/90.jpg)
98
Arbre d'un document à cadre
t it le
h ead
fra m e fra m e
fra m e fra m e
fra m e se t
fra m e se t
b o dy
n o fram es
h tm l
![Page 91: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/91.jpg)
99
Cadres<frameset rows="60,*">
<frame name="haut" src="url" />
<frameset cols="150,*">
<frame name="gauche"
src="url" />
<frame name="droit"
src="url" / >
</frameset>
</frameset>
![Page 92: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/92.jpg)
100 Cadre et cible
Dans les pages avec des liens :• <a href="URL" target="droite">• texte1</a>
ou dans l'en-tête• <base target="droite" />
Noms de cible prédéfinis :– _blank : nouvelle fenêtre– _top : fenêtre sans cadre – _parent : fenêtre parente– _self : cadre courant (par défaut)
texte1 texte2
![Page 93: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/93.jpg)
101 Les cadres : attributs
<frameset rows="a, b…" cols="a, b…" border="2" bordercolor="couleur" frameborder="1|0" >
<framesrc="url"name="…" id="…"noresize="noresize"scrolling="yes|no|auto"marginheight="n" marginwidth="n"border="2" bordercolor="couleur" frameborder="1|0" / >
Unités :
150 | 20% | 3*
![Page 94: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/94.jpg)
102 Cadres
Avantages Menu persistant à l'écran, navigation facilitée Rafraîchissement d'une partie d'écran
Inconvénients Pas d'adresse unique Pb avec les signets Pb avec les moteurs de recherche (page orpheline,
non reliée à la page d'accueil) Pb interprétation (braille…)
![Page 95: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/95.jpg)
103 Iframes
<iframe src="url"
align="top|middle|bottom|left|right"
frameborder="1|0"
width="n|n%" height="h|h%"
hspace="n" vspace="n"
marginheight="n" marginwidth="n"
id="nom" name="nom"
scrolling="yes|no|auto">
Votre navigateur n'affiche pas les iframes
</iframe>
![Page 96: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/96.jpg)
104 Editeur spécialisé HTML : Bluefish
![Page 97: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/97.jpg)
105 Ergonomie -Lisibilité
Préférer les polices de type sans-sérif Préférer texte sombre sur fond clair Eviter de mettre un texte sur une grande largeur Majuscules seulement pour sigles, débuts de phrase, débuts de nom
propre. Le souligné est réservé à l’hypertexte
![Page 98: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/98.jpg)
106 Les pages web à UMLV
Créer dans votre dossier personnel un dossier WWW (en maj) Mettez les brouillons de pages dans un autre dossier de
travail, hors WWW, par exemple tp-web. Les pages préparées et validées sont placés dans WWW. Consulter à l'adresse : http://etudiant.univ-mlv.fr/~sonlogin
éventuellement suivi du chemin Si une page index.html existe à la racine de WWW, elle
s'affiche en tapant etudiant.univ-mlv.fr/~sonlogin et votre nom apparaît sur la liste des pages web des étudiants.
La rubrique "Publier ses pages" permet de mettre des droits corrects sur WWW
Sinon faire un :chmod 704 nomfichier (droit de lecture)chmod 701 nomdossier (droit d'exécution) ou chmod 705 nomdossier (lister le contenu du dossier)ou chmod -R 705 WWW
Une URL relative à la racine du site est de type : /~login/sousdossierdeWWW/
![Page 99: 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009](https://reader035.vdocuments.site/reader035/viewer/2022062512/551d9dd4497959293b8e5cfc/html5/thumbnails/99.jpg)
107 DHTML
Dynamic HyperText Markup Language Ensemble de technologies associées afin de fournir des
pages HTML plus interactives-> contenu modifiable grâce à des événements.
HTML + script (javascript) A ne pas confondre avec pages dynamiques (php,
asp…)