HTML

Le HTML est le code qui structure une page internet. Ce n’est pas un language de programmation, mais un language de balisage. Ce qui signifie que le language HTML a pour objet l’affichage des informations et non leur traitement.

Les balises HTML

Ce language de balisage repose sur des balises (sic), qui différencient les éléments les uns des autres.

<html>contenu de la balise</html>

Pour construire une page complexe il est rapidement nécessaire d’imbriquer les balises et ici aussi le HTML 5 impose plus de rigueur que les versions précédentes.

<html><body></body></html>

Les imbrications doivent être ordonnées, il ne faut pas fermer une balise dans une balise qu’elle contient.

<html><body></html></body>

Les balises orphelines, sont des balises qui ne se ferment pas comme par exemple le retour à la ligne

<br />

Les attributs des balises HTML

En l’état le HTML ne nous permet pas grand chose pour augmenter les possibilités il nous faut aborder les attributs des balises.

<balise attribut="valeur">

Prenons l’exemple d’une image

<img src="mon_image.jpg" alt="mon image" />

Une balise peut avoir plusieurs attribut, ici src et alt. src permet de définir l’emplacement du média et alt de définir le texte alternatif à afficher dans le navigateur en cas d’image inaccessible (ou pour les navigateurs destinés aux malvoyants). Un attribut doit posséder une valeur pour être correctement traité.

Principaux attributs

Vous pouvez consulter la liste complètes des attributs validé par le W3C sur la page dédié du site W3schools.com.

Mais pour commencer quelques attributs doivent impérativement être connu.

  • Alt : Texte alternatif à afficher si l’image ne peut pas être affiché.
  • disabled : Désactive un champ dans un formulaire.
  • href : URL d’un liens hypertexte.
  • id : identifiant (doit être unique sur la page ! le html le supporte mais avec le Js cela peut provoque des dysfonctionnement).
  • src : URL d’une image.
  • style : Contient des règles CSS pour un élément.
  • title : information supplémentaire sur un élément (s’affiche sous la forme d’une info bulle).
  • width et height : Permettent respectivement de modifier la largeur et la hauteur d’une cellule.

Structure d’une page HTML

La construction d’une page internet doit respecter certains usages.

A lire  Construire une page en HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>

<body>
Contenu de la page
</body>

</html>

Premier impératif déclarer le type de document par la balise !DOCTYPE. Vous remarquerez qu’ici la balise orpheline DOCTYPE n’utilise pas d’attribut et ne se ferme pas. C’est l’exception qui confirme la règle car elle est plus proche du XML que du HTML.

La balise HTML est la balise qui contiendra l’intégralité des données de la page. Elle contient obligatoirement deux balises :

<head> : contient les ressources ou les informations sur la structure de la page. Comme les fichiers CSS ou les JavaScripts que nous aborderons plus tard.

<body> : contient les informations qui seront affichés dans le navigateur du client (visiteur). Texte, titre, image etc..

L’encodage

Il ne vous aura pas échappé qu’internet s’utilise partout dans le monde et nous n’utilisons pas tous les mêmes caractères. La balise meta permet de définir les propriétés de la page dans l’exemple de codage utilisé pour l’affichage des caractères.

<meta charset="UTF-8">

La balise title

Dernières balises indispensable la balise title permet de définir le titre de la page (surprenant ^^). Le titre de la page est le nom qui sera affiché dans la barre de titre du navigateur.

<title>titre de la page</title>

Commenter le code HTML

Notre exemple est sommaire, dans le cas d’une vrai page internet il y a beaucoup plus de balises et de contenu. Il est donc utile d’utiliser des commentaires qui ne seront pas afficher sur la page mais dans le code. Cela vous permettra de vous repérer dans la page en notant certaines informations.

Cela peut sembler inutile au commencement d’un projet mais par la suite vos pages HTML seront généré par le code PHP répartie en plusieurs fichiers et inclurons des javascripts modifiant la page HTML. De ce fait savoir ou se place les commentaires vous sera très utile pour la construction de vos pages.

<!-- ceci est un commentaire -->

Propriété des balises

En HTML les balises structures l’affichage des informations de la page. Elles sont soit inline soit block.

Inline chaque balise se place à la suite de la précédente sur la même ligne.

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><q><samp>
<script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Block la balise prend tout l’espace sur sa ligne.

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form>
<h1>-<h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

Avec le CSS nous pourrons modifier l’affichage mais pour garder un code « propre » il est important d’utiliser les balises en fonction de leur propriété initiale.

 

Balises sémantiques

En HTML5 les balises peuvent avoir du sens, entendez que certaines balises on une vocation particulière.

<header> // En-tête de la page
<nav> //menu de navigation
<section> //regroupe plusieurs liens vers du contenu dit profond
<article> //un articles est le contraire d'un section
<aside> // contenu latéral
<footer> // pied de page
<header>
<section>
<article>
<aside>

Balises génériques

