Mot-clef : html.

HTML : hr

L’ élément HTML de type block hr permet de créer une ligne de séparation horizontale.

<hr />

Attributs

Attribut : class

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

Exemple

HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr class="separation" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
CSS
.separation{
border:3px double chocolate;
padding:5px;
}

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 la séparation.

Exemple

HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr id="separation" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
CSS
#separation{
border:3px double green;
padding:5px;
margin-bottom:5px;
}

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 : style

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

Exemple

HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr style="border:3px double orange; padding: 5px; margin-bottom:5px;" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius.
<hr title="separation" style="border:3px double brown; padding: 5px; margin-bottom:5px;" />
Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

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 au côté de la séparation. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

Exemple

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

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

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

Attribut : lang

Permet de spécifier la langue à l’intérieur du texte entourant la ligne horizontale.

Exemple

HTML
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
<hr lang="en" />
and is diminished when others are humiliated or diminished, when others are tortured or oppressed.

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.

HTML 5 : Ma première page.

Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).

<balise>

Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.

Balise simple
<balise>
Balises doubles
<balise></balise>

Voici une page HTML 5 vide.

<!DOCTYPE html>
<html lang="fr"> 

  <head> 

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

  </head>

  <body>

    <!-- Ici il y aura le contenu de votre page. -->

  </body>

<html>

Le type de document (DOCTYPE)

Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :

DOCTYPE HTML 5
<!DOCTYPE html>
DOCTYPE HTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élement html

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

‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.

L’élement head

<head></head>

L’élément head contient tous les en-têtes envoyés au navigateur comme :

  • Le type de contenu de la page : 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • Le titre de la page : 
    <title>Titre</title>

De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.

L’élément body

<body></body>

L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.

Les commentaires

<!-- Ceci est un commentaire -->

Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.

Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.

← Chapitre précédent
Chapitre suivant →

HTML : input

L’ élément HTML input permet de saisir les informations des internautes.
La saisie peut se faire sous forme de cases à cocher, de zones de texte, de boutons radio,…
Il est utilisé avec l’élément form pour la création des formulaires, et la récupération des données.

<form>
<p><label for="radio-1">Rouge : </label><input id="radio-1" type="radio" name="choix" /></p>
<p><label for="radio-2">Jaune : </label><input id="radio-2" type="radio" name="choix" /></p>
<p><label for="radio-3">Orange : </label><input id="radio-3" type="radio" name="choix" /></p>
</form>

Attributs

Attribut : type

Détermine le type de la balise input :

  • text : champs texte (textbox).
  • password : champs de mot de passe.
  • radio : liste de déroulante.
  • checkbox : case à cocher.
  • button : bouton.
  • submit : bouton d’envoi du formulaire.
  • image : champ image, envoie le formulaire.

Exemple

HTML
<form>
  <p>
    <label for="name-7">Name : </label><input id="name-7" name="name-7" type="text" lang="en" />
  </p>
</form>


Attribut : tabindex

Permet de spécifier l’ordre de tabulation des éléments input, celui qui possède le plus petit chiffre sera tabulé en premier.

Exemple

HTML
<form>
  <p>
    <label for="surname">Nom : </label><input id="surname" name="surname" tabindex="1" type="text" />
  </p>
  <p>
    <label for="name">Prénom : </label><input id="name" name="name" tabindex="2" type="text" />
  </p>
</form>



Attribut : alt & src

alt et src sont utilisés pour les input de type image.

  • alt est utilisé qu’avec un élément input de type image, il permet de mettre un texte alternatif lors d’un problème de chargement de l’image.
  • src permet de spécifier l’adresse de l’image à afficher.

Exemple

HTML
<form>
  <p>
    <label for="image-2">Envoyer : </label><input id="image-2" name="image-2" type="image"  alt="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>


Attribut : checked

Permet de présélectionner un élément.

Exemple

