Cours HTML

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 = é
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 :
< > &
< > &
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>

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

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

Cours HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML

Transféré par

Droits d'auteur :

Formats disponibles

Internet et le langage HTML

But d'un site

Regrouper des collection dinformation

Longueur d'une page

Longueur optimum un 1/2 cran

Structure d'un site

Structure d'un site

Structure d'un site

Une profondeur ne dpassant pas 3 niveaux est souhaitable.

Nouvelle forme de texte permettant de dpasser la

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

Le dernier mot indique souvent le pays

Les marqueurs HTML

Les marqueurs HTML

un marqueur d'ouverture et un marqueur de fermeture

Les marqueurs HTML

Structure dun document HTML

Contient deux grandes composantes

HEAD & BODY

Contient le corps du document

Cration de pages HTML

Pourquoi un diteur HTML?

La mise en forme du texte

La saisie du texte (les accents)

La saisie du texte (car. rservs)

< > &

&lt; &gt; &amp;

droite ou gauche dune image CLEAR peut prendre les valeurs :

<BREAK CLEAR= alignement>

Styles des caractres

Styles des caractres

Styles des caractres

ces deux dernires commandes ne sont pas trs ecaces

Insertion des images

Types d'images sur le Web

Insertion d'une image

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

Position des images

<IMG SRC="URL" ALIGN=top>

<IMG SRC="URL" ALIGN=bottom>

<IMG SRC="URL" ALIGN=bottom>

Trouver les images

CorelDraw, PhotoShop, ...

bouton droit de la souris respect des droits d'auteur

Les images de fond

Insertion de liens hypertextes

Liens dans un mme document

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

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

Le mot Introduction sera soulign et ach en bleu

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

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

Liens partir d'images en coordonnes

Les structures de listes

Affichage d'un tableau

Autres commandes de <TABLE>

Autres caractristiques de <TABLE>

Autres caractristiques de <TABLE>

chacun pouvant acher un document HTML

sont en mesure de supporter cette option

qu'un achage sur un seul cran

Autres options de <FRAME>

< > &