JLIZ TAL 2016-2017: Je m’appelle HTML

Aujourd’hui, nous allons introduire les tableaux dans du « HyperText Markup language » abrégé et communément dit « html » soit en français « langage de balisage ». En effet, ce langage informatique fut créé dans le début des années 90 afin de structurer et donner du sens à un contenu.

Pour écrire un tableau avec du code qu’on appelle du « html » et qui signifierait avoir la possibilité de lire de l’information sur une page web à l’aide d’un navigateur quelconque. Nous essayerons d’aborder les notions les plus basiques

Tous d’abord, il faut savoir ce qu’est une balise. Une balise formellement est un symbole qui s’ouvre avec un chevron « < » et se ferme avec un chevron « > ».

Exemple: <élément>

On considère que <élément> est une balise ouvrante qui doit forcément attendre sa balise fermente qu’on écrit comme suit </élément> c’est-à-dire elle est constituée de deux paires de balises.

Il est très important, pour éviter tout éventuel erreur, de bien vérifier que toute balise ouverte a joliment quelque part une balise fermée qui lui correspond.

Il faut également noter que tout code « html » contient des balises qu’ici on nomme « incontournables » car d’une part, elles sont indispensables pour tout individu souhaitant dans le futur créer, gérer, optimiser le référencement et modifier des sites-web indépendamment des différents machin qui proposent des solutions toutes faites.

En effet, on essayera de faire un détour donc sur les balises incontournables en abordant brièvement les différents éléments qui peuvent figurer dans une balise.

Les éléments:

<html> : la balise ouvrante qui introduit le code accompagné de sa balise fermante </html> qui clôture le code.

Elle peut également contenir des informations relatives à la langue dans laquelle on va écrire le contenu.

<head> : la balise ouvrante qui introduit toute un ensemble de balises contenant des informations sur l’encodage dans la balise <meta> et le titre dans la balise <title>.

<body> : Cette balise permet d’introduire le corps du contenu : un paragraphe, un tableau…etc.

Ces trois balises s’ouvrent au début d’un script « html » et se ferment à la fin du script. On rappelle également qu’un script est un programme écrit à l’aide d’un éditeur de texte et qui s’exécute généralement avec un interpréter comme le Terminal que nous avons introduit dans ce blog précédemment. Parmi les éditeurs de texte, nous privilégions et travaillons avec TextWrangler sur un MacOs et Notepaad++ sur Windows. Bien évidement, il en existe d’autres mais les gouts ne se discutent pas.

la balise <table> définira le <body> de mon contenu c-à-d. le contenu dans notre page-web ici sera un tableau. Ce dernier est un ensemble de lignes et de colonnes.

<tr> : une balise ouvrante qui renvoie le sens d’une ligne dans un tableau et se ferme également </tr> qu’on peut substituer avec la balise </th>.

<td>: une balise ouvrante qui renvoie le sens d’une colonne /cellule dans un tableau et se ferme également avec la balise </td>. Pour ce qui est des cellules d’en tête, on peut utiliser la balise <th></th> qui permettra d’écrire en gras le texte dans les cellules.

Nous tenons également à rappeler que pour pouvoir exécuter ce script via Shell, nous devons impérativement indiquer dans le script dans la première ligne : #!/bin/bash où le # n’introduit pas un commentaire uniquement lorsqu’il est suivi du « ! ». Il faut également respecter la syntaxe bash : pour écrire dans un fichier on utilise, rappelons-le, la commande « echo »

Voici donc un aperçu simple du résultat:

Nous avons également essayer d’aller plus loin, en insérant beaucoup plus de lignes. On a également utiliser une balise <a href= http:\\www.exemple.fr> dans laquelle on écrit des liens accessible en un clic, et qui se ferme comme toute autre balise avec </a>

voici le résultat:

Afin de résoudre les problèmes d’encodage, il est préférable de le noter en l’imbriquant dans la balise <head> tout comme le « title » avec la balise qui définie l’encodage:<meta charset= « utf-8"/>

voici le résultat:

En gros, voici à quoi peut ressembler un code html:

Tout comme la balise <table> qui permet d’écrire un tableau, il existe par ailleurs la des balises relatives au traitement de textes:

<h1>Notre titre</h1> : Une balise qui va permettre d’écrire des grands titre.

voici le résultat:

<p>notre paragraphe</p>: cette paire de balise permet d’écrire des paragraphe.

<em>Notre texte</em> : Cette balise est probablement d’une grande importance si l’on veut mettre en mention dans un paragraphe donnée un terme ou une expression empruntée à un autre auteur ou une prendre ses distances…etc.

<strong>Notre texte</strong> : Il se trouve que parfois, lorsqu’on rédige, on souhaite mettre l’accent sur un terme précis ou une phrase voire parfois tout un paragraphe. Pour ce faire, on utilise le gras.