5. HTML - alexattia/myWiki GitHub Wiki

HTML5 L'Hypertext Markup Language est le format de données conçu pour représenter les pages web.

Tables of content :

Bases

Image

Links

Lists

Tableaux

Formulaires ##Bases

Les mots à l'intérieur de < et > sont nommés balises

Le <body> est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre entre , qui sert de commentaire pour nous-même.

Parmi les balises classiques, <ul> introduit une "Liste non ordonnée"

La balise <li> est le début d'un "élément de liste "

Le <p> est un "paragraphe". Et le <a> est une "ancre", ce qui crée un hyperlien.

<h1> à <h6> : heading content, utilisés pour la hiérarchisation des titres.

<link rel="stylesheet" href="monstyle.css"> à mettre dans le fichier html pour relier au css.

###Add an image

<img src="peter.jpg" width="200" height="150">

in case someone can’t see the image <img src="peter.jpg" width="200" height="150" alt="My friend Peter">

For a longer description in an other html file <img src="peter.jpg" width="200" height="150" alt="My friend Peter" longdesc="peter.html">

Avec une info bulle <img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand même !" />

La balise figure, avec figcaption(légende)

<figure>
    <img src="images/blocnotes.png" alt="Bloc-Notes" />
    <figcaption>Le logiciel Bloc-Notes</figcaption> 
</figure>

###Links

Links are defined with the <a> tag.

<a href="peter.html">Peter's page</a>  if in same folder
<a href="../mary.html">Mary's page</a>  else.

If the file you are linking to is in a subdirectory, you need to put the name of the subdirectory followed by a "/" in front of it, for instance:

<a href="friends/sue.html">Sue's page</a>
To another website
<a href="http://www.w3.org/">W3C</a>

You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page:

<a href="/"><img src="logo.gif" alt="home page"></a>

Avec une ancre

<h2 id="mon_ancre">Titre</h2>  (c’est mon ancre)

<a href="#mon_ancre">Aller vers l'ancre</a> 
(c’est le lien pour y accéder)

pour une ancre dans un autre fichier :
<a href="ancres.html#cuisine">La cuisine</a><br />

mettre une info bulle :
<a href="http://www.siteduzero.com" title="Réservé aux débutants">Site du Zéro</a>

email to someone :
<a href="mailto:[email protected]">Envoyez-moi un e-mail !</a>

un lien vers une autre fenêtre :
<a href="http://www.siteduzero.com" target="_blank">Site du Zéro</a>

Un lien vers un fichier à télécharger :
<a href="monfichier.zip">Télécharger le fichier</a>

###Lists

3 kinds : unordered list

<ul>
  <li>the first list item
  <li>the second list item
</ul>

ordered list : <ol> </ol>

definition list : 
<dl>
  <dt>the first term
  <dd>its definition

  <dt>the second term
  <dd>its definition

</dl>

les listes peuvent être emboîtées

###Tableaux

<table>   // balise de tableau
   
   <tr>
       <th>Nom</th> //balise de cellule d’en-tête
       <th>Âge</th>
       <th>Pays</th>
   </tr>

   <tr>  // balise de ligne
       <td>Carmen</td>  // balise de cellule
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>États-Unis</td>
   </tr>
</table>

Le titre se gère avec <caption>

Gros tableau : Divisé en trois parties (à écrire de préférence dans cet ordre).

  • l’en-tête (en haut) : il se définit avec les balises ``` v ;
  • le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot> ;
  • le corps (au centre) : il se définit avec les balises <tbody></tbody> .

<td colspan="2"> fusionne la cellule courante avec celle à sa droite. <td rowspan="2"> fusionne la cellule courante avec celle du dessous.

###Formulaires

<form>
   <p>Texte à l'intérieur du formulaire</p>
</form> 

<form method="post" action="traitement.php"> //envoie les données saisies à la page php de traitement des données
   <p>Texte à l'intérieur du formulaire</p>
</form>


<form method="post" action="traitement.php"> 
    <p>
        <label>Votre pseudo</label> : <input type="text" name="pseudo" /> //insertion d’une zone de saisie monoligne 
    </p>
</form>

On peut ajouter un certain nombre d'autres attributs à la balise pour personnaliser son fonctionnement :
On peut agrandir le champ avec size.
 On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
 On peut pré-remplir le champ avec une valeur par défaut à l'aide de value. 
On peut donner une indication sur le contenu du champ avec placeholder. Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ :

<form method="post" action="traitement.php">
    <p>
        <label for="pseudo">Votre pseudo :</label>
        <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" />
    </p>
</form>
⚠️ **GitHub.com Fallback** ⚠️