Scribd
Importer
10 vues58 pages

HTML

Transféré par

Azeddine El-mamouni
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
10 vues58 pages

HTML

Transféré par

Azeddine El-mamouni
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Développement Web

HTML

Ahmed ZELLOU

Sup MTI, 2022-2023.


HTML

Plan
n Introduction Web
n HTML est un langage à balises
n Vos premiers outils
n Conseils Généraux
n La page HTML
n Notre premier document Html
n Les Tailles
n Les Attributs
n Les Marqueurs de style
n Les Paragraphes & les Séparateurs
2
n Les listes [Link]
HTML

Plan
n Les tableaux
n Les cellules des tableaux
n La Mise en page des cellules
n Les couleurs
n L’Arrière-plan
n Les ancrages
n Les images
n Les frames
n Le choix d'un éditeur
n Des conseils en vrac
3
n Html avancé en bref [Link]
HTML

Introduction Web
n Site web : un ensemble de fichiers HTML stockés
sur un ordinateur connecté en permanence à
internet.
n HTML : HyperText Markup Language
n Le langage universel utilisé pour communiquer sur le
Web.
n Formalise l'écriture avec des balises indiquant la façon
dont doit être présenté le document.
n HTML s'adapte à toutes les plate-formes que ce soit
Windows, Macintoch, Unix, OS/2...
n Versions
n 1 en 1999, 5 en 2012

n dernière 5.5 en Janvier 2022 4


[Link]
HTML

Introduction Web
n Versions de HTML
n Crée en 1991 par Tim Berners-Lee.
n Version 1 en 1993.
n Version 2 en 1995
n Version 3 en 1997
n Version 4 en 1999
n Version 5 en 2012
n Dernière mise à jour de la version 5 : le 05
Janvier 2022.

5
[Link]
HTML

Introduction Web
n L'information est transportée sur Internet grâce au
protocole HTTP avant d'être afficher sur l’écran
grâce à un programme appelé navigateur ou
browser.
n Les plus connus sont Internet Explorer, Chrome,
Firefox, Safari, Netscape …

6
[Link]
HTML

HTML est un langage à balises


n Tags, marqueurs ou balises : instructions adressées au
browser.
n Différenciées par les signes < et > par exemple
<html>.
n Garder à l'esprit que :
§ Une balise marque une action pour le browser (ce qu'il doit
faire...).
§ Les attributs précisent les modalités de cette action
(comment il doit le faire).

7
[Link]
HTML

HTML est un langage à balises


n Deux types de balises
1. uniques
§ comme <br> (signifie un retour à la ligne)
2. par paire
§ pour agir sur le texte qu'ils encadrent
§ la balise de fin est alors précédé d'un /
§ Exemple : <b> Ce texte est en gras </b>
n HTML est insensible à la casse
n Il est donc équivalent d'écrire <HTML>, <html>, <Html>,
etc.

8
[Link]
HTML

Vos premiers outils


n Deux façons de faire :
§ Editer le fichier HTML "à la main",
§ Utiliser un éditeur HTML graphique WYSIWYG.
n Vous avez besoin:
§ d'un éditeur de texte (Bloc-notes, Notepad, gedit, vi,
emacs,…)
§ d'un browser
n Vous n'avez pas besoin:
§ d'être connecté.
§ d'avoir un éditeur Html performant (drameweaver, nvu,
Claris Home Page, Frontpage de Microsoft, Hotdog,
Hotmetal, WebExpert, Netscape Editor, …) 9
[Link]
HTML

Conseils Généraux
n Il est utile de voir les balises Html au moins une fois :
§ Si les éditeurs Html facilitent la création des sites
web, ils ne sont pas parfaits lors des modifications,
annulations ou suppressions.
§ Il faudra, dès fois, se plonger dans le code source
pour corriger les dysfonctionnements.
§ Des codes source sont disponibles sur Internet et
sans copyright. Il est possible de s'en inspirer pour
reprendre le code sans avoir à le refaire.
§ Il faut avoir une connaissance de Html pour
inclure les scripts dans les pages.
10
[Link]
HTML

