Complément HTML-CSS

Voici un échantillon de balises utilisables dans la zone HEAD ou dans la zone BODY :

Titre de la page

À placer dans la zone HEAD, elle définit le titre qui sera affiché dans la barre de titre du navigateur.

Prototype : <TITLE>...</TITLE>

Ancrage ou lien vers une ressource (page html, section...)

Cette balise primordiale permet de créer un lien vers une autre page.

Prototype : <A HREF="protocole://serveur:port/répertoire/ressource">Texte associé à l'ancrage</A>

Exemple : <A HREF="http://192.168.0.1/index.html">Gateway</A>

Il est possible de placer un point de référence à un endroit quelconque dans une page : <A NAME="section1">Section1</A>, et de s'y placer avec la balise ci-dessous :

Pour se placer au point référencé : <A HREF="pagehtml#section1">Aller à la Section1</A>

Pour se placer au début de la page : <A HREF="#top">Aller au début de la page</A>

Placer une image

<IMG SRC="image.gif" ALT="..." BORDER=b ALIGN=... HEIGHT=h WIDTH=w>

* ALT : texte alternatif à donner systématiquement

* b, h et w sont des valeurs numériques,

* ALIGN peut prendre une des valeurs : LEFT, MIDDLE, RIGHT, BOTTOM ou TOP

On peut utiliser une image comme lien sur une page en la plaçant entre les balises A et /A :<A HREF="../index.html"> <IMG SRC="/icons/back.gif"> </A>

Changer la police de caractère : taille, couleur

<FONT FACE="police1 , police2" SIZE=n COLOR=couleur> ...Texte avec la nouvelle font...</FONT>

* n est une valeur numérique,

* COLOR peut prendre un nom de couleur en anglais : RED, GREEN, ... ou un valeur Numérique RGB : #808080

Il est judicieux de choisir 2 polices qui correspondent chacune à un OS différent.

Balises de mise en forme

Elles sont utilisées pour modifier le format de la police : gras, italique, etc.

Caractères spéciaux et accentués

Les caractères spéciaux pour les différentes langues ont un code spécifique afin de permettre leurs affichage indépendamment de la langue configurée sur poste client.

Voir Autres

Voir Unicode

Listes

Elles permettent un affichage structuré (ex: sommaire). Elles peuvent être numérotées ou non.

Ordonnées (ou numérotées)

<OL TYPE="t" START="n">

<LI>Titre 1</LI> de la première entrée de la liste

...

<LI>Titre n</LI> de la nième entrée de la liste

...

</OL>

Type : "1" pour numérique, "a" pour des minuscules, "A" pour des majuscules et "i" et "I" pour des chiffres minuscules et majuscules romains.

Non ordonnées

<UL TYPE="...">

<LI>...</LI>...

...

</UL>

Type : de puce "disc" "circle" "square"

Remarque : Il est possible de les imbriquer.

Tableaux

Fortement utilisés pour synthétiser des données ou pour organiser l'affichage, on les déclare comme suit:

<TABLE BORDER=n>

<TR> Table Row : Ajoute une ligne au tableau

<TH>NomCol1</TH>

<TH>NomCol2</TH>... : Ajoute des cellules de type en-tête

</TR>

<TR>

<TD>ValeurC1Ln</TD>

<TD>ValeurC2Ln</TD>... : Ajoute des cellules de type Data

<TR>

</TABLE>

TH et TD peuvent avoir entre autre, les paramètres suivants :

* COLSPAN=nb_colonnes_à_regrouper

* ROWSPAN=nb_lignes_à_regrouper

Rafraîchissement automatique d'une page

C'est une balise META qui doit être placée dans la section HEAD :

<META HTTP-EQUIV="REFRESH" CONTENT="n;page_a_afficher_au_bout_de_n_secondes.html">

PRÉSENTATION DE LA COMMUNICATION CLIENT/SERVEUR HTTP

La communication est unidirectionnelle, c'est à dire que le client (le navigateur) débute la communication et le serveur(http) lui répond. Et tout ceci en respectant scrupuleusement le protocol HTTP.

Serveur ...................................Client

