Création de
sites Web
Partie 1: Le
langage HTML
1 LSG
[Link]@[Link]
Plan du cours
• Introduction
• Historique du HTML
• Définitions Comment créer une page HTML
• Structure générale d’une page web
• La déclaration <!DOCTYPE>
• Différences entre le HTML et le XHTML
• Validation d’un document web
• Entête d’une page web : la balise <head>
• Les métadonnées : la balise <méta />
• Contenu d’une page web
• Les listes
• Les tableaux
• Les blocs
• La balise <iframe>
• Les formulaires
Principe d’Internet : Le
web
• Système hypertexte public fonctionnant sur Internet et qui permet de
consulter, avec un navigateur, des pages mises en ligne dans des sites.
• L'image de la toile vient des hyperliens qui lient les pages Web entre elles.
• Communication entre un serveur (HTTP) et un client (navigateur)
Principe d’Internet
Principe d’Internet : URL
• Une URL est une chaîne de caractères utilisée pour adresser les
ressources dans le Web
• Exemple :
[Link]
– http : protocole
– [Link] : hôte
– /chemin/ : chemin absolu sur le service
– [Link] : nom de la page Web
– q=req : chaine de requête, transmise à la page
C’ est quoi une page web?
• Unfichier HTML est un format de fichier « texte » éditable dont les éléments
ont du sens
• Au format .html
• Peut contenir du texte, des images, des liens, des médias, etc. • Peut être liée à
une autre page via des liens.
C’est quoi une page web?
• Contenus textuels dans le fichier HTML, mais aussi images, sons, vidéos, CSS,
JavaScript, polices d'écriture, etc. tous ces fichiers sont chargés dans le
navigateur pour créer une page web.
Les langages du web
• Le web fonctionne sur le protocole HTTP
• Plusieurs langages sont utilisés pour amener des pages personnelles aux
utilisateurs
Comment fonctionne le
Web ?
C'est un mécanisme client-serveur.
Le client demande un fichier, le serveur lui donne tel qu'il est stocké –
processus statique.
Le serveur peut aussi générer un fichier en fonction de la demande du client –
processus dynamique.
HTML, l'origine
HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim
Berners Lee, " inventeur " du Web.
HTML est basé sur SGML (Structured Markup Language), qui est une vieille
norme utilisée pour la description de [Link] est conçue pour les grosses
documentations techniques.
HTML est une instance de SGML.
HTML, les principes
Il contient des commandes, implémentées par des balises pour marquer les
différents types de texte (titres, paragraphe, listes …) , pour inclure des images,
des formulaires, des liens …
C'est un langage à balisage qui décrit la structure logique d'un document
hypertexte. Il a volontairement été conçu pour être simple.
Il a évolué vers un langage de description de pages offrant des possibilités plus
proches de la P.A.O.
L'hypertexte
Le langage HTML permet de créer des documents interactifs grâce à des liens
hypertextes, qui relient votre document à d'autres documents.
En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on
peut accéder a un nouveau document situé sur un autre ordinateur en
n'importe quel point du globe.
Introduction au marquage
-1
Pour décrire un fichier hypertexte, le langage HTML insère des
balises dans le texte du document :
<marqueur> ici votre texte </marqueur>
Début de mise en forme Fin de mise en forme Synonymes: marqueur, élément, tag.
Introduction au marquage
-2
Ces balises peuvent être insérées n'importe où dans le texte, entre 2 phrases,
mots, lettres …
<gras>Le <italique> cours </italique> HTML</gras>
Le cours HTML
Introduction au marquage
-3
Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<gras><italique> Le cours HTML</gras></italique>
Introduction au marquage
-4
Le langage HTML est sensible à la casse, toujours écrire en
minuscules.
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Mauvais:
<GRAS><italique> Le cours HTML </italique> </GRAS>
<Gras><ITALIQUE> Le cours HTML </ITALIQUE> </Gras>
<GRAS><ITALIQUE> Le cours HTML </italique> </GRAS>
La déclaration DOCTYPE
▪ La déclaration DOCTYPE n'est pas une balise HTML.
▪ c'est une instruction au navigateur web sur la version du langage de
balisage dont la page est écrite.
▪ La balise !DOCTYPE tient pour document type declaration DTD; elle définit:
- La version HTML utilisée par ce document (La 4.01, ou la norme XHTML 1.0)
- Le DTD (pour Document Type Definition) utilisé par le document ▪ Il se
positionne en en-tête du document.
La déclaration DOCTYPE
Les attributs
Les balises peuvent posséder un ou plusieurs attributs qui permettent de
spécifier l'action de la balise. Toujours mettre la valeur de l'attribut entre
guillemets.
<marqueur attribut="argument">texte</marqueur>
<marqueur attribut1="argument" attribut2="argument">texte</marqueur>
Exemple:
Les attributs
Exemple:
src=" " : donner la source (d’une image par exemple)
! href=" " :
donner la destination d’un lien – Texte du lien href=" " : donner la destination d’un
lien
Les commentaires
<!–-Voici un commentaire HTML -->
<!–-
Voici un commentaire HTML qui
peut se placer sur plusieurs lignes
-->
A l'aide d'un programme dit "WYSIWYG"
Dreamweaver , Golive, Netscape composer,
Que choisir pour écrire de l' FrontPage, … A l'aide d'un filtre
XHTML?
A la main, avec un éditeur de texte
Bolc Notes, Simple Text,
Bbedit,Emacs ,WordPad …
Avec un logiciel « assistant » au code
HTML PageSpinner sur MacIntosh, Amaya sur
Unix, HTML-Kit sur PC … Attention aux mauvaises
surprises de compatibilité !
Les commandes enregistrer sous html, que l'on trouve dans les suites bureautiques (Word,
OpenOffice, …), dans certains logiciels de P.A.O.
Conversion HTML vers XHTML avec HTML Tidy
Disponible dans de nombreuses versions sur le site du W3C
Que choisir pour lire
HTML?
Le client doit pouvoir interpréter
HTML et afficher le résultat. Ils sont
divers, tournant sur des systèmes
différents:
– Netscape Navigator, Mozilla,
Internet explorer, Safari, Opéra,
iCab, Emacs mode www,
Amaya, Lynx, links, w3m …
Note sur les
caractères accentués
Vous pouvez rencontrer le codage ASCII sur 7 bits spécifié par la norme
pour afficher les caractères accentués ou spéciaux. Ceux ci devront faire
l'objet d'un codage spécial au sein du fichier HTML.
é s'écrit é être s'écrit &eacirc;tre
Les serveurs Web accepte les caractères accentués de la norme iso 8859-
1. On spécifie l'encodage dans le fichier HTML.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Un peu plus loin
dans HTML
<html>
<head>
<title>Mon deuxieme fichier</title>
</head>
<body>
<h2>Hello World</h2>
<p>
L'emplacement de votre nouveau matériel est-il à proximité (moins de 5m) d'une prise réseau libre ?
Si oui, relevez le numéro de la prise (il est écrit sur une plaque de céramique bleue, il faut respecter la
distinction entre lettres majuscules et minuscules). Sinon, il faut faire installer une nouvelle prise par le Service Travaux,
auquel vous devrez adresser un bon de cession interne. La suite des opérations aura lieu quand vous aurez une prise
disponible. Dans le doute, interrogez par courrier électronique netadm@[Link]. </p>
<p>Votre demande doit nous parvenir par l'intermédiaire du correspondant informatique de votre Unité. Elle se
composera de deux parties : un bon de cession interne envoyé au Service Informatique Scientifique et un courrier
électronique adressé à netadm@[Link] qui contiendra toutes les informations utiles (dont le
numéro du bon de cession). </p>
<ol>
<li> le premier élément</li>
<li> le deuxième élément</li>
<li> le troisième élément</li>
</ol>
<p><a href="[Link] trouverez ici la suite du texte !! </a></p>
</body>
</html>
Structur
e de base d'un fichier HTML
<html>
<head>
… <title>Mon premier document html</title>
</head>
<body>
… Bonjour tout le monde
</body>
</html>
Une balise <html> contenant une seule balise <head> et une seule balise
<body>. .
Les balises que l'on va trouver dans le corps divisent le contenu en sections logiques, sous forme de
blocs ( paragraphes, tableaux …). On parle d'éléments de niveau bloc.
Les éléments qui représentent les propriétés du texte (strong, i) qui figurent dans un bloc sont dits
"éléments de ligne".
Analyse des balises
<html> .. </html> Délimite le début et la fin du document <head> .. </head> Entête du
document, contient des méta informations
<body> . . </body> Corps du document
<title>. .</title> titre du document
<meta> . .</meta> méta-informations
<script> . .</script> script ou référence
Analyse des balises
Analyse des balises
Les balises structurent le contenu de la page (texte, images, etc.) • Chaque balise a un
rôle et donne du sens au contenu présenté
La balise <html>
• Tout document HTML commence par la balise qui se ferme en fin de
document : </html>
• La balise contient nécessairement deux balises définissant l'entête () <head>
et le corps () <body> du document.
La balise <head>
•La balise <head> détermine l’entête du document et contient les méta-informations. •
Son contenu ne sera par affiché dans le navigateur. Elle contient : - les métadonnées :
auteur, mot-clef, description de la [Link]
balise <meta />
- le titre de la page :
<title> Titre de la page </title>
- Les liens avec les feuilles de style :
balise <link />
- Les styles de la page :
<style> </style>
- Les scripts
<script> </script>
La balise <title>
•Dans l'entête se trouve le titre qui commence par <title> et se termine par </title>. Ce titre est
affiché dans la bande bleue qui se trouve en haut de la fenêtre.
– Sert en référencement (repris dans les résultats de recherche)
– Affichée dans l’onglet du navigateur
La balise <meta/>
• La balise <meta> fournit des métadonnées sur le document HTML. • Les métadonnées
concernent les mots clés associés à la page, sa description (repris par google), les informations
sur l’auteur ou encore des informations d’encodage de cette page.
• Les métadonnées ne sont pas visible mais analyser par les navigateurs, les moteurs de
recherche, ou autres services web
• La balise <meta> doit toujours se trouver dans la balise head.
La balise <meta/>
Attributs spécifiques à cet élément
charset
Spécifie l’encodage des caractères de la page
Syntaxe :
<meta charset="UTF-8">
content
Spécifie la valeur associée à l’attribut name ou l’attribut http-equiv Syntaxe :
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
La balise <meta/>
http-equiv
Précise l’en-tête HTTP concernant la valeur ou l’information contenu dans l’attribut content .
Cet attribut permet de fournir certaines informations au navigateur comme le type de contenu
ou le style CSS préféré pour la page HTML. Cet attribut peut aussi modifier le comportement du
navigateur comme déclencher le rafraichissement de la page à intervalle régulier.
Syntaxe : <meta http-equiv="refresh" content="300" >
Valeurs possibles :
▪ content-type : spécifie le type MINE du contenu de la page (déconseillé, utiliser <meta
charset.. )
▪ default-style : spécifie le style CSS par défaut de la page
▪ refresh : pour rafraichir la page à interval régulier
La balise <meta/>
name
Précise le nom des métadonnées en rapport avec l’attribut content . A utiliser que si
l’attribut http-equiv n’est pas défini
Syntaxe : <meta name="description" content="Le résumé de la page">
Valeurs possibles :
• application-name : indique le nom de l’application Web que la page représente •
author : indique le nom de l’auteur du document
• description : resume le contenu de la page
• generator : indique l’un des logiciels utilisés pour générer le document •
keywords : énumère les mots clés associés à la page
scheme
Précise le format du contenu de l’attribut content
Syntaxe : <meta name="date" content="2009-01-02" scheme="YYYY-MM-DD" >
La balise <meta/>
Exemple:
<!DOCTYPE html> <html>
<head>
<meta name="description" content="Tutoriels visuels pour aller à l'essentiel"> <!-- la description
résume le contenu de la page -->
<meta name="keywords" content="HTML,CSS,JavaScript">
<!-- les mots clés associés à la page -->
<meta charset="UTF-8">
<!-- définition de l'encodage des caractères -->
</head>
<body>
<p> Les informations sur les balises <mark>meta</mark>.</p>
</body>
</html>
La balise <body>
• Délimite le contenu de la page
• Le contenu est constitué de texte, images et autres éléments qui seront
affichés
<body>
Contenu de la page
</body>
La balise <body>
• C’est le corps de la page html.
• Contient toutes les balises et les informations qui seront affichées par le
navigateur.
• Les commentaires : <!– commentaires -->
• Le texte des commentaires ne sera pas affiché par le navigateur. • La barre
horizontale : <hr />
• Trace une ligne horizontale dans la page.
La balise <body>
• Lestitres : <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)
La balise <p>
• 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 />
Affichage
La balise <p>
Affichage
La balise <blockquote>
• La balise <blockquote> marque une citation
• Une citation est suivie d'un retour à la ligne
Affichage
Formatage de texte
.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>
.<big>texte gros</big> texte gros
.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 texte
Afficha
ge
Formatage de texte
Affichage
Formatage de texte
Affichage
Formatage de texte
• L'élément <sup >permet d’afficher un texte exposant.
• L'élément <sub> permet d’afficher un texte en indice
• L'élément<small> représente des annotations et des petits caractères comme les
informations légales ou liées au copyright
Affichage
Formatage de texte
Les quottes
<q> texte </q> ‘’texte’’
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.
Affichage
Sty
le de texte
.
.Avant la parution du langageCSS :
<font color=‘’couleur du texte’’ face=‘’police de caractères’’ size=‘’taille du texte’’>
texte </font>
Couleur du texte peut être
- La couleur en anglais : e.g. ‘’red’’, ‘’green’’, ‘’navy’’, etc.
- La couleur en code héxadécimal précédé par # : e.g. ‘’#ff00cc’’, ‘’#33ff00’’,
etc.
- La couleur en code décimal : rgb(valeur_rouge, valeur_vert,
valeur_bleu) Chaque valeur de couleur varie entre 0 et 255
Exemple :
<font color=‘’#ff33cc’’ face=‘’Times New Roman’’ size=‘’14’’> texte à mettre
en forme </font>
Style de texte
.
Avec le HTML 5 la balise <font> n’est plus tolérée, il faut utiliser les feuilles de style. Même
chose avec le XHTML et le HTML déclarés avec la variante ‘’strict’’ dans le <!DOCTYPE>.
. Chaque élément HTML a un style par défaut qui peut être modifié en utilisant les feuilles de
style.
. Les feuilles de style peuvent être :
. Externes : dans un fichier css séparé de la page HTML.
. Internes : dans la page HTML à l’aide de la balise <style> qui doit être insérée entre <head> et
</head>
. Inline : dans la balise à l’aide de l’attribut style.
Syntaxe : <balise style=‘’propriété1:valeur1;…’’>
Style de texte
.
. Exemple de feuilles de style interne :
<head>
<style>
Body { background-color : gray;}
H1{ color : blue;}
</style>
</head>
. Exemple de feuille de style inline:
<body style=‘’background-color:gray;’’>
<h1 style=‘’color:blue; font-family:verdana; font-size:200%; text-align:center; ‘’>
Rappels
Les noms d' éléments sont sensibles à la casse et sont écrits en
minuscules.
Les noms d'attributs sont sensibles à la casse, doivent être écrits en
minuscules et encadrées par des guillemets. Tous les attributs doivent
recevoir une valeur.
Les balises fermantes sont obligatoires.
Les éléments vides sont signalés par une balise spéciale. ( ex: <br />)
Les liens hypertextes
• Le lien est un élément cliquable qui renvoie l’utilisateur sur une nouvelle page (ou lui permet de
télécharger un fichier).
• Il est souvent stylé différemment (bleu souligné par défaut).
• Il peut renvoyer :
– vers un autre site (lien externe)
– vers une autre page du site (lien interne)
– vers des fichiers (image, .PDF, etc.)
La balise <a>
• On appelle « ancre du lien » le texte à l’intérieur de la balise
• On ajoute l’attribut href="cible_du_lien" pour indiquer vers quelle page on veut envoyer
l’utilisateur
• On peut ajouter l’attribut title="titre du lien" pour ajouter une infobulle au survol et indiquer à
l’utilisateur où il va arriver
La balise <a>
<a href=‘’destination’’ target=‘’cible’’> Texte de l’hyperlien </a>
• target peut avoir les valeurs:
_blank : ouvrir le lien dans une nouvelle fenêtre
_self : ouvrir le lien dans la même fenêtre que la page active.
Nom_cadre : ouvrir le lien dans un cadre nommé se trouvant dans la page active. _top : ouvrir le
lien dans toute la fenêtre contenant la page active.
La balise <a>
Affichage
Les
liens sur un texte …ou sur autre chose !
Lien externe vers un autre site
▪ La cible sera l’url (ou adresse) complète du site, http:// compris
▪ Il s’agit d’un lien absolu car on indique l’adresse complète
Lien externe vers un numéro de téléphone
▪ Permet de définir un numéro de téléphone à appeler
Les
liens sur un texte …ou sur autre chose !
Lien vers url:
<a href=‘’[Link]’’>wide world web consortium</a>
Lien vers la messagerie électronique :
<a href=‘’[Link] du lien</a>
e.g. <a href=‘’[Link]
Transfert de fichier:
<a href=‘’[Link] Transférer les fichiers</a>
Lien vers forum de discussion :
<a href=‘’news:[Link]’’> Forum </a>
Les
liens sur un texte …ou sur autre chose !
Lien vers un fichier:
• <a href=‘’chemin\nom_fichier.extension’’> texte </a>
• Il faut utiliser des chemins relatifs.
• Soit l’arborescence du site ci-contre:
• En étant dans la page [Link]
Pour accéder à la page [Link] :
• <a href=‘’[Link]>Page 2 </a>
Pour accéder à la page [Link] :
• <a href=‘’../Produits/[Link]’’> Page 3 </a>
Les liens intra-pages
Permet de naviguer dans une même page
• Le lien #chats permet d’accéder à l’ancre ‘’chats’’ dans la même page. <a name = "chats"
>Texte sur les chats</A>
……<a href = "#chats"> En savoir plus sur les chats </a>
• On peut accéder à un endroit précis dans une autre page web avec :<a href =
"[Link]#refautrepage">Vers la référence d’une autre page</a> E.g. <a
href=‘’[Link]#chats’’>chats</a> : permet d’accéder à l’ancre ‘’ #chats’’ se trouvant
dans la page ‘’[Link]’’
Eléments de listes
<ul> . . </ul> Liste non triée, liste à puces <ol> . . </ol>
Liste triée, liste à numéros <li> . . </li> Elément de la liste
Eléments de listes
Les listes de définition:
<dl> … </dl> (definition list)
Chaque élément de la liste est créé à l’aide des balise <dt>..</dt> (definition terme) suivi par
<dd>…</dd> (definition description).
Les éléments <dt> s’affichent en gras et les éléments <dd> s’affichent avec un retrait à droite.
. Le type de numérotation et des puces dans les listes ordonnées et non ordonnées peut être
modifié à l’aide de l’attribut type.
. Exemples:
<ol type=‘’roman’’> affiche des chiffres romains avant les éléments de la liste. <ul
type=‘’square’’> affiche des puces carrées avant les éléments de la liste. . Avec HTML 5, il faut
utiliser les feuilles de style pour changer le type de numérotation et puces d’une liste.
Eléments de listes
Affichage
Eléments de listes
Affichage
Contenu d’une liste
• Les éléments <ul>et <ol> ne peuvent contenir que des éléments. • Chaque
élément <li> peut contenir des éléments de bloc ou des éléments incorporés (p,
div, blockquote, h1, etc.).
• Les listes peuvent s'imbriquer.
• On peut mélanger <ul>et <ol> à condition de les fermer correctement.
Exemple d’ imbrication
Affichage
Les listes en pratique- les
onglets
Affichage
Les listes en pratique- les
navigations
Les listes en pratique- les
navigations
Rappel
Encore plus
loin dans l' HTML
<div style="text-align: center;">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th><img src="Images/[Link]" width="65" height="35" align="Middle" />Pour Mac</th>
<th><img src="Images/[Link]" width="100" height="60" align="Middle" />Pour PC</th>
<th><img src="Images/[Link]" width="150" height="71" align="Middle" />Pour Linux</th>
</tr>
<tr>
<td>
<ul>
<li><a href="[Link] texte </a></li> <li>
<a href="[Link] </a></li> <li><a
href="[Link] </ul>
</td>
<td>
<ul>
<li><a href="[Link] texte </a></li> <li> <a
href="[Link] </a></li> <li><a
href="[Link] </a></li> </ul>
</td>
<td>
<ul>
<li><a href="[Link]
</ul>
</td>
</tr>
</table>
</div>
Encore
plus loin dans l' HTML
Affichage
Les tableaux -1
<table> . . </table>
Définit un tableau
Principaux attributs:
align = position
bgcolor = color
border = n
cellpadding = n
cellspacing = n
width = n
Les tableaux -2
<tr> . . </tr>
Définit une ligne d'un tableau
Principaux attributs :
align = left,center,right
valign = top, middle, bottom
bgcolor = color
border = n
Les tableaux -3
<td> . . </td>
Définit une cellule de données
Principaux attributs :
align = type
valign = type
bgcolor = color
colspan, rowspan = n
height, width = n
Les tableaux -4
<table>
<tr>
<td> A</td>
<td> B </td> <td> C </td> </tr>
<tr>
<td> D</td> <td> E </td> <td> F </td> </tr>
</table>
A B C
D E F
Les tableaux -5
• Pour <table>
Border : épaisseur de la bordure
Width : (en pixel ou en % ) largeur du tableau par rapport à la fenêtre du navigateur. Rules :
préciser quels traits sont tracés à l’intérieur du tableau. Les valeurs possibles sont : ‘’all’’, ‘’rows’’,
‘’cols’’ ou ‘’none’’.
Frame : préciser quels traits de la bordure extérieure du tableau sont tracés. Les valeurs
possibles sont : ‘border’’ (tout les traits) ,‘’void’’ (aucun trait), ‘’hsides’’ (traits
horizontaux) ,‘’vsides’’ (traits verticaux), ‘’above’’ (trait en bas), ‘’below’’ (trait en haut), ‘’lhs’’
(trait à gauche) ,‘’rhs’’ (trait à droite).
• . Cellpadding : espacement entre les bordures des cellules et leurs contenus • . Cellspacing :
espacement entre les bordures des cellules
Les tableaux -6
Pour <tr>, <th> et <td> :
. Align : alignement du texte dans la cellule qui peut avoir les valeurs ‘’left’’,
‘’right’’ , ‘’center’’ ou ‘’justify’’
. Valign : alignement vertical du texte dans la cellule qui peut avoir les valeurs
‘’middle’’, ‘’top’’ ou ‘’bottom’’
. Avec le HTML 5, on utilise les feuilles de style pour définir un style pour le
tableau et les cellules.
Les tableaux -Exemples
<th> peut remplacer <td> pour
créer une cellule d’entête au
tableau.
Par défaut affiché en gras et centré
dans les navigateurs