La page HTML
<HTML>

[Link]
Ou
[Link]

</HTML>

11
[Link]
HTML

La page HTML
<HTML>
<HEAD>
Infos
en-tête </HEAD>
<BODY>

Contenu de votre page


corps

</BODY>
</HTML>

12
[Link]
HTML

Atelier 1 : Notre premier document Html

n Ouvrir l'éditeur de texte et écrire le code Html


suivant:
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
n Enregistrez le document avec l'extension .html ou
.htm et ouvrez le avec le navigateur.
n Fichier vide (title ?).
13
[Link]
HTML
Taille : 6 niveaux
Balise Effet Visuel

<H1>Test</H1>

Test
<H2>Test</H2>
Test
<H3>Test</H3>
Test
<H4>Test</H4>
Test
<H5>Test</H5> Test
<H6>Test</H6> Test

14
[Link]
HTML

Marqueur de style
n Modifient la typographie du texte.
n Peuvent être imbriqués dans d'autres marqueurs de style.
Balise de style Effet Visuel
<STRONG> …</STRONG> ou Gras (Bold)
<B>...</B>
<I> … </I> Italique
<U>...</U> Souligné
<FONT SIZE=?>...</FONT> Taille de caractère (Font size)
<FONT COLOR="#$$$$$$"> </FONT> Couleur de caractère (Font color)
<!-- *** --> Commentaires
<BIG> et </BIG> Police plus grande
<SMALL> et </SMALL> Police plus petite
<CENTER></CENTER> Centrage (Center) 15
[Link]
HTML

Marqueur de style
Balise de style Effet Visuel
<PRE>...</PRE>. texte préformaté
<Q> et </Q> Encadre le texte par des guillemets
<SUB> et </SUB> Texte en Indice
<SUP> et </SUP> Texte en Exposant
<ABBREV> et </ABBREV> Abréviation
<ACRONYM> et </ACRONYM> Acronyme
<note> et </note> Pour écrire une note
<fn> et </fn> Permet d'avoir une note de fin de page
<ADDRESS>...</ADDRESS> pour indiquer une adresse
<AU> et </AU> L'auteur
<CITE> et </CITE> Citation
16
[Link]
HTML
Les attributs
n Les attributs sont placés dans les balises pour mettre en
place les éléments
n Ils précisent les modalités d’application de la balise.
n <BALISE ATTRIBUT1="XXXXX"
ATTRIBUT2="XXXX"> Texte</BALISE>
n Exemple : <H1 ALIGN="LEFT"> Texte aligné à gauche

Attribut Valeur Effet Visuel


LEFT LEFT
ALIGN RIGHT RIGHT
CENTER CENTER
JUSTIFY JUSTIFY

17
[Link]
HTML

Atelier 2 : Marqueur de style


n Exemple :
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>

18
[Link]
HTML

Marqueur de style
n Quelques commentaires :
n Le texte écrit sans balises sera repris par le browser
avec la police et taille de caractères choisies dans sa
configuration par défaut.
n Le browser affiche le texte qu'on lui "dicte" en
passant à la ligne lorsque celui-ci atteint le bord de la
fenêtre.
n Les browsers ne reconnaissent qu'un espace entre les
mots (&nbsp;).
n Par exemple, &eacute; est l'un de ces caractères
spéciaux utilisés pour représenter le é.
19
[Link]
HTML

Paragraphes & Séparateurs


n <p> Paragraphes </p>.
n retour chariot : <br>
n ligne horizontale : <hr>
n Attributs ; taille, largeur (pixels/%) et alignement
Balise Attribut Effet Visuel
<hr size=5 width=20% align=left> SIZE
WIDTH
ALIGN

n Valeurs par défaut : épaisseur = 2 pixels,


alignement centré et largeur = 100% de la fenêtre.
n Conseil : spécifie la largeur en % adapte l'affichage
à toutes les tailles et résolutions d'écran. 20
[Link]
HTML

Les listes
n Ordonnée, non ordonnée et de définition
Conteneur Type de liste Effet Visuel

<ol> Ordonnée 1. article1


