S1 Balises HTML

Suite Support de cours N1 : Sites Web
Mmento Balises HTML

Balises de premier niveau
Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour
raliser le "code minimal" d'une page web.
Balises
Description
<html>
Balise principale de toute page web. Doit englober tout le code de votre page web.
<head>
En-tte de la page
<body>
Corps de la page
Le code minimal d'une page HTML

Code : HTML
1
2 <!DOCTYPE html>
3 <html>
4
<head>
5
<meta charset="utf-8" />
6
<title>Titre</title>
7
</head>
8
9
<body>
1
</body>
0
1 </html>
1
Balises d'en-tte
Ces balises sont toutes situes dans l'en-tte de la page web, c'est--dire entre <head> et </head> :
Balise
<link />
Description
Cette balise permet d'indiquer certaines informations sur la page web.
On l'utilise le plus souvent pour inclure une feuille de style CSS, comme ceci :
Code : HTML
1 <link rel="stylesheet" href="style.css" />
On peut aussi s'en servir pour 2-3 autres choses :

Code : HTML
1

Balise
Description
2
3
4
5
6
7
8
<link rel="start" title="Accueil" href="index.html" />


<link rel="help" title="Politique d'accessibilit"
href="accessibilite.html" />

<link rel="shortcut icon" type="image/x-icon"
href="favicon.ico" />
La favicon est une icne qui s'affiche gnralement gauche de l'adresse de votre site
sur le navigateur de vos visiteurs. C'est un moyen de personnaliser un peu plus son site.
La balise <meta />
Code : HTML
<meta />
1
2
3
4
5
6
7
8
9
10
11
12
13


<meta charset="utf-8" />

<meta name="author" content="Moimeme" />

<meta name="description" content="Ma page" />

<meta name="keywords" content="html, html5, css, css3" />

<meta name="reply-to" content="monadresse@email.com" />

<meta http-equiv="refresh" content="10; URL=http://www.monsite.com" />
Permet de placer un script.

On l'utilise souvent pour mettre du code Javascript :
Code : HTML
<script>
1 <script>
2 /* Votre script ici */
3 </script>
<style>
Permet de dfinir du code CSS pour la page.

Exemple :
Code : HTML
1 <style>
2 /* Votre code CSS ici */
3 </style>
<title>
Titre de la page web.

Elle a beaucoup d'importance pour les moteurs de recherche (ils donnent de
l'importance aux mots qui se trouvent dans le titre).
Code : HTML
1 <title>Langage HTML</title>
Balises de structuration du texte
Balise
Type
Description
Citation (longue)
Vous devez obligatoirement mettre une balise de paragraphe
l'intrieur du blockquote. Par exemple :
<blockquote> Block
Code : HTML 1 <blockquote>

2
<p>
3
Texte de la citation
4
</p>
5 </blockquote>
<cite>
Inline
Citation du titre d'une oeuvre ou d'un vnement.
<sup>
Inline
Mise en exposant
<sub>
Inline
Mise en indice
<strong>
Inline
Mise en valeur (forte)

Le texte est gnralement mis en gras.
<mark>
Inline
Mise en valeur visuelle.

Le texte est gnralement surlign.
<em>
Inline
Mise en valeur (faible)

Le texte est gnralement mis en italique.
<h6>
Block
Titre de niveau 6
<h5>
Block
Titre de niveau 5
<h4>
Block
Titre de niveau 4
<h3>
Block
Titre de niveau 3
<h2>
Block
Titre de niveau 2
<h1>
Block
Titre de niveau 1
<img />
Inline
Insre une image.

Utilisez les attributs src (pour indiquer l'adresse de l'image)
et alt (pour indiquer un texte de remplacement). Ces 2 attributs sont
obligatoires. Exemple :
Code : HTML
<img src="Templates/images/smiley.png"
1
alt=":)" />
<figure>
Block
Indique la prsence d'une figure (image, code...) illustrant le texte.
<figcaption>
Inline
Description de la figure.
<audio>
Inline
Insre un son.
<video>
Inline
Insre une vido.
<source>
Indique un format possible pour les balises <audio> et <video>.

3
Balise
Type
Description
Lien hypertexte.
Indiquez l'url de destination grce l'attribut href :
<a>
Inline
<br />
Inline
Retour la ligne
<p>
Block
Paragraphe
<hr />
Block
Cre une ligne de sparation horizontale
<address>
Block
Permet d'indiquer une adresse, ou ventuellement l'auteur d'un

document.
Le texte est gnralement mis en italique.
<pre>
Block
Le texte l'intrieur de la balise <pre> sera affich tel qu'il a t tap

