Comprendre le HTML en 5 minutes (top chrono)


.

Des pages web, ce sont généralement des pages html. Techniquement parlant, une page web écrite en html devrait être nommée page html au lieu de page web. Sur certains sites internet, on voit parfois écrit la mention « .html » à la fin des permaliens  (le texte grisé apparaissant après l’url du site web) de certaines pages web.

C’est d’ailleurs un moyen de vérifier si un site internet a bien été réalisé avec soin et avec un professionnalisme allant jusqu’au bout … des permaliens. Url + permalien permettent à une page d’être trouvée sur le net et ont également leur importance en termes d’informations données à l’écran, de référencement internet et de design puisque ce sont des éléments qui sont lus à la fois par les moteurs de recherche et pas les cybernautes.

Prenons l’exemple d’une page web exceptionnellement conçue en termes de web design et de référencement internetvoir la page

Choisissons quelques éléments – ci-après en bleu clair – de la page html correspondante telle qu’elle est écrite et programmée.

<p style= »text-align: center; »><span style= »font-size: 36pt; color: #375470; »>♠</span></p>

Il s’agit de la ligne correspondant à l’as de pique. <p est l’ouverture de la balise, en l’occurrence une ligne avec un as de pique. </p> correspond à la fermeture de la balise. style= »text-align: center; » est la programmation indiquant que le contenu de la balise, c’est-à-dire de la ligne qui apparaît à l’écran, concrètement l’as de pique, doit être aligné au centre de la ligne. 

span style= »font-size: 36pt; color: #375470; » est la programmation indiquant que l’as de pique doit être en taille 36 et que sa couleur doit être bleu nuit, de couleur pantone #375470 très exactement. , c’est le contenu de la ligne, et il se trouve qu’en langage de programmation, c’est suffisamment rare sur l’ensemble d’une page html pour le signaler, le symbole d’un as de pique correspond à … un as de pique.

<p style= »text-align: justify; »><img class= »aligncenter wp-image-826″ src= »http://agenceweb-jforjay.com/wp-content/uploads/2015/03/dark-blue.png » alt= »site web referencement internet » width= »110″ height= »109″ /></p>

Il s’agit de la ligne devant contenir l’image du Monogram JP. Toute la balise correspondante s’ouvre et se ferme avec <p et </p>. Le texte style= »text-align: justify; » indique que le contenu doit être aligné et centré. src= indique qu’une image doit être insérée dans la ligne. Le texte alt= »site web referencement internet » est important en termes de référencement internet car il est lu par le fameux robot de Google, le Googlebot.

L’image a donc été désignée et paramétrée pour qu’elle soit à la fois belle et efficace en termes de référencement internet. width= »110″ height= »109″, ce sont les dimensions de la photo telle qu’elle doit apparaître à l’écran. http://agenceweb-jforjay.com/wp-content/uploads/2015/03/dark-blue.png, c’est l’adresse internet de l’image qui doit apparaître à l’écran. Cette image, de format png, s’appelle dark-blue. Elle est archivée chez l’hébergeur du site web http://agenceweb-jforjay.

Le chemin ainsi que de tous les dossiers menant à cette image sont indiqués de façon linéaire et suivant la logique de l’arborescence des fichiers du site web tels qu’ils sont classés et organisés wp-content/uploads/2015/03/.

La page html est lue par le navigateur de l’ordinateur qui transforme ce qu’il lit en une représentation numérique. Lorsqu’il arrive à src=, le navigateur « comprend » qu’il doit faire apparaître une photo et qu’il doit aller chercher cette photo dans un dossier dont le chemin d’accès lui est fourni. 

L’ensemble de la ligne http://agenceweb-jforjay.com/wp-content/uploads/2015/03/dark-blue.png est en quelque sorte une voie numérique faite de panneaux ou un pont invisible et purement textuel qui relie l’endroit où une photo est archivée, c’est-à-dire quelque part chez un hébergeur qui peut fournir et servir à la fois des fichiers html et des photos grâce à son serveur, et l’écran de l’ordinateur sur lequel cette même photo doit apparaître et qui apparaitra grâce au navigateur de cet ordinateur.

