Création de pages web

Cibler, définir la population visée par le site, la cible visée est ce qui détermine le contenu du site. Un site qui s'adresse à tout le monde ne s'adresse à personne. Cibler le plus précisément possible. Il faut se représenter la démarche intellectuelle de l'internaute :

Définir le contenu, qui doit être dense, vivant, renouvelé, dynamique… :

Ces hébergeurs fournissent un login et un passeword pour accéder au nouvel espace web qui contiendra le site.

7.Transfert de fichiers : Pour ''faire passer'' les fichiers du poste local au serveur de l'hébergeur, on utilise un logiciel FTP (File Transfer Protocol)

8. Référencement : Inscription du site sur les moteurs et annuaires pour que les internautes trouvent le site.

En fait tout commence quand TIM BERNERS-LEE crée une méthode pour relier des documents à l'aide de liens hypertextes sur un réseau appelé alors à l'époque ''la mère de tous les réseaux'' : Internet. Le World Wide Web (W.W.W.) est constitué de pages web, ces pages sont conçus avec le langage HTML ou HyperText Markup Language ou encore Langage dit à balises. Le HTML est donc un simple ''langage à balises'' comme les premiers traitements de texte (Wordstar). Ce langage permet de coder une interface aux CD-ROM multimédia et maintenant aux DVD ROM.

Nous allons voir qu'il n'est pas nécessaire de connaître un grand nombre de balises pour créer sa première page. Notre première page va donc commencer par des balises dites de méta informations. Il est à noter que juste le texte qui est écrit entre les balises <BODY> et </BODY> va s'afficher.

Pour accélérer le travail et éviter de taper toutes les balises, de nombreux éditeurs HTML existent sur le marché.

On retrouve les éléments du lanceur dans la partie inférieure droite de l'écran Dreamweaver.

De façon générale, les menus contextuels (clic droit) permettent d'accéder au menu adapté à l'élément sélectionné.

Elle contient 4 volets accessibles par un clic sur le symbole triangle en haut à droite de la palette :

On appellera site ici l'emplacement de stockage des pages HTML appartenant à un même site web.

La création d'un site requiert 1 nom et un répertoire racine local dans lequel on rangera les sous-dossiers et les fichiers du futur site.

La première étape consiste à créer le dossier racine du site par l'explorateur Windows par exemple, PUIS

3 types de chemin sont possibles dans Dreamweaver : chemins absolus, chemins relatifs à la racine ou relatifs au document.

On préférera les chemins absolus dans le cas de liens vers des documents externes au site.

Liens nowhere : Ces liens ne renvoient nulle part mais ils servent à donner accès à des événements Javascript qui ne seraient pas disponibles sinon (certains événements sont accessibles aux liens et pas aux textes ou images)

Pour qu'une image soit visible en prévisualisation, il faut que le fichier soit stocké dans le dossier racine du site. Dans le cas contraire, Dreamweaver proposera la copie du fichier dans le dossier racine du site.

Les tableaux sont de plus en plus utilisés parce qu'ils constituent une bonne méthode pour positionner précisément les éléments d'une page.

On privilégiera la création de plusieurs tableaux par rapport à la création d'un seul grand tableau (dans ce cas, Dreamweaver attend le chargement complet du tableau avant d'afficher les éléments du tableau).

PRINCIPALES BALISES HTML

Mise en forme des caractères
<B>…</B>	Texte en gras
<BIG>…</BIG>	Agrandissement de la taille des caractères
<BLINK>…</BLINK>	Texte clignotant (Netscape seul)
<EM>…</EM>	Texte en italique
<FONT color= ‘’#XXXXXX’’>…</FONT>	Texte en couleur où XXXXXX est une valeur hexadécimale
<FONT size=X>…</FONT>	Taille des caractères où X est une valeur de 1 à 7
<I>…</I>	Texte en italique
<MARQUEE>…</MARQUEE>	Texte défilant (Internet Explorer seul)
<NOBR>…</NOBR>	Empêche les ruptures automatiques de ligne des navigateurs
<PRE>…</PRE>	Texte préformaté, soit avec affichage de tous les espaces
<SMALL>…</SMALL>	Réduction de la taille des caractères
<STRONG>…</STRONG>	Mise en gras du texte
<SUB>…</SUB>	Texte en indice
<SUP>…</SUP>	Texte en exposant
<U>…</U>	Texte souligné

