420-B16-RO : Techniques de

développement d’applications
hypermédia I
2 – Langage HTML partie 2

Professeur : Sylvain Labranche

slabranche@crosemont.qc.ca
I) Les tableaux

 Indiquer le début et la fin du tableau

 <table> </table>
 Indiquer le début et la fin d’une ligne
 <tr> </tr>
 tr pour table row
 Indiquer le début et la fin du contenu d'une cellule.
 <td> </td>
 td pour table data
 Une cellule (td) doit être à l'intérieur d'une balise ligne (tr).
 Une ligne (tr) doit être à l'intérieur d'une balise tableau
(table).
 Exemple diapositive suivante
Exemple: tableau1.html
(tableau sans bordure)
Exemple: tableau1.html
(2)
Formater un tableau avec
CSS
 Bordure séparée:
 de 1 pixel (1px),
 de couleur noire (black)
 avec un trait plein (solid)
 Exemple: tableau2.html
 Formater un tableau avec
CSS (2)
 Bordures collées:
 Pour coller les bordures entre les cellules, on utilise une
propriété du tableau: border-collapse avec la valeur
collapse.
 Largeur du tableau:
 Width:250px;

 Exemple: tableau3.html
 Titre & en-tête du tableau
 Titre du tableau
 Il est aussi appelé Légende
 Entre <caption> et </caption>
 Propriété CSS pour position:
 caption-side: top (par défaut) ou
 caption-side: bottom
 Une ligne d’en-tête
 Entre <th> et </th> (au lieu de <td> et</td> )
 Ajouter une bordure à l’en-tête
td,th {
border: 1px solid black;
}
 La virgule se lit "et" : Toutes les balises td ET th.

• En général,
 L’en-tête est mis en gras par les navigateurs
Exemple: tableau4.html
Exemple: tableau4.html (2)
Fusion des lignes et des
colonnes
 La fusion de colonnes (ou horizontale)
 On utilisera l'attribut colspan.
<td colspan=3>... suite </td>
 On indique que la cellule s'étalera sur 3
colonnes.

 La fusion de lignes (ou verticale)

 On utilisera l'attribut rowspan.
<td rowspan=2>Bélanger</td>
 On indique que la cellule s'étalera sur 2 lignes.
Exemple: tableau5.html
 Structurer un tableau
 Le HTML5 prévoit des balises pour structurer de façon logique le
contenu des grands tableaux.
 L‘en-tête du tableau: entre <thead> et </thead>
 Le corps du tableau: <tbody> et </tbody>
 Le pied du tableau: entre <tfoot> et </tfoot>

 Remarque:
 La balise <tfoot> doit se situer avant la balise <tbody> .
 Cela permet au navigateur de prévoir le pied du tableau avant la
réception des données.

 Exemple: tableau6.html
 Dans ce tableau, le pied de page reprend
les mêmes éléments que l’en-tête.
Exemple: tableau6.html
 II) Mettre en valeur des
textes
HTML propose différentes balises pour mettre en valeur des mots plus
importants que d’autres:

 <strong> … </strong>
 Pour mettre un texte bien en valeur.
 Signifie fort, ou important
 Le texte est affiché généralement en gras par les navigateurs.
 Les synthèses vocales qui lisent les pages Web appliquent une
intonation de voix différente ou un niveau sonore plus élevé.

 <em> … </em>
 Pour mettre un peu en valeur un texte.
 Signifie emphase
 Le texte est affiché généralement en italique par les navigateurs.
Mettre en valeur des textes
(2)
 <mark> … </mark>
 Permet de faire ressortir visuellement une portion de
texte (qui n’est pas nécessairement important),
 Le texte est affiché généralement en

surligné
Mettre en valeur des textes
(3)
 Ces balises indiquent le sens des mots et non pas
comment ceux-ci doivent s’afficher. On peut changer
leur affichage en CSS.
 L’utilisation des anciennes balises
 <b> </b> pour gras,
 <i> </i> pour italique
est déconseillée en HTML5.
Mettre en valeur des textes
(4)
 Exemple: mise_valeur_texte.html
Mise en exposant et en
indice
 ^…
 Pour mettre en exposant un texte

 _…
 Pour mettre en indice un texte