Pour construire correctement vos pages HTML vous devrez utiliser des balises génériques. Ces derniéres n’ont pas de vocation sémantique, elle ne sont utiliser que pour structurer le contenu d’une balise sans y attribuer de nature.

<div> <!-- élément block.-->

<span> <!-- élément inline. -->

Structurer les informations

Pour améliorer la lisibilité des informations sur vos pages il est nécessaire de les structurer. Il vous faut définir les titres, les paragraphes et les éléments de liste.

Cela permettra à vos visiteurs de naviguer sur vos pages en en comprenant le plan et aux moteurs de recherche d’organiser efficacement les données qu’ils analyseront lors de leurs visites régulières.

Balises de titre

Les balises H1-6 permettent de hiérarchiser les différents titres de vos pages (H = Headline = titre).

<h1>titre principal</h1>
<h2>sous-titre</h2>
<h3>etc..</h3>

Pour vous assurer une lisibilité optimale par les moteurs de recherche il est important de structurer rigoureusement l’organisation de vos titres.

Il ne faut pas passer d’un h1 à un h4. Il est aussi primordial de n’utiliser qu’une seule fois le h1 sur votre page et idéalement d’utiliser la même information que pour la balise <title> en effet cette balise doit être le titre de votre page, son sujet principal. Si vous avez plusieurs sujets différents sur la même page cela nuira à sa lisibilité et au référencement, autant créer une nouvelle page.

Paragraphe et liste.

Une fois le titre choisi il faut maintenant lui fournir du contenu généralement on utilise la balise <p> qui désigne un paragraphe.

<h1>parlons de rien</h1>
<p>rien</p>

Vous remarquez qu’ici la balise <p> est après la balise <h1> et non pas à l’intérieur de cette dernière. C’est normal car il s’agit d’un balisage sémantique et non structurel.

Pour les élément de liste il en existe deux types.

les listes à puces <ul>

<ul>
<li>premier élément</li>
<li>second élément</li>
</ul>

et les listes numériques <ol>

<ol>
<li>premier élément</li>
<li>second élément</li>
</ol>

Accentuation du texte

Ici il n’est pas question des accents latins, mais de la mise en valeur des informations, comme mettre en gras ou en italique.

<p>mon paragraphe est long mais il parle principalement de <b>HTML</b> et de <i>CODE</i></p>

mon paragraphe est long mais il parle principalement de HTML et de CODE

<b> - gras
<strong> - Texte important
<i> - Italique
<em> - Emphase
<mark> - Marquer
<small> - Petit
<del> - Barré
<ins> - Inséré
<sub> - sous-titre
<sup> - exposant

HTML responsive

Nous reviendrons sur le responsive en détails plus tard mais quelques notions sont nécessaire. Aujourd’hui la majorité des internautes sont sur mobiles. Pour assurer une lisibilité correcte sur tout les écrans, d’une simple ligne on utilise viewport.

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cela suffit rarement mais cela permet de redimensionner les éléments pour un appareil mobile en recalibrant les unité de dimension des polices par exemple.

Media

Vous pouvez aussi modifier les images à charger en fonction de la largeur maximale du container.

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

Texte

Enfin pour les titres et la dimension des polices il existe aussi une unité de mesure relative à la résolution vw et vh.

<h1 style="font-size:10vw">je serai toujours proportionné par 
rapport à la largeur du conteneur</h1>

<h1 style="font-size:10vh">moi par rapport à la hauteur</h1>

 

Quelques balises utiles

Nous avons survolé les principales balises HTML5 mais vous aurez surement besoins à l’occasion de balises plus spécifiques. Notez que ce n’est pas une obligation, mais une recommandation.

<code>pour écrire du code informatique</code>

<pre>vous pouvez aussi utiliser cette balise</pre>

<kbd>si vous voulez spécifier des touches de clavier</kbd>

<samp>pour afficher les messages de sortie d'un programme</samp>

<var> pour afficher des variables</var>

<br /> balise orpheline retour à la ligne

<hr> balise orpheline créant une barre horizontale.

Les caractères spéciaux

Pour certains caractères vous aurez besoin d’utiliser des caractères spéciaux qui ne seront peut être pas compatible avec l’encodage de vos pages. Par exemple le signe < est réservé par le HTML, pour l’écrire dans le contenu vous devez l’écrire &lt; ou &#60;.

A cette fin on utilise des entitées :

  • Espace insécable : &nbsp; ou &#160;
  • Inférieur à < : &lt; ou  &#60;
  • Supérieur à : &gt; ou &#62;
  • Et & : &amp; ou &#38;
  • Guillemet double  » :  &quot; ou  &#34;
  • Guillemet simple (apostrophe) ‘ : &apos; ou &#39;

Les accents repose sur le même principe :

  • a&#768; représente à.

Mais normalement vous encoderez vos pages en UTF-8 ce qui rend la mécanique obsolète pour les accents.

Nous en avons fini avec les bases du HTML. Nous allons voir en détails la mise en place de formulaire, l’utilisation des médias et le CSS.

© 2018 Occitaweb formation WordPress et média sociaux