Les différents codes HTML

Avant toute chose ce document n'est pas un cours, il n'est qu'un mémo destiné à moi même avant toute chose :o et pourquoi pas aux débutants (que je suis au moment ou j'écris cela), certains éléments peuvent paraitrent mal dit, de ce fait je vous encourage si vous avez des lacunes à visiter le cours de Mathieu Nebra sur le site Openclassrooms qui apporte toutes les informations nécéssaire à la bonne compréhension des tableaux. Certains screen ainsi que certaines phrases sont tirés de ce même cours.

La couleur rouge est une balise, la verte représente un attribut tandis que la jaune représente une valeur. Ces couleurs sont là pour illustrer, en pratique elles apparaissent comme cela dans l'éditeur de texte "sublime text".

Une image de la base du HTML
Voici le départ d'une page web

Grille des balises HTML obligatoires

Balises de premier niveau

Voici l'ordre des balises obligatoires sur une nouvelle page html.

Nom Description
<!doctype html> Le document HTML commence obligatoirement par cette balise.
<html lang="fr" /> Celle ci suis la précédente, elle englobera tout le contenu de la page.
<head> Ici l'en-tête dans laquelle nous allons imbriquer les balises d'en-tête. Cette balise ne contiendra pas plus.
Les informations contenus ne sont pas affichées à l'écran.
<body> Cette balise contiendra le corps de la page, soit toutes les autres balises possible, tout son contenu sera affiché à l'écran.

Balises d'en-tête

Nom Description
<meta charset="utf-8" /> Balise orpheline d'en tête qui représente l'encodage, elle est englobée par <head>.
<link rel="stylesheet" href="emplacement du fichier css" /> Cette balise orpheline envoie vers un fichier css externe,elle est englobée par <head>.
<Title> Cela sera le titre de la page du navigateur, elle est englobée par <head>.

Grille de balises de structure de texte

Ici nous avons bon nombre de balises qui se contiendrons dans le <body>

Balises structurantes

Ces balises ont été introduites par HTML5 (elles n'existaient pas avant) et vont nous permettre de dire : « Ceci est mon en-tête », « Ceci est mon menu de navigation », etc.

Nom Description
<header> La plupart des sites web possèdent en général un en-tête, appelé header en anglais. On y trouve le plus souvent un logo, une bannière, le slogan de votre site…S
<nav> Cette balise permet de regrouper tout les liens de navigation du site.
<footer> À l'inverse de l'en-tête, le pied de page se trouve en général tout en bas du document. On y trouve des informations comme des liens de contact, le nom de l'auteur, les mentions légales, etc.
<aside> Cette balise est conçue pour contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).
<article> Celle-ci sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site.
Une représentation
Résumé en image

Balises de texte

Nom Description
<!--commentaire--> Ceci est une balise qui est écrite que dans le code, elle peux servir de mémo, elle ne s'affichera pas à l'écran.
<p> Ceci est un paragraphe, pour faire un saut de ligne il faudra rajouter un paragraphe. Pour revenir à la ligne on utilisera <br />.
<br /> Balise orpheline pour revenir à la ligne, doit être obligatoirement contenue dans un paragraphe.
<hr /> Balise créant une ligne de séparation horizontale.
<h1> Cette balise indique un titre, "h" pouvant aller de 1 pour "titre trés important" à 6 "titre trés peu important".
<em> Balise utilisée pour mettre un peu en valeur du texte. Ne pas se fier à l'affichage sans css, ne veux pas dire italique.
<strong> Balise utilisée pour mettre beaucoup en valeur du texte. Ne pas se fier à l'affichage sans css, ne veux pas dire gras.
<mark> Balise visant à marquer du texte, il sera surligné à l'écran.
<a; href="lien.html"> Balise pour créer des liens, l'attribut "href" est obligatoire et peux contenir une ancre à condition d'avoir ajouté un id.
On peux créer une ancre vers ces liens en terminant la valeur par #textequelonveuxsansespace permettant ainsi de naviguer vers un endroit de la page précis plus rapidement.

Balises de liste

Nom Description
<ul> Balise de liste à puces.
<ol> Balise de liste numérotée.
<li> Cette balise doit se contenir obligatoirement dans une balise <ol> ou bien une balise <ul>. Elle contiendra notamment les éléments de la liste.

Balises génériques

On a inventé deux balises dites universelles, qui n'ont aucune signification particulière, elle servent à sélectionner un mot ou un ou groupe de balise pour pouvoir appliquer les modifications voulues.

Nom Description
<span> Balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement.Les balises <strong> et <em> sont de la même famille.
<div> Balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille.