Mise en exposant et en
indice (2)
 Exemple: exposant_indice.html
 Texte barré et texte pré-
formaté
 Texte barré:
 <del> … </del>

 Texte pré-formaté:
 <pre> … </pre>
 Affiche le texte tel qu’il a été encodé dans l’éditeur de texte:
 Les espaces,
 Les tabulations et
 Les retours chariots

sont respectés.
 Le texte est affiché avec une police à pas fixe: tous les caractères
avec la même longueur.
Texte barré et texte pré-
formaté (2)
 Exemple: barre_formate.html
 III – Les couleurs
 Les paramètres des
couleurs sont très
importants. On peut  Comment spécifier les
définir: couleurs ?
 La couleur des  Par un nom
caractères
 Par la fonction rgb
 La couleur du fond de
toute la page  Par un nombre
hexadécimal
 La couleur d’un bloc
 La couleur d’une portion
du texte
 La couleur des bordures
 La couleur d’un élément
est définir par le
paramètre color.
 a) Les noms des couleurs:

 On peut spécifier une

couleur par son nom
anglais:
 blue,
 red,
 black,
 Silver
 etc.
b) La fonction rgb

 On peut spécifier une couleur:

 rgb(r, v, b) où r, v et b qui vont de 0 à 255 représentent
respectivement l’intensité lumineuse du rouge, du vert et
du bleu.
 rgb(r%, v%, b%) où r%, v% et b% vont de 0% à 100% en
représentent les pourcentages
 Exemple:
 rgb(192, 0, 255) est équivalent à rgb(75%, 0%,100%)
 C’est le violet.
La fonction rgb (2)

 La forme rgb est celle qui permet de mieux prévoir

une couleur ou d’en préparer une autre.
 Les couleurs franches:
 Elles ont une seule composante non nulle.
 La fonction rgb (3)

 Trois composantes égales:

 rgb(0,0,0) noir
 rgb(128, 128, 128) gris moyen
 rgb(255, 255, 255) blanc brillant
 Remarque:
 Plus les valeurs sont élevées, plus la couleur est lumineuse.
 Plus les valeurs sont faibles et plus le résultat est sombre.
c) Les valeurs
hexadécimales
 La forme classique qui est complètement inutile était
de fournir la couleur sous forme d’une valeur
hexadécimale (système à base 16) constituée de 2
chiffres hexadécimaux.
 Construction générale:
 Chaque groupe va de 00 à FF ( 0 à 255) et
 de gauche à droite représente l’intensité du rouge, du
vert et du bleu.
Les valeurs hexadécimales
(2)
 Exemple:  Remarque:
 #8080FF  On peut lorsque les 3
groupes sont chacun
 Ainsi la couleur
formé de deux chiffres
#8080FF est
égaux abréger la
équivalente à rgb(128,
notation
128, 255)
 #3366FF remplace
#36F

Hexadécimal décimal
e e
A 10
F 15
Nom rgb( , , ) Hexa Couleur
produite
black 0, 0, 0 #000000 noir
white 255, 255, #FFFFFF blanc
255
gray 128, 128, #808080 gris
128
silver 192, 192, #C0C0C0 argent
192
blue 0, 0, 255 #0000FF bleu
navy 0, 0,128 #000080 bleu marine
cyan 0, 255, 255 #00FFFF cyan
(turquoise)
teal 0, 128, 128 #008080 bleu pétrole
green 0, 128, 0 #008000 vert olive
lime 0, 255, 0 #00FF00 citron vert
fuchsia 255, 0, 255 #FF00FF fushia (lilas)
purple 128, 0, 128 #800080 violet
red 255, 0, 0 #FF0000 rouge
 Changer les couleurs d'un
élément
 À l'intérieur de la balise, vous ajoutez:
 style="color:#FF0000;"
 style="color:rgb(24,156,255);"
 style="color:red;"
 Par exemple :
 <h1 style="color:red;">Titre avec couleur</h1>
 Voir couleur.html

 Pouvez-vous penser à une meilleure façon de procéder?

 IV) Encodage des
caractères spéciaux
 Les caractères réservés par le code HTML doivent être
encodés de façon particulière.
 Par exemple, si on veut que le caractère < s'affiche dans une page