Mise en forme du texte
< !--…-->	Commentaire ignoré par le navigateur
<BR>	A la ligne
<BLOCKQUOTE>…</BLOCKQUOTE>	Citation (introduit un extrait de texte)
<CENTER>…</CENTER>	Centre tout élément compris dans le tag
<DIV align=center>…</DIV>	Centre l’élément encadré par le cadre
<DIV align=left>…</DIV>	Aligne l’élément à gauche
<DIV align=right>…</DIV>	Aligne l’élément à droite
<Hx>…</Hx> <Hx align=center>…</Hx> <Hx align=left>…</Hx> <Hx align=right>...<Hx>	Titre où x a une valeur de 1 à 6 Titre centré Titre aligné à gauche Titre aligné à droite
<P>…</P> <P align=center>…</P> <P align=left>…</P> <P align=right>...</P>	Nouveau paragraphe Paragraphe centré Paragraphe aligné à gauche Paragraphe aligné à droite

Listes

<UL>

<LI>

</UL>

Liste non numérotée (dite à puces)

Elément de liste

<OL>

<LI>

</OL>

Liste numérotée

Elément de liste

<DL>

<DT>…</DT>

<DD>...</DD>

</DL>

Liste de glossaire

Terme de glossaire

Ligne de séparation
<HR>	Trait horizontal (centré par défaut)
<HR width=“x%’’>	Largeur du trait en %
<HR width=x>	Largeur du trait en pixels
<HR size=x>	Hauteur du trait en pixels
<HR align=center> <HR align=left> <HR align=right>	Trait centré (défaut) Trait aligné à gauche Trait aligné à droite
<HR noshade>	Trait sans effet d’ombrage

Hyperliens
<A href=‘’http://…’’>…</A>	Lien vers une page web
<A href=‘’mailto:...’’>...</A>	Lien vers une adresse e-mail
<A href=‘’fichier.htm’’>…</A>	Lien cers la page locale fichier.htm située dans le même répertoire
<A name=‘’xyz’’>…</A>	Définition d’une ancre
<A href=‘’xyz’’>…</A> <A href=‘’fichier#xyz’’>...</A>	Lien vers une ancre

Images
<IMG src=‘’xyz.gif’’> <IMG src=‘’xyz.jpg’’>	Insertion d’une image au format Gif ou Jpg (voir liens pour l’adressage)
<IMG…width=x height=y>	Mise à l’échelle de l’image en pixels (a comme effet d’accélerer l’affichage de la page)
<IMG…border=x>	Définition de la bordure d’une image avec lien
<IMG…alt=‘’votre texte’’>	Texte alternatif lorsque l’image n’est pas affichée
<IMG…align=bottom> <IMG...align=middle> <IMG...align=top> <IMG...align=left> <IMG...align=right>	Aligne l’image en bas Aligne l’image au milieu Aligne l’image en haut Aligne l’image à gauche Aligne l’image à droite
<IMG…hspace=x> <IMG…vspace=y>	Espacement horizontal entre l’image et le texte Espacement vertical entre l’image et le texte

