|
Créer
une page en HTML |
|
Une page web, un site perso, c'est très simple
à réaliser.
Le but de cette page est d'indiquer les instructions
de base nécessaires à la conception d'une page web.
J'ai aussi réalisé une page pour créer
son site avec Dreamweaver 2 (voir)
Il faut tout d'abord, créer un dossier à
l'intérieur de Mes documents.
A l'intérieur de ce dossier, on crée :
- un sous-dossier (pour recevoir les images),
- une première page que l'on nommera index.htm.
C'est l'armature minimale et indispensable pour la
création d'une page web.
Dans le champ Adresse, remarquer
que l'on est à l'intérieur du dossier site.
A l'intérieur de ce dossier, on a le dossier images, et le
fichier index.htm.
Prendre l'habitude d'utiliser des caractères minuscules pour
nommer pages et dossiers. Pas de caractères spéciaux,
et pas d'espaces.
1 Créer les dossiers :
Il faut d'abord créer un nouveau dossier à
l'intérieur duquel on enregistrera la page, et tous les éléments
constitutifs de cette page.
En même temps, on créera un sous-dossier images.
1 Créer le dossier site :
- double-cliquer sur Mes documents,
- cliquer avec le bouton droit à l'intérieur de
la fenêtre,
- sélectionner "Nouveau" puis "Dossier",
- renommer le dossier : site
2 Créer le dossier images :
- double-cliquer sur site,
- créer un dossier à l'intérieur,
- renommer le dossier : images
|
2 Créer la page index.htm :
On peut déjà créer un "embryon"
de page, qu'on modifiera ultérieurement :
1 Ouvrir le Bloc-notes :
- menu Démarrer, Programmes, Accessoires, Bloc-notes.
2 Copier-coller le texte suivant :
<HTML>
<HEAD>
<TITLE>Ma page</TITLE>
</HEAD>
<BODY>
<P>bonjour</P>
</BODY>
</HTML>
3 Enregistrer le document :
- menu Fichier, Enregistrer...,
- aller dans le dossier site,
- nommer le document : index.htm.
C'est l'extension .htm qui détermine le format
du document.
C'est grâce à cette extension que celui-ci pourra
être ouvert avec Internet Explorer.
|
Voici donc l'armature du site créée :
- un fichier index.htm, qui donnera accès aux autres pages
créées ensuite, à l'aide de liens hypertexte.
- un dossier images, qui contiendra les images, logos, bandeaux
qui orneront les pages.
On peut déjà :
- double-cliquer sur le fichier index.htm
... et constater que son contenu s'affiche bien à l'intérieur
d'une fenêtre d'Internet Explorer.
Pour travailler sur une page, ou l'ensemble d'un
site, il faut :
- accéder au contenu du site (pages et dossier),
- modifier le document en cours,
- visualiser les modifications.
On aura donc les trois fenêtres suivantes :
- le dossier site : pour ouvrir les documents,
- le Bloc-notes, pour modifier la page en cours,
- Internet Explorer, pour visualiser les modifications.
On cliquera sur les trois boutons de la barre des
tâches...
Créer un raccourci du dossier site sur le Bureau pour pouvoir
y accéder facilement.
1 Pour modifier le fichier index.htm :
- sélectionner la fenêtre site,
- cliquer avec le bouton droit sur index.htm,
- sélectionner edit dans le menu contextuel. |
|
Le document index.htm s'ouvre dans le Bloc-notes.
|
2 Pour visualiser les modifications :
- enregistrer le document index.htm,
- sélectionner la fenêtre site,
- double-cliquer sur index.htm.
Le document index.htm s'ouvre dans Internet Explorer.
Les fois suivantes :
- enregistrer le document index.htm,
- sélectionner la fenêtre Internet Explorer,
- cliquer sur Actualiser (ou appuyer sur F5).
|
Il y a quelques points essentiels qu'il faut connaître
avant tout. Car c'est souvent la cause des problèmes qu'on
rencontre...
Le fichier de base du site doit s'appeler obligatoirement :
index.htm ou index.html
Pour les autres pages et tous les autres fichiers
(image, son, etc.) :
- utiliser des caractères minuscules (lettres ou chiffres),
éviter les majuscules.
- pas de caractères accentués (é, è,
ç, à, etc.)
- pas d'espace (ou utiliser le caractère "_").
Au minimum, on disposera de deux dossiers :
- 1 - un dossier site, contenant l'ensemble des fichiers
et dossiers du site,
- 2 - un dossier images, placé à l'intérieur
du dossier site, et contenant les images du site.
Normalement :
- toutes les pages web crées seront à l'intérieur
du dossier site,
- toutes les images seront à l'intérieur du dossier
images.
Pour tout fichier placé directement dans le
dossier site (comme index.htm), il n'y aura pas de problème
d'accès. On dit que le fichier est placé à
la racine du site.
Par contre, pour afficher une image placée
à l'intérieur du dossier images, il faudra préciser
son chemin d'accès :
exemple, pour une image nommée dessin.gif : images/dessin.gif
Afin de limiter la taille de ses pages, et donc d'accélérer
leur chargement, il faudra bien choisir le format des fichiers image
(voir) :
- JPG ou JPEG : quand il s'agira
de photos,
- GIF : quand il s'agira de dessins au nombre de couleurs
limité (256 couleurs).
Sur ce site, tous les fichiers image sont des fichiers
.gif
Il sera préférable d'indiquer les dimensions
de l'image dans le code HTML (voir), ainsi
qu'une description de l'image.
Logiciels disponibles :
Paint Shop Pro : Shareware très complet pour
dessiner et travailler sur des images.
http://www.jasc.com/
IrfanView (Iview) : Programme gratuit, en
anglais mais simple à utiliser. Il permet de redimensionner ou de
changer le format des fichiers images.
http://www.irfanview.com/
On peut bien sûr utiliser Paint livré
avec Windows...
On peut télécharger des fichiers images sur des sites
spécialisés (voir).
Chaque instruction est composé d'une balise
entrante, et d'une balise sortante.
La balise sortante est précédée par le signe
/
Chaque balise est encadrée par <
et >
On peut écrire les balises en majuscule ou
en minuscule.
Il existe quatre balises essentielles :
- HTML = précise
que c'est un document html.
- TITLE = affiche le nom
de la page en haut à gauche de la fenêtre
- HEAD = c'est l'en-tête
du document, qui contient des informations diverses.
- BODY = c'est le corps
du document, qui contient le texte, les images, etc.
<HTML> |
C'est la balise qui détermine
la nature du document. |
<HEAD> |
HEAD = tête. C'est la partie
contenant des informations sur la page. Elle contient notamment
le titre de la page. |
<TITLE>Ma page</TITLE> |
Titre de la page. |
</HEAD> |
fin de l'en-tête du document. |
<BODY> |
BODY = corps. C'est la partie "visible"
de la page. |
<P>bonjour</P> |
P = paragraphe. C'est un exemple
d'affichage de texte. |
</BODY> |
fin du corps du document. |
</HTML> |
fin du document. |
La balise HTML est indispensable pour déterminer
qu'il s'agit d'une page web. Mais on n'a pas à s'en occuper.
La balise TITRE sert à afficher le nom de la page. Il est
indiqué une fois pour toutes.
Ce sont donc les balises HEAD et BODY les plus importantes
à connaître :
Les informations qu'elles contient sont lues en premier
pour afficher la page.
Quand on débute, il n'est pas nécessaire de s'intéresser
au contenu de la balise HEAD.
On peut passer directement au contenu de la balise BODY (voir
plus bas).
La balise HEAD contient essentiellement :
- des balises META,
- du code JavaScript,
- des références aux feuilles de style.
Les balises META :
Elles sont destinées aux moteurs de recherche
qui indexent les sites web.
Cela n'est donc utile que si l'on souhaite faire référencer
son site.
Elles permettent de :
- décrire le contenu du site,
- donner des informations sur son auteur,
- donner des indications aux robots qui parcourent les sites.
Les balises META sont de différentes sortes :
Informations sur la nature du document :
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">
Informations sur l'auteur, la langue utilisée,
le contenu du site :
<META NAME="author" CONTENT="Alain
MEST">
<META http-equiv="content-language" CONTENT="fr">
<META NAME="DESCRIPTION" CONTENT="Le contenu de
mon site">
<META NAME="Keywords" CONTENT="informatique,windows">
Informations destinées aux robots :
<META NAME="ROBOTS" CONTENT="INDEX,
FOLLOW, ALL">
Plus de précisions sur le site d'Henry :
- http://www.aidenet.com\pageperso13ae.htm
Le code JavaScript :
La balise HEAD peut contenir également du
code JavaScript. C'est un code de programmation qui permet
d'exécuter des commandes que le code HTML ne peut effectuer.
Comme la partie HEAD est lue en premier lors de l'ouverture
de la page, le code JavaScript sera déjà chargé
en mémoire, au moment où la page commencera à
s'afficher.
Un code JavaScript débute par la balise <SCRIPT>
et se termine par la balise </SCRIPT>
exemple :
<SCRIPT type=text/javascript>
function favorites()
... etc
</SCRIPT>
Différents codes JavaScripts sont disponibles
en téléchargement sur certains sites (voir)
Ne pas oublier que la présence de code JavaScript dans une
page, ralentit fortement l'affichage de celle-ci. Il faut donc user....
mais ne pas abuser ;-)
Les références aux feuilles de style :
Quand on utilise des feuilles de style (voir),
c'est dans la partie HEAD que les informations les concernant sont
placées.
exemple :
<link rel="stylesheet" href="styles.css">
(cette instruction fait référence à une feuille
de style nommée : styles.css
C'est elle qui contient le code HTML de tout ce qui
s'affiche à l'écran : textes, images, tableaux,
liens hypertexte.
C'est là que ce situe le véritable travail sur une
page web :-)
Le texte d'un page web s'insère entre les
balises BODY
La balise <P> désignera le début
d'un paragraphe, </P> désignera la fin d'un
paragraphe.
La balise <BR> désignera un retour à
la ligne. Elle s'utilise sans balise de fin.
La balise <FONT> permettra de choisir
la police de caractère, sa taille, sa couleur.
Les balises <B> et <I> détermineront
le style.
Exemple :
<font face="Arial, Helvetica, sans-serif"><b><i>
<font size="2" color="#FF0000">Exemple
de texte</font></i></b></font>
On remarque :
Le nom de la police utilisée : |
<font face="Arial,
Helvetica, sans-serif"> |
Le style (gras, italique) : |
<b><i> |
La taille et la couleur du texte : |
<font size="2"
color="#FF0000"> |
Le texte qui s'affiche à l'écran : |
Exemple de texte |
Les balises sortantes : : |
</font></i></b></font> |
Ce qui donnera :
Exemple
de texte
Voici la commande de base pour insérer une
image dans une page web :
<IMG SRC="images/dessin.gif">
Il faudra évidemment que l'image dessin.gif
soit à l'intérieur du dossier images (voir
plus haut).
Instructions complémentaires :
On pourra rajouter :
La taille de l'image : WIDTH="XX"
HEIGHT="XX"
La bordure de l'image : BORDER="X"
Un texte qui s'affichera quand le pointeur de la souris survolera
l'image : ALT="Mon image"
Ce qui donnera par exemple :
<IMG SRC="images/dessin.gif"
WIDTH="30" HEIGHT="35" BORDER="0"
ALT="Mon image">
C'est la base de la conception d'une page web.
Un lien hypertexte est composé de deux parties :
- le lien en lui-même (partie sur laquelle on clique),
défini par HREF
- la cible (endroit où renvoie le lien).
Si la cible est une adresse Internet ou une autre
page du site, il n'y aura rien à rajouter.
Si la cible est un endroit précis d'une page à l'intérieur
du site, il faudra rajouter une ancre à cet endroit.
L'ancre sera définie par NAME
1 Ecriture du lien :
Pour intégrer un lien hypertexte à
l'intérieur d'une page, il faudra taper le texte suivant :
<A HREF="lien">cliquer
ici</A>
A la place du mot lien, on pourra écrire :
- 1 - une adresse Internet, par exemple : http://www.aidewindows.net
- 2 - une autre page du site, par exemple : page1.htm
Dans ces deux cas, le lien sera utilisable tel quel.
Ces liens seront utilisés par exemple :
- 1 dans une page de liens,
- 2 dans le menu d'un site, pour accéder aux autres pages
de ce site.
A la place du mot lien on pourra écrire :
- 3 - un endroit précis de la page en cours, par exemple :
#home
- 4 - un endroit précis d'une autre page, par exemple :
page1.htm#home
Dans ces deux cas, il faudra ajouter, à l'endroit visé
par le lien, la cible correspondante.
Le sigle # précisera qu'il s'agit d'un endroit
précis de la page.
2 Ecriture de la cible :
La cible sera à indiquer quand le lien contiendra
le sigle #
Si le lien désigne : #home la cible
s'écrira home
<A NAME="home"></A>
Souvent, la cible sera placée près
d'un titre de chapitre à l'intérieur d'une page.
Les tableaux sont indispensables pour effectuer une
mise en page dans une page web (voir).
On pourra choisir :
- le nombre de lignes et de colonnes, en ajoutant des balises <TR>
et <TD>
- la taille du tableau, avec les balises WIDTH et HEIGHT
- la couleur de fond du tableau, ou des cellules du tableau, avec
la balise BGCOLOR
- la taille des bordures du tableau ou des cellules, avec la balise
BORDER
- l'alignement à l'intérieur des cellules, avec les
balises ALIGN et VALIGN
Un tableau, dans sa plus simple expression :
<TABLE>
<TR>
<TD><P>hello</P>
</TD>
</TR>
</TABLE>
Les balises WIDTH et HEIGHT, BORDER, BGCOLOR, ALIGN
seront insérées dans la balise TABLE.
La balise TR désignera une ligne (à
indiquer en premier dans un tableau).
La balise TD désignera une colonne (il pourra y en
avoir plusieurs dans une ligne).
3/09/01 5:00 A compléter :-)
|