Architecture d'une page html

Dernière mise à jour le par @karamel .

le HTML

language de balisage

le HTML est un language de balisage délimitées par des crochets < et > une balise est ouvrante et fermante. Il existe deux possibilite.

soit la balise est un conteneur comme par exemple un div et la nous avons deux balises

distincte une ouvrante et une fermante.

<div>du contenu du contenu....etc</div>

soit la balise n'est pas un conteneur comme par exemple une image et la il n'y a qu'une seul

balise qui est ouvrante et fermante.

<img src='nom_image.jpg' />

La structure

le doctype

la première balise est ce que l'on appel le doctype et spécifie la version du langage html utilisé par la page elle sert au navigateur afin d'interprété la page en fonction de la versions du html .

<!doctype html>

le document (html)

ensuite nous avons le document qui n'est autre que la page et qui est encadré par la balise HTML

tous le contenu de la page se trouve entre ces deux balises

<!doctype html>
<html>
</html>

l'entete ( header)

a l'interieur du document nous avons en premier la balise HEAD qui contient le titre de la page, les métas, donné le css ou des liens vers un ou des fichier css externe et on peut aussi y inserer du js ou comme le css des lien vers un ou des fichier js externe.

le titre

<title>un titre de page</title>

: Titre de la page web qui généralement est affiché en haut a gauche du navigateur

les méta donné

<meta .../>

:donne des indication sur la façon d'interpréter le document (encodage des caractères, type de media,description), permet la redirection automatique vers une autre page, permet d'interdire le référencement et la mise en cache de la page par les moteurs, précise la langue de la page...etc.

le style

<style></style>

: pour insérer de la mise en page css

<link .../>

: Indique des fichiers liés à la page. généralement des feuille de style et indique la feuille de style a utiliser en fonction Media Queries comme par exemple un ecran.

le javascript

<script...></script>

: Permet d'ajouter des scripts en JavaScript ou un lien vers un fichier js

exemple:

<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href= "chemin/feuille.css">
<script type="text/javascript" src="chemin/fichier_js.js" ></script>
<style type="text/css">
body{
  font-family:Verdana, Geneva, sans-serif;
  background-color:#b2bdc6;
 }
.class1 {
  height:200px;
  width:200px;
  background-image:url("bouton.png");
 }
        </style>
<script type="text/javascript">
function world(){
alert(hello world)
 } 
        </script>
</head>
</html>

le corp de la page (body)

et en dernier ce trouve le corps de la page BODY qui contiendra tous ce qui est vue par
l'internaute, les évènements et du javascript

<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href= "chemin/feuille.css">
</head>
<body>
le contenu de la page
<script type="text/javascript" src="chemin/fichier_js.js" ></script>
</body>
</html>

Liste des balise html

données de document

<head> </head>

: entête du document.

<title> </title>

: titre du document en haut a gache de la fenetre du navigateur.

<meta />

: sert a renseigné le document en fonction de l'attribut name :

meta pour appareil mobile

definir la façon d'interpréter l'affichage de la page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

liste des valeurs possible:

height:

hauteur de fenêtre en pixel, valeur possible device-width ou un entier

width:

largeur de fenêtre en pixel, valeur possible device-height ou un entier

initial-scale:

niveau initial du zoom, valeur possible un entier representant la valeur de zoom

minimum-scale:

niveau minimal du zoom, valeur possible un entier representant la valeur minimal possible du zoom

maximum-scale:

niveau maximal du zoom, valeur possible un entier representant la valeur maximale possible du zoom

user-scalable:

interdir ou autoriser le zoomer , valeur possible yes ou no

Meta générales

Encodage de la page:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Langue de la page:

<meta name="Content-Language" content="fr">

mot clé pour décrire le contenu de la page:

<meta name="Keywords" content="gateau cake cuisine patisserie">

Décrire le contenu de la page:

<meta name="Description" content="recette de pâtisseries">

Décrire le copyright de la page:

<meta name="Copyright" content="dupon & cie">

Décrire l'auteur de la page:

<meta name="Author" content="dupond">

Décrire logiciel utilisé pour réaliser la page:

<meta name="generator" content="notepad++" />

Definir si la page doit ou ne doit pas être sauvegardée dans la cache du navigateur:

<meta http-equiv="pragma" content="no-cache" />

Specifier l'url de la page

<meta name="Identifier-Url" content="http:\patisserie.com">

Meta spécifiques aux robots

Robots: instruction pour le référencement de la page par les robots (all, none, index, noindex, follow, no-follow ).

préciser une date d'expiration de la page:

<meta http-equiv="expires" content="Tue, 15 Aug 2020 18:00:00 GMT" />

Rating: niveau d'accès de la page (tous public, adulte, restreint, plus de 14 ans ).

