Pages perso : Créer un site statique en HTML

Un site web est un ensemble de pages reliées entre elles par des liens, et qui se complètent pour traiter ensemble d'un même sujet. Par exemple une association souhaitant créer son site web pourra organiser celui-ci en plusieurs pages : page d'accueil, activités et moyens d'action, historique de l'association, statuts, page de contact...

Le Web fonctionne selon deux composants essentiels :

1.  Le langage HTML : le langage informatique qui permet de créer les pages web. C'est le langage qu'il vous faudra apprendre si vous souhaitez créer vos propres pages. On parle de code source pour désigner l'ensemble du HTML qui constitue une page.

2.  Le navigateur : le programme qui transforme le HTML en une mise en page avec des textes, titres, images... Son rôle est de comprendre le code, c'est-à-dire l’interpréter pour le traduire en un résultat moins technique et plus visuel.
Vous en connaissez et utilisez sûrement au moins un parmi ceux-ci : Google Chrome, Mozilla Firefox, Internet Explorer, Safari et Opera.

Afin que les navigateurs puissent à tout moment trouver les pages Web qu'on leur demande, ceux-ci s'adressent à des hébergeurs. Le rôle d'un hébergeur est de rendre les pages web disponibles en permanence pour tous les navigateurs souhaitant les afficher.
C'est précisément le rôle du service Pages Perso de SFR, qui vous permet d'héberger vos pages, donc les mettre à disposition de tous les visiteurs.

Schéma de fonctionnement du Web :


le navigateur du visiteur affiche les pages HTML stockées par l'hébergeur


En résumé, pour créer votre propre site il vous faut :

• Savoir écrire le code de vos pages à l'aide du langage HTML.
• Posséder un espace d'hébergement pour mettre vos pages à disposition des visiteurs.

Le service Pages Perso vous permet d'utiliser jusqu'à 1 Go d'espace pour héberger vos pages. Pour en bénéficier, il vous faut activer vos pages perso.

Nous allons voir ensemble comment débuter avec le langage HTML, et comment envoyer vos premières pages en ligne sur votre espace d'hébergement SFR.

La syntaxe du langage
Le rôle du langage HTML est de décrire le contenu de vos pages : textes, titres, images, menus...
Ces différents éléments s'écrivent notamment à l'aide de ce qu'on appelle des balises. Une balise est en fait un mot-clé entouré de deux chevrons (les symboles < et >).

Il en existe des dizaines, et chacune a un sens précis. Ce sont elles qui indiquent au navigateur s'il faut afficher une image, un titre, un tableau, ou tout autre élément. Apprendre le langage HTML revient principalement à apprendre à se servir des différentes balises pour construire des pages.

Exemple de balise : la balise <p> qui sert à créer un paragraphe de texte.
<p>mon paragraphe</p>

La version à utiliser : HTML5
Apparu dès 1991, le langage HTML en est aujourd'hui à sa 5e version, nommée HTML5.

Mais nous n'allons pas travailler uniquement avec HTML, nous allons également utiliser le langage CSS. Depuis plusieurs années maintenant, HTML et CSS sont complémentaires et quasiment indissociables l'un de l'autre. Contrairement à ce qu'on pourrait s'imaginer, vous verrez assez vite que l'utilisation des deux langages simplifie grandement la création de pages Web.

À quoi sert CSS ?
Si le langage HTML permet d'écrire le contenu des pages, le CSS s'intéresse à la mise en forme, qu'on appelle le style. En résumé, on définira en CSS tout ce qui concerne les couleurs, dimensions, positions, arrière-plans, polices de caractère, marges, décorations...


À gauche : une page uniquement en HTML.
À droite : la même page avec du CSS.

L'utilisation des deux langages permet de séparer le fond de la forme, autrement dit contenu et style. Les avantages du CSS sont multiples, notamment :

• Le code HTML débarrassé de toute information concernant la mise en forme, devient plus clair et plus concis.
• Vous pouvez utiliser un seul fichier CSS pour définir le style de plusieurs pages HTML, ce qui représente un gain de temps et une simplification.

La syntaxe du langage
CSS étant un langage différent de HTML, les règles d'écriture changent. En CSS, pas besoin de balises. À la place on utilisera ce qu'on appelle des sélecteurs et des propriétés.

