Introduction

Débuter Pour commencer... Optimiser Pour aller plus loin...
Vocabulaire Liste des étapes à suivre
Fonctionnement de ce site Version du navigateur Conseils 		Dimensions - Feuilles de style - Version du navigateur
Nom du site - Titre d'une page web



Bienvenue à toutes celles et à tous ceux qui souhaitent créer un site web facilement.

Vous trouverez dans ces pages tous les outils de base pour réaliser votre projet et la seule connaissance informatique qui vous sera nécessaire est le "copier-coller".
La technologie présentée est le HTML 4.
Ce site a été optimisé pour "Internet Explorer" version 4.0, ainsi si vous surfez avec "Netscape Navigator" il se peut que certaines pages ne s'affichent pas correctement.

Lionel Jouve.
Mars 2003


Vocabulaire

Le concepteur
Personne qui crée le site web
Le visiteur
Toute personne susceptible de se rendre sur votre site via le réseau Internet
Navigateur
Logiciel qui permet d'interpréter les pages web lorsque vous surfez sur Internet. Les 2 principaux sont "Internet Explorer" et "Netscape Navigator"
Balise
- Exemple balise simple: <br />
vous retrouverez très souvent cette balise, car son rôle est de provoquer un retour à la ligne

- Exemple balise double: <title> ici j'écris le titre de la page</title>
Attribut
Option d'une balise
exemple: <img src="mon_image.jpg" alt="photo de vacances" />
  • "img" est la balise grâce à laquelle je peux insérer une image dans une page
  • "src" est un attribut qui fait référence au fichier image "mon_image.jpg"
  • "alt" est un attribut qui permet d'afficher le texte "photo de vacances" lorsque le pointeur de la souris passe au dessus de l'image
HTML
Langage informatique composé des balises citées ci-dessus
Page web
Fichier qui contient une succession de balises. Son extension est "html" ou "htm", ce qui signifie que son nom se termine par ".html" ou ".htm"
Code source (ou code)
Suite des balises qui composent la page web et que je visualise lorsque j'ouvre celle-ci avec un éditeur de texte
Répertoire
Dossier visible dans l'explorateur de windows: "démarrer, Tous les programmes, Accessoires, Explorateur Windows"


Liste des étapes à suivre

  1. Je lance un éditeur de texte, par exemple le bloc-notes de Windows : "démarrer, Tous les programmes, Accessoires, Bloc-notes"
  2. J'écris en haut de ce fichier les balises ci-dessous, dans cet ordre, car elles sont indispensables à chaque page web:

    <!DOCTYPE html PUBLIC "-//W3C;//DTD XHTML 1.0 Transitional;//EN">
    <html>

    <head>
       <title>     ici j'écris le titre de la page </title>
    </head>

    <body>
          ici j'ajouterai ensuite toutes les balises qui m'intéressent
          et que je récupérerai sur ce site en faisant des copier-coller
    </body>

    </html>
  3. "Fichier, Enregistrer sous", je choisis comme nom par exemple "page1.html", puis je ferme la fenêtre
  4. Maintenant ma 1ère page est créée, pour voir comment elle s'affiche il suffit de double-cliquer sur le fichier "page1.html", ce qui a pour effet de l'ouvrir avec le navigateur installé sur mon ordinateur
  5. Ensuite pour modifier le contenu de la page il y a 3 solutions:
    • afficher la page comme en 4, puis cliquer sur le bouton droit de la souris et choisir "afficher la source"
    • sélectionner le fichier dans l'explorateur, cliquer avec le bouton droit, puis choisir "ouvrir avec bloc-notes"
    • ouvrir le fichier à partir d'un éditeur de texte, sans oublier de faire apparaître "tous les types de fichiers" dans la boîte d'ouverture
  6. Attention, les espaces à l'intérieur des balises sont nécessaires lorsqu'il y en a. Par contre, les espaces, les tabulations et les retours à la ligne en dehors des balises sont ignorés par le navigateur, seul le premier de ces éléments est pris en compte
  7. Afin de faciliter la relecture du code source je peux introduire des commentaires, ceux-ci sont ignorés par le navigateur, donc sans effet sur l'affichage de la page.
    La syntaxe est la suivante:
    <!-- ici j'écris mon commentaire -->
  8. Pour obtenir la page 2 du site, je copie le fichier "page1.html", je le renomme "page2.html" et je le modifie à ma guise
  9. Une fois le site terminé, il me reste à lui trouver un nom et à contacter un hébergeur pour lui envoyer tous les fichiers (pages web, images...) qui sont sur le disque dur de mon ordinateur.
    Vous trouverez des hébergeurs sur Internet, pour quelques euros par an, et d'autre part, bon nombre de fournisseurs d'accès à Internet tel que free, orange, aol...proposent d'héberger un site web gratuitement si vous êtes abonnés chez eux.


Fonctionnement de ce site

utilisation

Tous les exemples sont encadrés par deux lignes horizontales avec un numéro de code, comme ceci:
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 3 |||||

Bon surf et bonne construction de site ! ! !

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
  1. Vous positionnez le curseur de la souris sur un point quelconque de la page, cliquez sur le bouton droit, puis sélectionnez "afficher la source"
  2. Dans le code source, vous recherchez le code 3
  3. Vous copiez tout ce qui est entre les deux lignes horizontales (sans copier ces deux lignes) et collez le tout dans le fichier de votre page web
  4. Vous modifiez à votre guise

éléments créés par le concepteur du site

Tous les éléments qui me sont propres dans les exemples de ce site et, par conséquent, que vous pouvez remplacer par vos éléments, portent un nom qui commence par "mon_", afin de les différencier des mots-clefs HTML.

liens

Pour simplifier les liens, tous les fichiers de ce site : pages HTML, images, vidéos, animations ... se trouvent dans un seul et même répertoire, sauf cas particulier.
Je vous conseille de faire la même chose pour débuter.
Ensuite si vous réalisez un site plus élaboré et que vous souhaitez l'organiser avec des sous-répertoires, consultez la page "Fichiers" du menu "Optimiser".


Conseils

Page d'accueil