TUTORIEL: Apprendre les bases du HTML

Opticlic Marketing internet/ Marketing web, tuto/ 0 comments

TUTORIEL: Apprendre les bases du HTML

  1. Introduction
  2. Qu’est-ce que le HTML
  3. Structure d’une page Web simple
  4. Balise <head>
  5. Balise <body>
  6. Balise H1, H2, H3, etc
  7. Les hyperliens
  8. Les liens d’ancre
  9. L’attribut target (cible)
  10. La valeur nofollow

INTRODUCTION

Ce tutoriel est un guide d’apprentissage sans aucune prétention Plusieurs ont des connaissances plus approfondies que moi, mais vu une demande qui m’a été fait sur le sujet, j’ai décidé de faire un petit tutoriel simple, mais qui explique les bases du HTML. Je vous donnerais plus bas des liens pour ceux qui désireront approfondir le sujet.

Pour réaliser ce tutoriel, vous pouvez utiliser un simple bloc-note de Windows. Ou si vous voulez quelque chose de plus adéquat, je vous conseil de télécharger le Notepad++

Qu’est-ce que le HTML ?

Selon Wikipédia, le langage HTML ( Hypertext Markup Language ) est le langage de balisage standard pour créer des pages Web et des applications Web. Avec Cascading Style Sheets (CSS) et JavaScript , il forme une triade de technologies de base pour le World Wide Web. On le retrouve un peu partout sur internet et constitue la majorité des pages web.

Structure d’une page web simple

La structure d’une page web simple sera composé de différentes balises, attributs, valeur, qui composeront le code HTML de la page. Mais deux (2) balises seront très importantes, la balise <head> et la balise <body>

L’html est un langage balisé. Cela comprend quelques généralités pas forcément évidentes. Toutes balises doivent être ouvertes et par la suite fermées.

Ouverte:

<head>

Fermée

</head>

Elle peut être ouverte puis fermés en une fois, – c’est une balise qui ne contient pas – :

<balise />

Les options propres à la balise sont mises avant le > :

<balise option="paramètre"></balise>

ou le /> :

<balise option="paramètre" />

Avant de commencer, il faut informer aux navigateurs quel type de page ou de document qu’il devra interpréter.

Début de page :

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

Cela dit aux navigateurs que la norme de la page est XHTML 1.0 Strict et donne une url avec des informations.

On ouvre ensuite la balise <html> qui contient quelques spécifications

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-CA" lang="fr">

Bien entendu, « fr-CA » est mis pour dire que la page html est en français Canadien

Cette balise contiendra toutes les informations qui serviront aux navigateurs et aux robots à bien identifier la page, le sujet, ce qu’elle contient, etc.

BALISE HEAD

BALISE HEAD

Pour ce fait, nous utiliserons entre cette balise des META qui identifieront les différentes informations que nous désirons préciser aux moteurs de recherche ou aux navigateurs web. C’est aussi à cet endroit que nous utiliserons la balise title.

Exemple 1:

<html>
<head>
<meta charset="UTF-8"> ( ceci est l’encodage de 8 bits que nous utilisons en html 5 )
<title>Ici simplement le titre de la page : leçon 1</title>
<meta name="description" content="La description de la page où du sujet de la page. "/>
</head>
</html>

Ce qui donnera:
( ceci est l’encode de 8 bits que nous utilisons en html 5 )

Donc tout ce que nous voyons en haut est pour identifier et classer le type de page que vous présentez sur le web. L’utilisateur (internaute) ne verra que ceci quand il fera une recherche dans Google, mais rendu sur la page, il ne verra plus cette information à moins qu’elle soit à nouveau partagée dans le texte.

Résumons :
Head = le début de la page ou l’entête qui sera lu par les moteurs de recherche.
Meta name = information supplémentaire que nous désirons fournir aux moteurs de recherche. vous remarquerez qu’il y a toujours une fermeture de balise qui sera identifié par une barre oblique ( / ) C’est très important, pour ne pas mélanger l’information dans le HTML. Donc avant d’ouvrir la balise body, vous devrez fermer la balise head ce qui donnera ceci : </head>


BALISE BODY
Cette partie sera visible aux moteurs de recherche, mais aussi par les internautes. C’est ici que la majorité de l’information que nous désirons partager avec les internautes sera visible. Textes, images, vidéos, PDF.

Body

Chaque fois, que vous visitez une page et que vous lisez un texte, c’est entre cette balise que ce que vous voyez se trouve.

Exemple 2 :
(On va reprendre la partie du haut partiellement.)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> ( ceci est l’encode de 8 bits que nous utilisons en html 5 )
<title>Ici simplement le titre de la page : leçon 1</title>
<meta name="description" content="La description de la page où du sujet de la page. "/>
</head>
<body>
<p>Chaque fois, que vous êtes sur une page et que vous lisez un texte, c’est entre cette balise que l’information que vous voyez se trouve. </p>
</body>
</html>

C’est surtout entre cette balise que vous devrez encoder le formatage des textes.


BALISE H1. H2, H3, ETC

Les balises <h1> à <h6> sont utilisées pour définir les en-têtes HTML. <h1> définit l’en-tête le plus important. <h6> définit l’en-tête le moins important. Quand nous écrivons un texte, nous devons faire une mise en page pour que le texte soit facile à lire. Titre, sous-titre, paragraphe, etc. Pour y arriver, nous allons utiliser des balises qui serviront à la réalisation de la mise en page.

