1.1 - Telechargez les fichiers
Vous trouverez ci-dessous un fichier .zip que vous devez télécharger afin de débuter le cours pour apprendre à créer votre première page web.
Une fois téléchargé, vous devez décompresser le fichier. Vous pouvez par exemple le placer sur le bureau de votre ordinateur. Un dossier "Mon-Site" est maintenant disponible. Le dossier est composé de :
1 fichier html (index.html)
1 fichier CSS (style.css)
1 dossier image avec :
- - fond-haut.gif
- - fond-site.gif
- - image-gite.jpg
- - image-gite-grande.jpg
1.2 - Description des fichiers telecharges :
index.html : C'est la page d'accueil sur laquelle se trouvera le contenu de votre site (texte et images), sous forme de code HTML.
style.css : C'est une feuille de style qui permet de mettre en forme votre site (couleurs, polices, dimensions de conteneurs...)
/images/ : C'est ici que toutes les images de votre site sont stockées.
1.3 - Ouverture de la page dans un navigateur en local
Faites un "clic droit" sur les fichiers style.css et index.html afin de les ouvrir directement avec votre éditeur texte ou HTML préféré. (Bloc note, wordpad, textedit, dreamweaver...) : vous pourrez ainsi les modifier à votre guise.
Double cliquez ensuite sur index.html afin d'ouvrir la page dans votre navigateur favoris (Internet Explorer, Firefox, Safari...).
Vous devez voir le message suivant :
« Si vous voyez ce message, c'est que tout fonctionne correctement ! »
1.4 - Copiez le code de base
Afin de faciliter le cours, nous vous avons préparé la feuille de style (style.css) ainsi que le code HTML à ajouter pour avoir une base facilement exploitable.
Allez dans votre bloc note, et modifiez la page index.html comme indiqué ci-dessous.
Supprimez la phrase « Si vous voyez ce message, c'est que tout fonctionne correctement ! », et remplacez la par le code ci-dessous :
Enregistrez la page index.html (vous pouvez utiliser le raccourci clavier "Ctrl+S").
Rendez-vous dans votre navigateur et actualisez la page (vous pouvez utilisez le raccourci clavier "touche F5"). Vous devez avoir une page comme l'image ci-dessous.