HTML
<form>
  <p>
    <label for="radio-4">Rouge : </label><input id="radio-4" value="red" type="checkbox" />
  </p>
  <p>
    <label for="radio-4-1">Vert : </label><input id="radio-4-1" value="green" type="checkbox" />
  </p>
 <p>
    <label for="radio-4-2">Jaune : </label><input id="radio-4-2" value="yellow" type="checkbox" checked="checked" />
 </p>
</form>




Attribut : disabled

Permet de désactiver l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-1">Nom : </label><input id="name-1" name="name-1" type="text" disabled="disabled" />
  </p>
</form>


Attribut : maxlength

Permet de spécifier la longuer maximale d’une chaîne de caractères dans un input de type text ou password.

Exemple

HTML
<form>
  <p>
    <label for="name-2">Nom : </label><input id="name-2" name="name-2" type="text" maxlength="5" />
  </p>
</form>


Attribut : value

Spécifie la valeur par défaut à afficher.

Exemple

HTML
<form>
  <p>
    <label for="name-3">Nom : </label><input id="name-3" name="name-3" type="text" value="Dupont" />
  </p>
</form>


Attribut : name

Spécifie le nom de l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-4">Nom : </label><input id="name-4" name="name-4" type="text" />
  </p>
</form>


Attribut : class

Permet de spécifier la classe CSS à utiliser sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-5">Nom : </label><input id="name-5" name="name-5" type="text" class="text-example" />
  </p>
</form>

.text-example {
  background:#faa;
  border:1px solid #48f;
}


Attribut : id

Permet de spécifier l’identifiant CSS à utiliser sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="name-6">Nom : </label><input id="name-6" name="name-6" type="text" class="text-example" />
  </p>
</form>

#text-example {
  background:#afa;
  border:1px solid #f55;
}


Attribut : title

Permet de mettre une infobulle sur l’élément input.

Exemple

HTML
<form>
  <p>
    <label for="image">Envoyer : </label><input id="image" name="image" type="image"  alt="Twitter" title="Twitter" src="http://www.web-petit.com/wp-content/themes/wp-v2/images/twitter.png" />
  </p>
</form>


Attribut : dir

Permet de spécifier le sens d’écriture de l’élément input. Elle prend 2 valeurs :

  • ltr : Left To Right : de gauche à droite(valeur par défaut).
  • rtl : Right To Left : de droite à gauche.

Exemple

HTML
<form>
  <p>
    <label for="name-7-bis">Nom : </label><input id="name-7-bis" name="name-7-bis" type="text" dir="rtl" />
  </p>
</form>


Attribut : style

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

Exemple

HTML
<form>
  <p>
    <label for="name-8">Nom : </label><input id="name-8" name="name-8" type="text" style="background:yellow;border:1px solid orange;" />
  </p>
</form>


Attribut : lang

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

Exemple

HTML
<form>
  <p>
    <label for="name-9">Name : </label><input id="name-9" name="name-9" type="text" lang="en" />
  </p>
</form>


HTML : form

L’ élément HTML form permet de créer des formulaires.
Il peut contenir des éléments input, des cases à cocher, des boutons radio, menus,…
On peut rajouter l’élément label afin de pointer directement vers son élément input.

<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>

Attributs

Attribut : action

Spécifie l’adresse de destination du formulaire.

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-1">Nom : </label>
    <input id="nom-1" type="text" name="nom-1" />
  </p>
  <p>
    <label for="prenom-1">Prénom : </label>
    <input id="prenom-1" type="text" name="prenom-1" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : method

Indique la forme d’envoi des réponses, 2 valeurs possibles :
- Post : correspond à un envoi de données stockées dans le corps de la requête
- Get : correspond à un envoi des données codées dans l’URL, et séparées de l’adresse du script par un point d’interrogation .

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-2">Nom : </label>
    <input id="nom-2" type="text" name="nom-2" />
  </p>
  <p>
    <label for="prenom-2">Prénom : </label>
    <input id="prenom-2" type="text" name="prenom-2" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : enctype

Permet de définir le type de fichier à envoyer.
Il peut prendre 3 valeurs :
- application/x-www-form-urlencoded : valeur par défaut, tout les caractères sont encodés avant d’être envoyés.
- multipart/form-data : pas d’encodage, à utilisé lors d’upload de fichier.
- text/plain : les espaces sont remplacés par des + , mais il n’y pas d’encodage special

Exemple

HTML
<form action="" method="get" enctype="text/plain">
  <h6>Identité</h6>
  <p>
    <label for="nom-3">Nom : </label>
    <input id="nom-3" type="text" name="nom-3" />
  </p>
  <p>
    <label for="prenom-3">Prénom : </label>
    <input id="prenom-3" type="text" name="prenom-3" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : class

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

Exemple

HTML
<form action="" method="get" class="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-4">Nom : </label>
    <input id="nom-4" type="text" name="nom-4" />
  </p>
  <p>
    <label for="prenom-4">Prénom : </label>
    <input id="prenom-4" type="text" name="prenom-4" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
CSS
.formulaire{
background-color:chocolate;
padding:5px;
}
Identité



Attribut : id

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

Exemple

HTML
<form action="" method="get" id="formulaire">
  <h6>Identité</h6>
  <p>
    <label for="nom-5">Nom : </label>
    <input id="nom-5" type="text" name="nom-5" />
  </p>
  <p>
    <label for="prenom-5">Prénom : </label>
    <input id="prenom-5" type="text" name="prenom-5" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
CSS
#formulaire{
background-color:yellow;
padding:5px;
}
Identité



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
<form action="" method="get" dir="rtl">
  <h6>Identité</h6>
  <p>
    <label for="nom-6">اسم : </label>
    <input id="nom-6" type="text" name="nom-6" />
  </p>
  <p>
    <input type="submit" value="تقدم" />
  </p>
</form>
Identité


Attribut : style

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

Exemple

HTML
<form action="" method="get" style="background:#ffaaaa;padding:5px;">
  <h6>Identité</h6>
  <p>
    <label for="nom-7">Nom : </label>
    <input id="nom-7" type="text" name="nom-7" />
  </p>
  <p>
    <label for="prenom-7">Prénom : </label>
    <input id="prenom-7" type="text" name="prenom-7" />
  </p>
  <p>
    <input type="submit" value="Envoyer" />
  </p>
</form>
Identité



Attribut : lang

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

Exemple

HTML
<form action="" method="get">
  <h6>Identité</h6>
  <p>
    <label for="nom-8">Surname : </label>
    <input id="nom-8" type="text" name="nom-8" />
  </p>
  <p>
    <label for="prenom-8">Name : </label>
    <input id="prenom-8" type="text" name="prenom-8" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>
Identité



HTML : select

L’ élément HTML select permet de créer un menu déroulant dans un formulaire.
Il est utilisé avec l’élément form pour créer le formulaire, et l’ élémentoption pour la liste d’options. 

<form>
<select>
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attributs

Attribut : disabled

Permet de bloquer le menu déroulant.

Exemple

HTML
<form>
<select disabled="disabled">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : selected

Sélectionne le champs par défaut à utilisé.

Exemple

HTML
<form>
<select>
<option selected="selected">ipsum</option>
<option>dolor</option>
<option selected="selected">sit amet</option>
</select>
</form>

Attribut : mutiple

Permet de faire plusieurs sélections.

Exemple

HTML
<form>
<select multiple="multiple">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : size

Permet de définir le nombre d’option visible.

Exemple

HTML
<form>
<select size="2">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : tabindex

Permet de spécifier l’ordre de tabulation des liens, celui qui possède le plus petit chiffre sera tabulé en premier.

Exemple

HTML
<form>
<select tabindex="2">
<option>ipsum</option>
<option>dolor</option>
</select><br />
<select tabindex="1">
<option>Lorem</option>
<option>sit amet</option>
</select>
</form>

