Ecriture de pages Web
Le langage HTML
Matine OUSMANE
matines1@[Link]
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
Écrire pour le Web
Ce n'est pas uniquement écrire des pages en HTML, il faut
penser en terme de projet:
Définir, écrire le contenu.
Trouver une arborescence ergonomique
Équilibre menus/sous-menus.
Appliquer / Respecter la charte graphique
Utiliser, adapter les propositions graphiques.
Produire et intégrer les pages.
Installer le site sur le serveur.
Politique de maintenance et de mise à jour.
Comment écrire en HTML?
A la main, avec un éditeur de texte
A l'aide d'un programme qui génère le code HTML pour vous
• Assistant au code HTML.
• Éditeur dit « WYSIWYG » ou graphique.
Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte
– Simple Text, Bbedit,Emacs ,WordPad …
Avec un logiciel « assistant » au code HTML
PageSpinner sur MacIntosh, Amaya sur Unix, HTML-Kit sur PC …
A l'aide d'un programme dit "WYSIWYG"
– Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...
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:
– Mozilla, Netscape Navigator, Internet explorer, Safari, Firefox, Opéra, iCab,
Emacs mode www, Amaya, Lynx, links, w3m …
Note: Les clients web ne possèdent pas tous un processeur XML capable d'interpréter
correctement le XHTML. Pour une meilleure compatibilité:
utiliser les versions les plus récentes des navigateurs.
pour les plus anciens, faire en sorte qu'ils affichent la page comme du HTML en omettant
les déclarations XML qui pourraient les perturber.
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.
Que peut-on trouver dans un document HTML
type d'information extension de fichier
texte ascii .txt
document HTML .html ou .htm
image GIF .gif
image TIFF image .tiff
bimap XBM Image .xbm
JPEG .jpg ou .jpeg
son AIFF .aiff
son AU vidéo .au
QuickTime vidéo .mov
MPEG fichier .mpeg ou .mpg
PostScript .ps
Les balises - 1
Pour décrire un fichier hypertexte, le langage HTML
insère des balises dans le texte du document :
<………………> ici votre texte </……………………>
Début de mise en forme Fin de mise en forme
Les balises - 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
Les balises - 3
Il faut respecter une logique d'imbrication:
Bon:
<gras><italique> Le cours HTML </italique> </gras>
Résultat : Le cours HTML
Mauvais:
<gras><italique> Le cours HTML</gras></italique>
Les balises - 4
Le langage HTML est insensible à la casse, mais
comme XHTML l'est, 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>
Un fichier HTML
Un fichier HTML doit comporter au minimum ces 4 balises:
<html>
<head>
<title>
<body>
Expert : un fichier XHTML doit comporter ces 4 balises + les déclarations
XML et DTD.
Analyse des balises
<html> .. </html> Délimite le début et la fin du document
<head> . . </head> Entête du document
<title> . .</title> Titre du document
<body> . . </body> Corps du document
Les titres et paragraphes
<hn> . . </hn> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe
Les listes
<ul> . . </ul> Liste non triée, liste à puces
<ol> . . </ol> Liste triée, liste à numéros
<li> . . </li> Elément de la liste
Un fichier HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1
Transitional//EN "[Link]
<html>
<head>
<title>mon premier fichier</title>
</head>
<body>
hello world
</body>
</html>
Un fichier XHTML
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "[Link]
[Link]">
<html xmlns="[Link] lang="fr"
xml:lang="fr">
<head>
<title>mon premier fichier</title>
</head>
<body>
hello world
</body>
</html>
Structure d'une page
<HTML>
<HEAD>
<TITLE>Un titre</TITLE>
</HEAD>
<BODY>
Ceci est le corps de la page
Ceci est le corps de la page
Ceci est le corps de la page
</BODY>
</HTML>
Caractères accentués
Paragraphe normal :
CENTER
JUSTIFY
<P [ALIGN=position]>texte du paragraphe</P>
Paragraphe préformatté :
<PRE [WIDTH=entier]>texte du paragraphe</PRE>
Listes :
<UL> Elements de la liste</UL> non numéroté
<OL> Elements de la liste</OL> numéroté
<DL> Elements de la liste</DL> liste de définition
etc...
Un élément d'une liste
<LI> Elements de la liste</LI>
Balises de paragraphe : exemple (1)
<HTML><HEAD><TITLE>Un titre</TITLE></HEAD>
<BODY BGCOLOR=#FF8844>
<P>Ceci est un paragraphe</P>
<P ALIGN = CENTER>Ceci est un paragraphe centre</P>
<OL>
<LI>L1</LI><LI>L2</LI><LI>L3</LI>
</OL>
<UL>
<LI>L1</LI><LI>L2</LI><LI>L3</LI>
</UL>
<DL>
<LI>L1</LI><DL><LI>L2.1</LI><LI>L2.2</DL><LI>L3</LI>
</DL></BODY></HTML>
Balises de paragraphe : exemple (2)
Balises de titres
Les Six niveaux de titre !!!
<Hentier>texte du titre</ Hentier >
Niveau du titre
Pas de numérotation automatique...
Balises de titre : exemple (1)
<HTML><HEAD>
<TITLE>Exemple de titres</TITLE>
</HEAD>
<BODY>
<H1>Mon titre de niveau 1</H1>
<P>du texte</P>
<H2>Mon titre de niveau 2</H2>
<P>encore du texte</P>
<H3>Mon titre de niveau 3</H3>
<P>Bon ben on ne va pas continuer comme cela longtemps
non???</P>
</BODY></HTML>
Balises de titre : exemple (2)
Balises de caractères spéciaux
™ Caractères accentués ou équivalents à des délimiteurs HTML
&commande;
Quelques commandes
agrave à acirc â
amp & lt <
gt > ecirc ê
eacute é egrave è
ccedil ç nbsp ʹ ʹ incésable
etc...
Balises de formats de caractères
™ Styles "physiques" (en dur) :
<B>séquence de caractères</B> gras
<I>séquence de caractères</I> italique
<U>séquence de caractères</U> souligné?
Formats de caractères et caractères
spéciaux : exemple (1)
<HTML><HEAD><TITLE>Exemples de styles (paragraphes)</TITLE></HEAD><BODY>
<P>ceci est un texte <B>Gras</B> pour l'exemple</P>
<P>ceci est un texte <I>en italique</I> pour l'exemple</P>
<P>ceci est un texte <I>"en citation"</I> pour l'exemple</P>
<P>ceci est un sur lequel on insiste pour l'exemple</P>
<P>ceci est un texte <B>sur le quel on insiste vraiment</B>
pour l'exemple</P>
<P></P>
<P>Et voici désormais un exemple avec du texte accentué</
P>
<P>Même des chevrons comme ceci "<" et ">" qui ne
correspondront pas ici
à un délimiteur de balise HTML</P>
</BODY></HTML>
Formats de caractères et caractères
spéciaux : exemple (2)
Quelques commandes utiles :
exemple (1)
<HTML><HEAD><TITLE>Exemples de commandes diverses</TITLE></HEAD><BODY>
<P>Voici d'autres commandes utiles comme une rupture de ligne
ici<BR>
pour<BR>pouvoir<BR>formatter<BR> un peu...</P>
<CENTER>
<P>ceci sera centre...</P>
<P>ceci aussi </P>
</CENTER>
<P>Maintenant quelques exemples de lignes horizontales</P>
<HR>
<HR ALIGN=CENTER>
<HR SIZE=8>
<HR SIZE = 4 WIDTH=80%>
</BODY></HTML>
Quelques commandes utiles :
exemple (2)
Insertion d'une image
™ Attention aux formats (gif, JPEG, ...)
™ +Insertion d'une image :
texte de positon locale ou URL
remplacement
<IMG SRC="URL-image" [ALT="texte"] [ALIGN=position]
[HEIGHT=entier[%]] [WIDTH=entier[%]]>
LEFT
RIGHT
MIDDLE
TOP
hauteur largeur
BOTTOM
Les images -1
<img> . . </img>
Insère une image
Principaux attributs:
align = left, bottom, middle, top, right
alt = text
border = n
height, width = n
src = url
Les images -2
Attention au poids des images, il est important d'optimiser son
fichier image.
Deux formats sont lus par les navigateurs, GIF ( Graphics
Interchange Format ) et JFIF ( JPEG File Interchange
Format).On utilise le GIF pour les illustrations, le JPEG pour
les photos.
Insertion d'une image : exmple (1)
<HTML>
<HEAD>
<TITLE>Belle auto!!!</TITLE>
</HEAD>
<BODY BGCOLOR="#fbf82b">
<P><IMG SRC="[Link]" ALT="voiture 1" ALIGN="LEFT"></P>
<P><IMG SRC="[Link]" ALT="voiture 2" ALIGN="RIGHT"></P>
<P><IMG SRC="[Link]" ALT="voiture 3" HEIGHT=25></P>
</BODY>
</HTML>
Insertion d'une image : exemple (2)
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 liens - 1
<a> . . </a>
Création d'un lien hypertexte, ou vers un point d'ancrage du
document
Principaux attributs:
href = url
name = chaîne de caractères
<a href = "[Link] Pasteur</A>
Les liens - 2
<a name = "ref" >référence</a>
<p>
.
<p>
.
.
.
<p>
.
<a href = "[Link]#ref">Vers la référence</a>
Liens vers d'autres documents
™ Lien sur un autre document
<A REF ="[référence][#label]">texte associé au lien</A>
URL ou référence Nʹa de sens que pour un
à un fichier local document HTML
™définition d'un label dans un document HTML :
<A NAME="chaine de caractères">suite d'instructions HTML</A>
Liens vers d'autres documents :
exemple (1)
™ [Link]
<HTML><HEAD><TITLE>Référencel'origine</TITLE></HEAD><BODY>
<P>vas donc voir de ce
<A HREF="[Link]" ALT="vers ref2">coté</A>
si j'y suis...</P>
<P>ceci est une autres référence vers le
<A HREF="[Link]
</P></BODY></HTML>
™ +[Link]
<HTML><HEAD><TITLE>>Référence : la destination</TITLE></HEAD><BODY>
<P ALIGN=CENTER>Bonjour... ca va???</P>
</BODY></HTML>
Liens vers d'autres documents :
exemple (2)
Remarque : le lien "mailto"
Exemple
<A HREF="[Link] mail</A>
Les tableaux -1
<table> . . </table>
Définit un tableau
Principaux attributs (certains ne sont pas valides en XHTML 1.1):
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 (certains ne sont pas valides en XHTML 1.1):
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 (certains ne sont pas valides en XHTML 1.1):
align = type
valign = type
bgcolor = color
colspan,rowspan = n
height, width = n
Balises de tables (1)
La table :
épaisseur du cadre épaisseur des traits internes
<TABLE [BORDER=entier] [CELLSPACING=entier]
[CELLPADDING =entier] [WIDTH=entier[%]]
[HEIGTH=entier[%]]> ligne{ligne}</TABLE>
hauteur de la table
largeur de la table
distance du texte à la bordure
Balises de tables (2)
™ Une ligne :
<TR>case{case}</TR>
™ Une case :
nombre de nombre de colonnes largeur
lignes
<TD [ROWSPAN=entier] [COLSPAN=entier] [WIDTH=entier[%]]
[ALIGN=type]>instructions HTML</TD>
MIDDLE
RIGHT
Balises de tables : exemple (1)
<HTML><HEAD><TITLE>Exemple de table</TITLE></HEAD>
<BODY BGCOLOR=#fffeac TEXT=#0a0a8a LINK=#ff1614 VLINK=#9414cb>
<TABLE BORDER=6 CELLSPACING=12 CELLPADDING=10 WIDTH=80%
HEIGHT=100%>
<TR><TD COLSPAN=2 ALIGN=RIGHT>case 1-1 sur deux colones </TD>
<TD WIDTH=50% ALIGN=CENTER>case 1-3 </TD>
</TR>
<TR><TD ROWSPAN=2>case 2-1 sur deux lignes </TD>
<TD>case 2-2 </TD>
</TR>
<TR><TD>case 3-2 </TD>
<TD>case 3-3 </TD>
</TR>
</TABLE>
</BODY></HTML>
Balises de tables : exemple (2)