Chapitre 1 LangageHTML

Chapitre-1
Langage HTML
IHEC - carthage
Plan du chapitre
Historique
 1979 : le langage SGML (Standard Generalized Markup Language) créé par IBM est
l’ancêtre du HTML.
 1990 : le langage HTML.
 1994 : création du W3C (WideWorld Web Consotium) organisme de normalisation
des technologies du web.
 1996 : parution du langage CSS qui est un langage de création de feuilles de style
(Cascading Style Sheet).
 1999 : le HTML 4.01.
 2000 : le XHTML 1.0 (eXtended HTML) qui est une version plus réglementée du
HTML.
 2007 : le HTML 5.
Définitions
 HTML signifieHyperText Markup Language.
 C’est un langage qui permet de décrire le contenu d’une page web et qui
permet l’intégration de feuilles de styles et de scripts.
 Le langage HTML est basé sur les balises.
 Une balise (tag en anglais) est un code placé entre < et > et qui permet
d’indiquer au navigateur comment afficher le contenu qui vient après
<nom_balise>.
 Exemples de balise : <head>,<h1>, <body>, etc.
 Une balise ouverte par <nom_balise>, doit être fermée à l’aide de
</nom_balise>
Définitions
 Une balise peut avoir des propriétés ou attributs, elle se présente alors
sous la forme
<balise prop1=‘’valeur1’’ prop2=‘’valeur2’’ …..> contenu </balise>
 Exemple : <img src=‘’image.jpg’’ hight=‘’20’’ width=‘’30’’ />
 Il existe quelques balises isolées c-à-d qui ne doivent pas être fermées,
elles sont présentées à l’aide de <nom_balise /> en XHTML.
 Exemples : <br />, <hr />, <img/>,<input />, etc.
Comment créer une page HTML?
 Pour créer les pages web, on peut utiliser :
• un éditeur de sites web de type WYSIWYG tels que Adobe
Dreamweaver, Php Designer, Microsoft FrontPage.
• Un système de gestion de contenu tels que Joomla, WordPress, wiki,
etc
• Un simple éditeur de textes tels que Bloc-notes, WordPad ou
NotePad++.
 Une page web est un fichier ayant une extension .html ou .htm et dont
l’aperçu s’affiche à l’aide d’un navigateur tels que Mozilla Firefox,
Internet Explorer, Google Chrome, Oper, etc.
Structure générale d’une page Web
<!DOCTYPE html>
<html>
<head>
<title> Titre de la page </title>
</head>
<body>
…
</body>
</html>
La déclaration <!DOCTYPE>
 Doit être placée au début de la page avant la balise <html>.
 Il s’agit d’une déclaration indiquant au navigateur la version et la variante
du langage HTML utilisée dans la page web.
 La variante du html peut être strict, transational ou frameset. Syntaxe:
• En HTML 5 : <!DOCTYPE html>
• Les autres versions :
<!DOCTYPE "version_html " " adresse_URL_DTD" >
"version_html " : indique la version du HTML utilisée dans le
document.
"adresse_URL_DTD " : est l’adresse URL du fichier DTD
(Document Type Declaration) qui indique les propriétés de chaque
élément, balise et attribut de la version du HTML utilisée.
Exemples de déclarations
 En HTML 4.01 Strict :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" http://www.w3.org/TR/html4/strict.dtd>
permet toutes les balises et les attributs html sauf les éléments de présentation et de
mise en forme telle que la balise <font>. Les Framesets (pages de cadres) ne sont pas
permis.
 En HTML4.01 Transitional :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
permet l’utilisation des balises de présentation et de mise en forme telle que <font>
mais ne permet pas l’utilisation des Framesets.
 En HTML4.01 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
http://www.w3.org/TR/html4/frameset.dtd>
mêmes règles que la variante Transational, mais pemet en plus l’utilisation des
Frameset.
Exemples de déclarations (2)
 En XHTML 1.0 Strict :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
 En XHTML 1.0 Transitional :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd>.
 En XHTML 1.0 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN""http://www.w3.org/TR/html4/frameset.dt
d">
Différences entre le HTML et le
XHTML
HTML XHTML
N’est pas sensible à la casse : Sensible à la casse : toutes les balises et les
<HTML>, <html>, <HtMl> sont toutes tolérées. attributs doivent être en minuscule.
Les balises telles que <body>, <html>, <form>, Toute balise ouverte par <nom_balise> doit
etc, peuvent ne pas être fermées sans être fermée par </nom_balise>.
problèmes
Les balises isolées sont écrite à l’aide de Les balises isolées doivent être introduites à
<nom_balise> . e.g. <br>, <hr>, <input>, etc. l’aide de <nom_balise />. e.g. <br />, <hr />,
<input />, etc.
Les valeurs des attributs peuvent être placées Les valeurs des attributs doivent être placées
entre guillemets ou sans. entre guillemets.
e.g. <table border=0> ou <table border=‘’0’’> e.g. <table border=‘’0’’>
Certaines propriétés peuvent être utilisées sans Toute propriété doit avoir une valeur.
valeurs. e.g. <input type=checkbox
e.g. <input type=checkbox checked> checked=‘’checked’’>
Validation d’un document web
 La validation d’un document web consiste à vérifier si son contenu est