[ <<<-----------requête HTTP------------- | équivaut à une demande URL.

[ -------------- Page HTML ---------->>> |

Sous Ubuntu, observer le résultat de la commande suivante : "more /etc/apache2/sites-available/default"

ou celle-ci : "grep DocumentRoot /etc/apache2/* -R"

On y relèvera la ligne "DocumentRoot /var/www/" indiquant où placer les pages HTML constituant le site WEB.

En réalité, on interdit l'accès complet à tous les répertoires du système (PC) aux navigateurs.

A l'installation, le serveur se protège des visites extérieures. L'administrateur doit autoriser les visites des navigateurs autre que sur localhost en ajoutant des lignes "Allow from all" dans le fichier : "/etc/apache2/sites-available/default", ce qui est une tâche administrative.

LES FORMULAIRES

Véritable communication avec l'utilisateur, ils permettent des saisies d'information en proposant divers objets.

Ces objets, proposés par le langage HTML, sont :

* Saisies de texte en clair ou caché

* Cases à cocher

* Boutons de choix

* Listes de choix

* Image dont la position du clic est transmise.

Le But ici sera de transmettre les données du formulaire(du client HTTP) au serveur HTTP afin que celui-ci les analyse et fournit une page HTML en réponse.

Commencer un formulaire

<FORM METHOD="..." ACTION="http://serveur/cgi-bin/test-cgi">

* METHOD peut prendre comme valeur :

* GET : Les données seront transférées via une variable d'environnement.

* POST : Les données seront transférées via STDIN

* ACTION : précise le programme qu'il faudra que le serveur exécute lorsque le bouton de soumission sera activé.

Saisie de texte

<INPUT TYPE="text" NAME="nom_variable" [SIZE=x][MAXLENGTH=y][VALUE="valeur"]>

Saisie mot de passe

<INPUT TYPE="password" NAME="nom_variable" [VALUE="valeur"]>

Passage de paramètre

<INPUT TYPE="hidden" NAME="nom_param" VALUE="valeur">

Case à cocher

<INPUT TYPE="checkbox" NAME="nom_cb" [VALUE="valeur"] [CHECKED]>

Boutons d'option

<INPUT TYPE="radio" NAME="nom_br" VALUE="valeur" [CHECKED]>

Pour associer plusieurs boutons d'option, il suffit qu'ils aient tous leur paramètre NAME à la même valeur.

Liste de choix

<SELECT NAME="nom_liste_choix" SIZE=valeur [MULTIPLE]>

<OPTION [SELECTED]> Valeur1 par défaut

...

<OPTION> Valeur_n

</SELECT>

Champs de saisie de texte multiligne

<TEXTAREA NAME="nom_champs_texte" ROWS=nb_l COLS=nb_c>

...

</TEXTAREA>

Bouton de soumission

<INPUT TYPE="submit" VALUE="Texte dans le bouton"]>

Image de soumission

<INPUT TYPE="image" NAME="boutonxy" SRC="fichier.gif">

Terminer un Formulaire

</FORM>

LES CADRES

Ils structurent les pages en fenêtres indépendantes ou en sous-fenêtres.

Le document avec cadres possède une section FRAMESET à la place de BODY.

Format

<FRAMESET ROWS="..." COLS="..." >

...

</FRAMESET>

* ROWS : spécifie la disposition des cadres horizontaux. Peut être une liste de longueurs en pixels, en pourcentages ou relatives, séparées par des virgules. La valeur par défaut est "100%", (une rangée).

Ex : ROWS="25%,50%,25%" équivalent à ROWS="1*,2*,1*"

* COLS : spécifie la disposition des cadres verticaux.

Les cadres imbriqués

Ils peuvent s'imbriquer à n'importe quel niveau.

Exemple : le premier FRAMESET divise l'espace disponible en deux colonnes égales. Le second FRAMESET imbriqué partage alors la seconde colonne en deux rangées.

<FRAMESET cols="50%, 50%">

...le contenu du premier cadre...

<FRAMESET rows="40%, 60%">

<FRAME src= contenu du second cadre, première rangée...

<FRAME src= contenu du second cadre, seconde rangée...

</FRAMESET>

</FRAMESET>

L'élément FRAME définissant le contenu et l'apparence d'un seul cadre

Format : <FRAME SRC="..." NAME="..." ... >

* SRC : source du contenu du cadre

* NAME : nom du cadre

* FRAMEBORDER : (1|0) bordure de cadre ou non.

* MARGINWIDTH : les marges horizontales en pixels

* MARGINHEIGHT : les marges verticales en pixels

* NORESIZE : autoriser le redimensionnement du cadre ?

* SCROLLING : (yes|no|auto) ascenseurs ou non

Attribut TARGET d'une balise de lien

* En assignant un nom à un cadre, on peut s'y référer comme "cible" pour l'affichage par d'autres balises.

* L'attribut target peut se placer sur les balises qui créent des liens (A, LINK), des images cliquables et des formulaires (FORM).

* Exemple : <a href="..." TARGET="bas"> si un des cadre est nommé "bas".

* D'autres cibles ?

Navigateurs non compatibles avec les cadres

* Les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte HTML à afficher dans le cas où le navigateur ne permet pas d'afficher les cadres.

* Le texte entre les balises <NOFRAMES> et </NOFRAMES> doit donc contenir les balises <BODY>

... </BODY>.

* Exemple:

<NOFRAMES>

<BODY>

Cette page HTML nécessite un navigateur supportant les cadres.

</BODY>

</NOFRAMES>

FEUILLES DE STYLE

En anglais "Cascading Style Sheets" (CSS) permettent de spécifier, indépendamment du document HTML lui-même, les attributs de présentation. Ces feuilles de style définissent les attributs répétitifs dans un document séparé. Les avantages :

* la garantie d'une représentation homogène et cohérente des pages HTML

* la possibilité de changer globalement cette présentation en modifiant un seul document

* la compatibilité multi-navigateur

* moins de code, mieux structuré, et donc, des sites plus faciles à maintenir et à faire évoluer.

Exemple d'une feuille de style

On définit la balise sélectionnée suivie des propriétés à lui affecter : sélecteur {propriété1:valeur; propriété2:valeur; ...}

Il est possible de sélectionner plusieurs balises dans un même sélecteur. Exemple d'un fichier pouvant être nommé "style.css"

/*Fond de feuille toujours blanc: la balise <BODY> aura les attributs suivants*/

BODY {background-color: white}

/*couleur rouge pour ancres et en-têtes : les balises <A>,<H1>... auront ...*/

A, H1, H2, H3 {color: #ca0000}

CAPTION {font-size: large; color: #ca0000}

/*Associe 2 classes à choisir pour la balise <TR>, fond de menu en rouge*/

TR.A0 {background-color: white}

TR.A1 {background-color: yellow}

TR.MENU {background-color: #ca0000}

/*les ancres ne sont pas soulignées et sont en blancs*/

A.MENU {color:white; text-decoration:none; font-weight:bold; font-family:sans-serif; font-size:medium}

/*Les titres en rouge, police de grande taille*/

TD.TITRE {color:#ca0000; text-align:center; font-weight:bold; font-family:sans-serif; font-size:x-large}

/*Alignement contenu de cellule*/

TD.DROITE {text-align:right}

TD.CENTRE {text-align:center}

Application à un document

Pour appliquer une feuille de style à un document HTML, il suffit d'ajouter dans le conteneur <HEAD> la ligne suivante :

<LINK REL="STYLESHEET" HREF="style.css" TYPE="text/css">

On pourra ainsi choisir la classe associer à la balise <TR> :

<TR CLASS=A0>...

<TR CLASS=A1>...

Compléments CSS

Quelques propriétés importantes :

EXTENSION

Pour ajouter une extension (vidéo, son, etc.), l'utilisation de la balise standardisée OPTION est recommandée. (cf W3C).

L'élément OBJECT offre une solution générale aux inclusions d'objets génériques.

La balise OBJECT permet de spécifier tout ce que l'objet (applets, extensions, médias, etc) requiert pour sa présentation par un agent utilisateur (programme) :

* le code source : par exemple, si l'objet inclus est un applet, on doit indiquer la localisation du code exécutable de l'applet,

* les valeurs supplémentaires requises par l'objet à l'exécution : par exemple, certains applets peuvent demander des valeurs initiales en paramètres,

* les données d'exécution : par exemple, si l'objet inclus est un programme pour restituer des données, l'auteur doit indiquer la localisation de ces données.

Exemple d'incorporation d'un document HTML :

<OBJECT DATA="doc.html" TYPE="text/html" WIDTH="300" HEIGHT="200">

alt : <A HREF="doc.html">doc.html</A>

</OBJECT>

Exemple d'incorporation d'un document pdf:

<OBJECT DATA="doc.pdf" TYPE="application/pdf" WIDTH="300" HEIGHT="200">

alt : <A HREF="doc.pdf">doc.pdf</A>

</OBJECT>

Quelques attributs de la balise OBJECT:

* CLASSID = identifie une implémentation

Cet attribut doit être utiliser pour spécifier l'implémentation de l'objet.

* DATA = référence sur les données de l'objet

Cet attribut doit être utiliser pour spécifier les données de l'objet.

* TYPE = type des données de l'objet

* ID = nom

Cet attribut assigne un nom à un élément. Ce nom doit être unique dans le document.

* etc.

Il est possible d'ajouter des paramètres relatifs au document via la balise PARAM. Celle-ci sera positionnée entre les balises OBJECT et /OBJECT:

<PARAM NAME="..." VALUE="...">

Un son

Pour un fichier wav, le type prendra comme valeur : audio/x-wav (voir aussi : audio/mpeg pour fichier mp3, audio/x-midi pour fichier mid, application/ogg pour fichier ogg)

Il sera possible d'ajouter des paramètres relatifs au document:

<PARAM NAME="src" VALUE="fichie.wav"> parfois nécessaire pour IE

<PARAM NAME="autoplay" VALUE="true">

<PARAM NAME="autostart" VALUE="true">

alt : <A HREF="fichier.wav">un son</A>

Une vidéo

Si le navigateur, ou un de ses plugins, sait interpréter ce document, il le fait sinon le contenu imbriqué est affiché.

Pour un fichier wmv, le type prendra comme valeur : video/x-ms-wmv (voir aussi : video/mpeg pour fichier mpg, video/avi pour fichier avi, video/quicktime pour fichier mov)

Exemple :

<OBJECT ID="Player" DATA="..." TYPE="..." HEIGHT="..." WIDTH="..." >

<PARAM NAME="autostart" VALUE="true">

alt : <A HREF="fichier.wmv">une vidé wmv</A>

</OBJECT>

Une image cliquable

Exemple :

<OBJECT data="eos5DMarkII_2.jpg" type="image/jpeg" usemap="#5dm2">

<MAP name="5dm2">

Naviguer dans le site :

<A href="MiseAuPoint.html" shape="rect" coords="370,160,765,251">Mise au point</A>

<A href="Zoom.html" shape="rect" coords="380,390,760,490">Bague de sélection de la distance focale"</A>

<A href="BalanceBlancs.html" shape="circle" coords="760,675,15">Balance des blancs<A>

<A href="SensibiliteCorrExpoFlash.html" shape="poly" coords="860,703,860,660,865,650,895,650,910,685,910,703,860,703">

Sensibilite et Correction Exposition au flash</A>

</MAP>

</OBJECT>

Second exemple similaire :

<OBJECT data="eos5DMarkII_2.jpg" type="image/jpeg" usemap="#5dm2">

5DMarkII.

</OBJECT>

<MAP name="5dm2">

<AREA href="MiseAuPoint.html"

alt="Mise au point"

title="Bague de mise au point manuel"

shape="rect"

coords="370,160,765,251">

<AREA href="Zoom.html"

alt="Zoom"

title="Bague de sélection de la distance focale"

shape="rect"

coords="380,390,760,490">

<AREA href="BalanceBlancs.html"

alt="Mode exposition et Balance des blancs"

title="Balance des blancs"

shape="circle"

coords="760,675,15">

<AREA href="Autofocus.html"

alt="Balance des blancs"

title="Autofocus"

shape="circle"

coords="820,675,15">

<AREA href="SensibiliteCorrExpoFlash.html"

alt="Sensibilite et Correction Exposition au flash"

title="Sensibilite et Correction Exposition au flash"

shape="poly"

coords="860,703,860,660,865,650,895,650,910,685,910,703,860,703">

</MAP>

Explications :

* L'élément MAP spécifie une image cliquable.

* L'image cliquable est associée à un élément via l'attribut usemap de celui-ci.

* La présence de l'attribut usemap sur un élément OBJECT implique que l'objet qui est inclus est une image.

* Définition des attributs pour MAP

name = cdata : Cet attribut assigne un nom à l'image cliquable définie par un élément MAP.

* Définiton des attributs pour AREA

shape = default|rect|circle|poly : Cet attribut spécifie la forme d'une région. Les valeurs possibles sont :

* default : spécifie la région entiàre ;

* rect : définit une région rectangulaire ;

* circle : définit une région circulaire ;

* poly : définit une région polygonale.

coords = coordonnées : Cet attribut spécifie la position et la forme sur l'écran. Le nombre et l'ordre des valeurs dépend de la forme qui est définie. Les combinaisons possibles sont :

* rect : gauche-x, haut-y, droite-x, bas-y ;

* circle : centre-x, centre-y, rayon. Remarque : Quand la valeur du rayon est un pourcentage, l'agent utilisateur devrait calculer le rayon final par rapport à la hauteur et à la largeur de l'objet associé. Le rayon devrait être la plus petite valeur des deux ;

* poly : x1, y1, x2, y2, ..., xN, yN. Le premier couple de coordonnées « x » et « y » et le dernier devraient être les mêmes pour clore le polygone. Quand ces valeurs de coordonnées ne sont pas les mêmes, l'agent utilisateur devrait inférer un couple de coordonnées supplémentaire pour clore le polygone.

title = texte : Cet attribut fournit des informations à afficher lorsque le curseur y est placé.