Balises des tableaux

Nom Description
<table> C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.
<tr> indique le début et la fin d'une ligne du tableau.
<td> indique le début et la fin du contenu d'une cellule.
<th> C'est la ligne d'en-tête du tableau, comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tête.
<caption> Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau.
<thead> Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties.
Pour cela, il existe des balises HTML qui permettent de définir les trois « zones » du tableau, donc celle ci fait parti, ainsi que les deux suivantes.*
<tbody> Indique le pied d'un grand tableau.
<tbody> Indique le corps d'un tableau.
Un tableau en plusieurs parties

A noter les cellules par défaut seront espacées, pour les coller il faudra utiliser la propriété css suivante.

Certains attributs peuvent être utiles dans certains cas, ils sont inscrits dans ce tableau.

*Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale <tbody>. Le navigateur se chargera d'afficher chaque élément au bon endroit.

Balises des formulaires

Nom Description
<form> Tout comme un tableau, cette balise indique le début et la fin du formulaire. Cette balise est suivi par des attributs method et action.
Cependant pour écrire du texte dans un formulaire il faudra obligatoirement mettre des balises block telle que <p>
<label> Cette balise sert de libéllé pour indiquer à l'utilisateur ce qu'il devra inscrire dans l'encart désigné par la balise suivante.
Cette balise aura besoin d'attributs comme for qui reliera à une zone de texte si elle possède un id.
<input /> Dans un formulaire cette balise sert à créer une zone de texte monoligne, pour remplir les champs indiqué par le libéllé, des attributs seront nécéssaires tels que: type, name, id, size...
<textarea> Cette balise sert à créer une zone de texte multi-lignes.
Comme pour tout autre élément du formulaire, il faut lui donner un nom avec name et utiliser un <label> qui explique de quoi il s'agit. Pour agrandir la zone on utlisera le CSS.
Pour pré-remplir cette zone de texte, on n'utilisera pas l'attribut value mais on écrira simplementle texte par défaut.
<select> Indique le début et la fin d'une liste déroulante. Cette balise aura un attribut name, et on imbriquera les balises suivantes dedans.
<option> Balise qui s'imbrique dans <select> permettant de définir un choix dans un formulaire, il faudra autant de balises que de possibilités de réponses.
Cette balise aura besoin de l'attribut value.
<optgroup> Permet de grouper les options. L'attribut label est necessaire pour nommer la catégorie.
<fieldset> Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>.
<legend> Chaque <fieldset> peux contenir cette balise qui permet d'ajouter une légende à la catégorie.

Ici vous avez la liste des attributs et valeurs dont toutes ces balises ont besoin.

Balises images, audio, vidéo

Nom Description
<img /> La balise doit être accompagnée de deux attributs obligatoires : src qui permet d'indiquer où se trouve l'image (chemin absolu ou relatif) et alt qui veux dire "texte alternatif".
Celui-ci s'affichera si le site ne parvient pas a afficher les images, ou bien pour les navigateurs pour personnes non-voyante. On peux tres bien ajouter un titre à l'image avec l'attribut qui convient.
Une image doit se trouver dans un paragraphe si elle n'apporte aucune compréhension au texte ou une figure si elle doit illustrer le texte!
<figure> La balise <figure> a un rôle avant tout sémantique. Cela veut dire qu'elle indique à l'ordinateur que l'image a du sens et qu'elle est importante pour la bonne compréhension du texte.
Elle est souvent accompagnée de la balise <figcaption> qui permet d'ajouter une légende à celle-ci.
<audio> Balise permettant d'inserer une piste audio, elle doit être accompagné de bon nombres d'attributs pour la personnaliser.
<video> Cette balise permet d'inserer une vidéo, tout comme l'audio il faut la personnaliser.
<source> Cette balise peux s'inclure dans une des deux précédante, dans le cas où l'on veux proposer plusieurs format audio ou vidéo au navigateur pour qu'il choisisse le plus pertinent pour lui. L'attribut src est à rajouter.

Vous trouverez les attributs nécéssaires à ces balises en cliquant la.


Grille des attributs et des valeurs

Ici des attributs qui se placent dans des balisent afin de créer : ancre, repère, cible...

Liste de quelques attributs et valeurs