<li> article 1 </li> 2. article2
<li> article 2 </li> 3. article3
</ol>
<ul> Non ordonnée • article1
<li> article 1 </li> • article2
<li> article 2 </li> • article3
</ul>
<dl> <dt>Terme</dt> De définition article 1
<dd>Définition</dd>< définition 1
/dl> article 2
définition 2

n Peuvent s'imbriquer 21
[Link]
HTML
Les tableaux
n <TABLE> tableau </TABLE>.
n <CAPTION> Le titre du tableau </CAPTION>
n Table Row <TR> ligne </TR>
n Table Head <TH> cellules d'en-tête </TH>
n Table Data <TD> cellules de valeur </TD>
n Exemple :
n Exemple : Un tableau à deux lignes et deux colonnes:
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

22
[Link]
HTML
Les tableaux
<TABLE
BORDER="1">
<CAPTION> le titre du tableau </CAPTION>

<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
</TR>
</TABLE>
23
[Link]
HTML
Atelier 3 : Les tableaux
n Exemple : Un tableau à deux lignes et deux colonnes:
<TABLE BORDER="1">
<CAPTION> Liste des étudiants </CAPTION>
<TR> <TH> Nom</TH> <TH> Prénom</TH> <TH> Age </TH> </TR>
<TR><TD>Alaoui</TD><TD>Ahmed</TD><TD>25</TD></TR>
<TR><TD>Mrabet</TD><TD>Salma</TD><TD>19</TD></TR>
<TR><TD>Mbarki</TD><TD>Laila</TD><TD>41</TD></TR>
</TABLE>

24
[Link]
HTML
Les tableaux
n Trois attributs (définis par défaut mais modifiables) :
n L'espace entre les cellules : <TABLE cellspacing=?>
n L'espace entre le bord et le contenu : <TABLE cellpadding=?>
n La largeur de la table <TABLE width=?> ou <TABLE
width=%>
n Exemple :
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

<TABLE border=2 cellpadding=10>


<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
25
[Link]
HTML
Les cellules des tableaux
n Les cellules peuvent contenir du texte, des images, des
liens, des arrière-plans, des tableaux, …
n Chaque cellule peut avoir ces propres spécifications.
n Largeur d'une cellule <TD width=?> en pixels, <TD
width=%> en pourcentage
n Fusion de lignes <TD rowspan=?>
n Fusion de colonnes <TD colspan=?>
n Exemple : tableau centré qui occupe 60% de la fenêtre
avec une ligne et trois colonnes égales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR> 26
</TABLE></CENTER> [Link]
HTML
Les cellules des tableaux
n Avec la balise de largeur de la cellule?
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>
n Le même tableau mais avec 2 lignes.
<CENTER><TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE></CENTER>
27
[Link]
HTML
Les cellules des tableaux
n La première ligne prenne toute la largeur de la ligne. La
première cellule doit donc déborder sur 3 cellules
horizontales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>

28
[Link]
HTML
Les cellules des tableaux
n La première colonne prenne toute la hauteur de la
colonne. La première cellule doit donc déborder sur 2
cellules verticales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

29
[Link]
HTML
Mise en page des cellules
n Ligne de tableau :
n <TR align=left/center/right> à horizontalement
n <TR valign=top/middle/bottom> à verticalement
n Cellule de tableau
n <TD align=left/center/right> à horizontalement
n <TD valign=top/middle/bottom> àverticalement
n Exemple :
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center >Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR> 30

</TABLE></CENTER> [Link]
HTML
Atelier 4 : Mise en page des cellules

n Il est aussi possible de changer la couleur de la cellule.


n Couleur de la cellule <TD BGCOLOR="#$$$$$$">
n Notre dernier exemple pourrait devenir : <TD
colspan=3 align=center bgcolor="#000088">
n Exemple :
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3 align=center bgcolor="#000088" >Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34% align=right>30fr</TD>
</TR>
</TABLE></CENTER>
31
[Link]
HTML
Les couleurs
n Noms de couleurs : aqua, black, fuschia, gray,
green, lime, maroon, navy, olive, purple, red, silver,
teal, white et yellow.

