Techniques Internet de Base2006-2007
Licence 2 (Info, Maths, PC/PA)Université Jean Monnet
Ruggero G. [email protected]
Reprise cours précédent
Le fichier index.html
Lorsque l'on demande une URL sans spécifier la page web, le serveur HTTP cherche, dans l'ordre : index.html index.htm index.stm index.php index.asp default.asp
Il est important de mettre une page de type index dans le répertoire principale du site web
Exemplel'URL http://www.monsite.fr/hobbiespermet d'afficher le contenu du fichier hobbies/index.html (par exemple)
Autres attributs de BODY
BGCOLOR : spécifie la couleur de l'arrière-plan de la page web
Exemple<BODY BGCOLOR="blue" TEXT="white">Un peu de texte blanc sur fond bleu</BODY>
Le filet horizontal
Le filet horizontal <HR> est un élément d'usage général qui est principalement employé pour séparer différentes parties d'un document au moyen d'un trait horizontal
Attributs NOSHADE : suppression de l'ombrage ALIGN : à gauche par défaut SIZE : épaisseur en nombre de pixels WIDTH : largeur en valeur absolue (exemple,
"400") ou relative (exemple, "75%")
Exemples
<BODY>Filet avec ombre<HR>Filet sans ombre<HR NOSHADE>Filet plus gros<HR SIZE="10">Filet à droite et plus court<HR ALIGN="right" WIDTH="50%"></BODY>
Eléments imbriqués
Les deux exemples suivants : <FONT FACE="verdana" COLOR="red"><P>Premier paragraphe</P><P>Deuxième paragraphe</P></FONT>
<P><FONT FACE="verdana" COLOR="red">Premier paragraphe</FONT></P><P>Deuxième paragraphe</P>
produisent deux résultats différents! Le premier : même format aux deux paragraphes Le deuxième : format standard au deuxième
paragraphe
Les images
Utilisation des images
Les images apportent sans doute un "plus" aux sites internet
Il est facile de s'en servir maladroitement trop d'imagespas assez d'images images trop grandes résolution trop basse par rapport à la taille
Différents types d'images reconnues par les navigateurs
Types d'images
GIF (Graphic Interchange Format) .gif Compression sans perte d'information Permet la transparence Limité à 256 couleurs Bon pour dessin au trait et image avec peu de couleurs
JPEG (Joint Photographic Experts Group) .jpg Compression avec perte d'information Pas de transparence Jusqu'à 16 millions de couleurs (Truecolor) Bon pour photos
PNG (Portable Network Graphics) .png Comme le format GIF mais en Truecolor Bon pour toute utilisation
Il existe des format GIF et PNG animés.
Intégration des images
Pour intégrer une image dans une page web, on utilise le marqueur <IMG>Attributs : SRC : indique le fichier contenant l'image ALT : texte affiché à la place de l'image, si celle-ci n'est pas
disponible (obligatoire) HEIGHT : hauteur de l'image en pixel WIDTH : largeur de l'image en pixel ALIGN : précise l'alignement horizontal ou vertical de l'image BORDER : précise l'épaisseur d'une éventuelle bordure
entourant l'image Exemple : <IMG SRC="image.jpg">
Exemple
…<BODY><P ALIGN="justify">Actarus (Duke Fleed) <IMG SRC="goldorak.jpg" ALT="Goldorak!!!"> est le prince de la planète Euphor (Fleed). Attaquée par l'empire galactique de Véga, cette planète est détruite et polluée par des radiations radioactives, …</P>
</BODY>…
Taille de l'image
Pour adapter la taille de l'image aux besoins de mise en page on dispose des attributs HEIGHT et WIDTH
Exemples <IMG SRC="image.jpg" WIDTH="320" HEIGHT="240">
Si on précise un seul de deux paramètres, l'autre est adaptée en fonction des proportions de l'image
Si on précise les deux valeur et on ne respecte pas les proportions, l'image peut apparaître déformée
Exemples
...
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="240" WIDTH="320">
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="300">
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="400" WIDTH="200">
...
Alignement d'une image
Alignement verticalALIGN="top" : le haut de l'image est
aligné sur la partie supérieure de la ligne où elle se trouve
ALIGN="middle" : le milieu de l'image est aligné sur le milieu de la ligne où elle se trouve
ALIGN="bottom" : le bas de l'image est aligné sur le bas de la ligne où elle se trouve (valeur par défaut)
Exemples
...
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="top">
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="middle">
<IMG SRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="bottom">
...
Alignement d'une image
Alignement horizontalALIGN="left" : le debut du texte se place
à la hauteur du coin supérieur droit de l'image et continuer jusqu'au bas de cette image
ALIGN="right" : le texte commence à gauche de la ligne correspondante au bord supérieur de l'image et, lorsque il arrive au bord gauche de l'image, il se poursuit sur la ligne inférieure
Exemples
...<P ALIGN="justify"> <IMG SRC="goldorak.jpg"
ALT="Goldorak!!!" ALIGN="left"> Actarus (Duke Fleed) est le prince de la planète Euphor (Fleed)…</P>
<P ALIGN="justify"> <IMG SRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="right"> Actarus (Duke Fleed) est le prince de la planète Euphor (Fleed). Attaquée…</P>
...
Les listes
Les listes
Une liste est une collection d'objets de même nature présentée de façon à mettre en valeur leur appartenance à une structure commune.
HTML distingue principalement trois types de listes : les listes ordonnées (ou numérotées) les listes non ordonnées (dites "à puces") les listes de définition (ou de glossaire)
Les listes ordonnées
L'ensemble de la liste est délimitée par le conteneur <OL> (ordered list)Attributs START : spécifie le numéro du premier élément TYPE : spécifie le type de numérotation
Chaque élément de la liste est précédé par un marqueur <LI>Attribut VALUE : spécifie le numéro d'élément
Exemple:
<OL> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément.</OL>
Attribut START et VALUE
Utilisation de l'attribut START<OL START="5"> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément.</OL>
Utilisation de l'attribut VALUE<OL> <LI>Premier élément. <LI>Deuxième élément. <LI VALUE="5">Troisième élément. <LI>Quatrième élément.</OL>
Utilisation de l'attribut TYPE
Valeurs de l'attribut TYPE :1 : chiffres arabesi : chiffres romains en bas de casseI : chiffres romains en capitalesa : lettres (bas de casse)A : lettres (capitales)
Exemples<OL TYPE="i">...<OL TYPE="A">...
Exemples
<OL TYPE="i"> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément.</OL>
<OL TYPE="a"> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément. <LI VALUE="28">Vingt-huitième élément.</OL>
Les listes à puces
L'ensemble de la liste est délimitée par le conteneur <UL> (unordered list)Attributs TYPE : spécifie le type de puce pour l'ensemble de la liste
Chaque élément de la liste est précédé par un marqueur <LI>Attribut TYPE : spécifie le type de puce pour l'élément
Exemple:
<UL> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément.</UL>
Utilisation de l'attribut TYPE
Valeurs de l'attribut TYPE : disc : gros point noir plein (par défaut) circle : gros point noir creux square : petit carré plein
Exemples <UL TYPE="circle">... <UL TYPE="disc"> <LI>Premier élément. <LI>Deuxième élément. <LI TYPE="square">Troisième élément. <LI>Quatrième élément.</UL>
Exemples
<UL TYPE="circle"> <LI>Premier élément. <LI>Deuxième élément. <LI>Troisième élément. <LI>Quatrième élément.</UL>
<UL TYPE="square"> <LI>Premier élément. <LI>Deuxième élément. <LI TYPE="disc">Troisième élément. <LI>Quatrième élément.</UL>
Les listes de définitions
L'ensemble de la liste est délimitée par le conteneur <DL>
Le terme à définir est précédé par un marqueur <DT> Chaque définition est précédé par un marqueur <DD> Exemple:
<DL> <DT>Terme1. <DD>Définition du Terme1. <DT>Terme2. <LI>Définition du Terme2.</DL>
Listes imbriquées
On peut imbriquer des listes à l'intérieur d'autres listes sans limite de profondeur
Exemple
<UL> <LI>Premier élément. <UL> <LI>Premier sous-élément. <LI>Deuxième sous-élément. <LI>Troisième sous-élément. </UL> <LI>Deuxième élément. <OL> <LI>Premier sous-élément. <LI>Deuxième sous-élément. </OL> <LI>Troisième élément.</UL>
Les liens
Les liens
C'est ce qui fait la différence entre un texte commun, et un hypertexte
Un lien permet d'ouvrir une autre page du site web ou une page externe en cliquant sur un mot, phrase ou image que l'on identifie par le fait que sa mise en forme est différente du reste du texte e par le changement de la forme du pointeur de la souris
Les liens déterminent la structure du site web
Structure d'un site web
Il existe de nombreuses façons d'organiser les documents qui constituent un site Web
Selon la nature du site Web, une structure peut être plus ou moins adaptée
Savoir concevoir et organiser un site Web n'est pas dans les objectifs de ce cours
Exemples de structure
Linéaire
Exemples de structure
Rayonnante
Exemples de structure
Arborescente
Trois types de lien
Références dans la même page Références à une autre page interne Références externes
lien externe
lien dans la même page
lien interne
Représentation du lien
Le deux extrémités d'un lien s'appellent des ancrages (anchors) ancrage source ancrage destination
On utilise la balise <A><A HREF=URL>texte ou image</A> URL : destination texte ou image : appel de lien le texte apparaît généralement souligné à l'écran
Les URL
Trois formes de URL : lien absolu : utilisé pour les liens externes, c'est un adresse
complet.Exemple :
http://www.monsite.fr/personel/mapage/cv.html lien relatif : utilisé pour les liens internes, on spécifie
uniquement la page et son chemin rélatif.Exemples
cvanglais.html ../../hobbies/guitar.html job/2004/mesjobs.html
étiquette : utilisé pour les liens dans la même page.Exemple
#deuxiemechapitre
La balise <A>
C'est un conteneurAppel de lien : contenu (image ou texte)Destination du lien : attribut
Il y a d'autres types de liens Images réactives : on divise une image en
zones ; chaque zone est un ancrage différent
Pas traité ici
Les attributs de la balise <A>
Attribut HREF Sa valeur est représentée par l'URL du point de destination
Exemples : <A HREF="http://www.univ-st-etienne.fr>Notre université"</A>
<A HREF="cv.html">mon cv</A> <A HREF="#paragraphe2">Deuxième paragraphe</A>
Attribut TABINDEX Fixe la position de l'élément dans l'ordre séquentiel des
tabulation Attribut NAME
Crée une cible pour les liens dans la même page
Exemple de lien interne
premierepage.html :<BODY><P>Pour ouvrir la deuxième page, <A HREF="deuxiemepage.html">cliquer ici</A>.</P></BODY>
deuxiemepage.html :<BODY><P>Pour retourner à la première page, <A HREF="premierepage.html">cliquer ici</A>.</P></BODY>
Exemple de lien externe
<BODY>
<P>Pour accéder au site de l'Université de Saint-Etienne, <A HREF=http://www.univ-st-etienne.fr>cliquer ici</A>.
</P>
Exemple de lien avec image
<BODY>
<P>Vous vous souvenez de Goldorak ? Cliquer sur son image pour en savoir plus.</P>
<A HREF="images.html"><IMG SRC="goldorak.jpg" WIDTH="160"></A>
</BODY>
Liens dans la même page
Dans un texte long il est parfois utile de disposer d'un moyen pour rejoindre des partie de texte situées plus loin dans la page
On peut créer un lien vers un autre point de la page
Il suffit d'insérer deux ancrages : un ancrage "source" (l'appel de lien) un ancrage "destination" (le point destination)
On utilise toujours la balise <A>
Ancrage source/destination
Destination On utilise la balise <A> avec l'attribut NAME pour spécifier une
étiquette Exemple :<A NAME="enseignements"><H2>Enseignements</H2>
Source On utilise la balise <A> de manière standard avec l'attribut
HREF La valeur de l'attribut HREF est une étiquette précédée par le
caractère dièse (#) Exemple :<A HREF="#enseignements">Mes enseignements</A>
Attention : <A> est un conteneur! Pas de dièse dans le lien destination
Exemple
<BODY><A NAME="liste"><H3>Liste</H3></A><UL> <LI><A HREF="#n1">Paragraphe1</A> <LI><A HREF="#n2">Paragraphe2</A></UL><HR>... texte ...<A NAME="n1"><B>Premier paragraphe</B></A>... texte ...<A HREF="#liste">Retour à la list</A>... texte ...<A NAME="n2"><B>Deuxième paragraphe</B></A>... texte ...<A HREF="#liste">Retour à la list</A>... texte ...</BODY>
Les tableaux
Les tableaux en HTML
Un tableau est constitué de cellules individuelles pouvant renfermer à peu près n'importe quel autre objet HTML (y compris un autre tableau)
Les cellules y sont énumérées ligne par ligne, de gauche à droite dans chaque ligne
Aucune règle d'homogénéité n'est imposé dans un tableau : les cellules peuvent contenir des éléments de nature très différente : texte images multimédia ...
Structure d'un tableau
Le tableau est tout entier placé dans un conteneur <TABLE> ... </TABLE> à l'intérieur duquel on trouve, dans cet ordre :
Une balise <CAPTION> ... </CAPTION>, facultative, pour renfermer un titre qui sera généralement affiché au-dessus du tableau
Une suite de balises <TR> ... </TR> définissant les lignes successives du tableau, du haut vers le bas
Dans chaque ligne, une suite de balises <TD> ... </TD> pour les cellules "ordinaires" ou <TH> ... </TH> pour les cellules d'en-tête
Premier exemple de tableau
<TABLE> <CAPTION>Exemple de tableau</CAPTION> <TR> <TH>En-tête1</TH> <TH>En-tête2</TH> <TH>En-tête3</TH></TR> <TR> <TD>Cellule1</TD> <TD>Cellule2</TD> <TD>Cellule3</TD></TR> <TR> <TD>Cellule4</TD> <TD>Cellule5</TD> <TD>Cellule6</TD></TR></TABLE>
Attributs de l'élément TABLE - 1
ALIGN : centrage horizontal du tableau BORDER : épaisseur extérieure de la bordure en pixels FRAME : encadrement extérieur du tableau. Valeurs :
void : aucune bordure above : bordure dans le haut below : bordure dans le bas hsides : bordure dans le haut et dans le bas vsides : bordures à gauche et à droite lhs : bordure à gauche seulement rhs : bordure à droite seulement box : bordure des quatre côtés border : bordure des quatres côtés
Attributs de l'élément TABLE - 2
RULES : encadrement intérieur du tableau. Valeurs : none : aucune séparation (défaut) groups : seulement entre les groupes de lignes et de
colonnes rows : seulement entre le lignes cols : seulement entre les colonnes all : partout
Ne pas indiquer de valeur pour BORDER implique FRAME="void" et RULES="none", toute autre valeur implique FRAME="border" et RULES="all" (sauf si on donne une valeur spécifique à ces attributs)
WIDTH : largeur absolue (exemple, "400") ou relative (exemple, "75%") du tableau
BGCOLOR : couleur de l'arrière-plan
Attributs de l'élément TABLE - 3
CELLPADDING et CELLSPACING : indiquent respectivement la valeur (en pixels) de la marge intérieure d'une cellule et de la marge qui sépare deux cellules consécutives (dans le sens horizontal vertical)
CELLSPACING
contenu de la
cellule
CELLPADDING
Attributs de l'éléments TR
ALIGN : alignement horizontal
VALIGN : alignement vertical. Valeurs : top : contenu en appui sur le bord supérieur middle : contenu à distance égale des bords inférieur et
supérieur bottom : contenu en appui sur le bord inférieur
BGCOLOR : couleur de l'intérieur des cellules de la ligne
L'élément TD et TH
L'élément TD renferme le contenu d'une cellule, c'est-à-dire pratiquement n'importe quoi : texte, image, élément multimédia, tableau, etc. La balise finale est facultative
A l'intérieur d'une cellule on peut trouver des ruptures de ligne qui permettent de répartir le contenu de la cellule sur plusieurs lignes
TH joue le même rôle que TD, mais son contenu est automatiquement centré et affiché en gras
Attributs de l'élément TD
HEIGHT : hauteur de la cellule en pixels NOWRAP : (sans valeur) précise qu'il ne doit pas y avoir
de rupture de ligne automatique WIDTH : largeur de la cellule en pixels ALIGN : centrage horizontal du contenu VALIGN : centrage vertical du contenu BGCOLOR : couleur de l'arrière-plan COLSPAN : permet d'effectuer un regroupement d'un
nombre N de cellules vers la droite ROWSPAN : permet d'effectuer un regroupement d'un
nombre N de cellules vers le bas
L'élément CAPTION
Le conteneur CAPTION sert à afficher un titre général au-dessus ou au de-dessous du tableau.
Seul attribut : ALIGN top : titre au-dessus du tableau et centré bottom : titre au-dessous du tableau et centré left : titre au-dessus et à gauche du tableau right : titre au-dessus et à droite du tableau
Les extensions de cellules
Il est possible d'agrandir des cellules en les étendant dans les deux sens : sur plusieurs lignes ou sur plusieurs colonnes à travers les deux attributs COLSPAN et ROWSPAN
ROWSPAN=2
COLSPAN=3
Exemple
<TABLE BORDER=1> <TR> <TD ROWSPAN=2>1-1</TD> <TD>1-2</TD> <TD>1-3</TD> <TD>1-4</TD> </TR><TR> <TD>2-2</TD> <TD>2-3</TD> <TD>2-4</TD> </TR><TR> <TD>3-1</TD> <TD COLSPAN=3>3-2</TD> </TR></TABLE>
Usage des tableaux
Les tableaux peuvent être utilisés pour la mise en page du document HTMLExemples :séparer le texte des imagesséparer les différentes partie du textecréer des menu à un endroit spécifique du
document (par exemple à gauche) ...
Exemple : image en marge du texte
<TABLE> <TR> <TD COLSPAN=2 ALIGN="center"><H2>Une petite
"bio"graphie de Goldorak</H2></TD> <TR> <TD VALIGN="top"><IMG SRC="goldorak.jpg" WIDTH="160"
TITLE="Goldorak!!!"></TD> <TD WIDTH="500" VALIGN="top" ALIGN="justify">Actarus
(Duke Fleed) est le prince de la planète Euphor (Fleed). Attaquée par l'empire galactique de Véga, cette planète est détruite et polluée par des radiations radioactives, la population est réduite à néant et les parents du prince sont tués. Le prince d'Euphor réussit …
</TD> </TR></TABLE>
Exemple de tableau
<FONT FACE="Verdana"><TABLE BORDER="1" ALIGN="center"> <CAPTION>Quelques anciens ordinateurs</CAPTION> <TR BGCOLOR="lightcyan"> <TH>Marque <TH>Type <TH>Longueur<BR>du mot <TH>Mémoire <TH>Temps<BR>d'accès </TR> <TR BGCOLOR="lightgray"> <TD>BULL <TD>GAMMA 60 <TD ALIGN="right">24 <TD ALIGN="right">8 à 32 K <TD ALIGN="right">10 µs </TR>
Exemple de tableau (suite)
<TR BGCOLOR="lightyellow"> <TD>CDC <TD>3600 <TD ALIGN="right">48 <TD ALIGN="right">8 à 32 K <TD ALIGN="right">1 µs </TR> <TR BGCOLOR="lightgray"> <TD ROWSPAN=4>IBM <TD>1401 <TD ALIGN="right">var. <TD ALIGN="right">1 à 16 K <TD ALIGN="right">11 µs </TR> <TR BGCOLOR="lightyellow"> <TD>1620 <TD ALIGN="right">var. <TD ALIGN="right">20 à 60 K <TD ALIGN="right">20 µs </TR>
Exemple de tableau (fin)<TR BGCOLOR="lightgray">
<TD>7040
<TD ALIGN="right">36
<TD ALIGN="right">4 à 32 K
<TD ALIGN="right">8 µs
</TR>
<TR BGCOLOR="lightyellow">
<TD>7094
<TD ALIGN="right">36
<TD ALIGN="right">32 K
<TD ALIGN="right">2 µs
</TR>
<TR BGCOLOR="lightgray">
<TD>Digital
<TD>PDP 1
<TD ALIGN="right">18
<TD ALIGN="right">4 à 64 K
<TD ALIGN="right">5 µs
</TR>
<TR BGCOLOR="lightyellow">
<TD>PHILCO
<TD>2000
<TD ALIGN="right">8
<TD ALIGN="right">32 K
<TD ALIGN="right">12 µs
</TR>
</TABLE>
</FONT>