100 – HTML5 et CSS3

Aujourd’hui pour réaliser un site, on utilise couramment le langage HTML avec du CSS. Je vais vous les présenter dans un petit article qui n’a pas pour but de vous apprendre la programmation, mais de vous donner une idée générale de ce que vous pouvez faire avec ces deux langages qui sont complémentaires. Une fois que vous maîtriserez ce sujet, en fonction de vos besoins ou de votre situation professionnelle vous pourrez choisir d’approfondir ce sujet (cas des développeurs) ou de faire de l’analyse fonctionnelle (cas des chefs de projets). Il est évident que pour tout projet informatique on doit avoir une analyse avant que soit réaliser un développement. On ne se lance pas tête baissée dans une programmation sans savoir ce qui doit être fait, c’est une évidence pour un informaticien, mais pas forcément pour un lecteur néophyte * sur ce sujet.

Comme le HTML et le CSS sont de vastes sujets, je ferais deux articles. Dans celui-ci nous verrons les bases et dans l’article suivant nous verrons l’accès aux données que l’on peut définir avec des mots un peu compliqués tel que SQL EmbarquéCommunication bidirectionnelles avec les WebSockets et Multi-threading avec le WebWorker. J’espère ne pas vous avoir fait peur avec tout ça, on va relâcher la pression car vous allez voir la suite est plutôt facile !

1. Editeur de texte et Navigateurs

Pour faire votre site vous aurez besoin d’un seul outil très simple, un éditeur. Grace à lui vous pourrez créer des fichiers et les enregistrer dans un premier temps sur votre ordinateur, et par la suite sur un serveur pour que tout le monde puisse voir ce que vous avez fait. L’éditeur de texte que je vous conseille est le suivant : Notepad ++. Il a plein d’avantages, outre le fait d’être gratuit, vous constaterez qu’il vous met vos lignes de commande en couleur une fois que vous aurez enregistrer vos fichiers avec leur extension HTML et CSS.

Je vais maintenant vous parler de quelque chose de familier, le Navigateur. C’est ce que vous utilisez en ce moment même si vous consultez cet article sur Internet. Si je vous en parle c’est parce qu’il faut savoir qu’il existe différents logiciels de navigation, ils font tous la même chose, vous afficher des sites, mais comme ils n’ont pas été programmés de la même façon et par les mêmes personnes ils n’affichent pas toujours les mêmes informations comme on le voudrait !
Le plus gros problème dans tout cela, c’est que versions HTML sont apparues en décalage des versions de navigateurs. Ceci explique qu’un navigateur ne comprennent pas forcément ce qu’on lui demande d’afficher car il ne peut interpréter une commande qui n’existait pas le jour où il a été conçu ! Il ne faut pas pour autant jeter la pierre au HTML ou au navigateur, on doit juste avoir conscience qu’ils ont été conçus à des moments différents par des personnes différentes.

Les principaux navigateurs sont les suivants :

  • Internet Explorer
  • Google Chrome
  • Mozilla Firefox
  • Opera

Si vous voulez une liste complète de tous les navigateurs et la dernière version qu’ils proposent, je vous recommande l’article de Tom’s Hardware intitulé Grand comparatif de navigateurs.

En conclusion pour les navigateurs, je vous conseillerai dans un projet de prévoir une phase de tests qui consiste à vérifier que vos pages s’affichent correctement sur les navigateurs les plus couramment utilisés.

2. Le HTML, le CSS et l’organisation d’une page HTML

Ce langage existe depuis le début du World Wide Web et a évolué avec temps :

  • 1989 – 1994 Première version du HTML
  • 1995 – 1996 HTML 2
  • 1997 HTML 3.2 et 4
  • 2007 Première version du HTML 5