Attribut : class

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

Exemple

HTML
<form>
<select class="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>
CSS
.menu{
background-color:chocolate;
}

Attribut : id

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

Exemple

HTML
<form>
<select id="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>
CSS
#corps{
font-weight:bolder;
background-color:yellow;
}

Attribut : title

Permet de mettre une infobulle sur le menu.

Exemple

HTML
<form>
<select title="menu">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : dir

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

Exemple

HTML
<form>
<select dir="rtl">
<option>أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, </option>
<option>معركة المدنيون بـ أخر.</option>
</select>
</form>

Attribut : style

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

Exemple

HTML
<form>
<select style="font-style:italic; background-color:red;">
<option>ipsum</option>
<option>dolor</option>
<option>sit amet</option>
</select>
</form>

Attribut : lang

Permet de spécifier la langue du menu.

Exemple

HTML
I use :
<form>
<select lang="en">
<option>Windows</option>
<option>Linux</option>
<option>my hands</option>
</select>
</form>

I use :

HTML : textarea

L’ élément HTML textarea permet de créer une zone de saisie de texte dans un formulaire. Il est utilisé avec l’élément form pour créer le formulaire.

<form>
<textarea>
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.
</textarea>
</form>

Attributs

Attribut : disabled

Permet de bloquer la zone de saisie.

Exemple

HTML
<form>
<textarea disabled="disabled">
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.
</textarea>
</form>

Attribut : readonly

Change la zone de saisie, en zone d’affichage seulement.

Exemple

HTML
<form>
<textarea readonly="readonly">
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.
</textarea>
</form>

Attribut : name

Permet de récuperer les données de la zone de saisie.

Exemple

HTML
<form>
<textarea name="texte">
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.
</textarea>
</form>

Attribut : cols

Permet de changer la largeur de la zone de saisie.

Exemple

HTML
<form>
<textarea cols="50">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.</textarea>
</form>

Attribut : rows

Permet de changer la hauteur de la zone de saisie.

Exemple

HTML
<form>
<textarea rows="15">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.</textarea>
</form>

Attribut : class

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

Exemple

HTML
<form>
<textarea class="texte">
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.
</textarea>
</form>
CSS
.texte{
background-color:chocolate;
}

Attribut : id

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

Exemple

HTML
<form>
<textarea id="texte">
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.
</textarea>
</form>
CSS
#corps{
background-color:yellow;
}

Attribut : title

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

Exemple

HTML
<form>
<textarea title="zone de saisie">
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.
</textarea>
</form>

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
<form>
<textarea dir="rtl">أعلنت واندونيسيا،, الى حاملات الأمريكي، قد,</textarea>
</form>

Attribut : style

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

Exemple

HTML
<form>
<textarea style="background-color:grey">
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.
</textarea>
</form>

Attribut : lang

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

Exemple

HTML
<form>
<textarea 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.
</textarea>
</form>

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?

HTML : h1-h6

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" />

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;
}
  1. Lorem ipsum dolor sit amet
  2. Suspendisse pharetra placerat felis
  3. 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;
}
  1. Lorem ipsum dolor sit amet
  2. Suspendisse pharetra placerat felis
  3. 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>
  1. Lorem ipsum dolor sit amet
  2. Suspendisse pharetra placerat felis
  3. 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>
  1. قبل هو أهّل وبولندا. ويعزى الحروب مع دون, عام كل قررت تسمّى الشتوية. جوزيف مدينة بريطانيا-فرنسا حدة في
  2. فصل وجهان واُسدل بمباركة بـ. بها عل أعلنت واندونيسيا،, الى حاملات الأمريكي، قد, معركة المدنيون بـ أخر.

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>
  1. Lorem ipsum dolor sit amet
  2. Suspendisse pharetra placerat felis
  3. 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>
  1. A person with Ubuntu is open and available to others
  2. does not feel threatened that others are able and good
  3. for he or she has a proper self-assurance
  2. 1
  3. 2