Faculté des Sciences de Bizerte
Initiation HTML et CSS
Enseignante : Rim Mahouachi
Module : UX Design – Groupe : GLSI2 – AU. 2021 - 2022
Structure d’un document HTML simplifié
2 Rim Mahouachi – GLSI2 – TD UX Design
Les liens hypertextes
Quel que soit le type de liens que l’on souhaite créer en HTML (liens
internes, des liens externes, ou des liens vers un autre endroit d’une même
page), nous utiliserons toujours l’élément a qui est l’abréviation de « anchor
» (ancre) accompagné de son attribut href pour « hypertext reference ».
<a href="[Link]">Accueil</a>
indique la cible du lien, c’est-à-dire l’endroit où
l’utilisateur doit être envoyé après avoir cliqué Ancre du lien
sur le lien
On peut ajouter l’attribut title="titre du lien" pour ajouter une info-bulle au survol et
indiquer à l’utilisateur où il va arriver
3 Rim Mahouachi – GLSI2 – TD UX Design
Les liens hypertextes
Exemple 1 : un lien relatif
4 Rim Mahouachi – GLSI2 – TD UX Design
Les liens hypertextes
Exemple 2 : un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos
pages HTML lorsqu'elles sont très longues.
Pour créer une ancre, il faut rajouter l'attribut id à une balise qui va alors servir
de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre
5 Rim Mahouachi – GLSI2 – TD UX Design
Les images
Pour afficher une image sur une page HTML, on utilise la balise :
<img src="ref_image" alt="description de l’image" />
Exemple :
donne le chemin vers la source de texte alternatif qui décrit le contenu de l’image
l’image et la remplace si l’image n’est pas téléchargée
6 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
La balise form
Balise principale du formulaire
Deux méthodes
method="get" : limitée à 255 caractères, informations
passées dans la barre d’adresse
method="post" : envoie les données dans le corps de la
requête sans passer par la barre d’adresse, c’est la
méthode la plus utilisée
Action : l’adresse du fichier ou programme qui va
traiter les données
7 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
La balise form
Exemple
8 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
Les éléments d’un formulaire
9 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
Zone de texte et label
La zone de texte monoligne <input>
Le label
10 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
Attributs de la zone de texte
L’attribut value : donne une valeur par défaut au champ
L’attribut maxlength : limite le nombre de caractères maximum acceptés
dans le champ
L’attribut placeholder: donne une indication de ce que devrait contenir le
champ
11 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
Zone de texte multiligne <textarea>
PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
12 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
L’élément input
L’attribut type peut prendre de nombreuses valeurs possibles:
13 Rim Mahouachi – GLSI2 – TD UX Design
Les formulaires
Boutons
button : bouton cliquable (utilisable en JavaScript)
14 Rim Mahouachi – GLSI2 – TD UX Design
Mise en forme avec le CSS
15 Rim Mahouachi – GLSI2 – TD UX Design
Le CSS : comment l’intégrer ?
Attribut style = …;
Ex: <h1 style="color:blue;" >
CSS interne dans le <head> avec la balise <style>
16 Rim Mahouachi – GLSI2 – TD UX Design
Le CSS : comment l’intégrer ?
Feuille de style externe
17 Rim Mahouachi – GLSI2 – TD UX Design
Le CSS : comment l’intégrer ?
Feuille de style externe
Exemple
[Link]
[Link]
lier la feuille de
style au document
HTML
18 Rim Mahouachi – GLSI2 – TD UX Design
Cibler une balise HTML
Pour cibler un élément doté d'une classe en CSS :
element.element_classe { }
Exemple
[Link] { } va cibler tous les éléments : <p class="toto"> … </p>
Pour cibler un élément par son identifiant en CSS:
#element_id { }
Exemple
h1#toto { } va cibler l’élément: <h1 id="toto"> … </h1>
Attention l’id d’un élément doit être unique
contrairement à la classe
19 Rim Mahouachi – GLSI2 – TD UX Design
En résumé
20 Rim Mahouachi – GLSI2 – TD UX Design
Les pseudos-classes sur les liens
Le sélecteur a:link désigne les liens hypertextes non visités
Le sélecteur a:visited désigne les liens hypertextes déjà visités
Le sélecteur a:hover désigne un lien survolé
Le sélecteur a:active désigne un lien cliqué
Remarque
:hover peut être appliqué sur d’autres éléments que des liens
On peut écrire img:hover pour créer un effet au survol d’une image, par exemple
Démo : hover sur les boutons ([Link]
21 Rim Mahouachi – GLSI2 – TD UX Design
:focus sur les liens et inputs
:focus appliqué sur les liens, boutons, ou inputs lorsqu’ils ont le
focus
Résultat
22 Rim Mahouachi – GLSI2 – TD UX Design
La propriété cursor
Elle définit la forme du curseur lorsque le pointeur est au-
dessus de l'élément
Plusieurs valeurs sont possibles
Auto : Le navigateur détermine le curseur à afficher en fonction
du contexte (par exemple, l'effet sera équivalent à text lors du
survol du texte)
Default : Le curseur par défaut de la plateforme (qui est
généralement une flèche)
None : Aucun curseur n'est affiché
Help : Le pointeur indique qu'une aide est disponible
Pointer : Le curseur est un pointeur qui indique un lien
(généralement c'est une main)
Wait : Le programme est occupé, empêchant toute interaction
..
23 Rim Mahouachi – GLSI2 – TD UX Design
Propriétés de typographie
font-family : indique la (ou les) polices à utiliser
L’ordre des polices appliquées est celui de la propriété de gauche à droite
font-size : valeur en unité permet de définir la taille d’une police
font-weight: valeur permet de déterminer l’épaisseur de la police
Principales valeurs possibles : normal, bold (gras)
font-style : valeur permet de préciser le style de police
Principales valeurs possibles : normal, italic, oblique
24 Rim Mahouachi – GLSI2 – TD UX Design
Autres propriétés de typographie
text-align : valeur (left, right, center, justify)
color : valeur
text-transform: valeur (none, capitalize, uppercase, lowercase)
font-variant : valeur (normal, small-caps)
text-decoration : valeur (none, overline, underline, line-through)
..
Exemple
25 Rim Mahouachi – GLSI2 – TD UX Design