logo Un site Wiki pour les Étudiants de l'Université de Poitiers logo
Vous êtes ici -> ExoUia
PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes 195.83.66.71

EXERCICES



Paragraphe


<a name="haut"></a><p >Votre paragraphe ici </p>

Votre paragraphe ici



Paragraphe aligné

<p align="center">Votre paragraphe ici </p>

Votre paragraphe ici


Vos titres

<h1> Titre de rang 1</h1>
<h2> Titre de rang 2</h2>
<h3> Titre de rang 3</h3>
<h4> Titre de rang 4</h4>
<h5> Titre de rang 5</h5>
<h6> Titre de rang 6</h6>

Titre de rang 1

Titre de rang 2

Titre de rang 3

Titre de rang 4

Titre de rang 5
Titre de rang 6


Vos titres alignés

<h1 align="center"> Titre de rang 1</h1>
<h2 align="center"> Titre de rang 2</h2>
<h3 align="center"> Titre de rang 3</h3>
<h4 align="center"> Titre de rang 4</h4>
<h5 align="center"> Titre de rang 5</h5>
<h6 align="center"> Titre de rang 6</h6>

Titre de rang 1

Titre de rang 2

Titre de rang 3

Titre de rang 4

Titre de rang 5
Titre de rang 6


Texte Suppprimé, inséré

<del>Votre texte supprimé</del><ins>votre texte inséré ici</ins>
Votre texte supprimévotre texte inséré ici

Utiliser un indice

La formule chimique du méthane est CH<sub>4</sub> et H<sub>2</sub>O est celle de l'eau

La formule chimique du méthane est CH4 et H2O est celle de l'eau

Utiliser un exposant


Nous sommes le 1<sup>er</sup> jour du mois et 2<sup>4</sup>=16

Nous sommes le 1er jour du mois et 24=16

Donner à votre texte la couleur de votre choix

<span style="color: #ede240;">Votre texte ici avec la couleur #ede240</span>
Votre texte ici avec la couleur #ede240

<span style="color: #0000FF;">Votre texte ici avec la couleur #0000FF</span>
Votre texte ici avec la couleur #0000FF

<span style="color: #FF0000;">Votre texte ici avec la couleur#FF0000</span>
Votre texte ici avec la couleur #FF0000

<span style="color: #00FF00;">Votre texte ici avec la couleur #00FF00</span>
Votre texte ici avec la couleur #00FF00

Contrôler la taille des caractères (Font size)

<span style="font-size: 150%;">Votre texte en grand caractère à 150%</span>
Votre texte en grand caractère à 150%

<span style="font-size: 250%;">Votre texte en grand caractère à 250%</span>
Votre texte en grand caractère à 250%

Votre Texte en surbrillance

<span style="background-color: #ECDE03;">Votre texte ici en surbrillance</span>

Votre texte ici en surbrillance

Créer un ancrage dans une balise

<a name="top"></a>

Lien pour retourner vers l'ancre top

<a href="#haut">Retourner en haut de la page </a>
Retourner en haut de la page

Créer une liste ordonnée

Les premières villes de France
<ol>
<li>Paris</li>
<li>Lyon</li>
<li>Marseille</li>
</ol>

Les premières villes de France
  1. Paris
  2. Lyon
  3. Marseille


Créer une liste non ordonnée

Quelques fruits
<ul>
<li>Pommes</li>
<li>Poires</li>
<li>Oranges</li>
</ul>
Quelques fruits

Listes imbriquées

Listes imbriquées
Les listes simples ou ordonnées peuvent être imbriquées les unes dans les autres, ce qui permet une présentation trés claire.
Voici un exemple déjàun peu complexe. Étudiez le attentivement et remarquez les décalages qui permettent de visualiser la hiérarchie des emboitements de listes.
Choisissez parmi :

<ol>
<li>Thé</li>
<li>Café</li>
<ul type="disc">
<li>Noir</li>
<ul type="square">
<li>Avec du sucre</li>
<ul type="circle">
<li>Blanc</li>
<li>Roux</li>
<li>Edulcorant</li>
</ul>
<li>Sans sucre</li>
</ul>
<li>Au lait</li>
<ul type="square">
<li>avec crème</li>
<<li>sans crème</li>
</ul>
</ul>
<li>Chocolat</li>
</ol>

Choisissez parmi :
  1. Thé
  2. Café
  3. Chocolat

Incruster une image d'Internet