Ce qui est très important, c’est de comprendre que le HTML permet de dire ce que l’on veut afficher et le CSS de dire comment l’afficher. Autrement dit, avec du HTML vous pouvez afficher un paragraphe et avec du CSS vous pouvez indiquer qu’il soit affiché avec une police de caractères * bien précise, une taille donnée, etc …

Quand on réalise un site tout petit, on peut avoir le HTML et le CSS dans la même page. Mais dès qu’on voit un peut plus grand, et vous y arriverez très facilement il est impératif d’avoir le(s) CSS à part et des pages HTML. L’énorme avantage c’est que vous pourrez indiquer dans toutes vos pages HTML la référence de votre CSS, vous gagnerez beaucoup de temps car vous n’aurez pas à redéfinir à chaque fois la manière d’afficher le contenu du texte de vos pages.

Comment on distingue un fichier HTML d’un fichier CSS ? Tout simplement par son extension … et aussi par son contenu, mais ça on le verra un peu plus tard. Un fichier HTML se termine avec .HTML et un CSS avec .CSS. Ainsi la page dans laquelle on entrera le code HTML pourra s’appeler index.html et la page dans laquelle il y aura du CSS pourra s’appeller style.css.

Comment on fait le lien entre ces deux fichiers ? C’est une question évidente que l’on se pose si on sépare le code. Je répondrai à cette question un peu plus tard, une fois que je vous aurai présenté la structure du HTML, ce qui arrive juste là dans HTML5 – Balises et attributs !

2.1. HTML 5 – Balises et attributs

2.1.1. Balises

Le HTML utilise un certain nombre de balises. C’est grâce à ce langage de balises que vous pouvez afficher une information sur une page d’un navigateur.

Une balise correspond à une commande qui doit être exécutée; Par exemple pour indiquer qu’un ensemble de phrases font parti d’un même paragraphe, on utilisera la balise <p>, puis le texte que l’on veut afficher. Pour finir on mettra une balise de fin, caractérisée par le caractère /, ce qui donnera </p>. Au final on aura <p>C’est mon premier paragraphe !</p>. L’avantage de regrouper ces phrases, c’est que vous pourrez par la suite faire de la mise en forme (l’aligner à gauche, le mettre en gras, etc …).

Il existe deux types de balises, les balises en paire comme nous venons de le voir et lesbalises orphelines. Une balise orpheline est une balise toute simple, sans balise de fin. Exemples de balises orphelines :

  • balise très courante <image> : permet l’affichage d’une image,
  • balise unique <doctype> : indique au navigateur la version html à prendre en compte.

2.1.2. Attributs

Pour qu’une balise soit compréhensible, il faut aussi lui donner des paramètres. Par exemple pour la balise image il faut préciser quelle image on veut afficher. Pour cela on ajoute des paramètres que l’on appelle Attributs. Ainsi pour l’image on pourra indiquer l’attribut source (src), pour la balise doctype on ajoutera l’attribut HTML qui permettra au navigateur de comprendre que la page qu’il va consulter est en HTML5.

2.2. CSS 3

Le CSS n’existait pas lorsque le HTML est arrivé, il est apparu 5 ans après ! Et pendant ces cinq années, il a bien fallut afficher de jolies choses ! Les programmeurs ont donc mis des commandes d’affichage et nous en souffrons encore aujourd’hui car ces commandes nous font oublier ce que je vous ai dit au début et que nous allons marteler :

  • Le HTML pour dire ce que l’on veut afficher,
  • Le CSS pour dire comment on veut afficher.

Comme pour le HTML, le CSS comprend des balises qui sont en fait un ensemble de propriétés définies pour un style donné. La structure est la suivante :

nomBalise1
{
propriete1:valeur1;
propriete2:valeur2;
}

2.2.1. Nom de balises

On écrit le nom de la balise dont on veut définir l’apparence. On peut, par exemple indiquer que notre balise <p> va avoir une définition spécifique sur notre site.

2.2.2. Propriété CSS