h1,h2,h3

BALISE H1

La balise h1 servira pour le premier titre de la page. On peut déterminer la grosseur du titre, sa couleur, ses caractères dans une feuille de style. Mais cela sera pour un autre tuto. Les autres balises h2, h3, h4, h5, h6 seront utilisé comme sous-titre.

Exemple 3:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> ( ceci est l’encode de 8 bits que nous utilisons en html 5 )
<title>Ici simplement le titre de la page : leçon 1</title>
<meta name="description" content="La description de la page où du sujet de la page. "/>
</head>
<body>
<h1>Leçon de base du HTML</h1>
<h2>sous-titre</h2>
<p>ici la balise <p> sert pour identifier le paragraphe</p>
</body>
</html>

 

Ce qui donnera: 

Leçon de base du HTML

Sous-titre

ici la balise <p> sert pour identifier le paragraphe

La balise <p>

C’est une balise de mise en forme très importante car  elle vous permet d’ajouter le contenu dans le corps (body) de la page.

Note

Pour bien référencer un site sur le Web, les balise title, les Meta name = description et la balise h1 seront très important pour que Google identifie bien le sujet de la page et l’index dans les meilleures positions.


LES HYPERLIENS

Il y a deux (2) principaux types de liens, ceux internes qui redirigeront les visiteurs sur une autre page du même site et ceux externes qui dirigeront les visiteurs en direction d’un autre site.

hyperlien

La structure des liens seront semblables, ce qui changera sera le lien de destination et le texte qui identifie le lien.

Le maillage :
L’ensemble des liens constituent le maillage interne et externe de votre site. Imaginez une cartographie de votre site où chaque page est liée a d’autres pages par des liens. Votre site doit bénéficier d’un maillage cohérent et complet.

Attribut href

Lorsque l’attribut href prend une URL complète en valeur, on parle de valeur absolue (car celle-ci est fixe et ne dépend de rien). Les liens externes utilisent toujours des valeurs absolues.

Exemple 4:

<a href="url">Texte du lien</a>

 

Pour un lien externe vous ajouterez le nom de domaine ou le domaine et la page de destination.

Pour un lien interne vous ajouterez le nom de domaine de votre site ou le nom de domaine de votre site et la page de destination.

Liens interne:

<a href="https://votredomaine.com">page d'accueil</a>

 

Lien externe:

<a href="https://www.autredomaine.com/index.html">Page d'accueil de l'autre domaine</a>

 

Si je veux donner un exemple précis voici un lien interne qui vous conduit à cette page.

<a href="https://opticlicmarketing.com/tuto-sur-les-bases-du-html">TUTO</a>

 

Ce qui donne: TUTO


Les liens d’ancre

La fonction première d’un lien d’ancre et de pointer sur la même page un endroit précis. Si vous avez une page de votre site web qui renferme une grande quantité d’information, vous aurez envie de créer un sommaire qui comportera les titres de vos chapitres. Ce sommaire pour servir aux visiteurs d’aller directement sur la section de votre page qui l’intéresse vraiment. Comme celui que j’ai créé pour donner un exemple de l’utilité des liens d’ancre.

Comment faire un lien d’ancre ?

Il est facilement réalisable, car il suffit d’attribuer à l’élément vers lequel on veut pouvoir pointer un identifiant (avec l’attribut HTML id) et d’y associer un lien débutant par le caractère dièse #, suivi du nom de cet identifiant. Voici un exemple d’un lien débutant par un dièse http://monsite.com/#monancre , Pour ce qui est de l’identifiant cela peut ressembler à ceci: <div id= »mon-ancre »>…</div> Le menu du haut d’introduction est fait de cette façon.

Vous pouvez aussi utilisez les balises H1, H2, etc. Ce qui donnerait ceci:

<h1 id="ancre" style="text-align: center;">Mon ancre sur ma page</h1>

 

Une fois l’ancre en place, il ne restera qu’à faire un lien en sa direction

<a href="#ancre">Les dernières nouvelles</a>

 


L’attribut target (« cible »)

Si vous avez un site internet et que vous désirez faire un lien vers un autre site, sans l’attribut target, le visiteur verra le nouveau site apparaître dans la même fenêtre de son navigateur où il visitait votre site juste avant. Donc le visiteur sortira de votre site en destination du site où vous avez fait le lien externe.

Pour éviter de perdre votre visiteur tout en lui permettant de visiter l’autre site web, vous utiliserez la valeur _blank

Exemple 5:

utilisation de la valeur _blank:

 <a href="url" target="_blank"> texte du lien</a>

 

La valeur nofollow

Selon wikipidia

nofollow est une valeur qui peut être affectée à l’attribut rel d’un élément HTML  pour indiquer à certains moteurs de recherche que le lien hypertexte ne doit pas influencer le classement de la cible du lien dans l’index du moteur de recherche.

Exemple 6:

<a href="url" target="_blank" rel="nofollow ">texte du lien</a>

 

Comme j’ai dit plus, cela est juste une base sans prétention de ma part. C’est pour cela que je vais vous donner une source pour ceux qui désirent approfondir le sujet.

Source:

TUTORIEL SUR LES BASES DU HTML: PDF

Une des meilleurs source sur le sujet du HTML:

w3schools .com

Un excellent générateur de META:

Outils Référencement

N’hésitez pas à laisser un commentaire.

Share this Post

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*

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