Supposons que l'on ait un image trouvé sur Internet d'un enseignant de l'université de Poitiers:
http://www.lanouvellerepublique.fr/var/nrv2_archive/storage/images/contenus/articles/2013/05/19/universites-poitiers-une-tete-dure-dans-le-ventre-mou-1471435/27556339-1-fre-FR/Universites-Poitiers-une-tete-dure-dans-le-ventre-mou_reference.jpg
Pour l’incruster dans une page html:
<img title="Un enseignant de l'Université de Poitiers dans son Amphi" src="http://www.lanouvellerepublique.fr/var/nrv2_archive/storage/images/contenus/articles/2013/05/19/universites-poitiers-une-tete-dure-dans-le-ventre-mou-1471435/27556339-1-fre-FR/Universites-Poitiers-une-tete-dure-dans-le-ventre-mou_reference.jpg" alt="Univ Poitiers" width="100" height="150" />

Si on survole l'image le texte dans le title apparait.
Univ Poitiers

Pour incruster l'image à droite , il suffit d'ajouter align="right" au code :
<img title="Un enseignant de l'Université de Poitiers dans son Amphi" src="http://www.lanouvellerepublique.fr/var/nrv2_archive/storage/images/contenus/articles/2013/05/19/universites-poitiers-une-tete-dure-dans-le-ventre-mou-1471435/27556339-1-fre-FR/Universites-Poitiers-une-tete-dure-dans-le-ventre-mou_reference.jpg" alt="Univ Poitiers" width="225" height="350" align="right"/>

Univ Poitiers


Créer des tableaux

Pour créer un tableau 2 par 2
<table>
<tbody>
<tr>
<td>ligne 1, colonne 1</td>
<td>ligne,colonne 2</td>
</tr>
<tr>
<td>ligne 2,colonne1</td>
<td>ligne 2, colonne 2</td>
</tr>
</tbody>
</table>
ligne 1, colonne 1 ligne 1,colonne 2
ligne 2,colonne1 ligne 2, colonne 2


Pour créer un tableau 2 par 2 avec bordure
à la balise <table on rajoute l'attribut border="1"
<table border="1">
<tbody>
<tr>
<td>ligne 1, colonne 1</td>
<td>ligne 1,colonne 2</td>
</tr>
<tr>
<td>ligne 2,colonne1</td>
<td>ligne 2, colonne 2</td>
</tr>
</tbody>
</table>
ligne 1, colonne 1 ligne 1,colonne 2
ligne 2,colonne 1 ligne 2, colonne 2


Pour créer un tableau 4par 4 avec bordure
<table border="1">
<tbody>
<tr>
<td>ligne 1, colonne 1</td>
<td>ligne 1, colonne 2</td>
<td>ligne 1, colonne 3</td>
<td>ligne 1, colonne 4</td>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
<td>ligne 2, colonne 4</td>
</tr>
<tr>
<td>ligne 3, colonne 1</td>
<td>ligne 3, colonne 2</td>
<td>ligne 3, colonne 3</td>
<td>ligne 3, colonne 4</td>
</tr>
<tr>
<td>ligne 4, colonne 1</td>
<td>ligne 4, colonne 2</td>
<td>ligne 4, colonne 3</td>
<td>ligne 4, colonne 4</td>
</tr>
</tbody>
</table>
ligne 1, colonne 1 ligne 1, colonne 2 ligne 1, colonne 3 ligne 1, colonne 4
ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 ligne 2, colonne 4
ligne 3, colonne 1 ligne 3, colonne 2 ligne 3, colonne 3 ligne 3, colonne 4
ligne 4, colonne 1 ligne 4, colonne 2 ligne 4, colonne 3 ligne 4, colonne 4


Pour créer un tableau 4 par 4 avec bordure et des titres de colonne
on utilise la balise <th>
<table id="demo-table" border="1">
<tbody>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
<th>Titre 4</th>
</tr>
<tr>
<td>ligne 1, colonne 1</td>
<td>ligne 1, colonne 2</td>
<td>ligne 1, colonne 3</td>
<td>ligne 1, colonne 4</td>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
<td>ligne 2, colonne 4</td>
</tr>
<tr>
<td>ligne 3, colonne 1</td>
<td>ligne 3, colonne 2</td>
<td>ligne 3, colonne 3</td>
<td>ligne 3, colonne 4</td>
</tr>
<tr>
<td>ligne 4, colonne 1</td>
<td>ligne 4, colonne 2</td>
<td>ligne 4, colonne 3</td>
<td>ligne 4, colonne 4</td>
</tr>
</tbody>
</table>
Titre 1 Titre 2 Titre 3 Titre 4
ligne 1, colonne 1 ligne 1, colonne 2 ligne 1, colonne 3 ligne 1, colonne 4
ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 ligne 2, colonne 4
ligne 3, colonne 1 ligne 3, colonne 2 ligne 3, colonne 3 ligne 3, colonne 4
ligne 4, colonne 1 ligne 4, colonne 2 ligne 4, colonne 3 ligne 4, colonne 4