Distribution: niveau d'accès de la page (globale, local, intranet)

Geography: indication sur la localisation de la page.

Category: catégorie de la page.

Revisit-After: nouvelle visite de la page en nombre de jour

autres attributs :

imposer la redirection de la page en fonction de la durée précisé:

<meta http-equiv="refresh" content="3; url=http://example.com/">

imposer le rafraichissement de la page en fonction de la durée précisé:

<meta http-equiv="refresh" content="30" />
<link />

: Indique des fichiers liés à la page. généralement des feuille de style et dans ce cas permet d'indique le Media Queries utilisé comme par exemple un écran.

exemple:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />

liste des Media Queries :

screen : écrans

handheld : Périphériques portatifs type mobiles

print : documents sur écran en aperçu avant impression

aural : synthétiseurs vocales

braille : appareils braille à retour tactile

embossed: appareils pour impression en braille

projection : pour Projecteurs

tty : Terminal/police à pas fixe

tv : pour téléviseur

all : pour tous type de périphériques

a ces éléments s'ajoute une liste d'option qui seront combinés a trois mots clés:

only : seulement.

and: et.

not: non.

exemple

<link rel="stylesheet" media="screen and (width: 400px)" href="petit_taille.css" type="text/css" />

liste des options:

color ; support de la couleur (bits/pixel)
color-index ; périphérique avec table de couleurs indexées
aspect-ratio : ratio du périphérique de sortie (4/3, 16/9)
device-aspect-ratio ; ratio de la zone d'affichage
device-height : taille en hauteur du périphérique
device-width : taille en largeur du périphérique
resolution : résolution du périphérique (en dpi, dppx, dpcm)
height : taille en hauteur de la zone d'affichage
width : taille en largeur de la zone d'affichage
grid : périphérique bitmap ou grille (ex : lcd)
monochrome : peripherique en niveaux de gris ou monochrome (bits/pixel)
orientation : orientation du périphérique (landscape ou portait)
scan : type de balayage des téléviseurs (interlace ou progressive)

pour les options ayants de dimensions elles peuvent êtres precede de min- ou max-

exemple

<link rel="stylesheet" media="screen and (max-width: 400px)" href="petit_taille.css" type="text/css" />

icon :

affiche un icone dans la barre d'adresse a gauche de l'adresse

exemple :

<link rel="icon" type="image/ico" href="icc.ico" />
<style> </style>

: pour insérer du style css.

<base>

: URL de base à utiliser pour toutes les URLs relatives

balise de scripts

<script></script>

: pour lier la page a un fichier js externe ou pour insérer du js

<noscript> </noscript>

: quand le javascript est désactiver le navigateur parcoure la balise dans laquel on met du html qui pourrait par exemple rediriger l'internaute vers une page spécifique

Les balises de formulaires

<form></form>

: Balise renfermant un formulaire en entier.

 <input />

: la balise input avec le type englobe l'ensemble des éléments de saisie d'un formulaire.

liste des types :

submit : valide l'envoie du formulaire vers le serveur.

reset : Rétablit les valeurs par défaut des éléments du formulaire.

checkbox : affiche des case a cocher.

radio : affiche des bouton radio a sélection unique.

text : affiche une zone de saisie de texte simple.

button : affiche un bouton.

file : affiche le bouton parcourir afin de sélectionner un fichier dans l'ordinateur.

hidden : cree une zone de texte invisible.

password : une zone de saisie de mot de passe le texte est representé par des asterix.

color : affiche une zone de saisie de texte accompagné d'un colorpicker.

date : affiche un zone de saisie de texte accompagné d'un calendrier.

datetime : affiche une zone de saisie de texte accompagné d'un calendrier.

datetime-local : affiche une zone de saisie de texte accompagné d'un calendrier.

month : affiche une zone de saisie de texte accompagné d'un calendrier.

time : affiche une zone de saisie de texte accompagné d'un calendrier.

week : affiche une zone de saisie de texte accompagné d'un calendrier.

email : affiche une zone de saisie de texte pour email.

image : affiche une image.

number : affiche une zone de saisie de texte accompagné d'un selecteur de chiffre.

range : affiche un curseur de sélection de valeur numérique.

search :

tel : affiche une zone de saisie de numero de telephone.

url : affiche une zone de saisie d'url.

<datalist></datalist>

: utilisé conjointement avec un input de type texte affiche une liste d'option.

<fieldset></fieldset>

: permet de regrouper plusieurs elements d'un formulaire.

<legend /></legend>

: représente le titre du fieldset pour le contenu de son élément parent .

<button></button>

: affiche un bouton.

<label></label>

; Étiquette utilisée en tant que titre d'une commande.

<select></select>

:affiche une liste deroulante.

<option></option>

