Agence creation de site internet
Debutant : Creez votre premiere page web
Thèmes associés : Telechargement de site et site a telecharger, telecharger site car telecharger un site or telechargement site. Liens associés : telecharger site et telecharger site
AUDIT SEO GRATUIT

Presentation et Telechargement

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. 
Image de Presentation et Telechargement
Aperçu du fichier dans le bloc note (windows vista)
zoom sur image
Aperçu du fichier dans le bloc note (windows vista)
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 ! »
Image de Presentation et Telechargement
Aperçu de index.html dans votre navigateur (Firefox)
zoom sur image
Aperçu de index.html dans votre navigateur (Firefox)

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 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre de ma page web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Cette page est consacrée à ma maison en bord de mer, près de La Rochelle." />
<meta name="keywords" content="maison bord de mer,location la rochelle,maison mer la rochelle" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
</body>
</html>
Image de Presentation et Telechargement
Aperçu du code à copier dans le bloc note
zoom sur image
Aperçu du code à copier dans le bloc note
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.
Image de Presentation et Telechargement
Aperçu de la page index.html dans votre navigateur.
zoom sur image
Aperçu de la page index.html dans votre navigateur.

Création de sites Internet
& référencement naturel

Découvrez les références de l’agence web
STUDIO VITAMINE. Des spécialistes et passionnés
Ă  votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE