Création d'une page web en HTML

Comment fonctionnent les sites web ?

Pour consulter un site web, il faut utiliser un navigateur.

Le navigateur web permet d'afficher des pages écrites à l'aide de deux langages de programmation : le HTML et le CSS.

Le HTML (HyperText Markup Language) permet d'écrire le contenu à afficher sur la page : du texte, des liens, des images…

Le CSS (Cascading Style Sheets, aussi appelées feuille de style) permet de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).

Exemple de HTML

Exemple de CSS

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Ma première page Web</title>
   </head>
 
   <body>
      <p>Ceci est un paragraphe</p>
   </body>
</html>

p{
   color : blue ;
   font-size : 16 px ;
   font-family : Arial, Verdana, Impact ;
   background-color : yellow ;
}

Remarque : A partir d’un fichier HTML, il est possible de créer plusieurs styles de page. http://www.csszengarden.com/tr/francais/

Le JavaScript peut compléter le HTML et le CSS. Le JavaScript permet de rendre la page interactive :

modifier les propriétés du CSS ou le code HTML sans avoir à recharger la page ;
affichage d'animations ou de boîtes de dialogue à l'écran ;
gérer les boutons…

Comment créer une page web ?

On peut créer une page web avec un éditeur de texte tel que Notepad++ .
http://notepad-plus-plus.org/fr/

Le fichier texte aura pour extension .html.

Exemple : index.html

On peut aussi utiliser un site web pour tester de petits projets :

Comment écrire une page web en HTML ?

Les balises et les attributs
Une page HTML contient un ensemble de balises. Une balise est un ensemble de caractères entre le signe < et le signe >. Une balise caractérise un contenu, par exemple un paragraphe, une image, un titre, un tableau, etc…

Exemple :  Ceci est un paragraphe

On distingue une balise ouvrante  et une balise fermante  qui indique que le paragraphe se termine.

Il existe des balises orphelines qui servent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur “insère une image ici”. Une balise orpheline s'écrit :

<img /> pour insérer une image.

  pour insérer un saut de ligne.

Les balises peuvent être complétées par des attributs apportant des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante.

Exemple : A la balise image <img/>, on peut rajouter un attribut qui indique l'emplacement de l'image à afficher : <img src=“photo.jpg” />

Balise imbriquée
il arrive que des balises soient imbriquées. Il faudra alors faire attention à toujours refermer les balises ouvertes en dernier.

Une bonne imbrication des balises

Une mauvaise imbrication des balises

<balise A>
      <balise B>
      …
      </balise B>
</balise A>

<balise A>
      <balise B>
      …
      </balise A>
</balise B>

Structure de base d'une page HTML

Le code suivant correspond à la base d'une page web en HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
    </head>
 
    <body>
        <!-- Corps de la page -->
    </body>
</html>

• Le doctype : La première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

• La balise <html> : C'est la balise principale de votre page. Elle englobe tout le contenu de votre page.

• L'en-tête <head> : Cette section donne des informations générales sur la page comme son titre, l'encodage… Les informations que contient l'en-tête ne sont pas affichées sur la page.

• Le corps <body> : C'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran.

• L'encodage (charset) : Cette balise indique l'encodage utilisé dans votre fichier .html. Il détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabe, etc.).

Dans Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistré en UTF-8.

Insertion d'un commentaire : Un commentaire est une balise HTML avec une forme spéciale : <!– Ceci est un commentaire –>. Il peut se placer n'importe où dans votre code, il permet de se repérer.

A faire vous-même 1

Avant de créer votre première page HTML, vous devez définir le dossier et les sous-dossiers dans lesquels vous allez stocker tous vos fichiers.

1) Dans le dossier “Mes documents”, créez un dossier “ICN” dans lequel vous enregistrerez tous vos documents pour ICN ;
2) Dans le dossier “ICN” créez un dossier “HTML-CSS” dans lequel vous enregistrerez vos fichiers HTML et CSS ;
3) Dans le dossier “HTML-CSS” créez un dossier “images” dans lequel vous enregistrerez toutes vos images.

A faire vous-même 2

Nom du fichier : index.html

Ouvrir Notepad++, pour colorer le code afin de mieux se repérer, allez dans le menu Langage > H > HTML.
Saisir le code suivant :

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Ma première page Web</title>
   </head>
 
   <body>
      <p>Ceci est un paragraphe</p>
   </body>
</html>

Enregistrer le fichier dans le dossier “HTML–CSS” avec pour nom index.html.
Ouvrir dans l'explorateur de fichier le dossier “HTML–CSS” et faire un double-clic sur le fichier index.html.

Très important : Le code du fichier “index.html” correspond à la base d'une page web en HTML, vous pourrez repartir de ce fichier à chaque nouveau projet.

Je teste mes connaissances...

Clique sur l'image !