Web, il faut utiliser l'encodage spécial.

caractère Référence nommée Référence numérique

< &lt; &#60;

> &gt; &#62;

« &quot; &#34;

& &amp; &#38;

Les formulaires
 Exemple formulaire.html
 Balise form <form> </form> pour formulaire
 Balise input pour un champ de saisie :
 <input type="text" name="pseudo" /> pour un champ de
texte à une ligne
 L’attribut name donne un nom au champ, pour utiliser les
données plus tard.
 Balise label pour donner un nom au champ:
 <label>Votre pseudo</label> : <input type="text"
name="pseudo" />
 On pourrait mettre label n’importe où, il faut lier un label
et un input ensemble.
 Input correct

<form>
<label for="pseudo">Votre pseudo : </label>
<input type="text" name="pseudo" id="pseudo" />
</form>
 Un name et un id?
 name est le nom de la variable, que l’on pourra traiter plus tard.
 Id est l’identifiant de cette balise label. Les deux peuvent être différents
Attributs de input

 size: spécifier la taille du champ

 maxlength : spécifier la taille maximale de la saisie
 placeholder: Texte affiché dans le champ, qui
disparaît lorsque l’on commence à saisir.
 value: valeur par défaut (ne disparaît pas)
Autres types de input

 type="password" : zone mot de passe avec étoiles au

lieu des caractères
 type= "email" : Semble identique à text, mais
navigateur reconnaît que c’est un email et pourra par
exemple proposer un courriel déjà utilisé
 type= "tel" : idem
 type= "url" : idem
 type= "number" : zone mot de passe avec étoiles au
lieu des caractères
 attributs min, max et step(saut lorsque l’on clique sur les
lignes)
Autres types de input (2)

 range
 Sélectionner un nombre avec un curseur
 color
 Sélectionner une couleur
 date
 Sélectionner une date du format 02/05/1990
 Aussi possibles : time, week, month, datetime
Autres champs de saisie

 textarea pour recueillir des commentaires plus longs

 largeur et hauteur contrôlés par CSS
Les choix

 input de type checkbox pour plusieurs choix dans une

liste
 Il faut donner un nom différent à chaque case à cocher
 <input type="checkbox" name="choix" checked />
 checked indique que la case sera cochée par défaut

 input de type radio pour un seul choix dans une liste

 Même nom pour chaque option : pourquoi?
 Choix dans une liste déroulante: pas de balise input,
plutôt select
 option selected pour une valeur par défaut
Regrouper des champs dans
un grand formulaire
 Exemple fieldSet.html
 Avec la balise fieldset, on peut regrouper plusieurs
champs selon une thématique.
 On donne un nom au fieldset avec la balise <legend>
On peut envoyer nos
réponses!
 On utilise encore la balise input de type:
 type="submit": le principal bouton d'envoi de
formulaire. Le visiteur sera conduit à la page indiquée
dans l'attributactiondu formulaire.
 type="reset": remise à zéro du formulaire.
 type="image": équivalent du bouton submit, présenté
cette fois sous forme d'image. Rajoutez l'attribut
srcpour indiquer l'URL de l'image.
 type="button": bouton générique, qui n'aura (par
défaut) aucun effet. En général, ce bouton est géré
en JavaScript, donc plus tard dans la session
On envoie nos réponses!
…à qui?
 Dans formulaire.html
 Comme attribut de form:
 method="get" : Les réponses sont envoyées dans la
barre d’adresse (une nouvelle page est chargée
avec un url modifié).
 Limité à 255 caractères
 Nous pourrons traiter les réponses avec Javascript
 method ="post" : Les réponses sont envoyées par HTTP
 Nous pourrons traiter les réponses avec PHP
Sources

 Les diapositives du cours sont fortement inspirées des

cours suivants sur OpenClassrooms:
 http://openclassrooms.com/courses/comprendre-le-web
 http://openclassrooms.com/courses/apprenez-a-creer-
votre-site-web-avec-html5-et-css3
 http://openclassrooms.com/courses/dynamisez-vos-sites-
web-avec-javascript
 http://openclassrooms.com/courses/concevez-votre-
site-web-avec-php-et-mysql