Les bases du langage HTML pour créer des pages web

Qu’est-ce que le HTML ?

Le HTML (Hypertext Markup Language), c’est un langage informatique qui permet de créer des pages web. De nombreux éditeurs de texte permettent de réaliser des pages en langage HTML. On peut citer Sublime Text sous Linux par exemple.

https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png

Et l’hypertexte ? Qu’est-ce que c’est ?

C’est tout simplement un lien qui permet d’accéder à une autre page ou à un autre site par exemple. L’hypertexte assure les différentes liaisons entre les pages/les sites grâce aux liens créés : c’est un système indispensable, à la base du fonctionnement d’internet.

Alors comment créer des pages HTML ?

Il existe de nombreux éditeurs de texte, ce sont des logiciels qui supportent le langage HTML et qui permettent de créer des pages web. Certains d’entre-eux sont puissants : ils détectent les erreurs dans le code que nous avons tapé. On peut citer : Dreamweaver, BlueGriffon, Notepad, Sublime Text…

Ouvrez un éditeur de texte et tapez ceci :

<!DOCTYPE html>

<html>

<head>

<title>Mon Super Titre</title>

</head>

<body>Mon super Texte</body>

</html>

Vous l’avez peut-être déjà compris : le langage HTML fonctionne grâce à ce que l’on appelle des balises : < et >. A l’intérieur de celles-ci se trouve du texte. Que signifient les balises du code que vous venez de taper ?

<!DOCTYPE html> : signifie que le document va être codé en html.

<html> : signifie que l’on commence à coder en html.

<head> : c’est l’en-tête.

<title> : c’est le titre.

<body> : c’est le corps de texte.

La plupart des balises doivent être fermées à un moment ou à un autre, par exemple pour préciser que notre titre s’arrête à un endroit précis : </title>.

Maintenant enregistrez votre document au format .html

Ouvrez-le dans votre navigateur ! Voilà, votre première page web est créée.

Bien sûr elle n’est pas très jolie.

 

Le langage CSS permet justement de mettre en forme votre texte.

Créer un dossier que vous appelez : CSS, dans vos documents.

Pour personnaliser votre page, il vous faut créer un nouveau fichier à l’aide de votre éditeur de texte que vous nommez : style.css (enregistrez-le dans votre dossier CSS, vous n’avez pour le moment rien besoin d’écrire à l’intérieur de celui-ci).

Vous devez ensuite relier ce document à votre fichier .html

Pour cela, voici ce qui doit apparaître dans votre fichier .html :

<!DOCTYPE html>

<html>

<head>

<title>Mon Super Titre</title>

<meta charset= »UTF-8 »>

<link href= »CSS/style.css » rel= »stylesheet » /link>

</head>

<body>Mon super Texte</body>

</html>

La fonction <meta charset= »UTF-8 »> autorise l’affichage des accents de votre texte : « é », « è »…

Voilà vos deux fichiers sont désormais reliés.

Distinguez bien vos deux fichiers ! Les langages HTML et CSS ne sont pas tout à fait les mêmes. Ils ont des fonctions différentes. Il existe de nombreux sites pour aller plus loin, en voilà un : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Pour les éditeurs :

http://bluegriffon.org/

http://www.sublimetext.com/

Vous voilà parti avec de bonnes bases !

Un commentaire

  1. Merci pour ces bases sur la structuration d’un document HTML.
    Quelques répétitions (par exemple plusieurs passages sur les éditeurs).
    Mériterait des liens plus ciblés et directs, par exemple pour les tutos d’openclassroom ou encore pour les pages des éditeurs de code…

Laisser un commentaire

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

un × deux =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.