Вы находитесь на странице: 1из 77

Internet et le langage HTML

But d'un site


des pages

Informer
<Information claire et prcise, Peu de navigation>

Prsenter de l'information
Information plus complte

Regrouper des collection dinformation

Auditoire vis
Caractristiques de la clientle cible Besoins auxquels vous voulez rpondre
Information fournir Problme solutionner

Considrations technologiques
Vitesses de transmission Ordinateurs utiliss Fureteurs utiliss
Intranet / Internet Ne pas surestimer Certains en mode texte

Concept de page
Chaque page devrait tre conue autour d'une ide principale. Le titre de la page devrait reter cette ide d'quilibre et de densit. La consistance est importante dans une srie de pages enchanement des pages.

Longueur d'une page


Le client nest pas port lire de longs textes l'cran Le bas de l'cran est une barrire naturelle

Longueur optimum un 1/2 cran

Structure d'un site


Pour un usager, la structure logique d'un site est loin d'tre vidente. Il ne faut pas que l'image qu'il se cre ressemble ceci:
M M

D
M

D D

D D D D D D
M

Structure d'un site


La structure en forme de peigne horizontal

Structure d'un site


... ni trop profonde !
M M

Une profondeur ne dpassant pas 3 niveaux est souhaitable.

Notions de base
Hypertexte Client-Serveur URL

Hypertexte

Nouvelle forme de texte permettant de dpasser la

linarit des textes conventionnels. Renferme des liens dynamiques (boutons) qui favorisent la navigation entre les dirents point du texte.

Hypertexte
Le terme hypermdia est quelquefois utilis lorsqu'on

peut tablir des liens avec des chiers audio ou vido. Dans ce cas, les logiciels-clients pertinents (Helpers, Plug Ins) doivent tre installs. Le langage HTML permet de dvelopper ce type de documents pour le Web.

Notions d'adresses
Chaque ressource sur Internet doit possder une

adresse qui lui est propre. Le systme utilis porte le nom de Uniform Ressource Locator (URL).

Adresse URL
Comprend normalement trois / quatre parties http://www.crc.doc.ca/crc/frhome.html La premire partie indique le protocole
http: 4p: https:

Adresse URL
http://www.crc.doc.ca/crc/frhome.html La seconde partie indique l'emplacement du serveur
Chaque serveur possde une adresse unique Cette adresse s'appelle aussi Nom de Domaine (Domain Name Server)

Elle Dbute par // et contient de 2 6 mots spars par des points

Le dernier mot indique souvent le pays

Adresse URL
http://www.crc.doc.ca/crc/frhome.html La troisime partie indique la localisation de la ressource sur le serveur (rpertoires) Chaque segment de cette partie est prcd d'une barre oblique /

Adresse URL
http://www.crc.doc.ca/crc/frhome.html La dernire partie indique le nom du chier contenant l'information Sur le WWW, ce nom de chier se termine normalement par l'extension .html ou .htm

Rsum protocole://adresse_du_serveur/rpertoire/chier

Cration de pages

Le langage HTML

Le langage HTML
Tire son origine du langage SGML,

(Standard Generalized Markup Language) HyperText Markup Language Langage de description de pages pour le Web

Les marqueurs HTML


HTML utilise des marqueurs placs entre des

chevrons < > pour grer l'information qui sera ache sur les pages Web Ces marqueurs sont en fait du texte ASCII que le logiciel de navigation (Mosac, Netscape, Explorer, ...) peut interprter

Les marqueurs HTML


Plusieurs marqueurs fonctionnent en paires :

un marqueur d'ouverture et un marqueur de fermeture

Ex
<b> mot ... mot </b>
pour du caractre gras

Les marqueurs HTML


la barre oblique "/" indique la n pour les marqueurs

