Débuter la création d’un petit site web

Un site web, c’est un ensemble de pages HTLM accessibles depuis n’importe quel terminal par le réseau internet, celles-ci sont hébergés sur un serveur. On accède à un site web en saisissant son url depuis un navigateur internet.

Il est possible d’y consulter des ressources textes et multimedia mais également d’en enregistrer par le biais de formulaires.

1. Les bases

Les sites web sont dits statiques dès lors qu’ils sont écrits en HTML sans avoir recours à des technologies serveurs. Ceux-ci permettent d’afficher des contenus textes et multimedia via un réseau. Télécharger ce dossier

Pour commencer, on nomme notre premier fichier écrit en HTML : index.html.  Juste à coté, on retrouve un autre fichier qui s’appelle styles.css.

 ça y est j’ai un site web, Google tiens-toi prêt !

Le fichier HTML

Ce fichier contient le code HTLM qui permet de hiérarchiser le contenu éditorial du site web et de le rendre accessible. Le respect de la syntaxe HTML et l’optimisation de la structure permettent un affichage rapide du site web, une accessibilité et un référencement de meilleures qualités.

Le fichier HTML met en place le fond du document.

Le code est composé de balises, décrivant les éléments qu’elle contient.

On souhaite par exemple écrire un article. Cet article comporte un titre, quelques sous-titres, des paragraphes et des illustrations. On commence par encadrer le titre par deux balises titres :

Créer un article en HTML

Le titre

<h1>Mon premier titre</h1>

H siginifie Heading (Titre en anglais) et en traduit l’importance sémantique par des niveaux allant de H1  à H6, du plus important au moins  important.

Les sous-titres

<h2>Mon premier sous-titre</h2>

Chaque niveau de sous-titres va de H2 (plus important) à H6 (moins important). Bien sûr, il peut y avoir plusieurs sous-titres de même importance.

Les paragraphes

<p>Ceci est le début de mon premier paragraphe...</p>

Les paragraphes sont d’égale importance. C’est pourquoi il n’y a strictement que cette balise qui permet de déclarer un paragraphe.

Les illustrations

Pour l’instant, nous nous limitons aux images en tant qu’illustration. Comme dans tous langages, il existe des exceptions. La grande majorité des balises HTML s’ouvre et se ferme comme vu ci-avant.

La balise <img> fait pourtant exception, elle n’encadre pas un élément mais prend les informations en attributs.

La balise <img> s’utilise donc ainsi :

<img src="chemin-de-mon-image.png" alt="mon texte si elle ne s'affiche pas" title="Le titre de mon image" />

Le Slash qui apparait à la fin de la ligne signifie que la balise est fermée. La balise <img> et quelques autres s’ouvrent et se ferment dans le même temps, et ne reçoivent que des attributs (alt, title, class…)

Le fichier CSS

Le fichier CSS contient les attributs graphiques de l’interface web.
Il correspond à la forme du document.

Nous allons distinguer les attributs graphiques permettant la mise en forme de boîtes de ceux permettant la mise en forme de texte.

Le dossier « images »

C’est dans ce dossier que l’on place les éléments graphiques du design web, qu’il n’est pas possible de reproduire en css.

On va donc appeler ces fichiers (.jpg, .png ou .gif) via le fichier html ou via le fichier CSS selon les besoins.

2. Intéressons-nous au fichier html

Le premier fichier html que l’on créé lorsqu’on souhaite mettre en place un site web statique est le fichier « index.html ». En le nommant ainsi le navigateur l’affichera en premier, ce sera donc notre page d’accueil.

Pour accéder au code source du fichier html et le modifier, il suffit d’utiliser un éditeur de code, gratuit pour la plupart, comme TextWrangler pour Mac 0S ou Notepad ++ pour Windows.

Au fait, à quoi ressemble le code dans le fichier index.html ?

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Le titre de mon site</title>
      <link href="styles.css" rel="stylesheet" type="text/css" />
   </head>

   <body>

   </body>
</html>

Ci-dessus, nous voyons les éléments qui constituent le strict minimum pour débuter l’écriture d’un fichier html.