C’est dans cette partie que l’on indique quelle propriété nous voulons changer. Il y a beaucoup de propriétés, comme la couleur, le style (italique, gras, souligné, etc …), la taille de la police, son nom, etc …

2.2.3. Valeurs

Pour chaque propriété CSS, on indique la valeur qui sera utilisée. Pour séparer propriété et valeur, on utilise le symbole deux-points. Un exemple parmis des milliers, pour la couleur on pourra dire que l’on veut le paragraphe en vert.

Si on applique tout ce que nous venons de dire, pour la balise <p> cela pourra donner :

p
{
color:green;
}

2.3. Appliquer un style à une balise CSS

Nous allons voir ici deux choses importantes. Comment appliquer un style à un seul paragraphe ou à un groupe de paragraphes et comment appliquer ce style à deux types de balises différentes (paragraphe et titre1 par exemple).

2.3.1. Appliquer un style à un seul paragraphe

Pour appliquer un style à un paragraphe on utilisera l’attribut Id et pour un ensemble de paragraphe l’attribut Class. Voilà un exemple tout simple si on utilise l’attribut Class :

Dans le CSS, le nom de la classe sera défini avec un point devant :

.ParagrapheRouge
{
color: red;
}

Et dans le HTML, on définira cette classe dans l’attribut comme on peut le voir dans l’exemple suivant :

<p class= »ParagrapheRouge »>C’est un paragraphe important !</p>
<p>Le deuxième paragraphe s’affiche sans couleur</p>
<p class= »ParagrapheRouge »>Quand on troisième, on voit rouge !</p>

2.3.2. Appliquer un style à plusieurs balises différentes.

Pour appliquer un style à plusieurs balises différentes, il suffira de mettre les noms de balises dans la même déclaration et de les séparer par des virgules. Voilà un exemple :

p, title
{
color:red;
}

2.4. Structure d’une page HTML

Une page HTML est structurée de la manière suivante :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Site HTML5</title>
  </head>
  <body>
    <p>Bienvenue sur ce site</p>
  </body>
</html>

La première balise DOCTYPE sert à indiquer que l’on travaille en HTML5. C’est une balise orpheline comme vous l’avez reconnu (voir le paragraphe 2.1.1. Balises HTML).

La deuxième balise html sert à indiquer que nous allons faire du html. C’est une balise en paire qui indique le début du html et vous trouverez sa paire à la fin du code dans la dernière ligne, c’est à dire </html>.

Enfin nous avons deux parties dans ce code qui sont balisé par le head et le body. Dans le head on indique tout ce qui concerne la page que l’on veut afficher comme son titre, la police de caractères et des liens importants comme par exemple la feuille de Style (CSS). Je vous avais dit que je vous indiquerais comment faire le lien entre une page HTML et une page CSS, nous y voilà :

<link rel= »stylesheet » href= »style.css » />

Vous pouvez mettre cette balise après la balise meta sur une nouvelle ligne, juste avant la balise <title>.

Pour finir, nous avons le body qui correspond au corps de notre fichier HTML. C’est là que nous pourrons mettre du texte, des images, des liens vers d’autres pages html de notre site ou d’autres sites. Votre imaginaire pourra s’exprimer ici, et vous pourrez rejoindre les milliards de pages qui sont actuellement consultable sur la toile.

Où la ! J’ai dit milliards …. je ne rêve pas ?? Et non, vous avez bien lu. Ce qui fera la différence entre votre site et tous les autres ce sera d’abord son contenu que vous mettrez régulièrement à jour, la manière dont vous l’afficherez (là les CSS et le graphisme pourront vous aider), ce que vous ferez pour le faire connaitre des autres (on appelle cela du référencement) et notamment des moteurs de recherche (où annuaires). Mais bon là j’anticipe un peu car vous l’avez compris cela fera l’objet d’autres articles.

3. HTML de A à Z