utiliss en paires, c'est <I> ... </I> Les marqueurs peuvent tre entrs en majuscule ou en minuscule L'imbrication de marqueurs (marqueurs l'intrieur de marqueurs) est possible mais la prudence est de mise

Structure dun document HTML


<HTML> <HEAD> <title>Titre de la page</title> </HEAD> <BODY> <code>Ceci est du contenu </code> <code>Autre contenu </code> </BODY> </HTML>

Marqueurs globaux
<HTML> ... </HTML> Premier et dernier marqueurs de la page
Ils Indiquent aux navigateurs que le texte entre ces marqueurs est en format HTML

Contient deux grandes composantes

HEAD & BODY

Marqueurs globaux
<HEAD> ... </HEAD>

Encadre le matriel d'en-tte Informations gnrales qui napparaissent pas lcran de lusager Cette section doit contenir les marqueurs <TITLE> et </TITLE> Dautres commandes sont aussi admissibles dans cette section: ISINDEX, META, LINK ...

Marqueurs globaux
<TITLE> ... </TITLE>
Le texte entre ces marqueurs sera ach dans la bannire de la fentre

Limit 64 caractres
La formulation du titre est importante car certains outils de recherche construisent leur index partir des mots trouvs cet endroit

Marqueurs globaux
<BODY> ... </BODY>

Contient le corps du document


Ne contient pas directement le contenu mais les sections logiques dans lesquelles le contenu est plac : paragraphes, listes, tableaux, graphiques, liens, ...

Cration de pages HTML

Outils de cration
tant donn qu'une page HTML est un document en

code ASCII, le texte peut tre cr avec un diteur de texte Sauvegarde du texte en ASCII (mode texte seulement) On peut aussi utiliser un diteur HTML HoTMetaL, WebExpert, HotDog, FrontPage, Dreamweaver, WebAuthor, diteur de Netscape, ...

Pourquoi un diteur HTML?


Aider structurer le document Faciliter l'entre des marqueurs Permettre la vrication avant de l'utiliser avec le

navigateur Accder aux options disponibles l'aide de menus ou de boutons Faciliter le traitement des accents Toutefois, les diteurs HTML ne sont pas toujours WYSIWYG

La mise en forme du texte


Principales commandes pour acher du texte en HTML

La saisie du texte
Tout simplement dans la section <BODY> Utilisation normale des majuscules et minuscules Plusieurs espaces conscutives seront remplaces par

une seule espace par le client Web Le retour de chariot dans le script HTML sera remplac par une espace

La saisie du texte (les accents)


a. Dbuter le code par le perlute "&" b. Inscrire le caractre (a e i o u) c. Suivre avec un des codes suivants accent aigu acute accent grave grave accent circonexe circ cdille cedil d. Terminer le tout avec un point-virgule Ex = &eacute;

La saisie du texte (car. rservs)


Les caractres <, >, et & sont des caractres rservs dans HTML
Si vous voulez les utiliser ailleurs que dans les commandes HTML, il faut les remplacer par les codes suivants :

< > &

&lt; &gt; &amp;

Retour de chariot
<BR> commande retour de chariot
Lattribut CLEAR est utile pour aligner un texte

droite ou gauche dune image CLEAR peut prendre les valeurs :


LEFT RIGHT ALL

<BREAK CLEAR= alignement>

Paragraphe
<P> La commande pour le paragraphe Le ... </P> est facultatif Lattribut ALIGN peut prendre les valeurs :
LEFT RIGHT ALL

Lattribut NOWRAP fait en sorte que seul <BR> coupera les lignes

Les en-ttes
HTML accepte 6 en-ttes: H1, H2 ... H6. H1 utilise la police la plus grosse La forme dutilisation est : <H1>texte insrer</H1> ou <H2>texte insrer</H2>
Un retour de chariot est insr automatiquement Ne pas utiliser ces commandes pour modier la grosseur des caractres

Styles des caractres


Caractres gras

<B> ... </B> Caractres italiques <I> ... </I> Caractres souligns <U> ... </U> Caractres barrs <STRIKE> ... </STRIKE>

Styles des caractres


Caractres non proportionnels

<TT> ... </TT> Caractres clignotants <BLINK> ... </BLINK> Bloc de citation <BLOCKQUOTE> ... </ BLOCKQUOTE >

Styles des caractres


Taille des caractres (3 par dfaut)

<FONT SIZE = Val> ... </FONT> Couleur des caractres <FONT COLOR = Val> ... </FONT> Indices <SUB> ... </SUB> Exposants <SUP> ... </SUP>

Autres commandes
Empcher un retour de chariot

... </NOBR> Caractres plus gros <BIG> ... </BIG> Caractres plus petits <SMALL> ... </SMALL>
Note

<NOBR>

ces deux dernires commandes ne sont pas trs ecaces

Les commentaires
Comme cest gnralement le cas dans un

programme informatique, les commentaires de lauteur sont les bienvenus Pour insrer les commentaires <!-- ... -->

Insertion des images


Formats & Emplacements

Couleur de fond
L'attribut BGCOLOR de la commande <BODY> permet

de modier la couleur de fond <BODY BGCOLOR = #couleur> Le code de couleur est constitu du dise (#) suivi de trois nombres en format hexadcimal reprsentant les couleurs rouge vert et bleu #000000 noir #FF3366 rose #FFFFFF blanc

Types d'images sur le Web


Les fureteurs permettent d'acher principalement

deux grands formats d'images: le format GIF le format JPEG Deux algorithmes de compressions dirents Lors de la prparation d'images (scanner, logiciel), il est important de les sauvegarder selon un de ces deux formats

GIF ou JPEG
GIF est gnralement de meilleure qualit, mais

demande un espace mmoire plus grand JPEG permet d'conomiser espace et temps tout en conservant une qualit remarquable Il est possible de choisir le taux de compression (pour JPEG) Un taux de compression moindre entrane une meilleure qualit de l'image

Insertion d'une image


Positionner le curseur sur la ligne choisie <IMG SRC = "chemin et nom de chier">
An de faciliter l'accs aux images, il est fortement

recommand de les regrouper dans un sous-rpertoire de votre dossier contenant les chiers HTML

Dans le cas o un fureteur ne peut lire les images il

faut prvoir un texte alternatif <IMG SRC="URL" ALT="un texte">

Position des images


La position de l'image peut tre inuence l'aide de

l'attribut ALIGN <IMG SRC="URL" ALIGN=le4> image ache la gauche du texte <IMG SRC="URL" ALIGN=right> image ache la droite du texte Si vous souhaitez centrer une image <CENTER><IMG SRC="..."></CENTER>

Position des images


ALIGN permet aussi de jouer sur la variable verticale

<IMG SRC="URL" ALIGN=top>


le texte qui suit sera align avec le haut de l'image

<IMG SRC="URL" ALIGN=bottom>


le texte qui suit sera align avec le bas de l'image

<IMG SRC="URL" ALIGN=bottom>


le texte qui suit sera align avec le milieu de l'image

Trouver les images


Les images peuvent tre produites l'aide d'un logiciel:

CorelDraw, PhotoShop, ...


Acquises l'aide d'un scanner ou d'une camra lectronique Copies partir d'un site Internet

bouton droit de la souris respect des droits d'auteur

Les images de fond


Une image de format GIF ou JPEG peut tre utilise en guise de

fond d'cran

Cet ajout se fait dans la commande <BODY> <BODY BACKGROUND = "chier> L'image sera rpte sans cesse en motif de fond

Insertion de liens hypertextes


Interne, dans un mme document Externe, vers d'autres documents

Liens dans un mme document


Un long document HTML peut contenir plusieurs sections

Dans un tel cas il est souhaitable de faire des liens internes Section 1 Section 2 Retour au dbut ... Deux parties sont ncessaires dans un lien un point de dpart un point d'arrive

Liens Interne
Les points d'arrive doivent tre identis par un nom

<A NAME = "unnom"> texte </A> Ex <A NAME = "intro"> Introduction</A>


Les points de dpart (le lien) doivent faire rfrence au nom d'arrive

<A HREF = "#unnom"> texte </A> Ex <A HREF = "#intro"> Introduction</A>

Le mot Introduction sera soulign et ach en bleu

Liens externe
Tout comme dans le cas prcdent, ce type de lien ncessite un point de dpart et un point d'arrive

Lien de dpart <A HREF = "URL"> texte </A> <A HREF="http://www.enduze.com>bambou herbe insolite</A>

Un lien particulier
Il est souhaitable de laisser l'usager la possibilit d'entrer en communication avec l'auteur de la page

Attribut MAILTO de HREF <A HREF="mailto:adresse_lectronique>texte</A>

Autres liens
Une image (icne) peut servir de lien, il sut qu'elle soit intgre dans la commande

<A HREF="URL"><IMG SRC="image"></A> Il est aussi possible daller vers


une image un chier audio un chier vido Dans le cas de l'incorporation de chiers audio ou vido, il faut comprende que l'usager doit possder les Plug In ncessaires

Liens partir d'images en coordonnes


Il est possible d'utiliser une partie d'une image pour crer un lien La structure est celle-ci <MAP NAME = "unNom"> <AREA SHAPE="uneForme" COORD="x,y,..." HREF="destination1"> <AREA SHAPE="uneForme" COORD="u,v,..." HREF="destination2"> </MAP> <IMG SRC ="uneImage" USEMAP ="#unNom> Notez que "unNom" fait le lien entre les deux principales parties de cette structure

Les structures de listes


ordonnes, non-ordonnes de dnition

Liste ordonne
Liste avec une numrotation automatique La structure est la suivante <OL> <LI> lment un <LI> lment deux </OL> L'attribut TYPE permet de dterminer si la liste utilisera A B C, a b c , I II III, i ii iii, ou 1 2 3 ...

Liste non-ordonne
Structure identique la prcdente mais les lments ne seront pas numrots La structure est la suivante <UL> <LI> lment un <LI> lment deux </UL> L'attribut TYPE permet de dterminer le type de puce (disc, circle ou square)

Imbrication de listes
Pour les listes ordonnes et non-ordonnes, il est possible de crer des sous-listes Voici un exemple de structure <OL> <LI> Premier lment de la liste <LI> Second lment de la liste <UL> <LI> Premier lment de la sous-liste <LI> Second lment de la sous-liste </UL> <LI> Troisime lment de la liste </OL> Attention l'ordre d'ouverture et de fermeture des listes respectives

Liste de dfinition
Permet de prsenter une liste de termes avec les dnitions correspondantes La structure est la suivante <DL> <DT> Terme 1 <DD> Dnition du terme 1 <DT> Terme 2 <DD> Dnition du terme 2 </DL> L'attribut COMPACT permet de rduire l'espace entre les lignes

Autres listes
Il existe d'autres types de listes mais la logique de structuration est similaire Par exemple, les listes menu <MENU> et de rpertoire <DIR> ressemblent en tout point aux listes nonordonnes

Les tableaux
Prsentation de l'information

Affichage d'un tableau


Un tableau est constitu de cellules situes dans des ranges et dans des colonnes La commande qui permet de crer un tableau est <TABLE> ... </TABLE> Les attributs suivants sont possibles WIDTH=unNombre (pixel ou pourcentage) ALIGN="LEFT" / "RIGHT" / "CENTER" BORDER=unNombre CELLSPACING=unNombre CELLPADING=unNombre

Autres commandes de <TABLE>


D'autres commandes sont ncessaires pour dnir le tableau <TR> ... </TR> permet de dnir une range <TD> ... </TD> permet de dnir le contenu de chaque cellule <TH> ... </TH> permet d'acher un titre de colonne <CAPTION> ... </CAPTION> permet d'insrer un titre au tableau

Autres caractristiques de <TABLE>


Les attributs ALIGN et VALIGN permettent d'aligner le contenu des cellules lorsque utiliss avec <TH>, <TD>, ... Les attributs COLSPAN et ROWSPAN permettent la fusion de cellules conscutives Voir aussi

http://home.netscape.com/assist/net_sites/table_sample.html

Autres caractristiques de <TABLE>


Il est possible d'insrer une image dans une cellule d'un tableau <TD><IMG SRC="URL"></TD> Il est aussi possible de crer un lien partir d'un lment dans une cellule du tableau On peut aussi laisser une cellule vide. Dans ce cas, il est souhaitable d'insrer la commande <BR> la place du contenu

Utilisation de cadres
Division de l'cran en sections indpendantes

Division de l'cran
Il est possible de scinder un cran en plusieurs cadres,

chacun pouvant acher un document HTML


Prudence car ce ne sont pas tous les fureteurs qui

sont en mesure de supporter cette option


De plus, un achage avec cadres est plus lourd grer

qu'un achage sur un seul cran

La commande <FRAME>
L'ensemble des commandes servant dnir les

cadres ne doivent pas se retrouver l'intrieur de <BODY> C'est l'lment <FRAMESET> qui remplace <BODY> cet eet <FRAMESET> accepte deux attributs, ROWS et/ou COLS qui servent dterminer la grandeur des cadres (pixels ou pourcentage)

Exemple
<HTML> <HEAD> <TITLE> ... <HEAD> <FRAMESET COLS="25%,*"> <FRAME NAME="NOM1" SRC="URL1"> <FRAME NAME="NOM2" SRC="URL2"> <NOFRAME> <BODY> Contenu HTML </BODY> </NOFRAME> </FRAMESET> </HTML>

Caractristiques de <FRAME>
Chaque cadre est dni par la commande FRAME Un nom est donn chaque cadre avec l'attribut NAME = "unNom" chaque cadre doit correspondre un script HTML appel par SRC = "URL" L'URL dtermine le document charger dans le cadre

Autres options de <FRAME>


MARGINHEIGHT = n MARGINWIDTH = n NORESIZE SCROLING = Yes / No FRAMEBORDER= n

Ouverture d'un document dans un cadre


Pour crer un lien vers un cadre, il faut utiliser la commande habituelle <A HREF ... Toutefois, l'option TARGET doit tre utilise pour rfrer au cadre l'aide de son nom <A HREF="URL" TARGET="NomDuCadre"> Texte du lien</A>

Les formulaires
Il ne sagit pas seulement de les crer, on doit

prvoir un programme qui sera en mesure de traiter les donnes transmises laide du formulaire Ce nest pas dans les objectifs de ce cours