Tableau
<TABLE>…</TABLE>	Définition d’un tableau
<TABLE width=‘’x%’’>	Largeur du tableau en %
<TABLE width=x>	Largeur du tableau en pixels
<TABLE border=x>	Largeur de la bordure
<TABLE cellpadding=x>	Espace entre la bordure et le texte
<TABLE cellspacing=x>	Epaisseur du trait entre les cellules
<TR>…</TR>	Ligne du tableau
<TD>…</TD>	Cellule du tableau
<TD bgcolor=‘’#XXXXXX’’>	Couleur d’une cellule de tableau
<TD width=‘’x%’’> <TD width=x>	Largeur de colonne en % Largeur de colonne ne pixels
<TD align=center> <TD align=left> <TD align=right>	Texte dans la cellule centré Texte dans la cellule aligné à gauche Texte dans la cellule aligné à droite
<TD valign=bottom> <TD valign=middle> <TD valign=top>	Alignement vers le bas du contenu d’une cellule Centrage vertical du contenu d’une cellule Alignement vers le haut du contenu d’une cellule
<TD colspan=x> <TD rowspan=x>	Nombre de cellules à fusionner horizontalement Nombre de cellules à fusionner verticalement

Frames
<FRAMESET>…</FRAMESET>	Définit une structure de frame (remplace alors le tag BODY)
<FRAMESET rows=‘’x%,y%,…’’>	Division horizontale de la fenêtre en %
<FRAMESET cols=‘’x%,y%,…’’>	Division verticale de la fenêtre en %
<FRAME src=‘’fichier.htm’’>	Fichier affiché dans une fenêtre de frame
<NOFRAMES>…</NOFRAMES>	Contenu pour les browsers non prévus pour les frames

Fichier HTML
<HTML>…</HTML>	Début et fin de fichier HTML
<HEAD>…</HEAD>	Zone d’en-tête fichier HTML
<TITLE>…</TITLE>	Titre affiché par le browser (élément de HEAD)
<BODY>…</BODY>	Début et fin du corps du fichier HTML
<BODY bgcolor=‘’#XXXXXX’’>	Couleur d’arrière-plan (en hexadécimal)
<BODY background=‘’xyz.gif’’>	Image d’arrière-plan

INDEX DES BALISES HTML

Tableau récapitulant les balise (tags) jusqu’à la norme HTML 4.0. Ce tableau indique si ces balises ont une balise de fermeture, et des attributs (standards). Une brève description de la balise est aussi indiquée.

Balise

Fermeture

Attribut

Description

< !DOCTYPE>

< !-- -- >

<ABBR>

<ACRONYM>

<ADDRESS>

<A HREF>

<APPLET>

<AREA>

<B>

<BASE>

<BASEFONT>

<BDO>

<BGSOUND>

<BIG>

<BLINK>

<BLOCKQUOTE>

<BODY>

<BR>

<BUTTON>

<CAPTION>

<CENTER>

<CITE>

<CODE>

<COL>

<DD>

<DIR>

<DIV>

<DL>

<DT>

<EM>

<EMBED>

<FIELDSET>

<FONT>

<FORM>

<FRAME>

<FRAMESET>

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

<HEAD>

<HR>

<HTML>

<I>

<IFRAME>

<IMG>

<INPUT>

<INS>

<ISINDEX>

<KBD>

<LABEL>

<LAYER>

<LEGEND>

<LI>

<LINK>

<NEXTID>

<NOBR>

<NOEMBED>

<NOFRAMES>

<NOSCRIPT>

<OBJECT>

<OL>

<P>

<PARAM>

<PRE>

<Q>

<S>

<SAMP>

<SCRIPT>

<SELECT>

<SMALL>

<SPAN>

<STRIKE>

<STRONG>

<STYLE>

<SUB>

<SUP>

<TABLE>

<TBODY>

<TD>

<TEXTAREA>

<TFOOT>

<TH>

<THEAD>

<TITLE>

<TR>

<TT>

<U>

<UL>

<VAR>

<WBR>

<XMP>

Version du HTML utilisé

Commentaire

Abréviation

Acronyme

URL sous forme textuel

Lien hypertexte

Insertion d’applet Java

Zone cliquable

Texte en gras

Déf. Sup. de l’URL de la page HTML