Toute photo d’un site web est donc « appelée ». Par ailleurs, et de façon générale, toute personne écrivant l’url http://agenceweb-jforjay.com/wp-content/uploads/2015/03/dark-blue.png dans le navigateur de son ordinateur verra apparaître la photo du Monogram JP correspondant, puisqu’il s’agit du lien et du chemin conduisant à cette image. Tout le temps que cette image est maintenue par son propriétaire, évidemment.

<p style= »text-align: justify; »><span style= »font-size: 12pt; »>Il n’y a pas de projet de création de site internet sans que ne soit évoquée ou détaillée la question des langages de programmation. Le plus souvent, c’est en tout premier lieu le HTML qui est mentionné. HTML, cela signifie : Hypertext Markup Language.</span></p>

Même principe. Avec comme contenu un texte traitant du html, celui qui se trouve dans la balise qui s’ouvre et se ferme avec <p et </p> : Il n’y a pas, etc.

<p style= »text-align: justify; »><span style= »font-size: 12pt; »>Oui, mais après ?</span></p>

Même principe. La ligne de programmation précédente donne comme résultat à l’écran exactement le même résultat que la ligne suivante :

Oui, mais après ?

<p style= »text-align: left; »><span style= »font-size: 12pt; »>Cliquez <a title= »creation site internet agence web article wikipedia HTML » href= »http://fr.wikipedia.org/wiki/Hypertext_Markup_Language » target= »_blank »>http://fr.wikipedia.org/wiki/Hypertext_Markup_Language</a></span></p>

C’est la ligne invitant à consulter la page web – la page html donc – de l’article de Wikipedia traitant du html. Ici le texte est aligné à gauche, c’est ce que signifie style= »text-align: left; ». Il est de taille 12, ce que signifie style= »font-size: 12pt; ».

Le contenu, c’est-à-dire le texte qui doit apparaître à l’écran, c’est Cliquez. Le lien internet de la page en question apparaît également à l’écran avec un lien hypertexte. title= »creation site internet agence web article wikipedia HTML », c’est l’anchor text – ou texte d’ancre – c’est-à-dire le texte qui apparaît lorsque le cybernaute survole le lien avec sa souris.

Ce texte est important d’un point de vue informatif, puisqu’il peut être lu par le cybernaute, mais il est également très important pour le référencement internet parce qu’il est lu par les moteurs de recherche.

L’ensemble est excellent à la fois d’un point de vue web design et d’un point de vue SEO, c’est-à-dire référencement naturel, car les moteurs de recherche, et Google tout particulièrement, adorent les liens hypertextes. Ici, l’ensemble du lien hypertexte se trouve, dans la balise principale que constitue la ligne qui s’ouvre et se ferme avec <p et </p>, dans une sous-balise qui s’ouvre avec <a et se ferme avec </a>.

Après href= est indiqué le texte du lien hypertexte qui doit apparaître à l’écran. Après target= est indiqué l’url du site internet vers lequel renvoie le lien hypertexte : http://fr.wikipedia.org/wiki/Hypertext_Markup_Language

.
Ecrit par Jérôme Perrin

.

html webmaster paris agence web paris creation site web seo referencement internet infogerance social media community management


Cet article vous a plu ? Laissez-nous un commentaire !

Pour tous vos projets web : création de site vitrinedéveloppement web, mise en place  d’un plan digitalecommerceblogapplication mobileapplication webréférencement naturel (SEO), réseaux sociauxcommunity managementwebmasteringdéveloppement web, webmarketing, etc.

J4JAY Studio Web mettra en œuvre les meilleures solutions en parfaite adéquation avec votre projet web.

Tel  06 03 81 46 64

Email  info@agenceweb-jforjay.com

A très bientôt ! 

J4JAY Studio Web I Agence Web Paris

. 

agence web paris création site internet création site web référencement internet web design

Agence Web Paris § J4JAY Studio Web § Agence digitale à Paris spécialiste en création de sites web, référencement internet (SEO, SEM, SMO), e-commerce, webmarketing, community management et social media

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.