dans le code (espaces et entres compris). Une police de taille fixe est
utilise.
<progress>
Inline
Affiche une barre de progression. A utiliser conjointement avec les

attributs value et max.
<time>
Inline
Pour indiquer une date ou une heure.
Code : HTML
1 <a href="index.html"> Accueil</a>
Balises de liste
Cette partie numre toutes les balises HTML permettant de crer des listes (listes puces, listes numrotes, listes
de dfinitions...)
Balise
Type
Description
Liste puces non numrote. Vous devez mettre un <li></li> par lment de
la liste. Exemple :
<ul>
Bloc
k
Code : HTML
1 <ul>
2 <li>Un lment</li>
3 <li>Un autre lment</li>
4 </ul>
Liste puces numrote. Vous devez mettre un <li></li> par lment de la
liste. Exemple :
<ol>
Bloc
k
<li>
listitem
Code : HTML
1 <ol>
2 <li>Elment n1</li>
3 <li>Elment n2</li>
4 </ol>
Permet de crer un lment de liste.
Le type de la balise est particulier car elle n'est ni block ni inline. On dit
qu'elle est de type list-item.
4
Balise
Type
Description
Liste de dfinitions. Vous devez alterner chaque terme <dt> par sa dfinition
<dd>. Exemple :
<dl>
Bloc
k
<dt>
Bloc
k
Code : HTML <dl>

1 <dt>Porte</dt>
2 <dd>Ouverture dans un mur permettant d'entrer et de
3 sortir</dd>
4 <dt>Thtre</dt>
5 <dd>Lieu o l'on reprsente des ouvrages
6 dramatiques</dd>
</dl>
Terme dfinir
Balises de tableau
Balise
Type
Description
Dlimite un tableau. Voici un exemple de tableau simple :
Code : HTML
1 <table>
2
<caption>Passagers du vol 377</caption>
3
4
<tr>
5
<th>Nom</th>
6
<th>Age</th>
7
<th>Pays</th>
8
</tr>
9
10
<tr>
11
<td>Carmen</td>
12
<td>33 ans</td>
13
<td>Espagne</td>
14
</tr>
15
<tr>
16
<td>Michelle</td>
17
<td>26 ans</td>
18
<td>Etats-Unis</td>
19
</tr>
20
<tr>
21
<td>Franois</td>
22
<td>43 ans</td>
23
<td>France</td>
24
</tr>
25 </table>
<table>
Bloc
k
<tr>
Ligne de tableau
<th>
Cellule d'en-tte du tableau (gnralement mise en gras)
<td>
Cellule du tableau
<thead>
Balise non obligatoire permettant d'insrer l'en-tte du tableau.

5
Balise
Type
Description
Si vous choisissez d'utiliser <thead>, <tfoot> et <tbody>, vous devez les
mettre dans l'ordre suivant dans votre code source :
1. <thead>
2. <tfoot>
3. <tbody>
<tbody>
Balise non obligatoire permettant d'insrer le corps du tableau
<tfoot>
Balise non obligatoire permettant d'insrer le pied du tableau
Balises de formulaire
Balise
Type
Description
Dlimite un formulaire.
Vous devrez gnralement donner 2 attributs la balise <form>
<form>
method : indique la mthode d'envoi du formulaire (get ou post).

Si vous ne savez pas quoi utiliser, mettez post.
action : la page vers laquelle le visiteur doit tre redirig lorsqu'il

a valid votre formulaire.
Block
<fieldset> Block
Permet de regrouper plusieurs lments d'un formulaire.

On l'utilise gnralement dans de grands formulaires.
Pour donner un titre votre groupe, utilisez la balise <legend>
<legend>
Inline
Titre d'un groupe dans un formulaire.

A utiliser l'intrieur d'un <fieldset>
<label>
Inline
Titre d'un lment de formulaire.

Gnralement, vous devrez mettre l'attribut for sur cette balise pour
indiquer l'ID de l'lment auquel correspond le label.
<input />
Inline
Champ de formulaire.
Il existe de nombreux types de champs diffrents. Vous choisissez le
type de champ que vous dsirez grce l'attribut type :
Code : HTML
1 
2 <input type="text" />
3 
4 <input type="password" />
5 
6 <input type="file" />
7 
8 <input type="checkbox" />
6
Balise
Type
Description
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8


<input type="radio" />

<input type="button" />

<input type="submit" />

<input type="reset" />

<input type="hidden" />
Pensez donner un nom vos champs grce l'attribut name

<textarea> Inline
Zone de saisie multiligne.

