HTML : table

L’ élément HTML de type block table permet de créer des tableaux.
Il est utilisé avec les éléments tr pour les lignes et td pour les colonnes.

<table>
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur le tableau.

Exemple

HTML

<table class="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,</td>
<td>consectetur congue elit.</td>
</tr>
</table>

CSS

.tableau{
background-color:chocolate;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}

Lorem ipsum dolor sit amet,	Suspendisse pharetra placerat felis	Mauris id nunc ac quam sollicitudin varius.
Mauris eget erat vitae purus lacinia egestas.	Proin nibh nisl, dictum vitae lacinia quis,	consectetur congue elit.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le corps de la page HTML.

Exemple

HTML

<table id="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
<tr>
<td>Mauris eget erat vitae purus lacinia egestas.</td>
<td>Proin nibh nisl, dictum vitae lacinia quis,
<td>consectetur congue elit.</td>
</tr>
</table>

CSS

#tableau{
font-weight:bolder;
background-color:yellow;
border:1px solid black;
}
.tableau tr td{
border:1px solid black;
}

Lorem ipsum dolor sit amet,	Suspendisse pharetra placerat felis	Mauris id nunc ac quam sollicitudin varius.
Mauris eget erat vitae purus lacinia egestas.	Proin nibh nisl, dictum vitae lacinia quis,	consectetur congue elit.

Attribut : title

Permet de mettre une infobulle sur le tableau.

Exemple

HTML

<table title="tableau">
<tr>
<td>Lorem ipsum dolor sit amet,</td>
<td>Suspendisse pharetra placerat felis</td>
<td>Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Lorem ipsum dolor sit amet,

Suspendisse pharetra placerat felis

Mauris id nunc ac quam sollicitudin varius.

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<table dir="rtl">
<tr>
<td> فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت</td>
<td>ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية.</td>
<td>الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</td>
</tr>
</table>

فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت

ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية.

الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

Attribut : style

Permet d’appliquer un style au tableau directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<table style="border:1px solid black;">
<tr>
<td style="border:1px solid black;">Lorem ipsum dolor sit amet,</td>
<td style="border:1px solid black;">Suspendisse pharetra placerat felis</td>
<td style="border:1px solid black;">Mauris id nunc ac quam sollicitudin varius.</td>
</tr>
</table>

Lorem ipsum dolor sit amet,

Suspendisse pharetra placerat felis

Mauris id nunc ac quam sollicitudin varius.

Attribut : lang

Permet de spécifier la langue à l’intérieur du tableau.

Exemple

HTML

<table lang="en">
<tr>
<td>Where is Brian?</td>
<td>He is in the kitchen</td>
<td>He can't cook, what is he doing there?</td>
</tr>
</table>

Where is Brian?

He is in the kitchen

He can’t cook, what is he doing there?

Les éléments HTML de type inline h1 à h6 sont utilisés pour définir des titres. h1 définit le titre le plus important, h6 définit le titre le moins important. Ainsi par exemple h2 spécifie un titre moins important que h1 mais plus important que h3 et ainsi de suite.

<h1>Lorem ipsum dolor sit amet.</h1>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur le titre.

Exemple

HTML

<h1 class="titre">Lorem ipsum dolor sit amet.</h1>

CSS

.titre{
color:chocolate;
}

Lorem ipsum dolor sit amet.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le titre.

Exemple

HTML

<h2 id="titre">Lorem ipsum dolor sit amet.</h2>

CSS

#titre{
color:brown;
font-weight:bolder;
}

Lorem ipsum dolor sit amet.

Attribut : title

Permet de mettre une infobulle sur le titre.

Exemple

HTML

<h3 title="titre" >Lorem ipsum dolor sit amet.</h3>

Lorem ipsum dolor sit amet.

Attribut : dir

Permet de spécifier le sens d’écriture du titre. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<h4 dir="rtl" > فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت</h4>

فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت

Attribut : style

Permet d’appliquer un style au corps directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<h5 style="color:#FFCC33;font-style:italic;" >Lorem ipsum dolor sit amet.</h5>

Lorem ipsum dolor sit amet.

Attribut : lang

Permet de spécifier la langue du titre.

Exemple

HTML

<h6 lang="en">Open your windows to Ubuntu</h6>

Open your windows to Ubuntu

HTML : img

L’ élément HTML img permet d’insérer une image.

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" />

Attributs

Attribut : src

Permet de spécifier l’url de l’image à rajouter.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" />

Attribut : height

Permet de spécifier la hauteur de l’image.
Elle est renseigné en pixel(px), point(pt), pourcentage(%), ou en em.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" height="50px" />

Attribut : width

Permet de spécifier la largeur de l’image.
Elle est renseigné en pixel(px), point(pt), pourcentage(%), ou en em.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" width="50px" />

Attribut : alt

Il permet d’afficher un texte alternatif par exemple lorsque des problèmes de chargement surviennent sur l’image.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png"  alt="logo php" />

Attribut : class

Permet de spécifier la classe css à utiliser sur l’image.

Exemple

HTML

<img class="image" src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" />

CSS

.image{
border:5px solid chocolate;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur l’image.

Exemple

HTML

<img id="image" src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" />

CSS

#image{
border:5px solid yellow;
}

Attribut : title

Permet de mettre une infobulle sur le corps de la page HTML.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png"  title="logo php" />

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" dir="rlt" />

Attribut : style

Permet d’appliquer un style sur l’image directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<img style="border:5px solid black;" src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" />

Attribut : lang

Permet de spécifier la langue à l’intérieur de l’image.

Exemple