n Les couleurs sont


définies par 6 chiffres
hexadécimaux(entre 0
et F)
n Couleur="#RRVVBB"

32
[Link]
HTML
Arrière-plan
n Défini dans les attributs de la balise <BODY> :
n Arrière-plan [background] coloré ou composé d'une image.
n <BODY BGCOLOR="#$$$$$$">
n Exemple :
<BODY BGCOLOR="#000088">
<H1>Bonjour</H1>
</BODY>

n Lisibilité n'est pas parfaite (modifier les couleurs du texte).


<BODY BGCOLOR="#000088" TEXT="#FFFF00">

33
[Link]
HTML
Arrière-plan
n Un fond en image.
n Cette image (petite de préférence) est affichée en
mosaïque par le browser.
n Syntaxe : <BODY BACKGROUND="Adresse">
n Exemple
<BODY BACKGROUND="[Link]">
<H1>Bonjour</H1>
</BODY>

34
[Link]
HTML
Arrière-plan
n Les différents attributs :
Attribut Effet Visuel
BACKGROUND="image" affiche l'image en arrière-plan
BGCOLOR="nom_de_la_couleu affiche la couleur demandée en
r ou #XXXXXX" arrière-plan
LINK="couleur" Couleur des liens hypertexte
ALINK="couleur" Couleur du lien actif
VLINK="couleur" Couleur des liens déjà visités
TEXT="couleur" Couleur du texte par défaut

35
[Link]
HTML
Les ancrages
n Html (Hyper Text Markup Language) est un
langage hypertexte (et hypergraphique)
n Syntaxe : <A HREF="URL ou adresse">...</A>
n Ils permettent de naviguer:
1. vers un autre fichier HTML situé sur le même
disque
<a href="../[Link]"> ... </a>
2. vers une autre machine
<a href="[Link] site </a>
3. vers un autre endroit du document

36
[Link]
HTML
Atelier 5 : Les ancrages
n Exemple : nous allons créer deux fichiers Html.
n le fichier [Link]:
<A HREF="[Link]">Aller vers le document 2</A>
n le fichier [Link]:
<A HREF="[Link]">Retour au document 1</A>

37
[Link]
HTML
Les ancrages
n Lien externe
n Tout ordinateur situé sur le réseau Internet possède une
adresse ou une URL (Universal Ressource Locator).
n Html permet d'accéder à toutes les machines et toutes les
ressources du Net.
[Link]
[Link]
[Link]

38
[Link]
HTML
Atelier 6 : Les ancrages
n Lien interne : Signet
n Pour marquer un endroit précis.
n Grâce à l'attribut NAME ou ID
n Exemple
n Le signet :
<p id="signet"> contenu </p>
n Le lien :
<a href="#signet"> cliquez ici pour voir le contenu </a>

39
[Link]
HTML
Les images
n La dimension multimedia (image, audio et vidéo) est
l’ennemi du web.
n Plus la taille de l'image est grande, plus le temps de
chargement sera plus important
n Une image en 16 couleurs peut très bien faire
l'affaire.
n Présenter une petite image indiquant un lien vers
l'image complète est également un bon conseil.
n Syntaxe : <IMG SRC="Adresse de l'image">,
afficher l'image qui se trouve à l'adresse...
n SRC: Indique l'emplacement de l'image
40
[Link]
HTML
Les images
n La balise image possède de nombreux attributs.
n Alignement : align=top, middle, bottom, left et
right
n ALT: Permet d'afficher un texte lorsque l'image ne
s'affiche pas
n Exemple : <IMG SRC="url/[Link]"
ALT="Texte remplaçant l'image">
n Dimensions width=? height=? Hauteur et largeur
(en pixels)
n border=? (en pixels) Bordure