Nom Description
class "Class" est un attribut qui permet d'ajouter une valeur utilisable plusieurs fois pour repérer une balise et ainsi la modifier en css.
id "id" est un attribut qui permet d'ajouter une valeur unique pour repérer une balise de texte à ancrer et aussi la modifer en css.
title Attribut facultatif que l'on peux rajouter aux balises <a> visant à afficher un texte lors du survol de celui-ci.
target="_blank" Ici l'attribut target qui fonctionne avec la valeur _blank qui permet d'ouvrir le lien vers une nouvelle page.
href="mailto:votrenom@messagerie.com" Pour faire envoyer un mail au visiteur, rien de plus simple il suffit d'attacher cette valeur à l'attribut href.
href="monfichier.zip" Même chose que le mail, il suffit de remplacer la valeur par le nom du fichier en question, le navigateur lancera tout seul le telechargement au clic.
<td colspan="2"> Cet attribut qui se place dans une balise <td> sert à fusionner des colonnes ou des lignes d'un tableau, dans cet exemple il s'agira de colonnes.
Pour fusionner des lignes on utlisera l'attribut rowspan. Il faudra aussi indiquer une valeur en chiffre, soit autant de cellules que l'on désire.

method="get" Cet attribut qui se place dans une balise <form>, indique par quel moyen les données vont être envoyées au destinataire.
Il peux prendre deux valeurs: get, méthode peu adaptée qui est limité à 255 caractères, ou avec la valeur post que l'on utilisera dans 99% des cas, car elle permet d'envoyer beaucoup d'informations.
action C'est l'adresse de la page ou du programme qui va traiter les informations que l'utilisateur a rempli dans un formulaire.
type="text" Dans un formulaire cet attribut s'insère dans une balise <input />, avec la valeur text il indiquera une zone de texte.
Si on lui met la valeur password les caractères seront cryptés.
La valeur email indiquera au navigateur qu'il faudra rentrer une adresse mail ici.
La valeur url indiquera au navigateur qu'il faut rentrer une adresse absolue .
La valeur tel indiquera au navigateur qu'un numéro de telephone est recquis.
La valeur number permettra de saisir un nombre entier. Inclus facultativement dans ce cas les attributs: min, max, step.
La valeur range permet de selectionner un nombre avec un curseur, et peux avoir les êmes attributs que number.
La valeur color permet de saisir une couleur.
Les valeurs time, date, week, month, datetime, datetime-local permettent toutes d'indiquer un affichage de date plus ou moins ciblé.
La valeur search permet de créer un champ de recherche.
La valeur checkbox permet de créer une case à cocher. Ne pas oublier d'utiliser un <label>
La valeur radio permet de faire un choix (et un seul) parmis une liste. Elles doivent être organisées en groupe, les options du même groupe on le même name, mais chaque option à une value différente.
La valeur submit permet de créer un bouton d'envoie vers la page choisi dans l'attribut action.
La valeur reset permet de faire une remise à zéro du formulaire.
La valeur image est l'équivalent de submit, mais présenté sous forme d'image, ne pas oublier d'insérer l'url avec l'attribut src.
La valeur button n'aura aucun effet par défaut mais est généralement utilisé en javascript pour exécuter des actions sur la page.
name Dans un formulaire cet attribut permettra de donner un nom à un élément, qui servira à reconnaitre celui-ci pour le traitement des informations (en php par exemple).
size Dans un formulaire on donnera cet attribut à la balise <input /> pour agrandir le champ.
maxlength Dans un formulaire on donnera cet attribut à la balise <input /> pour limiter le nombre de caratèeres.
value Dans un formulaire on donnera cet attribut à la balise <input /> pour pré-remplir un champ par défaut.
placeholder Dans un formulaire on donnera cet attribut à la balise <input /> pour donner une indication au visiteur sur quoi écrire dans la zone de texte.
for Attribut qui suit un <label>, qui relie à une zone de texte dont l'id correspond.
rows Attribut qui pour la balise <textarea>, qui indique le nombre de lignes de texte pouvant être affichées simultanément.
cols Attribut qui pour la balise <textarea>, qui indique le nombre de colonnes de texte pouvant être affichées simultanément.
checked Permet de faire en sorte qu'une case soit cochée par défaut.
autofocus Vous pouvez placer automatiquement le curseur dans l'un des champs de votre formulaire avec cet attribut.
required Rend un champ obligatoire, si le champ est vide le navigateur indiquera à l'utilisateur que le champ doit être rempli.

controls Attribut servant à rajouter les boutons lecture, pause et la barre de défilement à une piste audio ou vidéo.
width Permet de modifier la largeur de l'outil audio ou vidéo.
loop Permet de créer une boucle avec la piste audio ou vidéo.
autoplay La piste audio ou vidéo sera jouée dès le chargement de la page.
preload Indique si la piste audio ou vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs suivantes:
auto: le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
metadata: charge uniquement les métadonnées (durée, etc.).
none: pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.
poster Image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une !