Html et xhtml

HTML
Apprendre le langage le plus utilisé sur le web
Module de cours

La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© 2008-2009, Fred Colantonio, tous droits réservés | www.fredcolantonio.be | frederic@c-group.be

Plan
1. Aperçu
2. Structure d’une page HTML
3. Balises textes
4. Balises multimédias
5. Balises hypertextes
6. Balises listes
7. Balises formulaires
8. HTML et référencement
9. HTML et Web 2.0

1. Aperçu

1. HTML, DHTML, XHTML : qui sont-ils ? que font-ils ?
2. Squelette d’une page HTML
3. HTML et les autres langages
1. Imbrication HTML et CSS
2. Imbrication HTML et PHP


1. Aperçu


1. Aperçu

1. HTML : un langage qui marque le web !


1. Aperçu

• HTML ? HyperText Markup Language


1. Aperçu

• Quoi ? Un format de données


1. Aperçu

• Pour ? Modéliser des pages web


1. Aperçu

• But ? Traitement, manipulation et rendu d’information


1. Aperçu

• But ? Traitement, manipulation et rendu d’information
• Comment ? Grâce au <balisage>


1. Aperçu
2. La famille : HTML, le patriarche


1. Aperçu
• Historiquement le plus ancien (1992)


1. Aperçu
• Socle du langage de présentation de pages web


1. Aperçu
• Encadré par le W3C (World Wide Web Consortium)


1. Aperçu
• Père de tous les dérivés : htm, dhtml, xhtml...


1. Aperçu
• Père de tous les dérivés : htm, dhtml, xhtml...
• Marié à SGML (Standard Generalized Markup Language)
langage normalisé de balisage généralisé = langage de
description utilisant des balises


1. Aperçu

3. La famille : DHTML, le cousin qu’on ne voit jamais


1. Aperçu

• DHTML n’existe pas (normes, langages)


1. Aperçu

• Dynamisation du contenu par des interactions une fois
la page chargée


1. Aperçu

la page chargée
• Ensemble de technologies web


1. Aperçu

la page chargée
• HTML


1. Aperçu

la page chargée
• HTML
• CSS


1. Aperçu

la page chargée
• HTML
• CSS
• JavaScript


1. Aperçu

4. La famille : HTM, le vieil oncle malade


1. Aperçu

• Simple réduction de HTML


1. Aperçu

• Format utilisé par Microsoft à une époque


1. Aperçu

• Format utilisé par Microsoft à une époque
• En ﬁn de vie


1. Aperçu

5. La famille : XHTML, l’héritier nouveau roi


1. Aperçu

• eXtensible HyperText Markup Language


1. Aperçu

• Marié à XML (eXtensible Markup Language) : plus
actuel et plus simple que SGML


1. Aperçu

• XHTML 1.0 : simple reformulation du HTML 4.01


1. Aperçu

• XHTML 1.1 : ajout de nouveaux éléments syntaxiques


1. Aperçu

• XHTML BASIC : version simpliﬁée pour clients légers


1. Aperçu

• XHTML BASIC : version simpliﬁée pour clients légers
• En préparation : XHTML 2.0

1. Aperçu
2. Squelette d’une page HTML classique


1. Aperçu
2. Squelette d’une page HTML classique

<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;>
<title>Titre de la page</title>
<body>
<p>Un paragraphe</p>
</body>


1. Aperçu
2. Squelette d’une page XHTML

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>

<head>
<title>Titre de la page</title> partie invisible
</head> à l’écran
<body>
<p>Un paragraphe</p> partie visible
</body> à l’écran
</html>

1. Aperçu

1. HTML et CSS
• Cascading Style Sheet
• Langage de description des documents HTML et XML
• Gère la présentation (mise en page, rendu)


1. Aperçu

1. HTML et CSS : imbrication interne

<body style=“color:white”>
<p style=“font-size:12px;”>Texte</p>
<ul style= “list-style=square”>
<li style=“margin-left:10px;”>élément 1</li>
<li>élément 2</li>
</ul>
</body>


1. Aperçu

1. HTML et CSS : imbrication externe (ou head)


1. Aperçu

HTML

<body>
<p>Texte</p>
<ul>
</ul>
</body>


1. Aperçu

HTML CSS

<body> body {color: white;}
<p>Texte</p>
<ul> p {font-size: 12px;}
<li>élément 2</li> ul {list-style: square;}
</ul>
</body> li {margin-left: 10px;}