Pour ceux qui ont suivi cet article depuis le début, vous aurez constaté que je ne vous ai présenté que les bases du HTML et des CSS. Je ne vous ai pas mis en détail toutes les balises car ce n’était pas l’objectif initial. Mais maintenant que vous avez compris comment elles fonctionnent, nous allons en faire l’inventaire d’une manière simple (nom: à quoi elle sert).

En fin de cet inventaire je vous donnerais des liens vers d’autres sites qui vous fourniront le détail de ces balieses, et qui vous donneront aussi des exemples. Là je vous ai fait quelque chose de léger qui doit vous servir plus de pense-bête qu’un d’un inventaire détaillé.

3.1. Balises de premier niveau

Ce sont des balises qui sont à utiliser au minimum si vous voulez faire du HTML.

<html> : Balise qui indique avec quel langage vous travaillez.

<head> : C’est la tête de votre page, vous indiquez dans cette partie des références importantes travailler correctement sur votre page (lien vers le CSS, police de caractères utilisée, etc …)

<body> : Corps de votre page, c’est là que tout se passe et vous pouvez faire votre page qui sera seule ou très certainement en liaison avec d’autres pages de votre site ou d’autres sites.

3.2. Balises d’en-tête

<link /> : Balise pour faire le lien avec une feuille CSS.

<meta /> : Balise métadonnées * de la page (Police de caractères, mots-clés, etc…).

<script> : Balise pour mettre du Javascript. Vous ne devez pas le confondre avec le Java que je vous ai présenté dans un autre article. Le javascript est un langage à part entière qui ajoute du dynamisme à votre site. Attention à ne pas vous laisser envahir par celui-ci, il faut savoir l’utiliser avec modération. Vous pouvez consulter le cours qui a été fait sur ce sujet par José2 sur openclassroom.

<style> : Balise pour faire le lien avec le CSS.

<title> : Balise de titre. A ne pas négliger car elle sert aux annuaires lorsque vous êtes référencé.

3.3. Balises de structuration de texte

<a> : lien hypertexte. Balise pour faire le lien avec le monde externe (d’autres sites) ou en en interne, c’est à dire sur cette page ou sur d’autres page de votre site.

<abbr> : Cette balise veut dire Abréviation et vous permet d’afficher un texte plus important lorsque vous mettez votre souris sur ce texte.

<address> : Balise à utiliser dans vos formulaires de contact, si vous en faite un. Comme vous l’aurez compris, c’est pour indiquer vos coordonnées si vous voulez que l’on vous contacte.

<audio> : Balise HTML5 qui vous permet d’avoir du son sur votre site.

<blockquote> : Balise de citation qui permet de décaler du texte pour indiquer qu’il s’agit d’une citation.

<br /> : Balise de saut de ligne.

<cite> : Balise de citation pour une oeuvre. Met votre citation en italique et l’affiche lorsque vous passez la souris dessus. Là vous pourrez afficher plus de texte que la balise<abbr>.

<del> : Balise de texte barré. Permet d’afficher du texte comme cela : Texte barré.

<dfn> : Balise de définition. Met le titre de la définition en italique et donne une définition pour un mot ou une expression.

<em> : Balise pour faire de fait de l’amphase * sur un/des mot(s) qui est/sont mi(s) en italique. Met le texte en question en italique.

<figcaption> : Balise HTML5 correspondant à une légende qui est utilisée dans la balise<figure>.

<figure> : Balise HTML5 pour afficher une illustration (image et texte) avec une présentation originale.

Vous pouvez voir des exemples de ce que cela peut donner sur les sites suivants :

<h1><h2><h3><h4><h5><h6> : Balises de titre avec des tailles différentes. En général dans un document on va rarement au-delà du troisième niveau.

<hr /> : Ligne de séparation horizontale.

<img /> : Balise image.

<ins> : Balise qui est utilisée avec la balise <del> pour indiquer qu’il s’agit d’un texte inséré.