Taille par défaut d’une police

Changement de direction impossible

Insertion de fichier audio

Police de taille plus importante

Clignotement du texte (Netscape seul)

Légère marge à gauche

Corps du document

Saut de ligne

Bouton dans un formulaire

Titre de tableau

Centrage

Texte sous forme de citation

Texte sous forme de code source

Déf. D’une colonne d’un tableau

Regroupement de colonnes (tableau)

Commentaire

Définition d’un terme

Fourni des infos sur un document

Texte sous forme logique

Liste à plusieurs dimensions

Structuration d’objets quelconques

Structure d’un glossaire

Elément d’un glossaire

Emphase (italique)

Insertion d’applications multimédia

Regroupement de zones dans les formulaires

Définition du texte

Début du formulaire

Structure d’un cadre (frame)

Fichier d’index pour les cadres (frame)

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6

En –tête d’un fichier HTML

Filet horizontal (séparation)

Structure externe d’une page HTML

Texte en italique

Définition d’un cadre local

Insertion d’image

Zone de saisie dans un formulaire

Fourni des infos sur un document

Déf. D’un fichier de recherche (script CGI)

Texte de type machine à écrire

Extension de la balise FORM

Définition des couches (layers) sous Netscape

Légende de tableau

Elément d’une liste

Lien indépendant du média

Structure externe de la zone cliquable

Texte défilant (Internet Explorer seul)

Liste de type menu

Informations sur la page HTML

Indique le document suivant

Pas de passage à la ligne

Contenu alternatif aux applications multimédia

Contenu alternatif aux cadres (frames)

Contenu alternatif aux scripts

Insertion d’objets (multimédia, applet,…)

Liste ordonnée

Début d’un paragraphe (saut de 2 lignes)

Paramètres d’un objet inséré

Texte préformaté

Citations longues

Texte barré

Texte sous forme d’exemple

Insertion de script (JavaScript)

Définition d’une liste de formulaire

Police de taille moins importante

Structuration d’éléments dans une ligne

Texte barré

Texte en gras

Définit les feuilles de style

Texte sous forme d’indice

Texte sous forme d’exposant

Structure d’un tableau

Regroupement de tableaux

Cellule d’un tableau

Zone de saisie à plusieurs lignes

Regroupement de tableaux

Cellule d’en-tête d’un tableau

Regroupement d tableaux

Titre de votre page

Ligne d’un tableau

Texte de type machine à écrire

Texte souligné

Liste à puces

Texte sous forme de variable

Désactive la balise <NOBR>

Texte sous forme d’exemple

Les balises propriétaires – Internet Explorer

Balise

Commentaire

Intègre un arrière-plan sonore

Effet de filigrane

Permet de mettre un texte en commentaire

Spécifie une couleur pour un filet

Insère un cadre (frame) local

Insère une image vidéo

Balise de défilement de texte

Permet d’inclure des objets dans un document HTML

Insère une image d’arrière-plan pour une cellule

Les balises propriétaires - Netscape

Balise

Commentaire

<BLINK>

<LAYER>

Provoque un clignotement du texte

Spécifie le type de puce

Permet d’accélérer une image

Permet de superposer des blocs de texte ou d’images

Permet d’insérer un bloc d’espace vide dans votre document

Retour Haut

IMAGES ET MAP

La balise <IMG> et ses attributs

La balise <IMG> a de nombreux attributs, le plus important est bien entendu SRC. Il permet de spécifier l’URL complète (chemin) du fichier.

Ex : <IMG SRC=‘’nom de fichier’’>

‘’nom de fichier’’ doit être remplacé par le nom de l’image et son extension (ordi.gif). Si votre fichier ordi.gif se trouve dans un autre répertoire que vos pages, par exemple dans un répertoire gif, cela donne :

ex : <IMG SRC=‘’http://www.allhtml.com/gif/logo.gif’’>

Précisez la taille de l’image au navigateur

