Création d'une page web

La page web qui s'affiche dans la fenêtre d'un navigateur est générée à partir d'un simple fichier texte. Ce fichier est enregistré avec l'extension .html et il est écrit en utilisant 2 langages : le HTML et le CSS.

Le langage de base est le langage de description HTML (HyperText Markup Langage). Il permet de structurer le contenu de la page web, comme les titres, les paragraphes, les listes, les tableaux, etc.

Le second langage est le CSS (Cascading Style Sheets). Celui-ci permet de faire la mise en forme, comme le choix des polices de caractères, les couleurs, etc. Il fonctionne en attribuant aux balises HTML des propriétés qui définissent leur style.

Enfin il est possible d'ajouter de l'interactivité à une page web en utilisant le langage de programmation JavaScript.


Partie 1 : le langage HTML

Organisation générale

Le squelette d'un fichier .html est le suivant : 

<!DOCTYPE html>
<html lang="fr">
 
<head>
<meta charset="uft-8"/>
<title>Titre de la page</title>
<meta name="description" content="Résumé de la page."/>
<style>

...

</style>
</head>

<body>

...

</body>

</html>

Le langage HTML est un langage à balisage, par exemple l'ensemble du code de la page figure entre les balises :

<html lang="fr"> et </html>.

La balise ouvrante est <html lang="fr"> et la balise fermante est </html>. Ainsi les noms des balises sont entre chevrons et le nom de la balise fermante débute par un slash. Une balise ouvrante peut contenir un ou plusieurs attributs. Par exemple l'attribut lang="fr" spécifie que le contenu de la page HTML est rédigé en langue française.

Le code HTML de la page se décompose en deux parties :

Le corps commence généralement par un titre principal. Il peut-être constitué de plusieurs sous-sections et de paragraphes.

Quelques éléments du langage HTML

Les titres

Pour afficher un titre il faut utiliser :

Les paragraphes

Le contenu d'un paragraphe doit figurer entre des balises <p> et </p>. Pour faire un saut de ligne dans un paragraphe il faut utiliser une balise <br/> (elle n'a pas de balise fermante séparée, mais elle se termine par / : il s'agit d'une balise auto-fermante).

Les hyperliens

Les hyperliens permettent de naviguer de pages en pages. Pour inclure un lien il faut utiliser une balise <a> dont l'attribut href indique le nom du fichier de la page de destination.

Exemple : <a href="une_autre_page.html">Aller à l'autre page</a>

Les images

Pour inclure une image dans un paragraphe il faut utiliser une balise <img>. L'attribut src doit obligatoirement être défini avec le nom du fichier qui contient l'image. Comme <br/>, la balise <img> est auto-fermante.

Exemple : <img src="mon_image.jpeg"/>

Pour plus d'informations, consulter le mémento des balises HTML5

Mémento des balises HTML5

Cette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines dans le cours, mais il y en a d'autres que nous n'avons pas eu l'occasion d'étudier. Généralement, les balises que nous n'avons pas étudiées sont des balises un peu plus rarement utilisées. Peut-être trouverez-vous votre bonheur dans ce lot de nouvelles balises.

Vous pouvez vous servir de cette annexe comme d'un aide-mémoire lorsque vous développez votre site web.

Attention, j'insiste : cette annexe n'est pas complète et c'est volontaire. Je préfère mettre moins de balises et garder seulement celles qui me semblent les plus utiles dans la pratique.

Mémento

Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web.

BaliseDescription
<html>Balise principale
<head>En-tête de la page
<body>Corps de la page

Balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> :

BaliseDescription
<link />Liaison avec une feuille de style
<meta />Métadonnées de la page web (charset, mots-clés, etc.)
<script>Code JavaScript
<style>Code CSS
<title>Titre de la page

Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

BaliseDescription
<header>En-tête
<nav>Liens principaux de navigation
<footer>Pied de page
<section>

Section de page
<article>Article (contenu autonome)
<aside>Informations complémentaires

Balises de structuration du texte

BaliseDescription
<abbr>Abréviation
<blockquote>Citation (longue)
<cite>Citation du titre d'une œuvre ou d'un évènement
<q>Citation (courte)
<sup>Exposant
<sub>Indice
<strong>Mise en valeur forte
<em>Mise en valeur normale, italique
<mark>Mise en valeur visuelle
<h1>Titre de niveau 1
<h2>Titre de niveau 2
<h3>Titre de niveau 3
<h4>Titre de niveau 4
<h5>Titre de niveau 5
<h6>Titre de niveau 6
<img />Image
<figure>Figure (image, code, etc.)
<figcaption>Description de la figure
<audio>Son
<video>Vidéo
<source>Format source pour les balises <audio> et <video>
<a>Lien hypertexte
<br />Retour à la ligne
<p>Paragraphe
<hr />Ligne de séparation horizontale
<address>Adresse de contact
<del>Texte supprimé
<ins>Texte inséré
<dfn>Définition
<kbd>Saisie clavier
<pre>Affichage formaté (pour les codes sources)
<progress>Barre de progression
<time>Date ou heure

Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