<kbd> : Balise qui indique qu’il s’agit d’une action qui doit être réalisée au clavier.

<mark> : Balise pour surligner un mot ou un groupe de mots.

<p> : Balise de paragraphe.

<pre> : Balise pour indiquer qu’un texte sera affiché sur une largeur bien précise.

<progress> : Balise barre de progression.

<q> : Balise de citation

<source> : Balise pour définir la source des balises <audio> et <video>.

<strong> : Balise pour mettre en valeur du texte, c’est à dire en gras.

<sub> : Balise indice.

<sup> : Balise exposant.

<time> : Balise pour afficher une date ou une heure.

<video> : Balise pour afficher une vidéo.

Il y a aussi des balises pour les listes, les tableaux, les formulaires et bien d’autres choses. Je vous ai énuméré les principales qui vont vous permettre de bien débuter sur vos page HTML. Après, je vous recommande de voir les sites qui vous en font un inventaire complet comme http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/ ou qui vous donne des exemples comme le site anglais http://www.quackit.com

Pour vérifier qu’un navigateur supporte la balise HTML, voir le site http://caniuse.com

4. Définitions autour du HTML5 et CSS3

Navigateurs : Un navigateur, c’est ce qui vous permet de consulter ce blog par exemple. Tous le monde les connait car ils ne sont pas si nombreux que cela en fait ! Je vous conseillerai d’en avoir au minimum deux sur votre ordinateur, même si vous n’en utilisez réellement qu’un seul. Pour quelle raison en avoir deux ? A cause des virus et malwares que vous pouvez rencontrer sur internet, il peut bloquer votre navigateur et vous empêcher de l’utiliser. Dans ce cas vous êtes bien content de pouvoir utiliser un autre navigateur pour télécharger à nouveau votre navigateur favoris après l’avoir désinstallé et scanné votre anti-virus favoris.

Police de caractères : le texte qui est affiché dans un navigateur peut avoir différentes formes, c’est ce que l’on appelle la police. Internet à été très longtemps le parent pauvre sur ce sujet car on ne pouvait afficher qu’un nombre limité de police. Cela a considérablement changé de nos jours car une grande partie des internautes disposent d’un débit assez rapide, ce qui permet de charger ces nouvelles polices.

Métadonnées : Les métadonnées, c’est un peu ce qui se passe en coulisse et qui permet aux moteurs de recherche de savoir de quoi vous voulez parler. Si vous voulez en savoir plus sur ce sujet, cherchez du côté du web semantique où comment l’humain peut dialoguer avec la machine.


5. Définitions pour les 7 à 77 ans

Comme je l’ai indiqué dans mes précédents articles, je fais lire ces articles à mes enfants et il y a certains mots que j’utilise dans le langage courant et qui ne font pas encore parti de leur vocabulaire. C’est dans cette partie que vous y trouverez leurs définitions.

néophyte : personne qui ne connait pas grand chose à un métier, comme par exemple la programmation. On vit dans un monde de plus en plus complexe où on ne peut pas tout connaître; A l’inverse on serait aussi perdu si on se retrouvait sur une île déserte, comme Robinson Crusoe, en découvrant que l’on ne sait pas forcément faire les choses les plus simples.

amphase : mettre en avant un mot ou un ensemble de mots.

6. Conclusion

Comme vous l’avez constaté, cet article est court ! Plus sérieusement je n’ai pas voulu faire un sujet détaillé sur le HTML et le CSS car mon but premier était de vous donner une première approche, en essayant de vous donner les informations les plus importantes. J’espère vous avoir donné envie d’en savoir plus et si c’est le cas je vous invite à consulter le site suivant : Open Class Rooms : HTML5 & CSS3

Cet article a été vu 10 fois


Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/32/d223306996/htdocs/wordpress-2016/wp-includes/class-wp-comment-query.php on line 399

Laisser un commentaire

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

* Copy This Password *

* Type Or Paste Password Here *