En précisant la taille de l’image au navigateur, celui ci charge plus rapidement votre page. En effet il n’a pas à le recalculer. De plus si jamais le visiteur a désactivé le chargement des images, la mise en page ne sera pas perturbée. Ces dimensions correspondent à la taille en pixels de l’image. Ici l’image fait 40 pixels sur 30 pixels de hauteur.

Ex : <IMG SRC=‘’gif/ordi.gif’’ WIDTH=40 HEIGHT=30>

Vous pouvez agrandir ou rétrécir votre image en jouant donc sur les attributs WIDTH et HEIGHT mais attention le dessin ne sera chargé plus rapidement si vous diminuez sa hauteur ou sa largeur (ou les deux) bien au contraire.

Fournir un texte de rechange.

Il se fait avec l’attribut ALT.

Deux avantages :

- Si le visiteur désactive le chargement des images, il pourra quand même deviner le sens des images.

- Vous pouvez par ce biais fournir une légende à une image lorsque le pointeur de la souris passe au-dessus de cette image.

Ex : <IMG SRC= ‘’gif/ordi.gif’’ WIDTH=40 HEIGHT=30 ALT=‘’Mon ordinateur’’>

Entourer l’image

Avec l’attribut BORDER vous pouvez entourer l’image d’une bordure. L’attribut BORDER prend une valeur de 1 à x qui exprime la largeur de cette bordure entourant l’image.

Ex : <IMG SRC= ‘’gif/ordi.gif’’ BORDER=1 ALT=‘’Mon ordinateur’’>

Espacer l’image

Avec les attributs HSPACE=n et VSPACE=n (n étant un nombre en pixels) vous pouvez fixer un espace vertical et horizontal autour de votre image.

Ex : <IMG SRC= ‘’gif/ordi.gif’’ HSPACE=2 VSPACE=2>

Positionner et aligner une image

Par défaut l’image est placée sur une ligne et, le texte s’il est présent est aligné sur le bas de l’image. Si vous voulez encadrer une image avec du texte (style journal) l’attribut ALIGN est requis et possède 9 attributs :

· LEFT : Texte à gauche

· RIGHT : Texte à droite

· MIDDLE : Texte au milieu

· ABSBOTTOM : Texte en bas (absolu)

· ABSMIDDLE : Texte au milieu (absolu)

· BASELINE : Sur la ligne du texte

· BOTTOM : Texte en bas

· TEXTTOP : Texte en haut

· TOP : En haut

Ex : <IMG SRC= ‘’gif/ordi.gif’’ ALIGN=RIGHT>

Prévisualisation des images

A l’aide de l’attribut LOWSRC vous pouvez accélérer l’affichage de vos pages. En effet, le navigateur affichera en premier lieu ce qu’il trouve dans la balise LOWSRC. Généralement l’image contenue dans l’attribut LOWSRC doit être en basse résolution ou compressée. L’utilisation de cet attribut est surtout intéressant pour des images supérieures à 20 Ko.

Précisez également les dimensions de l’image.

Attention, cette balise est spécifique à Netscape.

Ex : <IMG SRC= ‘’gif/ordi.gif’’ WIDTH=40 HEIGHT=30 LOWSRC=‘’gif/ordireduit.gif’’>

La balise <MAP> et ses attributs.

Cette balise permet de créer une image réactive (côté client) en HTML. L’image réactive est utilisée généralement pour définir plusieurs liens (interne ou externe) sur une même image, elle est souvent utilisée pour des banderoles. La balise <MAP> doit être utilisée avec la balise <AREA>.

La balise <AREA> possède 3 attributs :

· SHAPE qui peut prendre 3 valeurs :

· RECT pour un rectangle

· CIRCLE pour un cercle

· POLY pour un polygone

· COORDS :

· Indique les coordonnées des coins supérieurs gauche et inférieur droit de la zone pour un rectangle RECT.