BaliseDescription
<ul>Liste à puces, non numérotée
<ol>Liste numérotée
<li>Élément de la liste
<dl>Liste de définitions
<dt>Terme à définir
<dd>Définition du terme

Balises de tableau

BaliseDescription
<table>Tableau
<caption>Titre du tableau
<tr>Ligne de tableau
<th>Cellule d'en-tête
<td>Cellule
<thead>Section de l'en-tête du tableau
<tbody>Section du corps du tableau
<tfoot>Section du pied du tableau

Balises de formulaire

BaliseDescription
<form>Formulaire
<fieldset>Groupe de champs
<legend>Titre d'un groupe de champs
<label>

Libellé d'un champ
<input />Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea>Zone de saisie multiligne
<select>Liste déroulante
<option>Élément d'une liste déroulante
<optgroup>Groupe d'éléments d'une liste déroulante

Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l'une est inline, l'autre est block.

BaliseDescription
<span>Balise générique de type inline
<div>Balise générique de type block

Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.


Masquer

Les caractères spéciaux

Il est utile de connaître le code de certains caractères spéciaux. Par exemple pour les symboles < et > qui peuvent prêter à confusion avec les balises... ou on a simplement besoin d'un symbole particulier (α, ©)

Pour plus d'informations, consulter la liste des caractère spéciaux


Caractères alphabétiques accentués et spéciaux

caractère

code texte

code numérique
á &aacute; &#225;
Á &Aacute; &#193;
â &acirc; &#226;
 &Acirc; &#194;
à &agrave; &#224;
À &Agrave; &#192;
å &aring; &#229;
Å &Aring; &#197;
ã &atilde; &#227;
à &Atilde; &#195;
ä &auml; &#228;
Ä &Auml; &#196;
æ &aelig; &#230;
Æ &AElig; &#198;
ç &ccedil; &#231;
Ç &Ccedil; &#199;
é &eacute; &#233;
É &Eacute; &#201;
ê &ecirc; &#234;
Ê &Ecirc; &#202;
è &egrave; &#232;
È &Egrave; &#200;
ë &euml; &#235;
Ë &Euml; &#203;
í &iacute; &#237;
Í &Iacute; &#205;
î &icirc; &#238;
Î &Icirc; &#206;
ì &igrave; &#236;
Ì &Igrave; &#204;
ï &iuml; &#239;
Ï &Iuml; &#207;
ñ &ntilde; &#241;
Ñ &Ntilde; &#209;
ó &oacute; &#243;
Ó &Oacute; &#211;
ô &ocirc; &#244;
Ô &Ocirc; &#212;
ò &ograve; &#242;
Ò &Ograve; &#210;
ø &oslash; &#248;
Ø &Oslash; &#216;
õ &otilde; &#245;
Õ &Otilde; &#213;
ö &ouml; &#246;
Ö &Ouml; &#214;
œ &oelig; &#339;
Π&OElig; &#338;
š &scaron; &#353;
Š &Scaron; &#352;
ß &szlig; &#223;
ð &eth; &#240;
Ð &ETH; &#208;
þ &thorn; &#254;
Þ &THORN; &#222;
ú &uacute; &#250;
Ú &Uacute; &#218;
û &ucirc; &#251;
Û &Ucirc; &#219;
ù &ugrave; &#249;
Ù &Ugrave; &#217;
ü &uuml; &#252;
Ü &Uuml; &#220;
ý &yacute; &#253;
Ý &Yacute; &#221;
ÿ &yuml; &#255;
ÿ &Yuml; &#376;

Caractères généraux

caractère

code texte

code numérique
espace &nbsp; &#160;
- &shy; &#173;
" &quot; &#34;
« &laquo; &#171;
» &raquo; &#187;
‹ &lsaquo; &#8249;
› &rsaquo; &#8250;
“ &ldquo; &#8220;
” &rdquo; &#8221;
„ &bdquo; &#8222;
' &apos; &#39;
‘ &lsquo; &#8216;
’ &rsquo; &#8217;
‚ &sbquo; &#8218;
… &hellip; &#8230;
! ! &#33;
¡ &iexcl; &#161;
? ? &#63;
¿ &iquest; &#191;
( ( &#40;
) ) &#41;
[ [ &#91;
] ] &#93;
{ { &#123;
} } &#125;
¨ &uml; &#168;
´ &acute; &#180;
` ` &#96;
^ ^ &#94;
ˆ &circ; &#710;
~ ~ &#126;
˜ &tilde; &#732;
¸ &cedil; &#184;
# # &#35;
* * &#42;
, , &#44;
. . &#46;
: : &#58;
; ; &#59;
· &middot; &#183;
• &bull; &#8226;
¯ &macr; &#175;
‾ &oline; &#8254;
- - &#45;
– &ndash; &#8211;
— &mdash; &#8212;
_ _ &#95;
| | &#124;
¦ &brvbar; &#166;
† &dagger; &#8224;
† &Dagger; &#8225;
§ &sect; &#167;
&para; &#182;
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
& &amp; &#38;
@ @ &#64;
/ / &#47;
\ \ &#92;
◊ &loz; &#9674;
♠ &spades; &#9824;
♣ &clubs; &#9827;
♥ &hearts; &#9829;
♦ &diams; &#9830;
← &larr; &#8592;
↑ &uarr; &#8593;
→ &rarr; &#8594;
↓ &darr; &#8595;
↔ &harr; &#8596;