: utilisé conjointement avec un select contient chaques choix du selecte.

<optgroup></optgroup>

: créé des groupes d'option a l'intérieur d'un selecte le texte étant en gras

<progress></progress>

: affiche une barre de progression.

<textarea></textarea>

: affiche une zone de saisie de texte.

<keygen></keygen>

:

<output></output>

: représente le résultat d'un calcul effectué par un script dans un formulaire web.

<meter></meter>

: créé un vumètre linéaire similaire a une barre de progression

les balise de tableau

<table></table>

: la balise contenant le tableau.

<thead></thead>

: représente l'entête d'un tableau ( texte en gras ).

<tbody></tbody>

: le corp du tableau.

<tr></tr>

: représente une ligne d'un tableau.

<td></td>

: représente une colonne d'un tableau.

<th></th>

: cellule representant un en-tête ( texte en gras ).

<tfoot></tfood>

:

<colgroup></colgroup>

: pour regrouper des colones globalement.

<col />

: pour regrouper des colognes individuellement utilisé avec colgroup.

<caption></caption>

: pour donner un titre au tableau titre qui s'affiche au dessus ou au dessous du tableau.

les balises de contenu

<img />

: affiche une image en specifiant le chemin de l'image (src).

<iframe></iframe>

: inserre une iframe.

<canvas></canvas>

: zone d'affichage pour canvas.

<svg></svg>

: zone d'affichage pour svg.

<video.></video.>

: inserre un lecteur video.

<audio></audio>

: inséré un lecteur audio.

<source />

: utilisé conjointement avec les balises audio et video spécifie le ou les fichier audio ou video ainsi que leurs type.

<track />

:utilisé conjointement avec les balises audio et video spécifie le fichier de sous titre a utiliser

<object></objet>

: inséré un objet générale de type flash (swf).

<param />

: utilise conjointement avec la balise objet afin de spécifier les paramètre de l'objet.

<map></map>

: inséré une zone réactive map.

<area />

: utilisé conjointement avec la balise map specifie les zone mapé.

<math></math>

:

les balise de sections

<body></body>

: le corp de la page.

<header></header>

: haut de page.

<article></article>

: section contenant des articles ou tout autre contenu.

<section></section>

: pour du flux RSS ou autre de meme type.

<nav></nav>

: section d'une page concentrant des liens hypertexte vers d'autres pages.

<aside></aside>

: section avec du contenu indirectement lié au contenu qui l'entoure.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

: element de titre jouant sur la taille de police .

<hgroup></hgroup>

: représente le titre d'une section.

<footer></footer>

: bas de page.

balise de type block

<div></div>

: balise conteneur qui peut contenir n'importe quelle balise et du texte

<hr />

: affiche une ligne horizontal.

<p></p>

: paragraphe de texte .

<pre></pre>

:affiche un texte pré-formaté. Les blancs et sauts de ligne sont preservé.
<blockquote>

<ol></ol>

: affiche une liste d'éléments ordonnés avec une valeur numérique.

<ul></ul>

: affiche une liste d'éléments non ordonnés.

<li></li>

: utilisé conjointement avec ol ou ul represente une ligne de la liste
<figure>
<figcaption>
<dl> </dl>
<dt> </dt>
<dd></dd>

sémantiques de texte

<a></a>

: pour inserer un lien hypertexte ver une autre page ou dans la page.

<span></span>

: pour insérer du texte afin d''être stylisé indépendamment du reste

<i></i>

: texte en italique.

<em></em>

: texte en italique pour met une emphase sur le texte.

<cite></cite>

: texte en italique contient le titre d'une oeuvre ( un livre une chanson ...etc).

<b></b>

: texte en gras utilisé pour les mots-clés.

<strong></strong>

: texte en gras d'une certaine importance.

<u></u>

: texte souligné.

<s></s>

: texte barré.

<br />

: saut de ligne.

<small></small>

: affiche le texte en petite taille par rapport au texte de la page.

<sup></sup>

: afficher du texte en indice vers le bas.

<sub></sub>

: afficher du texte en indice vers le haut.

<q></q>

: définit une citations courtes, section cité a partir d' une autre source le texte est mis entre guillemet.

<blockquote></blockquote>

définit une citation longue, section cité a partir d' une autre source.

<abbr></abbr>

: parfois souligné par des pointillé représente une abréviation et avec l'attribut tittle fournit une description complète.

<dfn></dfn>

: pour la définition d'un terme.

<code>

</code> : pour insérer du code sans qu'il soit interprété.

<var></var>

: Texte sous forme de variable.

-

A voir également
Ce document intitulé « Architecture d'une page html » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
la poo en javascript par un exemple pratique et visuel
manipuler le Document object model (DOM)
Rejoignez-nous