· Indique les coordonnées de chaque angle du polygone si vous optez pour la valeur POLY.

· Indique les coordonnées du centre du cercle et la dimension du rayon de ce même cercle pour la valeur CIRCLE.

· HREF définit la page de destination du lien correspondant à la zone. Vous pouvez bien entendu, utiliser un lien interne ou externe.

ZONE 1

ZONE 2

Exemple d’une image réactive composée d’un rectangle (zone 1) et d’un cercle (zone 2). La zone 1 revient au début de la page et la zone 2 revient au titre ‘’La balise <MAP> et ses attributs’’.

Voici le code de l’exemple ci-dessus.

Note : On remarquera que l’attribut NAME (à l’intérieur de la balise MAP) et que l’attribut USEMAP (à l’intérieur de la balise IMG ont le même nom, ceci afin de les relier (obligatoire).

</MAP>

IMAGES OPTIMISATION ET REDUCTION

Conseils d’optimisation.

· Essayez de trouver un juste milieu entre la qualité de l’image et la taille.

· Le nombre de points par pouce (DPI) recommandé pour les images sur Internet est de 72, assurez-vous que toutes vos images ont bien été enregistrées avec cette résolution.

· Pas plus de 10 ko pour une icône ou un bouton, 20 ko pour un gif animé et 30 ko pour une image Jpeg, c ‘est avec ces tailles que vous obtiendrez une vitesse d’affichage correcte. Au-dessus de ces tailles l’option entrelacée pour les gif et progressive pour les Jpeg est recommandée.

· Pour une image Jpeg choisissez une compression entre 20% et 30% (1% est égal à une grande qualité mais une grande taille, 99% est égal à une qualité médiocre mais la taille du fichier est minime).

· Essayez de découper au plus près l’image, ne laissez pas d’espaces inutiles, en effet la hauteur et la largeur de l’image jouent sur la taille du fichier.

· Reduisez au mieux le nombre de couleurs de chaque image (essayez d’inclure dans chaque palette de couleurs les couleurs reconnues par Windows et les navigateurs, cf. rubrique les 216 couleurs).

· Attention même si votre image est constituée de 4 ou 5 couleurs, ne l’enregistrez pas au format 256 couleurs, utilisez plutôt le format 16 couleurs, sinon vous réserverez un espace inutile pour de nombreuses couleurs et la taille de votre fichier sera donc supérieure à celle nécessaire.

· L’affichage progressif (ou entrelacé pour les Gifs) est intéressant si votre image est supérieure à 50 ko.

· Vos images ne doivent pas déâsser

· 0 – 50 pixels (largeur et hauteur) pour une icône, un bouton, un logo.

· 50 – 300 pixels (largeur et hauteur) pour une photographie scannée.

· 300 – 600 pixels (largeur et hauteur) pour les bannières.

Tableau estimatif sur le temps de téléchargement d’une image de 20 ko.

Vitesse de connexion (en bps)

Taux de transfert maxi

Temps nécessaire pour charger une image de 20 ko

9600

14400

28800

33600

56000

960 carac. / sec

1440 carac. / sec

2880 carac. / sec

3360 carac. / sec

5600 carac. / sec

21 sec.

14 sec.

7 sec.

6 sec.

3,5 sec.

Avantages et inconvénients de chaque format.

Format	Description	Utilisation
GIF	· Pas de perte de détails · 256 couleurs maxi · Affichage progressif possible (entrelacé) · Gère la transparence · Reconnu par tous les navigateurs	Logo Icônes Banderoles
JPEG	· Perte de détails · 16,7 millions de couleurs · Affichage progressif · Ne gère pas la transparence · Reconnu par tous les navigateurs	Banderoles Photographies
PNG	· Pas de perte de détails · 16,7 millions de couleurs · Affichage progressif · Gère la transparence · Pas encore reconnu par tous les navigateurs	Logo Icônes Banderoles Photographies

Retour Haut