41
[Link]
HTML
Les images
n Commentaires :
n En Html, l'image ne fait pas partie du document. Le
browser va la chercher à l'adresse indiquée.
n Généralement, on place les images dans le même répertoire
que les pages Html.
n Utiliser la même image à plusieurs reprises dans un fichier
Html ne modifie pas la taille de la page.
n Best practice :
n Prévoir un texte pour les browsers n'ayant pas l'option
image activée.
n Préciser la taille en hauteur et largeur de l'image se qui
permet au browser de réserver un emplacement pour
l’image et de continuer à afficher le texte. 42
[Link]
HTML
Devoir 1
n Créez un fichier [Link] contenant les rubriques
suivantes :
n Informations personnelles (nom et prénom, adresse, tel, mail
(cliquable), photo).
n Mes Diplômes par date avec des listes ordonnées.
n Domaines de compétences avec une liste nom ordonnées.
n Expériences professionnelles : travail, stage, mission, ..
n Langues avec niveau (lue, écrite, parlée) dans un tableau.
n Prévoir un sommaire avec retour.

43
[Link]
HTML
Les frames
n Pour diviser l'écran en plusieurs fenêtres
n Très simple mais dangereux
n Tous les browsers n'ont pas la possibilité de les afficher.
n Zone avec des fenêtres
n <FRAMESET>Début de zone avec des fenêtres
n </FRAMESET>Fin de zone avec des fenêtres
n Agencement des fenêtres
n <FRAMESET ROWS="..."> Fenêtres horizontales
n <FRAMESET COLS="..."> Fenêtres verticales
n Il est impératif de travailler avec des exemples.
n Attention! <FRAMESET></FRAMESET> remplace
<BODY></BODY> 44
[Link]
HTML
Les frames
n L'attribut ROWS="hauteur1,
hauteur2,...,hauteurN" définit la Agencement horizontale
hauteur des différentes fenêtres
en cas de division horizontale. 1
n La hauteur s'exprime en pixels ou
en %.
n On veillera à ce que le total soit
égal à100%; 2

Exemple n°1
<FRAMESET ROWS="20%,80%">
<FRAME SRC="[Link]" NAME="haut">
<FRAME SRC="[Link]" NAME="bas">
</FRAMESET> 45
[Link]
HTML
Les frames
n L'attribut COLS="largeur1,
largeur2,...,largeurN" définit la Agencement verticale
largeur des différentes fenêtres
en cas de division verticale.
n La hauteur s'exprime en pixels
ou en %.
n On veillera à ce que le total soit 1 2
égal à100%;

Exemple n°2
<FRAMESET COLS="20%,80%">
<FRAME SRC="[Link]" NAME="gauche">
<FRAME SRC="[Link]" NAME="droite">
</FRAMESET> 46
[Link]
HTML
Les frames
n On peut mélanger les deux
Exemple n°3
<FRAMESET COLS="20%,80%">
2
<FRAME SRC="[Link]" NAME="gauche">
1
<FRAMESET ROWS="50%, 50%">
<FRAME 3
SRC="[Link]"NAME="droit_haut">
<FRAME
SRC="[Link]"NAME="droit_bas">

</FRAMESET>

47
</FRAMESET>
[Link]
HTML
Les frames
n Pour l'instant, les frames sont vides, il faut les remplir
avec l’attribut SRC.
n <FRAME .SRC="URL ou adresse du document à
afficher dans la fenêtre">
n On construit 3 fichiers Html élémentaires que l'on
place dans le même répertoire que le fichier de
frames ([Link], [Link] et [Link])
n On reprend le fichier de frame précédent que l'on
complète.

48
[Link]
HTML
Atelier 7 : Les frames
<FRAMESET COLS="20%,80%">
<FRAME SRC="[Link]" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="[Link]"NAME="droit_haut"> B
<FRAME SRC="[Link]"NAME="droit_bas">
</FRAMESET> A
</FRAMESET>

n L’attribut NAME="NOM" indique


