HTML – exemples

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa <strong>strong</strong>.</p>
<p>Cum sociis natoque (penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<br/>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a href="#">link</a> mollis pretium. Integer tincidunt.</p>

Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés.

<i><u>Le texte ici apparaîtra en italique et souligné</u>, cette portion de texte sera elle seulement en italique</i>

Ce qui suit n’est pas correct

<i><b>Vous voyez bien que ce la n’apparaît pas</i>, comme vous le souhaitiez</b>

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne.
Ou plus exactement il considère une suite d’un ou plusieurs espaces/tabulations/saut de ligne comme un seul espace.
Cela permet notamment d’indenter le code HTML pour plus de lisibilité, sans modifier l’apparence de la page HTML dans le navigateur.

[A noter: il existe une exception pour le code contenu dans des balises, dont l’objectif est justement de conserver le formatage du texte (espaces, sauts de lignes, etc.) – la balise <pre>

Le langage HTML possède par contre des éléments permettant expressément de définir chacun de ces éléments de mise en forme :

• Espace insécable HTML
  Espace insécable : il s’agit d’une espace ne pouvant être brisée par une fin de ligne.
  Sa représentation en HTML est  .
• Saut de ligne HTML
  Saut de ligne manuel : il s’agit d’un saut de ligne explicite.
  Sa représentation en HTML est <br/>

[A noter: La balise <nobr> </nobr> permet à l’inverse d’empêcher le retour automatique à la ligne réalisé par le navigateur !]

Les listes sont un moyen efficace de présenter une information rapide à lire et à digérer.

Elles sont également une bonne méthode pour donner une brève description ou une introduction à un contenu à suivre (la navigation de votre site par exemple), pour aider vos utilisateurs à trouver ce qu’ils recherchent.
Coder une liste en HTML est rapide et très simple.
Il existe deux types de listes en HTML : ordonnées <ol> et non-ordonnées <ul>.

01 – Liste non-ordonnée

Une liste non-ordonnée (unordered list – <ul>) par défaut, est restituée par le navigateur comme légèrement indentée, chaque élément (de la liste) précédé par un point noir (bullet). Le tag de cette liste est donc <ul>.

02 – Ajouter des éléments

Le rôle de la liste est bien de lister des éléments. Un élément de liste est contenu dans la balise <li> (pour list item)

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Le texte vient donc entre les balises ouvrante et fermante de

<ul>
<li>Thé</li>
<li>Café</li>
<li>Chocolat</li>
</ul>

03 – Une liste qui contient des listes

Chaque élément d’une liste, peut être le “départ” d’une autre liste. Un <ul> peut contenir un autre <ul> auquel il est possible d’ajouter des éléments – on parle alors de “nested list” (liste imbriquée)

<ul>
<li>Thé
    <ul>
        <li>Noir</li>
        <li>Vert</li>
        <li>Earl Grey</li>
    </ul>
</li>
<li>Café
    <ul>
        <li>Noir</li>
        <li>Décaféiné</li>
    </ul>
</li>
<li>Chocolat</li>
</ul>

04 – Liste ordonnée

Si vous souhaitez donner un aspect ordonner à votre liste, il vous suffit de remplacer les <ul> (balise d’une liste non-ordonnée) par une des <ol> (marque d’une liste ordonnée).
Les points noirs seront alors remplacés par des valeurs numériques croissantes.

<ol>
<li>Thé
    <ol>
        <li>Noir</li>
        <li>Vert</li>
        <li>Earl Grey</li>
    </ol>
</li>
<li>Café
    <ol>
        <li>Noir</li>
        <li>Décaféiné</li>
    </ol>
</li>
<li>Chocolat</li>
</ol>

ou Une liste ordonnée qui contiendrait des liste non-ordonnée

<ol>
<li>Thé
    <ul>
        <li>Noir</li>
        <li>Vert</li>
        <li>Earl Grey</li>
    </ul>
</li>
<li>Café
    <ul>
        <li>Noir</li>
        <li>Décaféiné</li>
    </ul>
</li>
<li>Chocolat</li>
</ol>

05 – liste de définition

Il existe également les listes de définitions qui sont très rarement utilisées.
Liste de définition = definition list, donc <dl>

<dl>
<dt>Thé</dt>
<dd>- Le thé est une boisson stimulante contenant de la théine.<br />
La boisson est obtenue par infusion des feuilles du théier, préalablement séchées et le plus souvent oxydées et peut servir de remède.<br />
Le thé est d’origine chinoise, où il est connu depuis l’Antiquité.<br />
Il a été importé de Chine au XVIe siècle par les commerçants portugais en Europe, puis introduit en France comme plante digestive par les Jésuites. Le thé est aujourd’hui la boisson la plus bue au monde après l’eau et avant le café. La boisson elle-même peut prendre des formes très diverses : additionnée de lait et de sucre au Royaume-Uni, longuement bouillie avec des épices en Mongolie, bouillie avec des épices et du lait comme en Inde, préparée dans de minuscules théières dans la technique chinoise du gōngfū chá, ou battue comme au Japon en chanoyu.</dd>
<dt>Café</dt>
<dd>- Le café (de l’arabe قهوة : qahweh) est une boisson obtenue à partir des graines du caféier, un arbuste du genre Coffea.</br>
La culture du café est très développée dans de nombreux pays tropicaux, dans des plantations qui sont cultivées pour les marchés d’exportation.<br />
Le café est une des principales denrées d’origine agricole échangées sur les marchés internationaux, et souvent une contribution majeure aux exportations des régions productrices.<br />Le café est souvent présenté comme le deuxième bien d’exportation dans le monde après le pétrole ; cependant, ce classement est remis en question par certains spécialistes.
</dd>
</dl>

Les liens sont essentiels à une page internet.

Suivre un lien vous permet de naviguer d’une page à une autre, de naviguer à l’intérieur même d’une page, de consulter un document(.pdf, .doc. .xls, …), de télécharger ce document, …

Les liens permettent également à un moteur de recherche de trouver votre site et l’indexer (le traverser afin de comprendre quel est son contenu, quels sont les documents liés, quels sites vous pointez et lesquels vous désignent), enfin, le référencer.

C’est un lien également, sur les pages de résultats d’une recherche faite par un internaute, qui l’amènera sur votre site.

01 – la balise <a>

Ajouter un lien à votre page est très simple. <a> </a> – (“a” pour anchor / ancre)

Cependant, contrairement à une d’autres balises html, la balise <a> a besoin de plus d’informations (les attributs) pour fonctionner correctement.

02 – Href

Le lien a besoin à besoin d’une destination, afin que votre navigateur sache où vous mener – le lien une fois cliqué.
Nous ajoutons cette “destination” en utilisant “href”.

<a href="http://www.w3schools.com"></a>

Ce lien vous mènera à un site (dit) externe (au vôtre).

03 – un lien interne

Pour naviguer vers une autre page de votre site – lien (dit) interne -, il vous suffit d’ajouter le nom de la page.

<a href="contact.html"></a>

(Cela signifie dans l’exemple ci-dessus que la page contact est dans le même dossier / au même niveau niveau que la page sur laquelle nous nous trouvons – voir les notions des chemins relatifs et chemins absolus).

04 – Ajouter un lien à du texte

Par exemple : <a href="contact.html" ></a> – techniquement vous mènera à la page se nommant “contact.html”, mais dans l’exemple présent sera invisible à l’œil de l’internaute.
Pour le rendre visible il suffit d’insérer un texte à ce lien – sur lequel l’internaute pourra cliquer.

<a href="contact.html">Laissez-moi un message</a>

(Notez qu’un lien peut également être assigné à une image)

05 – Ouvrir une nouvelle page

Si vous souhaitez que votre lien ouvre une nouvelle fenêtre ou un nouvel onglet, il vous suffit d’ajouter à votre “destination” une “cible”.

<a href="http://www.w3schools.com" target="_blank">En complément à mes propos sommaires, visitez ce site qui est la référence en ligne (!)</a>

Pourquoi ouvrir une nouvelle fenêtre ?
Je recommande d’ouvrir un lien externe à votre site dans une nouvelle fenêtre.
Ce lien peut contenir un complément d’information – vous y faites référence, en permettez la consultation, mais refusez que l’internaute ne quitte votre site – n’ait besoin de “revenir en arrière” afin de vous retrouver dans son historique de consultation de pages visitées ou bien n’ait à taper à nouveau l’adresse de votre site et cherche la page sur laquelle il se trouvait lorsqu’il “vous a perdu”… ne trouve ceci trop fastidieux, ne se lasse et finalement… passe à autre chose (!)
Je le recommande également lorsque l’on pointe sur un document (pdf, doc, docx, etc.)

06 – Un lien pour écrire un email

<a href= "mailto:uneadressemail@domaine.com">Envoyez-moi un message</a>

(je vous déconseille de faire ceci sans passer par un programme qui crypterait l’eMail ciblé.
Pourquoi ? Pour éviter les spams et voir votre outil de messagerie ou celui du mail destinataire polluée de messages non-désirés.

07 – un lien vers un document

<a href="documents_pdf/le-programme-de-la-manifestion.pdf" target="_blank">Visualisez / téléchargez le programme de la manifestation</a>

Comme je suis organisé, j’ai rangé tous mes éléments dans des dossiers séparés.

Mes .pdf sont donc stockés dans un dossier que j’ai appelé « documents_pdf ».
Le lien me permet de définir la « destination », donc ici, d’ouvrir le dossier « documents_pdf » et à l’intérieur (« / ») d’aller chercher le document « le-programme-de-la-manifestion.pdf ».
Je décide également de l’ouvrir dans une nouvelle fenêtre ou un nouvel onglet – target= »_blank » – ceci car certains navigateur intègre un plug-in qui permet de lire les documents d’autre nature que le html. Ainsi le pdf s’ouvrira dans un nouvelle fenêtre. Cette fenêtre fermée, l’internaute retrouve votre site (!)

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires.

Voici un exemple d’attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite.

<p align="right">Exemple de paragraphe</p>

Ou bien celui-ci, modifiant la couleur de la police (- ceci ne concernant que le pargraphe auquel l’attribut a été ajouté).

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa strong.</p>
<p style="color:red">Cum sociis natoque (penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede <a href="#">link</a> mollis pretium. Integer tincidunt.</p>

Il est possible d’ajouter des éléments d’information dans une page web sans que ceux-ci soient affichés à l’écran.
Ceci grâce à un jeu de balises spécifique, appelé balises de commentaires.

<!-- Voici un commentaire -->

Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir à commenter du code HTML.
Cela peut vous permettre d’annoter votre travail, de segmenter votre code afin d’y voir plus clair.
[Attention : le commentaire n’est pas restitué à l’écran, mais reste inscrit dans votre code et lisible par un moteur de recherche.]

la balise <div> va vous permettre de donner de la cohérence à votre page web. Chaque élément d’une page web est structuré par une balise. Cette balise permet au navigateur de comprendre comment restituer (par défaut) vos propos.

Si l’html5 a induit de nouvelles balises comme <header>, <footer>, … , il a laissé “de grands vides” – ou plus exactement, l’html5 n’a pas su répondre à notre imagination débordante et infinie.

<div> peut être affectée d’un ID et être unique en ce cas (souvent liée alors à un script).
<div> peut être affectée d’une CLASS et alors être utilisée plusieurs fois sur une même page.
<div> peut recevoir, du texte, des listes, des images, des vidéos, des sons, …
<div> va vous permettre d’affiner et d’enrichir la structure de votre page.

01 – <div> basique

<div>
<!– Ici se trouvera le contenu de la div. –>
</div>

Une <div> s’ouvre (comme toutes les balises à rares exceptions), tient un contenu et se ferme (ne l’oubliez pas).

02 – Ajouter un ID

Une <div> peut être unique, ainsi identifiée dans une feuille de styles ou bien par un script que vous ajouteriez à la page.

<div id= "IDdemadiv">
<!– Ici se trouvera le contenu de la div. –>
</div>

03 – Ajouter une CLASS

L’ajout d’une CLASS ne confère en rien un caractère unique à la <div>, permet donc de l’utiliser plusieurs fois et surtout de définir un style qui très rapidement nous permettrait de définir (visuellement) un contenu.

<div class="CLASSdemadiv">
<!– Ici se trouvera le contenu de la div. –>
</div>

Soyez judicieux dans votre choix entre ID et CLASS.
L’ID est unique. La CLASS peut être utilisée plusieurs fois.

04 – <div> imbriquée

Une <div> peut en contenir d’autres…

<div id="IDdemadiv">
<div class="leftColumn"><!– Ici se trouvera le contenu de la div. –></div>
<div class="rightColumn"><!– Ici se trouvera le contenu de la div. –></div>
</div>

<div class="CLASSdemadiv">
<div class="leftColumn"><!– Ici se trouvera le contenu de la div. –></div>
<div class="rightColumn"><!– Ici se trouvera le contenu de la div. –></div>
</div><span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

Il n’y a pas de limite aux nombres de balises <div> présentes sur une page. Nombres de pages web que vous consulter chaque jour en contiennent beaucoup.