Voici un exemple de CSS qui va nous permettre d'étudier cette nouvelle syntaxe :

Un exemple de code CSS :

p{
color : blue;
}

Ce code permet d'écrire tous les paragraphes de la page en bleu. Il est composé de différentes parties :

• Le "p" au départ est ce qu'on appelle le sélecteur. On le reconnaît car il est toujours placé avant la paire d'accolades. Il désigne un ou plusieurs éléments de la page dont on souhaite modifier le style. Ici, le p désigne « toutes les balises <p> », ce qui signifie tous les paragraphes de la page.
• À l'intérieur des accolades, on trouve une ou plusieurs propriétés. Ce sont en fait les différents aspects de l'élément que l'on souhaite modifier. Ici il n'y en a qu'une, il s'agit de "color" qui permet de modifier la couleur du texte.
• Chaque propriété est toujours suivie d'une valeur. Dans cet exemple la valeur de la propriété "color" est "blue", la couleur du texte de tous les paragraphes sera donc le bleu.

Résultat de notre propriété CSS sur une page contenant un paragraphe de texte :

Nous allons réaliser ensemble votre première page Web, que vous pourrez ensuite héberger sur votre compte Pages Perso SFR.

Avec quoi écrit-on du HTML ?
Avant toute chose, pour pouvoir créer et modifier vos pages, vous avez besoin d'un programme qu'on appelle un éditeur de texte. Le Bloc-notes de Windows pourrait suffire, mais il existe certains éditeurs qui sont beaucoup plus adaptés à la création de pages Web.
C'est le cas notamment de Notepadd++. C'est un éditeur gratuit, disponible en français.

La procédure pour créer une page HTML à l'aide de Notepad++ est la suivante :

1. Utilisez la commande "Nouveau" du "menu Fichier".
2. Aussitôt après, utilisez la commande "Enregistrer sous", toujours dans le "menu Fichier".
3. Sélectionnez le dossier dans lequel vous souhaitez enregistrer les pages de votre site, puis renseignez le champ Nom du fichier en bas de la fenêtre. Attention : évitez les espaces, caractères accentués et autres symboles spéciaux dans les noms de fichiers ! Sachez également qu'il est conseillé de toujours nommer votre page d'accueil " index ". C'est ce qui permet à l'hébergeur de la reconnaître, et de l'envoyer par défaut à vos visiteurs.
4. Enfin, pensez bien à sélectionner le type de votre fichier. Ici, il s'agit de "HyperText Markup Language file", ce qui correspond à HTML !
5. Vous pouvez ensuite cliquer sur le "bouton Enregistrer". Votre fichier est créé et prêt à être rempli de code HTML.

Le code de base de la page
Toutes les pages HTML ont en commun quelques lignes de code qui sont obligatoires. Vous pourrez les répéter sur chacune des pages que vous créerez par la suite.

Voici ce fameux code de base :

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Document sans nom</title>
    </head>
    <body>
    </body>
</html>

Vous avez deux choses importantes à savoir :

1.  Tout ce qui est compris entre <head> et </head> constitue l'en-tête de la page. On y place généralement des informations, comme le titre de la page que vous êtes invité à personnaliser dès maintenant. Toutes ces informations ne sont pas destinées à être affichées à l'écran, elles viennent simplement compléter la mise en page en apportant des renseignements supplémentaires ou des informations techniques nécessaires.

Exemple :   <title>Le titre de ma page</title>

2. Tout ce qui est compris entre <body> et </body> constitue le corps de la page. Ici on écrira nos textes, on placera nos titres, images, menus, etc. Tout ce qui est destiné à être affiché sur l'écran du visiteur doit se trouver ici.

Quelques exemples de balises
Afin de remplir le corps de notre page qui pour l'instant reste bien vide, nous allons découvrir quelques balises qui vont nous permettre d'ajouter du contenu.
• La manière la plus simple d'écrire du texte est de le répartir en paragraphes. On peut les créer à l'aide de la balise <p>.
Celle-ci fonctionne de la même manière que la balise <title> que nous avons aperçue plus haut : le texte est délimité par les deux parties de la balise, à savoir <p> (c’est la balise ouvrante) et </p> (c’est la balise fermante).
Exemple de contenu avec deux paragraphes :
    <body>
    <p>mon premier paragraphe</p>
    <p>mon deuxième paragraphe en latin  : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in felis sed mauris consectetur hendrerit eu eget lorem. Ut ullamcorper tempus hendrerit. Donec euismod eros purus, sed dictum metus. Sed interdum mauris nec urna commodo a bibendum nisi ornare. Donec id sapien dui. Sed adipiscing lectus ut est ultricies pretium. Integer vel tellus vitae augue rhoncus laoreet quis id leo.</p>
    </body>

