Sunteți pe pagina 1din 3

Exercice 6 Les tableaux

1. Crez un fichier mon-cv.html dans le rpertoire /EnvSystemeReseau/tp-html. Copiez-y le contenu du fichier base.html. 2. Compltez le contenu de la balise <title> imbrique dans <head> avec le titre suivant : Curriculum Vitae de Nom Prnom. 3. Souvent, pour prsenter des informations structures en lignes et en colonnes, on utilise les tableaux. La balise <table> permet d'insrer un tableau dans une page Web. Un tableau est dfini de la manire suivante : Le tableau commence par la balise ouvrante <table> et se termine par la balise fermante </table>. On utilise la balise <tr> (table row) pour insrer une nouvelle ligne. On utilise la balise <td> (table data) pour insrer une nouvelle cellule dans une ligne. On utilise la balise <th> (table head) pour insrer un titre de ligne ou de colonne Voici un exemple de tableau et le rsutlat de son affichage :

1. Dans cet exemple, tous les lment <th> ont un attribut style de mme valeur, et tous les lments <td> ont un attribut style de mme valeur. Afin d'appliquer les mmes styles plusieurs balises sans les rpter dans Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011

chacune des balises concernes, on peut dfinir une feuille de style interne. Pour cela on utilise la balise <style> dans l'en-tte <head> du document. En voici un exemple :

Le rsultat de l'affichage est le mme que celui du tableau prcdent. La balise <style> contient 3 rgles CSS : la premire s'applique tous les lments <table> de la page, la second s'applique tous les lments <th> de tous les tableaux de la page, la troisime s'applique tous les lments <td> de tous les tableaux de la page. 2.

Il existe 3 manires de dfinir des styles CSS : les styles en ligne : dans le code HTML, avec l'attribut style dans chaque lment

les styles incorpors : dans l'en-tte de la page, avec la balise <style>

les styles externes : dans une feuille de style spare (un fichier dont le nom a pour extension .css, fichier.css dans l'exemple suivant). Une feuille de style externe peut tre applique n'importe quel fichier HTML. Il suffit, pour cela, d'insrer, dans le fichier HTML concern, une balise <link> de la manire suivante :

Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011

fichier.css

fichier.html

1. Dans le fichier mon-cv.html, nous allons crer 3 sections : diplmes, expriences professionnelles et loisirs. Vous dfinirez les styles en interne ou en externe. Le titre de chaque section sera insr l'aide d'une balise <h3>. Il sera affich en bleu (color: blue;) et centr horizontalement (text-align: center). Le contenu de chaque section sera un tableau. Dans la section Diplmes, le tableau contiendra autant de lignes que de diplmes que vous avez obtenus. Il sera divis en 3 colonnes dont les titres seront : Anne, Diplme, tablissement. Le contenu des cellules sera align gauche (text-align: left;) Dans la section Expriences professionnelles, le tableau sera divis en 3 colonnes dont les titres seront : Priode, tablissement, Poste occup. Le contenu des cellules sera galement align gauche. Dans la section Loisirs, le tableau contiendra 3 lignes dont les titres seront : langues, activits artistiques et sports. Chaque ligne contient 2 colonnes.

1. Ajoutez un titre principal votre page l'aide d'une balise <h1> que vous formaterez selon votre got. 2. Ajoutez galement une section contenant votre identit et vos coordonnes (Nom et prnom, adresse postale, adresse lectronique, numros de tlphone fixe et portable).

Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011

S-ar putea să vă placă și