HTML

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 A.ZELLOU
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 A.ZELLOU
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

A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
HTML
La page HTML
<HTML>
Test.html
Ou
Test.htm
</HTML>
11
A.ZELLOU
HTML
La page HTML
<HTML>
<HEAD>
Infos
en-tête </HEAD>
<BODY>
Contenu de votre page

corps
</BODY>
</HTML>
12
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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>

</BODY>
</HTML>
18
A.ZELLOU
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 ( ).
n Par exemple, é est l'un de ces caractères
spéciaux utilisés pour représenter le é.
19
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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>
</TABLE>
22
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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>
</TABLE>
<TABLE border=2 cellpadding=10>

</TABLE>
25
A.ZELLOU
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> A.ZELLOU
HTML
n Avec la balise de largeur de la cellule?
<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.
<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
A.ZELLOU
HTML
n La première ligne prenne toute la largeur de la ligne. La
première cellule doit donc déborder sur 3 cellules
horizontales.
<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
A.ZELLOU
HTML
n La première colonne prenne toute la hauteur de la
colonne. La première cellule doit donc déborder sur 2
cellules verticales.
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
</TR>
</TABLE></CENTER>
29
A.ZELLOU
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 :
<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> A.ZELLOU
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 :
<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
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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="PAPER.gif">
<H1>Bonjour</H1>
</BODY>
34
A.ZELLOU
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
A.ZELLOU
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="../fichier.html"> ... </a>
2. vers une autre machine
<a href="http://www.nomdusite.ma"> site </a>
3. vers un autre endroit du document
36
A.ZELLOU
HTML
Atelier 5 : Les ancrages
n Exemple : nous allons créer deux fichiers Html.
n le fichier 1.htm:
<A HREF="2.HTM">Aller vers le document 2</A>
n le fichier 2.htm:
<A HREF="1.HTM">Retour au document 1</A>
37
A.ZELLOU
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.
http://serveur/chemin.../fichier
ftp://serveur/chemin.../fichier
mailto:utilisateur@hôte
38
A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
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/image.jpg"
ALT="Texte remplaçant l'image">
n Dimensions width=? height=? Hauteur et largeur
(en pixels)
n border=? (en pixels) Bordure
41
A.ZELLOU
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
A.ZELLOU
HTML
Devoir 1
n Créez un fichier CV.html 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
A.ZELLOU
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
A.ZELLOU
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="frame1.htm" NAME="haut">
<FRAME SRC="frame2.htm" NAME="bas">
</FRAMESET> 45
A.ZELLOU
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="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET> 46
A.ZELLOU
HTML
Les frames
n On peut mélanger les deux
Exemple n°3
2
<FRAME SRC="frame1.htm" NAME="gauche">
1
<FRAMESET ROWS="50%, 50%">
<FRAME 3
SRC="frame2.htm"NAME="droit_haut">
<FRAME
SRC="frame3.htm"NAME="droit_bas">
</FRAMESET>
47
</FRAMESET>
A.ZELLOU
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 (A.htm, B.htm et C.htm)
n On reprend le fichier de frame précédent que l'on
complète.
48
A.ZELLOU
HTML
Atelier 7 : Les frames
<FRAME SRC="A.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="B.htm"NAME="droit_haut"> B
<FRAME SRC="C.htm"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
A.ZELLOU
HTML
Les frames
n Exemple (lien de B.htm vers A.htm) dans le fichier
en désignant comme cible la frame C.
<HTML><BODY>
<A HREF="A.htm" 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
A.ZELLOU
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 A.ZELLOU
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
A.ZELLOU
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
A.ZELLOU
HTML
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
A.ZELLOU
HTML
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
A.ZELLOU
HTML
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
A.ZELLOU
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
A.ZELLOU
HTML
Merci
A.ZELLOU

HTML

Transféré par

Informations du document

Titre original

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

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Développement Web

Sup MTI, 2022-2023.

n dernière 5.5 en Janvier 2022 4

HTML est un langage à balises

HTML est un langage à balises

Vos premiers outils

Contenu de votre page

Atelier 1 : Notre premier document Html

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

Attribut Valeur Effet Visuel

Atelier 2 : Marqueur de style

Paragraphes & Séparateurs

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

<ol> Ordonnée 1. article1

<TABLE border=2 cellpadding=10>

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

n Les couleurs sont

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

n L’attribut NAME="NOM" indique

n Les ascenseurs apparaissent

n L'attribut TARGET peut prendre :

n Le menu contiendra les rubriques suivantes : Accueil,

Vous aimerez peut-être aussi