Monnaies

caractère

code texte

code numérique
¤ &curren; &#164;
€ &euro; &#128;
$ $ &#36;
¢ &cent; &#162;
£ &pound; &#163;
¥ &yen; &#165;
ƒ &fnof; &#402;

Sciences

caractère

code texte

code numérique
° &deg; &#176;
µ &micro; &#181;
< &lt; &#60;
> &gt; &#62;
≤ &le; &#8804;
≥ &ge; &#8805;
= = &#61;
≈ &asymp; &#8776;
≠ &ne; &#8800;
≡ &equiv; &#8801;
± &plusmn; &#177;
− &minus; &#8722;
+ + &#43;
× &times; &#215;
÷ &divide; &#247;
⁄ &frasl; &#8260;
% % &#37;
‰ &permil; &#8240;
¼ &frac14; &#188;
½ &frac12; &#188;
¾ &frac34; &#188;
¹ &sup1; &#185;
² &sup2; &#178;
³ &sup3; &#179;
º &ordm; &#186;
ª &ordf; &#170;
ƒ &fnof; &#402;
′ &prime; &#8242;
′ &Prime; &#8243;
∂ &part; &#8706;
∏ &prod; &#8719;
∑ &sum; &#8721;
√ &radic; &#8730;
∞ &infin; &#8734;
¬ &not; &#172;
∩ &cap; &#8745;
∫ &int; &#8747;

Caractères divers

caractère

code texte

code numérique
→ &rArr; &#8658;
↔ &hArr; &#8660;
∀ &forall; &#8704;
∃ &exist; &#8707;
∇ &nabla; &#8711;
∈ &isin; &#8712;
∋ &ni; &#8715;
∝ &prop; &#8733;
∠ &ang; &#8736;
⊥ &and; &#8743;
⊦ &or; &#8744;
∪ &cup; &#8746;
∴ &there4; &#8756;
∼ &sim; &#8764;
⊂ &sub; &#8834;
⊃ &sup; &#8835;
⊆ &sube; &#8838;
⊇ &supe; &#8839;
⊥ &perp; &#8869;

Caractères divers

caractère

code texte

code numérique
⊕ &oplus; &#8853;
℘ &weierp; &#8472;
ℑ &image; &#8465;
ℜ &real; &#8476;
↵ &crarr; &#8629;
← &lArr; &#8656;
↑ &uArr; &#8657;
↓ &dArr; &#8659;
∅ &empty; &#8709;
∉ &notin; &#8713;
∗ &lowast; &#8727;
≅ &cong; &#8773;
⊄ &nsub; &#8836;
⊗ &otimes; &#8855;
⋅ &sdot; &#8901;
⌈ &lceil; &#8968;
⌉ &rceil; &#8969;
⌊ &lfloor; &#8970;
⌋ &rfloor; &#8971;
< &lang; &#9001;
> &rang; &#9002;
ℵ &alefsym; &#8501;
ϑ &thetasym; &#977;
ϖ &piv; &#982;
ϒ &upsih; &#978;

Alphabet Grec

caractère

code texte

code numérique
α &alpha; &#945;
Α &Alpha; &#913;
β &beta; &#946;
Β &Beta; &#914;
γ &gamma; &#947;
Γ &Gamma; &#915;
δ &delta; &#948;
Δ &Delta; &#916;
ε &epsilon; &#949;
Ε &Epsilon; &#917;
ζ &zeta; &#950;
Ζ &Zeta; &#918;
η &eta; &#951;
Η &Eta; &#919;
θ &theta; &#952;
Θ &Theta; &#920;
ι &iota; &#953;
Ι &Iota; &#921;
κ &kappa; &#954;
Κ &Kappa; &#922;
λ &lambda; &#955;
Λ &Lambda; &#923;
μ &mu; &#956;
Μ &Mu; &#924;
ν &nu; &#957;
Ν &Nu; &#925;
ξ &xi; &#958;
Ξ &Xi; &#926;
ο &omicron; &#959;
Ο &Omicron; &#927;
π &pi; &#960;
Π &Pi; &#928;
ρ &rho; &#961;
Ρ &Rho; &#929;
σ &sigma; &#963;
ς &sigmaf; &#962;
Σ &Sigma; &#931;
τ &tau; &#964;
Τ &Tau; &#932;
υ &upsilon; &#965;
Υ &Upsilon; &#933;
φ &phi; &#966;
Φ &Phi; &#934;
χ &chi; &#967;
Χ &Chi; &#935;
ψ &psi; &#968;
Ψ &Psi; &#936;
ω &omega; &#969;
Ω &Omega; &#937;

Masquer


Aller à la partie 2 : le langage CSS