Chapitre1 XHTML Introduction Et Concepts

Technologie Web 2.
0 :
XHTML Introduction et concepts
Technologie web 2.0 2020

XHTML Basics
3 HTML = HyperText Markup
Language ?
 Hyper : Non linéaire, liens entre nœuds

 Text : Composé de texte
 Markup : Marqué, balisé
 Language : Langage
 Langage à balises de description de

documents hypertextes
4 Qu’est-ce que HTML ?
 Langage de présentation de documents

 N’est PAS un langage de programmation
 Langage : syntaxe STRICTE
 Utilisé pour construire les pages Web
 Navigation hypertexte : ancres, liens
 Utilise des balises
 Documents exploités par des agents utilisateurs
 Navigateur pour « visualiser » le résultat
 Robots des moteurs de recherche pour indexer
 Automates divers pour traiter les données
5
Structurer un document ?
Mettre en forme ?
S)
(CS
1- Structurer (HTML)
e
styl
un
uerq
pli
Ap
2-
Programmation Web 2012-2013 10:07:19
6
Structurer le document
Titre du document
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Paragraphe
Repérer les structures :

Marquer leur début/fin
Utilisation de balises
7
Appliquer une feuille de style
Style
Style ::
Titre
Police dedeniveau
base :18pt
Titre•Rouge
de niveau 1
•Bleu, majuscules
Paragraphes
••Justifier
Bords haut et bas
1Paragraphes
ère
lettre paragraphe
••Gros,
Justifier
gris, italique

8 Balises (tags, marqueurs) HTML
 Texte entouré par < et >

 Balises insensibles à la casse :
 <BALISE> Équivalent
 <balise>
 <Balise>
mais XHTML  minuscules
 <bAlIsE>
Encadrement d'un bloc
 Ouvrante : <balise>
 Fermante : </balise> (éventuellement optionnelle)
 Non visibles dans le rendu du navigateur
 attributs/options : <balise attr="val" option >
9 Utilisation des balises
 Utilisation CORRECTE
 <i>Texte<b>Texte Texte</b></i>
 Utilisation INCORRECTE
 <i>Texte<b>Texte Texte</i></b>
 Jamais de chevauchement (pile d’états)

Document HTML
10
 Document texte ASCII .htm ou .html

 Structure de base :
1. Information sur la version de HTML utilisée
2. En-tête déclaratif
3. Corps, contenu du document
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
2. <title>Ma première page Web</title>
</head>
<body>
3. Salut !
</body>
</html>
Document HTML
11


<html>
<head>
</head>
<body>
3. Salut !
</body>
</html>
12 Structure d’un document HTML
 DTD
 Document Type Definition
 Description d’un langage particulier
 Permet à l’agent utilisateur d’interpréter correctement le document
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 Le <! DOCTYPE> doit être la première chose dans votre document HTML, avant la balise
<html>.
 La déclaration n'est pas une balise HTML <! DOCTYPE>; il est une instruction au navigateur
web sur la version de la page HTML est écrit dans.
 Dans HTML 4.01, la déclaration <! DOCTYPE> fait référence à une DTD, parce que le HTML
4.01 était basé sur SGML. La DTD spécifie les règles pour le langage de balisage, de sorte que
les navigateurs affichent correctement le contenu.
 HTML5 ne repose pas sur SGML, et ne nécessite donc pas une référence à une DTD.
 Astuce: Toujours ajouter la déclaration à vos documents HTML, de sorte que le
navigateur sait quel type de document à attendre <! DOCTYPE>.
13 DTD HTML
 Il y a trois <! DOCTYPE> déclarations en HTML

4.01. En HTML5, il n'y a qu'un seul:
 HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
 <!DOCTYPE html>
 Les éléments HTML - DOCTYPES valides
https://www.w3schools.com/tags/ref_html_dtd.asp
Document HTML
14

<html>
<head>
</head>
<body>
3. Salut !
</body>
</html>
15 Structure et contenu de l’en-tête
 Informations sur le document

 Titre du document (obligatoire)
<title> … </title>
 Méta données
<meta name="nom" content="valeur">
<meta http-equiv="content-type" content="text/html; charset=utf-
8" />
<meta name="Author" content="J. Cutrona">
<meta name="keywords" lang="fr" content="cours, HTML">
<meta name="keywords" lang="en" content="course, HTML">
<meta name="copyright" content="2005 IUT Reims">
 Autres informations
 Styles
 Scripts
16 Entités HTML (dans <body>)
 Représentation spécifique des

 Symboles
 Caractères accentués
 Forme générale des entités HTML
 &code;
 Quelques exemples
 é "é"  é
 " "  espace insécable
 < "<"  <
 & "&"  &
Document HTML
17


<html>
<head>
</head>
<body>
3. Salut !
</body>
</html>
18 Utilisation et utilité des balises dans
<body>
 Initialement : mise en page du document
 Police, couleur, taille, alignement du texte, …
 Maintenant : structuration logique du document

 Titres de différents niveaux
 Paragraphes, citation, exemple, code, …
 Listes
 Tableaux, …
 Si le document est correctement structuré, chaque élément structurel

pourra est mis en forme via une feuille de style CSS
19 Mise en page Structuration
 Titres (6 niveaux de hiérarchie) :

 <h1> … </h1>
 <h2> … </h2>
 <h3> … </h3>
 <h4> … </h4>
 <h5> … </h5>
 <h6> … </h6>
 Paragraphes
 <p> … [</p>]
 Saut de ligne :
 <br>
20 Mise en page Structuration
 Ligne de séparation horizontale :

 <hr>
 Texte préformaté (brut) :
 <pre> … </pre>
 Retours à la ligne et espaces multiples apparaissent
 Groupe « mode en ligne »  structuration pure
 <span> … </span>
 Groupe « mode bloc »  structuration pure
 <div> … </div>
21 Mise en forme Structuration
 Styles physiques logiques

 Gras : <b> … </b>
 Italique : <i> … </i>
 Souligné : <u> … </u>
 Styles logiques
 Citation : <cite> … </cite>
 Code : <code> … </code>
 Mise en valeur : <em> … </em>
 Mise en valeur : <strong> … </strong>
 Exemple : <samp> … </samp>
 …
22
Eléments de regroupement
 Mécanisme générique de structuration du document
 Utilisation conjointe avec les feuilles de style
 Groupe en ligne
 <span> … </span>
 Groupe en bloc
 <div> … </div>
23 Classe, identification et description
 Affecter une balise à une classe

 Attribut class
 <p class="ma_classe"> Sous-groupe de
l'ensemble des balises <p>
 Donner un identifiant à une balise
 Attribut id
 Identifiant doit être unique (charge du concepteur)
 <p id="mon_id_unique">
Une balise <p> repérée de
 Décrire un élément
façon unique
 Attribut title pour la plupart des éléments HTML
 Texte affiché sous forme d’info-bulle (tooltip)
24 Liens et ancres
 Base de la navigation hypertexte
 Lien (ancre source d’un) : zone active cliquable

 <a href="URL">support du lien</a>
 Support : texte, image, contenus entre <a> et </a>
 Ancre (nommée) : point cible
 <a name="nom">point d’ancrage</a>
 name= nom unique (à la charge du concepteur)
 Comment cibler l’ancre dans un lien ?  URL

25 Marque de fragment
 Faire référence à un emplacement repéré dans une ressource

 Atteindre une ancre…
<h1><a name="x1">txt</a></h1>
 …ou atteindre un élément identifié

<h1 id="x1">txt</h1>
 URL se terminant par #nom_de_l_ancre
http://www.w3.org/TR/html4/…
intro/intro.html#fragment-uri
26 Cadres (frames)
 Déprécié mais intéressant !

 Diviser la fenêtre du navigateur en cadres
 Utiliser la DTD HTML 4.01 Frameset
<frameset rows="liste"> … </frameset>

<frameset cols="liste"> … </frameset>
 Liste : espacements des colonnes ou des lignes
 en pixels : 30, en % : 20%, ce qu’il reste : *
 <frameset> peut contenir
 <frameset>
 <frame>
 <noframes>
27 Cadres (frames)
 Comment définir ce qui doit être affiché

dans les cadres ?
<frame name="nom" src="URL">
 name=
 Nom du cadre / de la fenêtre
 Utilisé pour qu’il soit la cible de liens :
 <a href="URI" target="nom"> … </a>
 src=
 URL de la page à afficher dans le cadre
28 Cadres : exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cadre principal</title>
</head>
<frameset cols="200,*"> 2 colonnes
<frame name=
name="menu" src=
src="menu.html">
"menu.html">
<frameset rows=
rows="30%,*">
"30%,*">
<frame name="titre" src="titre.html"> 2 lignes
<frame name=
name="principal" src=
src="principal.html">
"principal.html">
</frameset>
<noframes>
Texte pour les moteurs de recherche
</noframes>
</frameset>
</html>
29 Cadre en mode ligne (iframe)
 Permet de définir un cadre en mode ligne et d’y charger un document

 Balise :
<iframe width="largeur"
height="hauteur"
src="url_page"
frameborder="0|1"
scrolling="yes|no|auto" >
Texte de substitution
</iframe>

Chapitre1 XHTML Introduction Et Concepts

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Chapitre1 XHTML Introduction Et Concepts

Hochgeladen von

Copyright:

Verfügbare Formate

Technologie Web 2.

Technologie web 2.0 2020

 Hyper : Non linéaire, liens entre nœuds

 Langage à balises de description de

 Langage de présentation de documents

Repérer les structures :

Programmation Web 2012-2013 10:07:19

 Texte entouré par < et >

 Jamais de chevauchement (pile d’états)

 Document texte ASCII .htm ou .html

3. Corps, contenu du document

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 Document texte ASCII .htm ou .html

3. Corps, contenu du document

 Il y a trois <! DOCTYPE> déclarations en HTML

 Document texte ASCII .htm ou .html

 Informations sur le document

 Représentation spécifique des

 Document texte ASCII .htm ou .html

3. Corps, contenu du document

 Maintenant : structuration logique du document

 Si le document est correctement structuré, chaque élément structurel

 Titres (6 niveaux de hiérarchie) :

 Ligne de séparation horizontale :

 Styles physiques logiques

 Mécanisme générique de structuration du document

 Utilisation conjointe avec les feuilles de style

 Affecter une balise à une classe

 Base de la navigation hypertexte

 Lien (ancre source d’un) : zone active cliquable

Programmation Web 2012-2013 10:07:24

 Faire référence à un emplacement repéré dans une ressource

 …ou atteindre un élément identifié

 URL se terminant par #nom_de_l_ancre

 Déprécié mais intéressant !

<frameset rows="liste"> … </frameset>

 Comment définir ce qui doit être affiché

 Permet de définir un cadre en mode ligne et d’y charger un document

Das könnte Ihnen auch gefallen