Cours sur le Xhtml/CSS

Cours sur le Xhtml/CSS, tutoriel & guide de travaux pratiques en pdf.

Les liens
Pour créer un lien nous allons utiliser la balise <a> exemple:
<a href= »http://test.com »>aller sur test.com</a>
[color=red]href= »http://test.com »[color] signifie que l’on fait un lien vers le site test.com
Mais on peut très bien mettre un lien vers une page de votre site: <a href= »contact.html »>aller à la rubrique contact</a>
Pour créer un lien qui envoie un mail il faut mettre à la place de l’adresse du site le mot mailto suivi
de l’adresse du destinataire.
code:
<a href= »mailto:test@test.fr »>Nous contacter</a>
Les images
Pour insérer une image c’est très simple il vous suffit d’utiliser la balise <img>.
Allez, je vous fais un petit exemple.
code:
<p>
Voici ma photo:<br />
<img src= »image.jpg » alt= »Photo souvenir » />
</p>
src correspond à source, c’est donc l’endroit où se trouve votre image et alt correspond à texte alternatif c’est donc un petit message qui décrit votre image.LE TEXTE ALTERNATIF EST OBLIGATOIRE.
les listes à puces
Il existe plusieurs types de listes à puces mais je vais vous montrer le type « classique ».(C’est d’ailleurs celui-là que j’utilise la plupart du temps).
Tout d’abord on va créer la liste à puce:
<ul></ul>
Notre liste est créée, mais elle est vide.
Pour créer des éléments dans la liste à puce nous allons les mettre entre les balises <li> et </li> Pour mieux comprendre je vous fais un petit exemple.
code:
<ul>
<li>ordinateur</li>
<li>portables</li>
<li>webcam</li>
</ul>
Et voilà une liste à puce, vous pouvez remplacer le texte par des liens(Les listes à puces avec des
liens sont les éléments utilisés pour faire les colonnes sur les sites qui servent à se déplacer de rubrique en rubrique).
Les tableaux
Pour créer un tableau on va utiliser les balises <table> et </table>.
Tout le code de notre tableau se trouvera entre ces deux balises.
Ensuite pour créer une ligne il faudra placer son contenu entre <tr> et </tr> et pour créer une cellule il faudra placer son contenu entre <td> et </td>.
Comme cela n’est pas très facile à comprendre, je vous fais un exemple.
code:
<table>
<tr>
<td>pierre</td>
<td>manet</td>
<td>43 ans</td>
</tr>
<tr>
<td>hugo</td>
<td>dupont</td>
<td>37 ans</td>
</tr>
</table>
Mais en tapant ce code le tableau n’aura pas de bordure, nous aurons donc besoin du CSS pour pouvoir en mettre.