le nom de la fenêtre (à utiliser
comme cible d'un lien hypertexte). C

n Les ascenseurs apparaissent


automatiquement par l'attribut
SCROLLING="yes/no/auto" de la
balise <FRAME> 49
[Link]
HTML
Les frames
n Exemple (lien de [Link] vers [Link]) dans le fichier
en désignant comme cible la frame C.
<HTML><BODY>
<A HREF="[Link]" TARGET="fenetreC"><H1>B</H1></A>
</BODY></HTML>

n L'attribut TARGET peut prendre :


n _blank indique au browser qu'il doit ouvrir le lien dans
une nouvelle fenêtre.
n _self indique que le fichier sera chargé dans la même
fenêtre que celle dans laquelle se trouve le lien.
n _top implique l'affichage du fichier sur toute la fenêtre du
browser.
n _parent affiche la cible dans le cadre de niveau supérieur
50
[Link]
HTML
Les frames
n Par défaut, les cadres sont séparés par des bordures.
n Pour supprimer ces bordures border= "0" pour
Netscape, frameborder= "no" et framespacing= "0"
pour Explorer (cohabitent).
n Exemple : <FRAMESET COLS="30%,70%"
border=0 frameborder=no framespacing=0>
n <NOFRAMES>...</NOFRAMES> est utilisée pour
indiquer un texte alternative pour les browsers
incapables de gérer les frames.
n Prévoir une page sans fenêtres pour ces browsers.
n D’autres Attributs : Bordercolor, Framespacing=n,
Src, Name, Marginwidth=n, Marginheight=n, size,
51
Scrolling [Link]
HTML
Le choix d'un éditeur
n WebExpert
n Editeur complet, intelligent et respectueux du code et de
l'esprit Html.
n Complexité d'utilisation
n N’est pas entièrement "Wysiwyg".
n Sensation de faire du Html et non du traitement de texte.
n Prix compétitif.
n Adobe GoLive (pour les infographistes)
n NVU (Libre)

52
[Link]
HTML
Des conseils en vrac
n Un site est un ensemble de pages Html, reliées entre
elles, généralement consacrées à un sujet déterminé.
n Constitue l'outil le plus moderne de communication
et de publication.
n Procédures à suivre pour créer un site :
n Tous les liens sont-ils bien définis ?
n Toutes les images sont-elles bien présentes ?
n Que se passe-t-il avec un browser différent ?
n Et si le site change d'emplacement ?
n Et avec une autre résolution d'écran ?

53
[Link]
HTML
Des conseils en vrac
n Procédures à suivre pour créer un site :
n Des informations détaillées sur le contenu sont-elles
directement ou rapidement disponibles ?
n N'y a-t-il rien qui ne puisse choquer inutilement un lecteur
d'une culture différente ?
n La page d'accueil est telle attirante ?
n Le raffinement de la page d'accueil n'est-il pas excessif au
point de pénaliser lourdement le temps de chargement
(image trop grande ou texte trop long) ?
n Le titre résume-t-il bien le contenu des pages ?
n L'esthétique de la page est-elle de bon goût ? Originale ?
Attrayante ?
54
[Link]
HTML
Des conseils en vrac
n Procédures à suivre pour créer un site :
n Eviter de mettre trop d'informations sur la même page.
n Concevoir une structure pertinente.
n Respecter la législation sur le copyright et les droits
d'auteur.
n Prévoir sur chaque page un lien vers la page d'accueil.
n Mettre régulièrement à jour le contenu.
n Mettre un titre à chaque document.
n Limiter la taille des images.
n Inclure un texte alternatif pour les images.
n Vérifier le résultat de la mise en page à l'impression.
n Faire connaître le site aux moteurs de recherche. 55
[Link]
HTML
Des conseils en vrac
n Procédures à suivre pour créer un site :
n Garder un même désigne pour tout le site.
n Trouver un contenu publiable, publier quand on n'a rien à
dire est inutile.
n Structurer le contenu, chaque page Html ne peut dépasser
un à deux écrans, pour des raisons de temps de chargement
et de lisibilité.
n Un Site sans MAJ est un site mort.

56
[Link]
HTML
Devoir 2
n Créez une charte pour un site web institutionnel :

Bannière
Menu Horizental

Menu
Contenu du Site
Vertical

n Le menu contiendra les rubriques suivantes : Accueil,


Nos services, Inscription, Connexion et Contact 57
[Link]
HTML

Merci

[Link]

Vous aimerez peut-être aussi