Avec “votre première page en HTML”, nous allons passer  à la mise en pratique afin de créer facilement et rapidement un petit site web.

Comme vu dans la chapitre I sur l’approche globale pour créer un site, vous avez le choix entre de nombreux éditeurs ( Notepad++, Sublime text… ). Nous travaillerons ici sur Dreamweaver (qui est payant par abonnement avec période d’essai  mais vous pourrez trouver des versions antérieures gratuites sur google). Le procédé restera le même sur n’importe quel éditeur pour l’arborescence du site ainsi que pour l’écriture du code HTML.

Pour créer votre première page, vous devrez disposer
– d’un hébergeur et d’un nom de domaine (afin que votre site soit visible sur les navigateurs)
Il est également possible (et pratique) de réaliser dans un premier temps vos sites en local (avec wamp par exemple qui sera abordé dans d’autres tutos) .
– d’un éditeur de texte
– d’un logiciel photo pour l’aspect graphique de votre site
– d’un logiciel de transfert : filezilla par exemple, gratuit et simple à utiliser pour le transfert de vos fichiers.

Votre première page en HTML

Nous allons réaliser ici un site pas à pas avec des dossiers et des images.
Vous avez dans un premier temps choisi votre hébergeur et votre nom de domaine.  Si vous ne l’avez pas encore fait, vous pouvez opter pour l’hébergeur EX2 qui est d’un très bon rapport qualité/prix et également doté d’une hotline réactive (à partir de 4euros/mois).

Nous allons prendre l’exemple ici d’un site portant sur les animaux et nous avons donc choisi chez notre hébergeur le nom de domaine
animania.com
Une fois votre hébergement et nom de domaine choisi votre hébergeur va vous renvoyer les informations vous permettant de vous connecter à votre site avec notamment un compte FTP qui vous permettra de transférer les fichiers de votre site sur le web.
Nous allons donc dans un premier temps créer nos premières pages en local sur l’ordinateur puis transférer ces pages via FTP afin qu’elle soit visible sur votre navigateur.

 

1/ Création de l’arborescence du site et des premières pages en HTML

Afin que la structure du site ne soit pas confuse, on va créer différents dossiers pour classer les images et fichiers.

Ouvrez l’éditeur de texte que vous avez installé.
Pour dreamweaver :
C:\Program Files\Macromedia\Dreamweaver MX…\

Dans votre  éditeur, cliquez sur fichiers > ouvrir . Nous allons placer un dossier portant le nom de votre site.
Faites Fichier > Ouvrir (ou CTRL+O).
A l’endroit où se trouve votre éditeur,créer un nouveau dossier (clic de droit)
démarrage dreamweaver

Ce dossier va porter le nom de votre site.
Ici, ce sera pour l’exemple ce sera animania.

Première règle pour les noms de dossiers, fichiers: pas d’accent, pas d’espace.
Vous pouvez utiliser toutes les lettres de l’alphabet ( en minuscule ), les chiffres de 0 à 9 et le trait de soulignement.

Nous allons maintenant voir l’arborescence du site.
Tout site doit comporter une page de démarrage.
Vous allez donc créer une nouvelle page index.html que vous enregistrez dans le dossier animania.
Dans Dreamweaver, vous cliquez sur l’onglet Fichier > nouveau > page de base HTML > créer
Une page sans nom s’ouvre. Vous cliquez à nouveau sur Fichier puis enregistrez-sous. Dans nom de fichier, vous nommez votre page index.html.

page index

 

Pour un petit site d’une ou deux pages, vous pouvez placer vos fichiers et images à la racine du site.
Mais lorsque votre site est constitué de beaucoup d’images et de fichiers, pour s’y retrouver il est plus simple de créer des dossiers afin de classer vos documents.

Nous allons donc créer ici un dossier qui comportera toutes les images du site.
Vouas allez à nouveau dans Fichier > ouvrir
Dans votre dossier animania ouvert, faites clic de droite > nouveau dossier > nommez-le : images
nouveau dossier dreamweaver

Nous allons maintenant voir la structure d’une page HTML, poser un peu de texte, ajouter des liens et images.

L’espace de travail de Dreamweaver est composé de deux écrans (la disposition peut différer suivant les versions): Code et Création.

ecran-dreamweaver


La partie Création représentera ce que nous voyons en visuel, ce qui sera également visible sur votre navigateur.
La partie Code correspond au langage HTML qui est donc retranscrit dans la partie Création.

Dans la partie Code vous avez l‘en-tête (header) et le corps (body)