Le même tableau avec du style


Titre 1 Titre 2 Titre 3 Titre 4
ligne 1, colonne 1 ligne 1, colonne 2 ligne 1, colonne 3 ligne 1, colonne 4
ligne 2, colonne 1 ligne 2, colonne 2 ligne 2, colonne 3 ligne 2, colonne 4
ligne 3, colonne 1 ligne 3, colonne 2 ligne 3, colonne 3 ligne 3, colonne 4
ligne 4, colonne 1 ligne 4, colonne 2 ligne 4, colonne 3 ligne 4, colonne 4


Un tableau sans style

<TABLE >
<CAPTION>Les océans</CAPTION>

<THEAD>
<TR>
<TH></TH>
<TH>Surface</TH>
<TH>Profondeur moyenne</TH>
</TR>
<TR>
<TH></TH>
<TH>millions de km<SUP>2</SUP></TH>
<TH>m</TH>
</TR>
</THEAD>

<TBODY>
<TR>
<TH>Arctique</TH>
<TD>13 000</TD>
<TD>1 200</TD>
</TR>
<TR>
<TH>Atlantique</TH>
<TD>87 000</TD>
<TD>3 900</TD>
</TR>
<TR>
<TH>Pacifique</TH>
<TD>180 000</TD>
<TD>4 000</TD>
</TR>
<TR>
<TH>Indien</TH>
<TD>75 000</TD>
<TD>3 900</TD>
</TR>
<TR>
<TH>Antarctique</TH>
<TD>20 000</TD>
<TD>4 500</TD>
</TR>
</TBODY>

<TFOOT>
<TR>
<TH>Total</TH>
<TD>361 000</TD>
<TD></TD>
</TR>
<TR>
<TH>Moyenne</TH>
<TD>72 000</TD>
<TD>3 800</TD>
</TR>
</TFOOT>

</TABLE>



Les océans
Surface Profondeur moyenne
millions de km2 m
Arctique 13 000 1 200
Atlantique 87 000 3 900
Pacifique 180 000 4 000
Indien 75 000 3 900
Antarctique 20 000 4 500
Total 361 000
Moyenne 72 000 3 800


Et maintenant le même tableau avec du STYLE!

<style>

#demo-table {
font: 100% sans-serif;
background-color: #efe;
border-collapse: collapse;
empty-cells: show;
border: 1px solid #7a7;
}

#demo-table > caption {
text-align: left;
font-weight: bold;
font-size: 200%;
border-bottom: .2em solid #4ca;
margin-bottom: .5em;
}


/* règles de base partagées */
#demo-table th,
#demo-table td {
text-align: right;
padding-right: .5em;
}

#demo-table th {
font-weight: bold;
padding-left: .5em;
}


/* en-tête */
#demo-table > thead > tr:first-child > th {
text-align: center;
color: blue;
}

#demo-table > thead > tr + tr > th {
font-style: italic;
color: gray;
}

/* taille des valeurs en exposant */
#demo-table sup {
font-size: 75%;
}

/* corps du tableau */
#demo-table td {
background-color: #cef;
padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
content: " :";
}


/* pied du tableau */
#demo-table tfoot {
font-weight: bold;
}

#demo-table tfoot th {
color: blue;
}

#demo-table tfoot th:after {
content: " :";
}

#demo-table > tfoot td {
background-color: #cee;
}

#demo-table > tfoot > tr:first-child td {
border-top: .2em solid #7a7;
}
</style>

Les océans
Surface Profondeur moyenne
millions de km2 m
Arctique 13 000 1 200
Atlantique 87 000 3 900
Pacifique 180 000 4 000
Indien 75 000 3 900
Antarctique 20 000 4 500
Total 361 000
Moyenne 72 000 3 800
IMP :: RSS :: HTML :: TXT :: Clone :: Historique :: Propriétaire : BaBel :: mentions légales