Créer une page HTML

Dans cette partie nous allons commencer à pratiquer. Nous allons découvrir les bases du langage HTML et concevoir notre toute première page web. Pour créer une page HTML vous aurez besoin des outils indispensables que sont l’éditeur de texte (Sublime Text, Notepad++, Brackets, Caret …) et le navigateur web (Google chrome, Mozilla Firefox, Safari …) que nous avons décrit dans la partie précédente.

Créer une page web en HTML

Pour commencer, nous allons créer une page html avec l’éditeur de texte. Personnellement j’utiliserai l’éditeur « Sublime Text » dans la suite de ce tutoriel mais libre à vous d’utiliser celui qu’il vous plait.

En ouvrant Sublime Text (ou tout autre éditeur de texte) vous aurez un aperçu similaire :

éditeur de texte html

Ensuite nous allons écrire un peu de contenu, rien de bien compliqué, on va définir un titre et un petit paragraphe dans le but de tester tout ça:

écrire dans sublime text

Je vous invite ensuite à enregistrer cela dans un fichier en allant dans FichierSauvegarder (ou FileSave en anglais).

Astuce: Utilisez à l’avenir le raccourcie ctrl + s pour sauvegarder.

Une fenêtre s’ouvre pour vous demander dans quel emplacement enregistrer le fichier,de renseigner le nom et le type du fichier.

J’ai choisi de nommer mon fichier « index » mais vous pouvez l’appeler « page » ou bien « test », comme bon vous semble.

En revanche, le type de votre fichier doit bien correspondre à l’extension HTML.

Astuce: Gagnez du temps et renseignez directement le nom du fichier suivi de son extension (type). Exemple: ma-page.html
Attention: Un nom de fichier doit être simple et pertinent. Bannissez dés aujourd’hui les espaces et utilisez les tirets comme ma-page ou appliquez le concept CamelCase.

Votre fichier nouvellement créé est représenté par l’icône de votre navigateur par défaut. Bravo à ceux qui suivent, oui mon navigateur par défaut est google chrome. Chez vous l’icône peut être différent si vous avez défini un autre navigateur web par défaut.

Je vous conseille dès maintenant de créer un dossier (chez moi c’est tuto mais vous le nommez comme vous voulez) et de commencer à adopter les bonnes pratiques en travaillant dans ce dossier. Plus tard vous vous retrouverez avec une arborescence de plusieurs dossiers/sous-dossiers/fichiers… Organisons cela ! Mettez le fichier index.html dans le dossier.
dossier et fichier html

Maintenant que votre fichier est sauvegardé et rangé dans un dossier, il est temps de regarder tout ça. Double cliquez sur l’icone index.html!

exemple de page web sans code html

Le titre et le paragraphe sont sur la même ligne, le résultat est un peu brouillon et ne convient pas à ce que l’on attend ici. Nous allons remédier à ça tout de suite.

En fait, pour créer une page web il ne suffit pas de rédiger simplement du texte, il faut structurer le contenu avec du code HTML, nous voilà arrivé dans le monde merveilleux des balises HTML.

Balises et attributs HTML

Une page web contient plusieurs balises HTML qui définissent ce qui doit être affichées à l’écran et comment cela doit être représentées. Le visiteur de la page ne verra pas ces fameuses balises, mais elles vont être très utiles pour le navigateur web qui va structurer la page.

L’intérêt d’une balise est donc de dire à l’ordinateur et plus particulièrement à un programme, le navigateur web, ce qu’il doit écrire et comment le représenter dans un écran. Les balises et les attributs sont les fondamentaux pour créer une page HTML.

Les balises

Les balises sont constituées d’un nom spécifique et entourées de chevrons ouvrant < et fermant >. Ces éléments HTML respectent toujours cette syntaxe :

Elles indiquent la nature du texte qu’elles encadrent, cela peut être un titre ou un paragraphe mais aussi une image, un lien hypertexte …

On les retrouvent sous deux formes distinctes, les balises paires et les balises orphelines.

Attention: les balises que nous allons voir sont fictives et ont juste pour objectif de vous apporter la logique nécessaire pour aller plus loin. Ils en existent plus d’une centaine et elles sont écrites en anglais. Nous allons les découvrir à la fin de cette partie.

Balises paires

Les balises paires se décomposent en trois parties, les balises ouvrantes, du texte et la balise fermantes. Nous avons ainsi:

Dans la balise fermante et avant son nom il faut insère un slash /.

De la même manière, nous pouvons reprendre notre exemple initial est y ajouter les balises adéquates afin de structurer son contenu:

Balises orphelines

Les balises orphelines quant à elles permettent, le plus souvent, d’insérer un élément à un endroit précis. Prenons l’exemple d’une image, on veut que le navigateur la représente à cette endroit précis de la page. Cela ne nécessite pas d’indiquer un début et une fin à cet élément HTML. Voici un exemple avec la balise image:

Notez que le slash / n’est pas un élément obligatoire dans les balises orphelines. On pourrait donc écrire  <image>, mais c’est une chose que je ne recommande pas parce qu’on peut la confondre avec une balise paire. Il est préférable de rajouter ce slash en fin de balise. Commencez à adopter les bonnes pratiques et à pondre du bon code.

Attributs

