Petit Guide HTML

Petit guide HTML

Généralités:

On peut utiliser indifféremment majuscules ou minuscules,mais il vaut mieux garder la même convention tout au long du document.

Mettre les balises entre crochets.

Mettre les valeurs entre guillemets.

Vérifier les références des fichiers liés : ici la casse estimportante. Ne pas laisser d'espaces.

Pour la plupart des balises il faut indiquer l'ouverture:<HTML> et la fermeture: </HTML>.

Lorsque des instructions sont imbriquées, il fautimpérativement respecter leur ordre : on ferme d'abord la paire de balises àl'intérieur avant de fermer celle qui la contient (voir l'exemple ci-dessous).

Structure d'undocument HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN">

<!-Commentaires. Par exemple, dernière mise à jour le 17mars 1999->

<HTML>

<HEAD> L'en-tête

<TITLE> Le titre de votre page </TITLE>

</HEAD>

<BODY>

Le corps du document : textes, images, liens etc.

</BODY>

</HTML>

En-têtes:

<H3></H3>etc.

Aligner à droite: <H4 ALIGN="RIGHT">Ce textesera aligné à droite.</H4>

Centrer: <H5 ALIGN="CENTER">Ce texte seracentré.>/H5>

Paragraphes, sauts deligne, traits horizontaux:

saut de ligne <BR>

Paragraphe <P> interligne plus grande qu'avec un sautde ligne </P>

La balise paragraphe peut comprendre l'attribut"ALIGN" ("RIGHT" ou "CENTER").

<HR> Pour tirer un trait horizontal.

Vous pouvez préciser une épaisseur en pixels : <HRSIZE=8>, une longeur en pixels ou en pourcentage <HRWIDTH="50%"> et un alignement <ALIGN="RIGHT" ou ALIGN="CENTER">

En l'absence de précision, une règle horizontale occupetoute la largeur de la page.

Listes:

3 types de listes:

<OL></OL>ordered list (liste numérotée)

<UL></UL> unordered list (liste à puces)

<DL></DL> definition list (liste qui comportedes définitions)

A l'intérieur, il faut utiliser la balise<LI></LI> (list item) pour indiquer chaque article de la liste.

Exemple:

<OL>

<LI> Une liste numérotée </LI>

<LI> Chaque article comporte un numéro. </LI>

<LI> Chaque article est en retrait. >/LI>

</OL>

On peut inclure une liste dans une autre à condition defermer la liste interne en premier.

Texte pré-formaté :

Pour maintenir des espaces et des sauts de lignes de votremise en page, utiliser <PRE></PRE> (texte pré-formaté) ou<BLOCKQUOTE></BLOCKQUOTE> (pour de longues citations). Dans ce casne pas utiliser des indications <P>et <BR>.

Pour indiquer des sections entières: <DIV>. On peutles aligner et leur donner des noms.

Styles :

formats de caractères:

<B></B>: (bold) gras

<I></I>: italiques

<U></U>: (underline) souligné

<STRIKE>(Strikethrough) texte barré </STRIKE> (NB. "STRIKE" estun format actuellement désapprouvé.)

<SUP>en indice </SUP>

<SUB> en exposant </SUB>

<BIG> Taille de police plus grande </BIG>

<SMALL> Taille de police plus petite </SMALL>

formats logiques:

<EM> mise en valeur </EM>

<CITE> citation </CITE>

<STRONG>accentué </STRONG>

<KBD>clavier </KBD>

<DFN> définition </DFN>

<SAMP> échantillon </SAMP> (ou<TT></TT>)

<VAR> variable </VAR>

Caractères spéciaux :

è :è

é :é

ä : ä

ë : ë

ô : ô

ù : ù

ç : ç

: &oelig;

& : &

" :"

< : <

> : >

Texte: couleur,police, corps :

L'attribut <FONT> permet de préciser la couleur, lecorps et la famille des polices.

On peut utiliser des indications RVB ou préciser l'un desseize noms reconnus par tous les navigateurs:

BLACK : noir

MAROON : marron ou rouge foncé

GREEN :vert

OLIVE :vert olive

NAVY : bleumarine

PURPLE : violet

TEAL : cyan foncé

GRAY : gris

SILVER :argent

RED : rouge

LIME : vertclair

YELLOW:jaune

BLUE : bleu

FUSCHIA :fuschia

AQUA : bleu clair

WHITE : blanc

Fonds :

Pour indiquer une couleur de fond, utiliser BGCOLOR=nom du couleur,numéro hexadécimal ou rvb à l'intérieur de la balise <BODY>. On emploieSRC=url à l'intérieur de la balise <BODY> pour mettre une image (motif)en arrière-plan. On peut choisir les couleurs du texte et des liens : LINK(lien), ALINK (lien actif), VLINK (lien visité).

Ex. : <BODYBGCOLOR="#FFFFFF" TEXT="red" LINK="olive"VLINK="teal" ALINK="silver">

<BODYSRC="fond.gif">

Ancrage (lienshypertextuels) :

pour ouvrir un fichier se trouvant sur une machine distante(par ex. à San Francisco) on indique l'URL: <AHREF="protocole://nomduserveur.pays/dossier/nomdufichier.html">mot ou mots servant de lien </A>

par ex. : <AHREF="http://www.univ-paris1.fr/CERAPLA/EP271/EP271TOP.HTM "> Lapremière page du site des étudiants de l'EP 271 </A>

pour un fichier qui se trouve sur la même machine dans lemême dossier (répertoire) :

<A HREF="nomdufichier.html">mot ou motsservant de lien</A>

pour un fichier qui se trouve sur la même machine dans unautre répertoire :

<A HREF="/nomdudossier/nomdufichier.html">motou mots servant de lien</A>

pour une autre partie du même fichier :

<A HREF="#P1">mot ou mots servant delien</A>

<A NAME="P1"> devant la section du documentoù vous renvoyez le lecteur

Protocoles:

http:// adresse des fichiers HTML sur le Web. La cible dulien est un fichier qui se trouve sur un serveur WWW. Le navigateur affiche lapage.

file:// adresse d'un fichier. Si c'est un fichier HTML, lenavigateur l'affiche. Sinon il réagit en fonction des options de configuration:il peut lancer une application ou télécharger le fichier.

ftp:// adresse de fichiers sur des serveurs FTP. Ce type delien télécharge un fichier ou un programme sur l'ordinateur local.

telnet:// adresse d'un serveur Telnet. Ce type de lien, quipropose un affichage en mode texte, permet d'utiliser un ordinateur distant àpartir de son poste local.

gopher:// adresse de fichiers sur des serveurs Gopher.Généralement affiché sous form de lien cliquable.

news: adressage de newsgroups sur Usenet. Si le navigateurle reconnaît, il affiche les messages dans le groupe de discussion référencé.

mailto: adressage de courrier électronique personnel. Onpeut envoyer un message à un particulier.

Cibles :

Si un document de jeu de cadres existe (frameset) et si lescadres ont été nommés, on peut charger des liens dans des cadres.

<AHREF="index.html" TARGET="index"> Index </A>

Images :

La balise pour une image est un SRC qui donne l'URL del'image. Cet URL peut être complet ou relatif.

On peut utiliser la balise ALIGN pour mieux contrôlerl'apparence du texte à côté de l'image

<IMG SRC="image.gif" ALIGN="TOP">(ou "MIDDLE" ou "BOTTOM")

Pour centrer une image utilisez <P ALIGN="CENTER"ou <DIV ALIGN="CENTER"

ALIGN=LEFT ou RIGHT met l'image au bord gauche ou droit etpermet au texte de remplir l'espace à côté de l'image.

Une image peut être un lien:

<A HREF="INF.HTM"><IMG="salle313.jpg" BORDER=0> Information </A>

Texte alternatif(ALT):

Permet de visualiser un texte à la place de l'imagelorsqu'un utilisateur charge votre page avec un navigateur textuel (oulorsqu'il a désactivé le chargement des images).

Tableaux :

Permettent une mise en page plus précise des textes, desimages et même d'autres tableaux. Il faut indiquer le contenu de chaque rangéedans l'ordre.

<TABLE>

<TR> Pour définir chaque rangée. </TR>

<TD> Pour indiquer chaque cellule de chaque rangée.</TD>

Balises optionnelles pour étendre les éléments de mise enpage:

<TD ROWSPAN=2> Une cellule qui s'étend sur plus d'unerangée.

<TD COLSPAN=3> Une cellule qui s'étend sur plus d'unecolonne.

Balises optiionnelles pour l'espacement, le centrage, leslégendes, les contours etc. <TABLE BORDER=0>

Avec HTML 4,0 on peut indiquer pour chaque tableau unecouleur, une image de fond ou une couleur du contour. On peut attribuer àchaque cellule une couleur ou une image de fond différente. On peut donner unnom au tableau pour le faire prendre en charge par des feuilles de style.

Pour attribuer une couleur à l'ensemble du tableau:

Pour contrôler l'image de fond de la deuxième cellule de la deuxièmerangée:

<TR>

<TDBACKGROUND="IMAGE.GIF"></TD>

</TR>

On peut définir et donner un nom aux sections du tableaucomme la tête (THEAD) ou le pied (TFOOT).

</TABLE>

retour à l'index