L’ en-tête:
permet de donner des informations importantes sur votre page et n’est pas affiché dans le navigateur.
Il se situe entre <head> et </head>
L’unique commande affichée est votre titre qui sera visible dans la barre de titre du navigateur.
Vous pouvez déjà l’afficher entre les balises <title>
<title>Animania, site dédié aux animaux</title>

Le body:
Entre <body> et </body> se trouvent le texte, les liens, les éléments graphiques etc…


Nous allons maintenant écrire un premier texte dans la partie Création et faire un lien vers une nouvelle page.
Écrivez dans la partie Création :
Bienvenue sur mon site Animania, un site dédié aux animaux !

Nous allons ensuite créer la nouvelle page qui sera dédiée aux différentes espèces. Pour cela, vous allez créer un sous-dossier nommé especes à l’intérieur de votre dossier animania et créer une nouvelle page html nommée espece-animaux.html.
Cliquez sur l’onglet Fichier > ouvrir
Clic de droite > nouveau dossier > especes

sous-dossier-dreamweaver

Faites ensuite Fichier > nouveau > page de base HTML > créer
Puis Fichier > enregistrez-sous. Cliquez sur le dossier especes pour l’ouvrir et nommez votre page dans nom de fichier : especes-animaux.html
Vous devez donc avoir cette arborescence à la racine sur l’image de gauche et dans le dossier especes sur l’image de droite :
arborescence-site-web            arborescence-sous-dossier

Les Liens

Vous allez maintenant revenir sur votre page index.html et ajoutez ceci à votre texte :
Bienvenue sur mon site Animania, un site dédié aux animaux !
Nous allons faire un lien sur le mot animaux vers la page espece-animaux.html.
Vous pouvez avec Dreamweaver faire le lien directement dans la partie propriété mais nous allons ici le coder.

Positionnez-vous dans la partie Code de  Dreamweaver et écrivez ceci autour du mot animaux
<a href="especes/espece-animaux.html">animaux</a>

a href indique le chemin emprunté:
le dossier especes / la page especes-animaux.html

Si la page especes-animaux.html se serait trouvée à la racine du site, le résultat aurait été:
<a href="especes-animaux.html">animaux</a>

Les images

Nous allons maintenant insérer une image et envoyer nos fichiers afin de les rendre visible.
Faites-clic de droite sur l’image ci-dessous et enregistrez-la sur votre ordinateur dans le dossier images de votre site.

image web girafe

Positionnez-vous maintenant avec votre souris sous votre texte et cliquez sur insertion > images
afin d’aller chercher votre image dans le dossier images de votre site.

Vous pouvez voir le code créé :
<img src="images/girafe.jpg" width="707" height="472">
On utilise donc la balise <img> et de son attribut src qui montre le chemin où se trouve l’image.
On va également ajouter ensuite un autre attribut alt qui ajoute un texte alternatif . Il est important pour les non-voyants et pour les robots des moteurs de recherche. L’image nommée pourra être retrouvée dans google image. Le texte doit bien sûr correspondre à l’image.
Ce qui nous donnera dans la partie code :
<img src="images/girafe.jpg" alt="girafe" width="707" height="472">

 

Envoi des fichiers – FTP

Nous allons maintenant passer à l’envoi des fichiers et nous verrons ensuite le CSS pour la mise en page et l’aspect visuel.
Vous pouvez télécharger Filezilla qui est un logiciel de transfert des fichiers ici :
https://filezilla-project.org/

Commencez par récupérer chez votre hébergeur vos identifiants FTP (vous les trouverez dans le panel de votre hébergement de votre compte FTP).

Ouvrez Filezilla et cliquez sur fichiers > gestionnaire de site
En bas à gauche vous cliquez sur nouveau site et vous indiquez donc ici le nom de votre site.
Dans la partie droite, vous rentrez vos identifiants FTP :
– l’hôte
– l’identifiant
– le mot de passe
Puis vous cliquez sur connexion.

Dans Filezilla, la partie gauche correspond à l’arborescence de votre ordinateur et la partie droite au serveur de votre hébergeur.
Dans la partie gauche, ouvrez le dossier animania correspondant à votre site.
Dans la partie de droite, chez la plupart des hébergeurs il faut cliquer sur le dossier public_html
Transférez tous vos fichiers et dossiers de la partie gauche dans le dossier plublic_html ( faites simplement passer avec votre souris de gauche à droite les dossiers et fichiers).

Vous pouvez désormais vous rendre sur votre navigateur internet pour voir le rendu en rentrant votre nom de domaine dans la barre d’adresse :
http://www.xxx.com

⇒ Tutoriel à venir le 30/07/2020 : Mise en page – CSS

Retour haut de page