Initiation HTML Et CSS

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="index.html">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

Exemple 1 : un lien relatif

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

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

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

Les formulaires
La balise form
Exemple

Les formulaires
Les éléments d’un formulaire

Les formulaires
Zone de texte et label
La zone de texte monoligne <input>
Le label

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

Les formulaires
Zone de texte multiligne <textarea>
PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante

Les formulaires
L’élément input
L’attribut type peut prendre de nombreuses valeurs possibles:

Les formulaires
Boutons
button : bouton cliquable (utilisable en JavaScript)

Mise en forme avec le CSS

Le CSS : comment l’intégrer ?
Attribut style = …;
Ex: <h1 style="color:blue;" >
CSS interne dans le <head> avec la balise <style>

Feuille de style externe

Feuille de style externe
Exemple
style.css
test.html
lier la feuille de
style au document
HTML

Cibler une balise HTML
Pour cibler un élément doté d'une classe en CSS :
element.element_classe { }
Exemple
p.toto { } 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

En résumé

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 (https://tympanus.net/Development/CreativeButtons/)

:focus sur les liens et inputs
:focus appliqué sur les liens, boutons, ou inputs lorsqu’ils ont le

focus
Résultat

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
..

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

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

Initiation HTML Et CSS

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Initiation HTML Et CSS

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences de Bizerte

Initiation HTML et CSS

Enseignante : Rim Mahouachi

Module : UX Design – Groupe : GLSI2 – AU. 2021 - 2022

2 Rim Mahouachi – GLSI2 – TD UX Design

indique la cible du lien, c’est-à-dire l’endroit où

3 Rim Mahouachi – GLSI2 – TD UX Design

4 Rim Mahouachi – GLSI2 – TD UX Design

5 Rim Mahouachi – GLSI2 – TD UX Design

<img src="ref_image" alt="description de l’image" />

6 Rim Mahouachi – GLSI2 – TD UX Design

Balise principale du formulaire

Action : l’adresse du fichier ou programme qui va

7 Rim Mahouachi – GLSI2 – TD UX Design

8 Rim Mahouachi – GLSI2 – TD UX Design

9 Rim Mahouachi – GLSI2 – TD UX Design

La zone de texte monoligne <input>

10 Rim Mahouachi – GLSI2 – TD UX Design

L’attribut maxlength : limite le nombre de caractères maximum acceptés

L’attribut placeholder: donne une indication de ce que devrait contenir le

11 Rim Mahouachi – GLSI2 – TD UX Design

12 Rim Mahouachi – GLSI2 – TD UX Design

13 Rim Mahouachi – GLSI2 – TD UX Design

button : bouton cliquable (utilisable en JavaScript)

14 Rim Mahouachi – GLSI2 – TD UX Design

15 Rim Mahouachi – GLSI2 – TD UX Design

16 Rim Mahouachi – GLSI2 – TD UX Design

17 Rim Mahouachi – GLSI2 – TD UX Design

18 Rim Mahouachi – GLSI2 – TD UX Design

Pour cibler un élément par son identifiant en CSS:

19 Rim Mahouachi – GLSI2 – TD UX Design

20 Rim Mahouachi – GLSI2 – TD UX Design

Le sélecteur a:link désigne les liens hypertextes non visités

Démo : hover sur les boutons (https://tympanus.net/Development/CreativeButtons/)

21 Rim Mahouachi – GLSI2 – TD UX Design

:focus appliqué sur les liens, boutons, ou inputs lorsqu’ils ont le

22 Rim Mahouachi – GLSI2 – TD UX Design

Plusieurs valeurs sont possibles

23 Rim Mahouachi – GLSI2 – TD UX Design

L’ordre des polices appliquées est celui de la propriété de gauche à droite

font-weight: valeur permet de déterminer l’épaisseur de la police

font-style : valeur permet de préciser le style de police

24 Rim Mahouachi – GLSI2 – TD UX Design

text-align : valeur (left, right, center, justify)

25 Rim Mahouachi – GLSI2 – TD UX Design

Vous aimerez peut-être aussi