On peut définir les attributs comme des options qui permettent d’ajouter des informations aux balises. Un attribut se place après le nom de la balise ouvrante. Au même titre que les balises HTML, les attributs ont une syntaxe particulière:

Les attributs viennent en complément et permettent d’agir sur la balise. Par exemple, avec une balise de type image <image /> le navigateur sait qu’il doit afficher une image mais il ne sait pas laquelle. Il faut donc utiliser un attribut afin de définir l’image à afficher à l’écran:

Nous avons le nom de l’attribut source qui pointe vers mon_image.png. Ainsi, le navigateur comprendra ce qu’il doit afficher.

Bien entendu le rôle d’un attribut ne se limite pas à choisir l’image à afficher dans un écran mais pour l’instant retenez que l’attribut est une sorte de paramètre, qui a un nom et qui doit être égale à une valeur (entre doubles guillemets), comme cela: nom_attribut= »valeur ».

Structure HTML5

Pour créer une page HTML concrète il est temps de travailler avec de vrais balises et nous allons commencer cette sous-partie avec le code HTML de base pour former une page web valide. Ces éléments sont obligatoires et ils constituent les fondations pour créer une page HTML valide.

Je vous invite à copier le code précédent dans votre éditeur de texte. On remarque plusieurs choses dans la structure de base en HTML, notamment que les balises s’ouvrent et se ferment dans un ordre bien précis dans la structure et qu’il y a des espaces au début de certaines balises.

Ordre des balises

La balise html contient les balises head et body (qui contiennent elles-mêmes d’autres balises).

Nous avons alors: <html><head>…</head><body>…</body></html>.

En revanche, le code suivant est incorrect puisque les balises s’entremêlent: <html><head>…<body></head>…</body></html>.

Décalage des balises

Les espaces au début des balises permettent d’avoir un code propre et clair. Cela ne représente en rien une obligation, mais une forte recommandation. Ce procédé s’appelle l’indentation et se réalise avec une tabulation lorsqu’il faut décaler une balise. Certains développeurs indentent deux ou quatre fois avec la touche espace. Nous aurons l’occasion d’approfondir en détail le sujet plus tard.

Le Doctype

Le DOCTYPE est la première balise qui permet de dire à un ordinateur qu’il s’agit d’une page web en HTML. Il est donc obligatoire de le spécifier tout en sachant que sur les anciennes versions du HTML, notamment le XHTML, cette balise était horriblement longue:

<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>

 

Dorénavant, nous avons une déclaration simplifiée pour le HTML5 : <!DOCTYPE html>.

HTML

La balise html encadre tout le contenu de la page. Nous avons ainsi en première ligne le DOCTYPE qui déclare la page en HTML5, suivi de la balise HTML qui contient tout les éléments de la page, à savoir deux éléments principaux, la balise HEAD et la balise BODY. Notez que la balise fermante </html> se trouve tout à la fin du code.

Les deux éléments majeurs dans la balise HTML: Head et body

Les deux balises suivantes sont englobées dans la balise <html>…</html> :

  • Head (en-tête): Cet élément n’a pas pour but d’afficher des choses dans la page mais de définir des informations pour un ordinateur comme par exemple son encodage ( Caractères spéciaux), un titre, une description …
  • Body (corps): On retrouve ici tout le contenu de la page qui sera visible à l’écran. C’est la section principale de la page et elle contient quasi tout le code.

La section body est pour l’heure un peu maigre mais nous allons la nourrir dans la partie suivante « Structurer le texte en HTML ». En revanche, intéressons nous aux balises contenus dans l’en-tête (HEAD).

Encodage

L’encodage permet de définir comment les caractères spéciaux vont s’afficher. Il est donc primordial d’ajouter la ligne suivante dans la section head de votre fichier:

La balise <meta /> ajoute des informations à la page web via les attributs. Ici, le nom de l’attribut est charset (jeu de caractère en français) et sa valeur utf-8.

 

L’encodage utilisé est « UTF-8 » et cela en raison de sa large compatibilité avec les caractères dans le monde (caractères chinois, arabes, accents … ). Je vous passe la théorie complexe de l’encodage et des autres minorités d’encodage puisque vous travaillerez uniquement avec celui-ci.

Également, il faut que votre fichier soit enregistré sous cet encodage sinon vous pourriez avoir des erreurs sur l’affichage de certains caractères. En temps normal l’éditeur de texte le fait pour vous par défaut, mais si vous remarquez des erreurs suivez la procédure suivante (sous sublime text) File ⇒ Save with encoding ⇒ UTF-8 

encodage sublime text

Title

La balise <title> dans le head indique le titre de la page. Cela est visible au niveau de l’onglet ainsi que dans les résultats des moteurs de recherche. Autant vous dire que votre titre doit être pertinent, surtout si il a vocation à être visible par le monde entier. Il doit aussi être relativement court, environ 100 caractères max. Ci-dessous un aperçu de la balise <title> et le résultat dans le navigateur google chrome:

creer une page html avec l'attribut title dans la balise head

Code de base pour créer une page HTML5

Avant d’entamer la partie suivante, reprenons la structure de base HTML:

Code de base pour créer une page html

Bien! Je vous retrouve dans le prochain chapitre où nous allons rajouter du contenu dans la balise body.

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *