Il existe 3 types de listes à puces :
C'est la liste à puce la plus souvent employée, c'est une énumération avec un point (style par défaut) et que j'ai utilisé dans le paragraphe précédent. Il se rédige de cette manière :
<ul>
<li> premier document </li>
<li> deuxième document </li>
<li> troisième document </li>
</ul>
Avec le résultat suivant:
Cette liste à propose une énumération hiérarchisée (1, 2, 3,...A, B, C,..). Voici la manière de la rédiger:
<ol>
<li> article 1 </li>
<li> article 2 </li>
<li> article 3 </li>
</ol>
Avec le résultat suivant:
Cette liste est employée dans les définitions :
<dl>
<dt> html </dt>
<dd>C'est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.</dd>
<dt> CSS </dd>
<dd> (Cascading Style Sheets) : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). </dd>
</dl>
Avec le résultat suivant:
>> site de puces à télécharger : http://www.xbizstudio.com/?/Bullets/7-Liste-de-puces-pour-design-de-sites-internet
Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes.
Un tableau doit être construit selon les règles suivantes (exemple d'un tableau de deux lignes et deux colonnes):
<table> → début du tableau
<caption> → début du titre
</caption> → fin du titre
<tr> → début de la ligne A
<td> → début de la cellule 1
</td> → fin de la cellule 1
<td> → début de la cellule 2
</td> → fin de la cellule 2
</tr> → fin de la ligne A
<tr> → début de la ligne B
<td> → début de la cellule 3
</td> → fin de la cellule 3
<td> → début de la cellule 4
</td> → fin de la cellule 4
</tr> → fin de la ligne B
</table> → fin du tableau
Cela donne un tableau transparent. lorsqu'on le remplit de texte, les éléments s'alignent parfaitement mais on ne voit pas le tableau tant qu'on en lui a pas donné de style.
Il existe des cellules d'en-tête <th></th> qui permettent de mettre en valeur des titres de colonne en haut ou à gauche.
Voici un exemples de tableaux :
| th | th | th | th |
|---|---|---|---|
| th | td | td | td |
Lorsque l'on écrit le code d'un tableau tel que je l'indique ci-dessus, le tableau ne possède pas de bordures et la présentation est triste.
Afin de rendre visible le tableau il est nécessaire d'introduire quelques notions de feuilles de style. Dans le code HTML, nous allons dans la balise <head> ajouter la balise <style> :
<head>
<style>
</style>
</head>
Entre les deux balises <style></style>, nous allons placer les feuilles de style. La façon de rédiger les feuilles de style est la suivante :
attribut { propriété:style;}Il faut bien placer la ou les propriétés entre deux accolades et séparer chaque style avec un point virgule.
Nous allons ajouter au tableau, table un cadre, border noir(#000000), un trait continu (solid), et une épaisseur moyenne (2 pixels) :
table { border:#000000 solid 2px;}
Maintenant, le tableau est encadré, nous allons donner une couleur aux bordures border de cellules td en traits continus (solid) fins (1px) et bleus (#0099FF) :
td {
border:#0099FF solid 1px;
}
Le tableau possède maintenant un cadre noir et ses cellules sont encadrées de bleu, mais elles ne sont pas collées les unes aux autres. Pour cela, on a longtemps employé l'attribut cellspacing (qui est est encore accepté en XHTML 1.O mais ne le sera plus en HTML 5 ). Les feuilles de style permettent la même action, c'est à dire coller les cellules les unes aux autres, en employant le style border-collapse
:
table {
border:#000000 solid 2px;
border-collapse:collapse;
}
td {
border:#0099FF solid 1px;
}
On peut aussi ajouter un fond coloré backgroud-color gris (#CCCCCC) au th par exemple:
th { background-color:#CCCCCC;}
On peut fusionner les cellules d'un tableau de manière horizontale ou verticale. Pour les cellules en ligne on ajoutera l'attribut colspan="n" ; à la première balise <td>, "n" étant le nombre de colonnes que l'on fusionne, ici 3 colonnes :
| cellule fusionnée | ||
|---|---|---|
| A | B | C |
| D | F | G |
Voici le code html du tableau ci-dessus :
<table>
<tr><td colspan="3">cellule fusionnée</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>F</td><td>G</td></tr>
</table>
Pour les cellules en colonnes, c'est rowspan="n" qui sera utilisé, n étant de le nombre de cellules fusionnées. Attention à l'écriture du tableau. Pour les lignes des cellules CD et FG, il n'y a que deux balises <td> à la place de trois.
| cellule fusionnée |
cellule A | cellule B |
|---|---|---|
| cellule C | cellule D | |
| cellule F | cellule G |
Voici le code html du tableau ci-dessus :
<table>
<tr><td rowspan="3">cellule fusionnée</td><td>cellule A</td><td>cellule B</td></tr>
<tr><td>cellule C</td><td>cellule D</td></tr>
<tr><td>cellule F</td><td>cellule G</td></tr>
</table>
Les couleurs pour le html s'écrivent au moyen du code hexadécimal. Ce code utilise 16 éléments, 10 chiffres arabes et 6 lettres latines :
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F . Un code hexadécimal possède 6 caractères plus un dièse, le tout collé, par exemple, la couleur rouge vif s'écrit : #FF0000 pour les principales teintes on peut aussi employer leur nom en anglais, comme blue, red, green, yellow, pink, white, black...
| couleur | codage hexadécimal | couleur | codage hexadécimal |
|---|---|---|---|
| white | #FFFFFF | bisque | #FFE4C4 |
| ghostwhite | #F8F8FF | wheat | #F5DEB3 |
| whitesmoke | #F5F5F5 | moccasin | #FFE4B5 |
| snow | #FFFAFA | peachpuff | #FFDAB9 |
| azure | #F0FFFF | mistyrose | #FFE4E1 |
| honeydew | #F0FFF0 | pink | #FFC0CB |
| mintcream | #F5FFFA | lightpink | #FFB6C1 |
| lightyellow | #FFFFE0 | rosybrown | #BC8F8F |
| floralwhite | #FFFAF0 | coral | #FF7F50 |
| ivory | #FFFFF0 | tomato | #FF6347 |
| linen | #FAF0E6 | orangered | #FF3300 |
| oldlace | #FDF5E6 | red | #FF0000 |
| seashell | #FFF5EE | crimson | #DC143C |
| lavenderblush | #FFF0F5 | indianred | #CD5C5C |
| lavender | #E6E6FA | firebrick | #B22222 |
| gainsboro | #DCDCDC | darkred | #8B0000 |
| lightgrey | #D3D3D3 | maroon | #800000 |
| silver | #C0C0C0 | brown | #A52A2A |
| darkgray | #A9A9A9 | saddlebrown | #8B4513 |
| lightslategray | #778899 | saddlebrown | #8B4513 |
| slategray | #708090 | sienna | #A0522D |
| gray | #808080 | chocolate | #D2691E |
| dimgray | #696969 | darkorange | #FF8C00 |
| #000000 ou black | orange | #FFA500 | |
| cornsilk | #FFF8DC | lightsalmon | #FFA07A |
| palegoldenrod | #EEE8AA | darksalmon | #E9967A |
| khaki | #F0E68C | salmon | #FA8072 |
| yellow | #FFFF00 | sandybrown | #F4A460 |
| gold | #FFD700 | navajowhite | #FFDEAD |
| darkgoldenrod | #B8860B | blanchedalmond | #FFEBCD |
| peru | #CD853F | papayawhip | #FFEFD5 |
| goldenrod | #DAA520 | antiquewhite | #FAEBD7 |
| tan | #D2B48C | beige | #F5F5DC |
| burlywood | #DEB887 | deepskyblue | #00BFFF |
| darkkhaki | #BDB76B | lightskyblue | #87CEFA |
| chartreuse | #7FFF00 | lightsteelblue | #B0C4DE |
| greenyellow | #ADFF2F | powderblue | #B0E0E6 |
| lawngreen | #7CFC00 | skyblue | #87CEEB |
| lime | #00FF00 | cornflowerblue | #6495ED |
| springgreen | #00FF7F | dodgerblue | #1E90FF |
| palegreen | #98FB98 | mediumslateblue | #7B68EE |
| mediumspringgreen | #00FA9A | slateblue | #6A5ACD |
| limegreen | #32CD32 | royalblue | #4169E1 |
| mediumseagreen | #3CB371 | #0000FF ou blue | |
| yellowgreen | #9ACD32 | #0000CDou medium blue | |
| mediumaquamarine | #66CDAA | #483D8B ou darkslateblue | |
| darkseagreen | #8FBC8F | #000080 ou navy | |
| forestgreen | #228B22 | #00008B ou darkblue | |
| green | #008000 | #191970 ou midnightblue | |
| seagreen | #2E8B57 | #4B0082 ou indigo | |
| olive | #808000 | blueviolet | #8A2BE2 |
| olivedrab | #6B8E23 | darkorchid | #9932CC |
| darkgreen | #006400 | darkviolet | #9400D3 |
| #2F4F4F ou darkslategray | mediumpurple | #9370DB | |
| #556B2F ou darkolivegreen | orchid | #DA70D6 | |
| aquamarine | #7FFFD4 | mediumorchid | #BA55D3 |
| steelblue | #4682B4 | darkmagenta | #8B008B |
| cyan | #00FFFF | magenta | #FF00FF |
| paleturquoise | #AFEEEE | hotpink | #FF69B4 |
| turquoise | #40E0D0 | violet | #EE82EE |
| mediumturquoise | #48D1CC | thistle | #D8BFD8 |
| darkturquoise | #00CED1 | plum | #DDA0DD |
| lightseagreen | #20B2AA | palevioletred | #DB7093 |
| cadetblue | #5F9EA0 | deeppink | #FF1493 |
| teal | #008080 | mediumvioletred | #C71585 |
| darkcyan | #008B8B | purple | #800080 |