HTML

<img src="http://www.web-petit.com/wp-content/uploads/Logo-PHP.png" lang="en" />

HTML : ol

L’ élément HTML olpermet de créer les listes ordonnées.
Il est utilisé avec l’élément HTML li pour chaque item de la liste.

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ol>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur la liste.

Exemple

HTML

<ol class="liste">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ol>

CSS

.liste{
background-color:chocolate;
}

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur la liste.

Exemple

HTML

<ol id="liste">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ol>

CSS

#line{
font-weight:bolder;
}

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : title

Permet de mettre une infobulle sur la liste.

Exemple

HTML

<ol title="liste non ordonnée">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ol>

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<ol dir="rtl">
<li>قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في</li>
<li>فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</li>
</ol>

قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في
فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

Attribut : style

Permet d’appliquer un style à la liste directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<ol style="font-style:italic;color:chocolate;">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ol>

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : lang

Permet de spécifier la langue à l’intérieur de la liste.

Exemple

HTML

<ol lang="en">
<li>A person with Ubuntu is open and available to others</li>
<li>does not feel threatened that others are able and good</li>
<li>for he or she has a proper self-assurance</li>
</ol>

A person with Ubuntu is open and available to others
does not feel threatened that others are able and good
for he or she has a proper self-assurance

HTML : ul

L’ élément HTML ulpermet de créer les listes non ordonnées.
Il est utilisé avec l’élément HTML li pour chaque item de la liste.

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ul>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur la liste.

Exemple

HTML

<ul class="liste">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ul>

CSS

.liste{
background-color:chocolate;
}

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur la liste.

Exemple

HTML

<ul id="liste">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ul>

CSS

#line{
font-weight:bolder;
}

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : title

Permet de mettre une infobulle sur la liste.

Exemple

HTML

<ul title="liste non ordonnée">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ul>

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<ul dir="rtl">
<li>قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في</li>
<li>فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</li>
</ul>

قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في
فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

Attribut : style

Permet d’appliquer un style à la liste directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<ul style="font-style:italic;color:chocolate;">
<li>Lorem ipsum dolor sit amet</li>
<li>Suspendisse pharetra placerat felis</li>
<li>Mauris id nunc ac quam sollicitudin varius.</li>
</ul>

Lorem ipsum dolor sit amet
Suspendisse pharetra placerat felis
Mauris id nunc ac quam sollicitudin varius.

Attribut : lang

Permet de spécifier la langue à l’intérieur de la liste.

Exemple

HTML

<ul lang="en">
<li>A person with Ubuntu is open and available to others</li>
<li>does not feel threatened that others are able and good</li>
<li>for he or she has a proper self-assurance</li>
</ul>

A person with Ubuntu is open and available to others
does not feel threatened that others are able and good
for he or she has a proper self-assurance

HTML : body

L’ élément HTML de type block body est le corps d’une page HTML. Il regroupe les éléments visibles par le visiteur, et n’est utilisable qu’une fois dans une page HTML.

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>
</body>

Attributs

Attribut : class

Permet de spécifier la classe css à utiliser sur le corps de la page HTML.

Exemple

HTML

<body class="corps">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</body>

CSS

.corps{
background-color:chocolate;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur le corps de la page HTML.

Exemple

HTML

<body id="corps">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</body>

CSS

#corps{
font-weight:bolder;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : title

Permet de mettre une infobulle sur le corps de la page HTML.

Exemple

HTML

<body title="corps de la page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

HTML

<body dir="rtl">قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في, فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.</body>

قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في, فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

Attribut : style

Permet d’appliquer un style au corps directement dans le html, sans avoir besoin d’une feuille de style.

Exemple

HTML

<body style="font-style:italic;color:chocolate;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

Attribut : lang

Permet de spécifier la langue à l’intérieur du corps de la page.

Exemple

HTML

<body lang="en">A person with Ubuntu is open and available to others, affirming of others, does not feel threatened that others are able and good, for he or she has a proper self-assurance that comes from knowing that he or she belongs in a greater whole and is diminished when others are humiliated or diminished, when others are tortured or oppressed.</body>

A person with Ubuntu is open and available to others, affirming of others, does not feel threatened that others are able and good, for he or she has a proper self-assurance that comes from knowing that he or she belongs in a greater whole and is diminished when others are humiliated or diminished, when others are tortured or oppressed.

Mot-clef : html.

HTML : table

Attributs

Attribut : class

Exemple

HTML

CSS

Attribut : id

Exemple

HTML

CSS

Attribut : title

Exemple

HTML

Attribut : dir

Exemple

HTML

Attribut : style

Exemple

HTML

Attribut : lang

Exemple

HTML

HTML : h1-h6

Attributs

Attribut : class

Exemple

HTML

CSS

Lorem ipsum dolor sit amet.

Attribut : id

Exemple

HTML

CSS

Lorem ipsum dolor sit amet.

Attribut : title

Exemple

HTML

Lorem ipsum dolor sit amet.

Attribut : dir

Exemple

HTML

فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت

Attribut : style

Exemple

HTML

Lorem ipsum dolor sit amet.

Attribut : lang

Exemple

HTML

Open your windows to Ubuntu

HTML : img

Attributs

Attribut : src

Exemple

HTML

Attribut : height

Exemple

HTML

Attribut : width

Exemple

HTML

Attribut : alt

Exemple

HTML

Attribut : class

Exemple

HTML

CSS

Attribut : id

Exemple

HTML

CSS

Attribut : title

Exemple

HTML

Attribut : dir

Exemple

HTML

Attribut : style