Le rendu dans le navigateur :


• De la même manière, il est possible d'écrire des titres à l'aide de balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Le titre <h1> est considéré comme le plus important, et le titre <h6> comme le moins important.

Un exemple de contenu mieux organisé grâce aux titres:
    <body>
     <h1>Titre principal </h1>
     <p>Mon paragraphe</p>
     <h2>Sous-titre </h2>
     <p>Mon deuxième paragraphe en latin  : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in felis sed mauris consectetur hendrerit eu eget lorem. Ut ullamcorper tempus hendrerit. Donec euismod eros purus, sed dictum metus. Sed interdum mauris nec urna commodo a bibendum nisi ornare. Donec id sapien dui. Sed adipiscing lectus ut est ultricies pretium. Integer vel tellus vitae augue rhoncus laoreet quis id leo.</p>
    </body>

Le rendu dans le navigateur:



• Autre élément important : les liens. On peut créer des liens à l'aide de la balise <a>. Celle-ci est un peu plus complexe que les autres, elle utilise ce qu'on appelle un attribut. Il s'agit d'une information complémentaire que l'on rajoute sur la balise. Dans le cas du lien, cette information est l'adresse de la page vers laquelle nous souhaitons faire un lien.
Pour mieux comprendre, voici un exemple de paragraphe de texte contenant un lien vers le site de l'assistance SFR.
<p>
Le site de l'<a href="http://assistance.sfr.Fr">assistance SFR</a> vous accompagne pour la création de vos pages persos
</p>

Le rendu dans le navigateur:
Le site de l'assistance SFR vous accompagne pour la création de vos pages persos

Dans cet exemple, la balise <a> délimite le texte " assistance SFR" qui sera transformé en lien cliquable. Lorsque le visiteur cliquera sur ce lien, il atterrira directement sur le site de l'assistance. Cela est possible grâce à l'attribut href qui renseigne ce qu'on appelle la cible du lien. Ici, la cible est l'adresse du site Assistance SFR.

Afin d'envoyer vos pages en ligne sur votre espace d'hébergement SFR, nous allons utiliser un logiciel de transfert FTP. FTP signifie "File Transfert Protocol", il s'agit ni plus ni moins que d'une méthode d'envoi de fichiers d'un ordinateur vers un autre. C’est ce qu'on utilise couramment pour envoyer les pages d'un site vers le serveur qui va les héberger.

Afin de fonctionner de manière sécurisée, le protocole FTP se base sur trois informations essentielles :

1. Un nom d'hôte : il désigne le serveur vers lequel vous souhaitez envoyer vos fichiers. En ce qui vous concerne, ce sera toujours ftpperso.sfr.fr.
2. Un identifiant : Il s'agit de votrenomdutilisateur.perso.sfr.fr
3. Un mot de passe : Il vous a été attribué automatiquement par SFR. Vous pourrez le trouver dans votre espace client à la rubrique Gérer vos pages perso.

Le logiciel de transfert FTP le plus répandu à l'heure actuelle est FileZilla, c'est un logiciel libre entièrement gratuit.

Une fois le programme installé, en haut de la fenêtre vous rentrez les identifiants qui permettent de vous connecter à votre compte FTP.




Une fois connecté, le reste de la fenêtre est séparée en deux parties : à gauche les fichiers qui sont sur votre ordinateur (Site local); à droite les fichiers hébergés sur votre compte SFR Pages Perso (Site distant).

Faites glisser les fichiers de la partie gauche vers la partie droite avec votre souris clic gauche enfoncé pour les mettre en ligne



Vous pouvez ensuite vous rendre avec votre navigateur à l'adresse votrenomdutilisateur.perso.sfr.fr pour accéder à votre site web.