Vous pouvez dfinir sa taille grce aux attributs rows et cols (nombre de
lignes et colonnes) ou bien le faire en CSS grce aux
proprits width et height.
Liste droulante.
Utilisez la balise <option> pour crer chaque lment de la liste :
<select>
Inline
<option>
Block
<optgroup
Block
>
Code : HTML 1 <select name="pays">

2
<option value="france">France</option>
3
<option value="espagne">Espagne</option>
4
<option value="italie">Italie</option>
5 </select>
Element d'une liste droulante
Groupe d'lments d'une liste droulante.
A utiliser dans le cas d'une grande liste droulante.
Vous devez utiliser l'attribut label pour donner un nom au groupe.
Balises sectionnantes
Ces balises permettent de construire le squelette de notre site web :
Balise
Type
<header>
Bloc
k
Description
En-tte
7
Balise
Type
Description
<nav>
Bloc
k
Liens principaux de navigation
<footer>
Bloc
k
Pied de page
<section>
Bloc
k
Section de page
<article>
Bloc
k
Contenu ayant un sens propre (billet de blog, actualit...) pouvant tre repris sur un
autre site.
<aside>
Bloc
k
Informations complmentaires
Balises gnriques
Les balises gnriques sont des balises qui n'ont pas de sens smantique.
En effet, toutes les autres balises HTML ont un sens : <p> signifie "Paragraphe", <h2> signifie "Sous-titre" . Parfois, on a
besoin d'utiliser des balises gnriques (aussi appeles balises universelles) car aucune des autres balises ne convient.
On utilise le plus souvent des balises gnriques pour construire son design.
Il y a 2 balises gnriques : l'une est inline, l'autre est block.
Balise
Type
Description
<span>
Inline
Balise gnrique de type inline
<div>
Block
Balise gnrique de type block
Ces balises ont un intrt uniquement si vous leur donnez un attribut class, id ou style :
class : indique le nom de la classe CSS utiliser.
id : donne un nom la balise. Ce nom doit tre unique sur toute la page car il permet d'identifier la balise.
Vous pouvez vous servir de l'ID pour de nombreuses choses, comme par exemple pour un lien vers une ancre,
pour un style CSS de type ID, pour des manipulations en Javascript etc.
style : cet attribut vous permet d'indiquer directement le code CSS appliquer. Vous n'tes donc pas obligs
d'avoir une feuille de style part, vous pouvez juste mettre directement les attributs CSS. Notez qu'il est
prfrable de ne pas utiliser cet attribut et de passer la place par une feuille de style externe car cela rend
votre site plus facile mettre jour par la suite.
Squelette gnral dune page HTML5

S1 Balises HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

S1 Balises HTML

Загружено:

Авторское право:

Доступные форматы

Suite Support de cours N1 : Sites Web

Mmento Balises HTML

Le code minimal d'une page HTML

On peut aussi s'en servir pour 2-3 autres choses :

<link rel="start" title="Accueil" href="index.html" />

Permet de placer un script.

Permet de dfinir du code CSS pour la page.

Titre de la page web.

Balises de structuration du texte

Code : HTML 1 <blockquote>

Citation du titre d'une oeuvre ou d'un vnement.

Mise en valeur (forte)

Mise en valeur visuelle.

Mise en valeur (faible)

Insre une image.

Indique la prsence d'une figure (image, code...) illustrant le texte.

Insre une vido.

Indique un format possible pour les balises <audio> et <video>.

Cre une ligne de sparation horizontale

Permet d'indiquer une adresse, ou ventuellement l'auteur d'un

Le texte l'intrieur de la balise <pre> sera affich tel qu'il a t tap

Affiche une barre de progression. A utiliser conjointement avec les

Pour indiquer une date ou une heure.

Code : HTML <dl>

Cellule d'en-tte du tableau (gnralement mise en gras)

Balise non obligatoire permettant d'insrer l'en-tte du tableau.

Balise non obligatoire permettant d'insrer le corps du tableau

Balise non obligatoire permettant d'insrer le pied du tableau

method : indique la mthode d'envoi du formulaire (get ou post).

action : la page vers laquelle le visiteur doit tre redirig lorsqu'il

Permet de regrouper plusieurs lments d'un formulaire.

Titre d'un groupe dans un formulaire.

Titre d'un lment de formulaire.

Pensez donner un nom vos champs grce l'attribut name

Zone de saisie multiligne.

Code : HTML 1 <select name="pays">

Liens principaux de navigation

Balise gnrique de type inline

Balise gnrique de type block

class : indique le nom de la classe CSS utiliser.

Squelette gnral dune page HTML5

Вам также может понравиться