1. Aperçu

2. HTML et PHP
• PHP : Hypertext Preprocessor
• Langage de scripts côté serveur
• Mouvance libre
• Utilisé pour créer des pages web dynamiques



1. Balises et attributs
2. Le Head
3. Le Body



1. Quelques balises

<!doctype> <img>
<h1> <p>
<html> <form>
<h2> <br>
<head> <input>
<h3> <hr>
<body> <textarea>
<h4> <ul>
<meta> <embed>
<h5> <ol>
<title> <object>
<h6> <li>



2. Attributs

• Elément présent dans la balise d’ouverture
• Déﬁnit des propriétés supplémentaires
• Forme : clé=valeur
• Exemples :
• <a href=“http://www.c-group.be”>



2. Attributs

• Exemples :
balise



2. Attributs

• Exemples :
balise attribut



2. Attributs

• Exemples :
balise attribut
clé



2. Attributs

• Exemples :
balise attribut
clé valeur



2. Attributs

• <img src=“smile.png” />

• <p align=“left”>Déconseillé (*)</p>



2. Attributs

balise




2. Attributs

balise attribut




2. Attributs

balise attribut
clé



2. Attributs

balise attribut
clé valeur



2. Attributs

balise attribut
clé valeur
balise



2. Attributs

balise attribut
clé valeur
balise attribut



2. Attributs

balise attribut
clé valeur
balise attribut
clé



2. Attributs

balise attribut
clé valeur
balise attribut
clé valeur



2. Attributs

balise attribut
clé valeur
balise attribut
clé valeur
(*) Les propriétés de mise en page peuvent être assignées
simplement par CSS !


3. Exemple de balises imbriquées dans une page

<body>
<p>Texte</p>
<ul>
</ul>
</body>



4. Règles pour un bon balisage (x)HTML
1. Une balise ouverte doit être fermée



<body>
<p>
Texte
</p>

</body>


<body>
<p>
Texte
</p>
<ul>

</ul>
</body>


<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
</body>


Balise d’ouverture : <balise>
<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
</body>


Balise d’ouverture : <balise>
<body>
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>
Balise de fermeture : </balise>
</body>


2. ... même pour les balises uniques




<br> devient <br />
<hr> devient <hr />
<img> devient <img />

Exemple concret :




<br> devient <br />
<hr> devient <hr />

Exemple concret :
<img src=“smile.jpg” /> afﬁchera :




<br> devient <br />
<hr> devient <hr />

Exemple concret :
<img src=“smile.jpg” /> afﬁchera :

Note : fermer les balises est une bonne pratique XHTML



3. Bien gérer l’imbrication des balises



Bonne imbrication
<p>
Texte
</p>
<ul>
<li>
Elément 1
</li>
</ul>



Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>



Bonne imbrication Mauvaise imbrication
<p> <p>
Texte Texte
</p> <ul>
<ul> </p>
<li> <li>
Elément 1 Elément 1
</li> </ul>
</ul> </li>
Moralité : Il faut toujours fermer pour pouvoir rouvrir...


4. Proscrire les balises de mise en forme




Balises HTML
<b> : mise en gras
<i> : mise en italique
<u> : soulignement




Balises HTML
<b> : mise en gras
<i> : mise en italique
<u> : soulignement

Ces propriétés peuvent être assignées simplement par CSS !




Balises HTML Propriétés CSS
<b> : mise en gras = {font-weight: bold;}
<i> : mise en italique = {font-style: italic;}
<u> : soulignement = {text-decoration: underline;}

Ces propriétés peuvent être assignées simplement par CSS !



5. Utiliser le balisage sémantique



Bien hiérarchiser l’information



principal</h1>
<h1>Titre



<h1>Titre principal</h1>
<p>Voici 2 sous-titres :</p>



<h2>Sous-titre 1</h2>



<p>Son contenu</p>



<p>Son contenu</p>
<p>Son contenu</p>



<p>Son contenu</p>
<p>Son contenu</p>
Hiérarchiser l’information clariﬁe les choses

2. Le Head

1. Localisation dans une page HTML


2. Le Head


<html>
<head>
</head>
<body>
</body>
</html>


2. Le Head


1.Le header apparaît toujours avant
<html>
le body (en entête)
<head>
</head>
<body>
</body>
</html>


2. Le Head


<html>
<head>
2.Il renferme des informations qui
</head>
inﬂuencent le rendu de la page...
<body>
</body>
</html>


