Rechercher sur Google
Ma nouvelle adresse :-)

Recherche sur le site
Aide Débutant (index)
La souris et le clavier
Programmes et documents
Fenêtres et menus
Le copier-coller
 
Aide Windows (index)
Présentation
Configuration
Utilisation
Ajout et suppression de programmes
 
Urgence
Les périphériques
Utilitaires de Windows
Entretien de Windows
 
Virus et antivirus
Firewall et mot de passe
 
Protection et sécurité
Trucs et astuces
Conseils, astuces et problèmes
 
• Avancé
Installation de Windows
Base de Registre
Installation d'un disque dur
Partitionnement
 
Créer une page web
Créer une page en HTML
Utiliser Dreamweaver 2.0
version actualisée sur http://www.aidewindows.net

 

Les préparatifs
Méthode de travail
 
Premiers éléments de code HTML
Nom des fichiers
Chemin d'accès
Format des fichiers image
 
Les balises
Les balises HTML, TITLE, HEAD et BODY
La balise HEAD
- les balises META
- le code JavaScript
La balise BODY
 
Composition d'une page web
Le texte (P, BR et FONT)
Les images (IMG SRC)
Les liens hypertexte (HREF et NAME)
Les tableaux (TABLE, TR et TD)

 

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)

 

Les préparatifs...

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.

Contenu du dossier site

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.

Conseil 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.

Remarque 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.

 

Méthode de travail :

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.

Boutons de la barre des tâches

On cliquera sur les trois boutons de la barre des tâches...

Conseil 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).

 

Premiers éléments de code HTML :

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

Nom des fichiers :

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 "_").

Chemin d'accès :

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

Format des fichiers image :

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).

 

Les balises :

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.

Les balises HTML, TITLE, HEAD et BODY :

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 :

La balise HEAD :

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)

Remarque 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

 

La balise BODY :

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 :-)

 

Composition d'une page web :

 

Le texte :

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

 

Les images :

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">

 

Les liens hypertexte :

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 :

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 :-)

 

Haut de la page
 
Aide Internet (index)
Débuter sur Internet
Utilisation d'Internet
Conseils divers
Les forums de discussion
Configurer une connexion Internet
 
• Internet Explorer
Utilisation
Configuration
• Outlook Express
Utilisation
Configuration
Maintenance
Les virus dans Outlook Express
 
• Page perso
Créer sa page Web
Créer une page en HTML
Utiliser Dreamweaver 2.0
 
Liens
 
Macintosh
 
Copyright
Remerciement
Ecrivez-moi
Mon livre d'or