conforme aux règles de la déclaration <!DOCTYPE>.
 Il s’agit d’utiliser le validateur de documents web du W3C ayant pour
adresse URL http://validator.w3.org/unicorn/ et suivre les étapes
suivantes:
• Préciser la tâche à effectuer : Vérifier la conformité générale,
Validation des profils CSS,Vérificateur mobile, etc.
• Entrer l’adresse URL du document web à valider Lancer la
vérification.
Validation d’un site web
Exercice d’application-1
1. Lancer Notepad++.
2. Créer une page html [exemple_1] l’enregistrer sur le bureau.
3. Ajouter le contenu ci-dessous à la page.
4. Ouvrir la page avec un navigateur web.
<!DOCTYPE html>
<html>
<head>
<title>Coucou</title>
</head>
<body>
Cette page est une page toute simple
</body>
</html>
La balise <head>
1. C’est l’entête de la page HTML. Son contenu ne sera par affiché dans le
navigateur. Elle contient :
1. les métadonnées : auteur, mot-clef, description de la page.etc
balise <meta />
2. le titre de la page :
<title> Titre de la page </title>
3. Les liens avec les feuilles de style :
balise <link />
4. Les styles de la page :
<style> </style>
5. Les scripts
<script> </script>
La balise <meta />
Syntaxe : <meta name=‘’propriété’’ content=‘’attribut’’ />
1. Encodage : précise le type de caractères utilisé
HTML 4.01 : <meta http-equiv="Content-Type" content="text/html;charset=ISO-
8859-1« >
HTML 5 : <meta charset=‘’utf-8’’ />
2. Auteur:
<meta name=‘’author’’ content=‘’nom de l’auteur’’ />
3. Description de la page:
<meta name=‘’description’’ content=‘’phrase de description de la page’’ />
4. Mots-clefs: pour référencer la page dans les moteurs de recherche:
<meta name=‘’keywords’’ content=‘’mot1, mot2, etc ‘’ />
5. Robot :
indique aux moteurs de recherche comment gérer le référencement de la page
<meta name=‘’robot’’ content=‘’all| (no)follow| (no)index| none’’ />
Contenu de la page
La balise <body> </body>
1. C’est le corps de la page html.
2. Contient toutes les balises et les informations qui seront affichées par le
navigateur :
1. Les commentaires : <!– commentaires -->
Le texte des commentaires ne sera pas affiché par le navigateur.
2. Les titres : <h1> … </h1> jusqu’à <h6> … </h6>
<h1> Titre </h1> : titre de style h1 (plus grand format)
<h6> Titre </h6> : titre de style h6 (plus petit format)
3. La barre horizontale : <hr />
Trace une ligne horizontale dans la page.
Les paragraphes
Les paragraphes : <p> texte </p>
 La balise <p> génère automatiquement un retour à la ligne au début du
paragraphe.
 Retour à la ligne : <br />.
 Texte préformatté :
<pre>texte </pre>
La balise <pre> permet d’afficher dans le navigateur les retraits et les
retours chariots sans utiliser la balise <br />
Formatage de textes
 Texte gras : <b> texte </b> ou bien <strong> texte </strong>
 Texte incliné (italique) : <i> texte </i> ou bien <em> texte</em>
 Texte barré : <s> texte </s> ou bien <strike> texte </strike>
 Texte en petites lettres : <small> texte </small>
 Texte en surbrillance : <mark> texte </mark>
 Texte barré : <del> texte </del>
 Texte souligné : <u> texte </u> ou bien <ins> texte </ins>
 Texte en exposant : <sup> texte </sup>
 Texte en indice : <sub> texte </sub>
Formatage de textes (2)
 Les quottes
<q> texte </q> à‘’texte’’
 Texte en retrait
<blockquote> texte </blockquote>
 Abréviation:
• <abbr title=‘’description’’> texte </abbr>
• <acronym title=‘’description’’> texte </acronym>
La description s’affiche dans une info-bulle quand le texte est survolé par
le pointeur.
Les caractères spéciaux
 Les caractères spéciaux représentent ici :
1. Les caractères qui ne peuvent pas être saisis à partir du clavier tels que
©,Ç, €, espace blanc, etc.
2. Les caractères qui représentent des caractères réservés au code HTML tels
que < et >
 Ces caractères sont représentés par &code_caractère; ou bien
&#code_numérique;
 Exemple :
• © © ou bien ©
• Ç Ç ou bien Ç
• € € ou bien €
Les caractères spéciaux (2)
Remarques:
 Dans le code HTML, un seule caractère espace est affichable dans l’aperçu de la
page web; pour afficher plusieurs caractères blancs successifs, il faut alors
utiliser un caractère spécial.
Espace blanc  ou bien
 Les caractères < et > sont des caractères spéciaux du code HTML qui
permettent d’ouvrir une balise, il faut alors les remplacer par leurs codes
respectifs dans le code HTML
• <  < ou bien <
• >  > ou bien >
 Pour avoir la liste exhaustive des caractères spéciaux, consulter le lien :
http://www.w3schools.com/html/html_entities.asp
Exercice d’application-2
1. Donner le code html (xhtml) permettant de créer la page ci-dessous:

Chapitre 1 LangageHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 1 LangageHTML

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre-1

Vous aimerez peut-être aussi