Techniques Internet de Base 2006-2007

Techniques Internet de Base2006-2007 Licence 2 (Info, Maths, PC/PA) Université Jean Monnet Ruggero G. PENSAruggero.pensa@univ-st-etienne.fr

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'images • pas 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> <PALIGN="justify">Actarus (Duke Fleed) <IMGSRC="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 ... <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="240" WIDTH="320"> <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="300"> <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" HEIGHT="400" WIDTH="200"> ...

Alignement d'une image • Alignement vertical • ALIGN="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 ... <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="top"> <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="middle"> <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="bottom"> ...

Alignement d'une image • Alignement horizontal • ALIGN="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 ... <PALIGN="justify"> <IMGSRC="goldorak.jpg" ALT="Goldorak!!!" ALIGN="left"> Actarus (Duke Fleed) est le prince de la planète Euphor (Fleed)…</P> <PALIGN="justify"> <IMGSRC="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 arabes • i : chiffres romains en bas de casse • I : chiffres romains en capitales • a : 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 conteneur • Appel 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 destinationExemples : • <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>

Techniques Internet de Base 2006-2007