2. Le Head


<html>
<head>
2.Il renferme des informations qui
</head>
inﬂuencent le rendu de la page...
<body>
</body>
3.... mais sans que les données
</html>
mêmes qu’il renferme apparaissent
à l’écran


2. Le Head

2. Contenu du head (aperçu)

<head>
<title></title>
<meta name=“description” content=“”/>
<meta name=“keywords” content=“”/>
<link rel=“stylesheet” href=”style.css” type=text/css media=“all” />
<script type=“text/javascript” src=”javs.js”></script>
</head>


2. Le Head
3. Balise title
Syntaxe


2. Le Head
3. Balise title
Syntaxe

• Confère un titre à la page HTML


2. Le Head
3. Balise title
Syntaxe

• Le titre apparaît en haut du navigateur


2. Le Head
3. Balise title
Syntaxe

• Le titre apparaît en haut du navigateur

• Balise essentielle pour un bon
référencement
• +/- 10 mots recommandés

2. Le Head

4. Balise meta description
Syntaxe
<meta name=“description” content=“description du contenu
de la page” />


2. Le Head

Syntaxe
de la page” />

• Balise de description sommaire du contenu de la page


2. Le Head

Syntaxe
de la page” />

• +/- 140-160 caractères recommandés (200 max)


2. Le Head

Syntaxe
de la page” />

• +/- 140-160 caractères recommandés (200 max)
• Conserve une utilité informative + de référencement

2. Le Head

4. Balise meta keywords
Syntaxe
<meta name=“keywords” content=“mot, clé, clef, mots, clés,
clefs, mot clé, mot clef, mots clés, mots clefs” />


2. Le Head

Syntaxe

• Balise de mots clés par rapport au contenu de la page


2. Le Head

Syntaxe

• +/- 10 items (éléments séparés par espace) recommandés


2. Le Head

Syntaxe

• +/- 10 items (éléments séparés par espace) recommandés
• Conserve une utilité informative + de référencement

2. Le Head

5. Balise charset
Syntaxe
<meta http-equiv=“Content-Type” content=“text/html;
charset=utf-8” />


2. Le Head

5. Balise charset
Syntaxe
charset=utf-8” />

• Balise indiquant au navigateur l’encodage des caractères


2. Le Head

5. Balise charset
Syntaxe
charset=utf-8” />

• Les plus répandus : iso-8859-1 ou utf-8


2. Le Head

5. Balise charset
Syntaxe
charset=utf-8” />

• Les plus répandus : iso-8859-1 ou utf-8
• Permet de gérer l’afﬁchage correct des accents + éviter
d’encoder leur équivalent html (ex : é = é)


2. Le Head

6. Balise CSS interne
Syntaxe
<style type=“text/css”>

</style>

2. Le Head

Syntaxe

</style>

• Balise intégrant, dans le head, les propriétés CSS

2. Le Head

Syntaxe

</style>

• Commenter les CSS () prévient les erreurs
d’afﬁchage (anciens navigateurs)

2. Le Head

Syntaxe

</style>

• Déconseillé pour du multi-pages (CSS perd de son intérêt)

2. Le Head

Syntaxe

</style>

• Déconseillé pour du multi-pages (CSS perd de son intérêt)
• Plusieurs feuilles de styles peuvent être appelées

2. Le Head

7. Balise CSS externe
Syntaxe
<link rel=“stylesheet” href=”style.css” type=text/
css media=“all” />


2. Le Head

Syntaxe

• Balise appelant une feuille de style CSS (rel = stylesheet)


2. Le Head

Syntaxe

• La CSS est un ﬁchier externe (ici ‘style.css’)


2. Le Head

Syntaxe

• La CSS est un ﬁchier externe (ici ‘style.css’)
• Le média de destination est général (all)

2. Le Head


2. Le Head
• Types de médias :


2. Le Head
• all : tous les appareils ;


2. Le Head
• aural : synthétiseurs de parole ;


2. Le Head
• braille : appareils braille à retour tactile ;


2. Le Head
• embossed : appareils à impression braille ;


2. Le Head
• handled : appareils portatifs ;


2. Le Head
• handled : appareils portatifs ;
• print : support paginé et mode aperçu avant impression ;


Html et xhtml

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (17)

Similar a Html et xhtml

Similar a Html et xhtml (17)

Más de Fred Colantonio

Más de Fred Colantonio (20)

Html et xhtml

Notas del editor