LE LANGAGE HTML

Doc html

DOC HTML

Dans cet article, nous allons étudier les bases du langage HTML/

 

 

En théorie

 

L’HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques.

Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité web. Il est souvent utilisé conjointement avec le langage de programmation Javascript et des feuilles de style en cascade (CSS). HTML est initialement dérivé du Standard Generalized Markup Langage (SGML). 

Wikipédia.

Définition du langage HTML

Le HTML est l’écriture d’une page web. Il est le langage universel utilisé pour communiquer sur le WebSon. Son langage se présente avec un ensemble de balises ou tags, elles servent à informer la nature du texte qu’elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.  Celles-ci sont invisibles à l’écran pour vos visiteurs, mais elles permettent à l’ordinateur de comprendre ce qu’il doit afficher.

Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci : <balise>

En HTML on utilise des balises.

Dans quel contexte s’exécute HTML ?
Les pages HTML ainsi que les données diffusées sur internet sont stockées sur des serveurs web. Pour surfer sur internet, on utilise un navigateur, qui permet de visualiser les pages demandées.
Le navigateur (browser) : c’est un logiciel qui affiche le document HTML après avoir exécuté son code. Les navigateurs les plus connus sont Google et Netscape.
Le serveur web : ce logiciel exécuté de façon continue (comme tous les serveurs) est chargé de stocker les pages HTML diffusées sur le web, de chercher et d’envoyer les pages HTML demandées par les clients (les internautes). Les serveurs web les plus connus sont Apache et IIS.
Comment se déroule la consultation d’une page html ?
L’internaute clique sur un lien hypertexte correspondant à une requête HTML
Une connexion au serveur qui contient la page sollicitée s’effectue (l’adresse du serveur est contenue dans l’ URL, c’est-à-dire le nom de la page).
Le serveur recherche la page demandée, et si elle existe, il l’envoie au client (l’internaute). Si la page n’existe pas, il renvoie un message d’erreur (erreur 404).
Le client reçoit la page et le navigateur l’affiche.

Une page HTML

Une page HTML

En pratique

 

Contenu d’une page HTML

Pour rédiger des pages HTML complètes, il faut un éditeur de texte, comme Notepad++.

Un document HTML est composé d’un en – tête (balise HEAD) et d’un corps (balise BODY). Dans le corps, on
trouve tout simplement le contenu de la page. Dans l’en-tête, on trouve le titre (balise TITLE), les scripts, et
diverses informations sur la page. Toutes les pages web sont structurées de cette manière.

Contenu minimum d’une page Web

Voici vos premières balises ou tags :
<HTML>Ceci est le début d’un document de type HTML.
</HTML>Ceci est la fin d’un document de type HTML.
<HEAD>Ceci est le début de la zone d’en-tête
(prologue au document proprement dit contenant
des informations destinées au browser).
</HEAD>Ceci est la fin de la zone d’en-tête.
<TITLE>Ceci est le début du titre de la page.
</TITLE>Ceci est la fin du titre de la page.
<BODY>Ceci est le début du document proprement dit.
</ BODY>Ceci est la fin du document proprement dit

Il faut savoir que la toute 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.

Le titre <title> principal de la page :

Le titre sert à décrire le nom de la page. Il ne s’affiche pas dans votre page mais en haut de celle-ci (souvent dans l’onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur.

La balise</html>:

C’est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code.

L’en-tête<head>et le corps<body> :

  • L’en-tête<head>: cette section donne quelques informations générales sur la page tel que son titre, l’encodage (pour la gestion des caractères spéciaux), etc. D’une façon générale, cette section est très courte.  Les informations que contient l’en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l’ordinateur. Elles ont un rôle important à jouer.

  • Le corps<body>: c’est là que se trouve la partie principale de la page. Tout ce qui sera écrit ici sera affiché sur l’écran. C’est à l’intérieur du corps que nous écrirons la majeure partie de notre code.

Remarque

Si vous réalisez votre blog dans les CMS tels que WordPress ou Joomla, ceci ne vous sera pas utile, car tout est prédéfini par défaut. Vous pourrez donc inscrire les sous titres et votre texte directement dans l’éditeur texte de votre blog.

Ainsi, je vous conseille surtout d’apprendre les balises les plus utilisées, car parfois, vous devrez réparer des beugs de pages (textes) qui ne s’affichent pas correctement, souvent lorsqu’on change la typographie du thème par défaut.

De plus, je vous conseille de rédiger vos articles dans l’espace “texte” se trouvant dans la configuration de vos articles. Cela vous permettra d’améliorer le référencement naturel de votre site/blog web.

Les principales balises HTML

Voyons maintenant les principales balises utilisées en HTML. Les balises permettent de modifier l’apparence d’un texte.

Tout d’abord, sachez que l’on distingue deux types de balises : les balises en paires et les balises orphelines.

Les balises élémentaires.

Gras [Bold] <B>…</B>
<STRONG>…</STRONG> Début et fin de zone en gras
Italique [Italic] <I>…</I>
<EM>…</EM> Début et fin de zone en italique
Taille de caractère [Font size] <FONT SIZE=?>…</FONT> Début et fin de zone avec cette taille
Couleur de caractère [Font color] <FONT COLOR=”#$$$$$$”> </FONT> Début et fin de zone en couleur
A la ligne [Line break] <BR> Aller à la ligne
Commentaires [Comments] <!– *** –> Ne pas afficher
Centrage [Center] <CENTER></CENTER> Centrer

Les titres <>title</> :

  • <h1> </h1>: signifie « titre très important ». En général, on s’en sert pour afficher le titre de la page au début de celle-ci.

  • <h2> </h2>: signifie « titre important ».

  • <h3> </h3>: pareil, c’est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez).

  • <h4> </h4>: titre encore moins important.

  • <h5> </h5>: titre pas important.

  • <h6> </h6>: titre vraiment, mais alors là vraiment pas important du tout.

 

Note : il existe encore bien d’autres balises et attributs, tels que <u> texte </u> pour souligner son texte; <strike> texte </strike> pour que son texte s’affiche barré. Il ne faut pas oublier d’insérer l’ouverture <> avant le texte à mettre en forme et la fermeture </> après le texte à mette en forme. Ainsi, si je souhaite mettre le mot beauté en italique, je m’y prendrai de la façon suivante : <i>beauté</i>. Ce dernier s’inscrira alors en italique.

Bien entendu, pour que celui si prenne l’apparence voulu, il faudra rédiger ce code dans l’affichage “texte” de notre article (ou page) et non du WYSIWYG (What you see is what you get) présenté par défaut dans la plupart des CMS.

Voici un exemple de page HTML rédigée par mes soins (j’ai écris un début de journal intime, car je suis également écrivaine) :

Page codée HTLML :

Page rendue HTML :

Pour en savoir plus, consultez ce PDF :

Estelle Mareva©2018.

Ressources:

Wikipédia.

https://openclassrooms.com

Apprendre le langage Html (PDF)

Le Langage HTML-La Porte. (PDF)

Veuillez vous connecter pour laisser un commentaire