Académique Documents
Professionnel Documents
Culture Documents
HTML+CSS
3
Les éditeurs HTML
• Notepad ++
• Sublime Text
• BlueGriffon
• Jsbin
4
Eléments, balises et attributs
5
Concepts de base du HTML
• Les fichiers HTML sont structurés en deux parties principales:
l’en-tête <head> et le corps <body>
7
Les balises de base d’un document HTML
8
Les balises de base d’un document HTML
suite
Les listes
<ol> : liste numérotée; <ul>: liste non-numérotée
les éléments de la liste sont : <li>…</li>
<dl> : liste de définition utilisé pour présenter des glossaires
les éléments de la liste <dt>…</dt> pour les termes à définir
Et <dd>..</dd> pour la définition des termes
9
Activité 1
10
Insertion des liens
Syntaxe : <a href= "cible du lien " > texte du lien </a>
2ème Cas : Un lien vers un fichier téléchargeable (.jpg , .pdf , .doc , .doc , .zip etc…)
<a name="nom"> la cible à atteindre</a> : (il s’agit de mettre une ancre à l’endroit que l’on veut atteindre)
<a href="#nom">Texte du lien vers la cible à atteindre </a> : (il faut pointer le lien vers l’ancre en la précédant
par une #)
11
Validation
• Différents navigateurs peuvent produire
différents résultats à partir d’un même code
12
13
Sélecteurs, Propriétés, valeurs
• Le sélecteur est généralement l’élément
HTML auquel on applique un style
• Une propriété détermine le style qui va être
appliqué à un élément
• Une valeur détermine le comportement
d’une propriété
14
Sélecteurs, Propriétés, valeurs
• Exemple:
sélecteur p{
valeurs
color: blue;
propriétés
font-size: 16px;
}
OÙ ECRIT-ON LE CSS ?
• 3 possibilités :
– Dans l’élément <head >du document HTML,
– Dans la balise ouvrante d’un élément,
– Dans un fichier CSS séparé.
Il est recommandé d’utiliser la dernière méthode.
Peut-on changer par exemple le mot langage avec une autre couleur?
21
Les éléments DIV et span
• Ces deux éléments HTML ne possèdent
aucune valeur sémantique, c’est-à-dire qu’ils
ne servent pas à préciser la nature d’un
contenu.
• Ils sont des conteneurs génériques qui ont
été créés pour nous permettre d’ordonner
nos pages plus simplement en CSS.
22
23
Eléments de type block & inline
• Tout élément, en HTML, est:
– De type block (Div)
– De type inline (span)
Eléments block Eléments inline
P em
H1, h2, h3,… strong
Header, article, footer… mark
Ol, ul,dl a
table img
24
SELECTEURS AVANCES
• Il est possible de combiner les sélecteurs
pour cibler précisément du contenu.
• Appliquer le même style à tous les éléments:
* { propriété: valeur; }
• Appliquer un style aux élément A et B :
A, B { propriété: valeur; }
• Sélectionner un élément B contenu dans A :
A B { propriété: valeur; }
Les couleurs
26
Activité 2
• En utilisant le document suivant:
– Mettre le premier paragraphe en rouge
– Modifier le 1er paragraphe avec la couleur
hexadécimale(#FF0000)
– Mettre le 2ème paragraphe en utilisant les couleurs RGB de
votre choix
– Le 4ème paragraphe en utilisant les couleurs RGB avec opacité
de 0,9
rgb(0..255,0..255,0..255)
rgba(0..255,0..255,0..255,opacité:0..1)
27
28
29
30
L’héritage
• Les éléments en HTML « héritent » des styles
de leurs parents, d’où le « cascading » de CSS
• En cas de conflit, le style le plus proche de
l’élément en question sera appliqué
31
Formater le texte et
positionner les éléments
32
Les propriétés de type font
Font-size (px,pt,em,ex,%)
Font-style(normal/italic/oblic/inherit)
Font-weight(lighter/normal/bold/bolder/lnherit
Font-family
33
Activité 3
• Reprendre l’activité 2 et mettre tout le texte
en italic, police arial
• Mettre le premier paragraphe en gras, taille
30, ce paragraphe ne doit pas être en italique
• Utiliser pour le 2ème paragraphe une valeur
relative pour la taille(%,em,ex)
• Mettre la police du dernier paragraphe calibri
34
35
Les propriétés de type text
Text-decoration(underline/overline/linethrough/inherit/none
Text-transform(uppercase/capitalize/lowercase/none/inherit)
Text-shadow(dep_h_O,dep_v_O,propagation,couleur)en px
36
Activité 3(suite)
• Aligner à droite le premier paragraphe
• Souligner le deuxième paragraphe et le
mettre en majuscule
• Décaler vers la droite de 10px le 3ème
paragraphe
• Mettre la police du dernier paragraphe calibri
• Ajouter un ombre au 3ème paragraphe avec les
paramètres suivants: 3px 2px 4px black
37
38
Le modèle de boîtes
• Un concept fondateur: tout élément d’une
page est une boite rectangulaire et peut avoir
un padding(marge inférieur),une marge
(extérieur)et des bordures
39
HEIGHT & WIDTH
• La hauteur par défaut est déterminé par son
contenu
• La largeur par défaut est déterminé par son
type
• Pour changer la hauteur et la largeur d’un
élément de type block, on utilise les
propriétés width et height
40
Les bordures
• On peut créer des bordures et les
personnaliser grâce aux propriété: border-
width, border-style et border-color et border-
radius
• La propriété border-style définit le style de la
bordure:
41
Margin & Padding
• La propriété margin permet de définir la taille
de l’espace entourant l’élément. Elle peut
être utilisée pour positionner les éléments
• La propriété padding permet de définir la
marge intérieur d’un élément
42
Définition d’une notation CSS raccourcie ou
notation « short hand »
• C’est une propriété à laquelle on va pouvoir
passer les valeurs d’un ensemble d’autres
propriétés et qui va donc nous permettre de
définir de valeur de plusieurs propriétés d’un
coup
43
Structurer et organiser le contenu
Nouveaux éléments HTML5
44
Structurer et organiser le contenu
header et footer
45
Structurer et organiser le contenu
nav
• Définit un bloc de liens de navigation et est
très utile pour créer les éléments suivants :
– Ensemble de liens de navigation pour la
navigation principale d'un document
– Table des matières
– Fil d'Ariane dans un pied de page
– Liens Précédent-Accueil-Suivant
• Exemple
46
Structurer et organiser le contenu
aside
• est utilisé pour représenter le contenu qui est
liée à la teneur environnante faisant
référence à un article ou à la page web. Ce
type de contenu est souvent représenté dans
des encadrés.
47
Structurer et organiser le contenu
aside
• Exemple
48
Structurer et organiser le contenu
aside
• Exemple (suite)
49
Insertion des médias
la balise img
• Utilisez img pour ajouter des images à un
document HTML
• Exemple : <img src="images/redball.jpg"
alt="graphique de boule rouge" />
• Les attributs src et alt sont tous deux nécessaires
pour que le code soit pleinement valide.
• Le groupe W3C exige l'attribut alt pour faciliter
l'accessibilité des personnes présentant un
handicap.
50
Insertion des médias
les balises figure et figcaption
• L'élément figure spécifie le type de figure à ajouter
• L'élément figcaption ajoute une légende
à une image sur une page Web. Cette légende peut s'afficher avant ou
après l'image
51
Insertion des médias
les balises figure et figcaption(exemple2)
52
Insertion des médias
la balise video
• Permet d'incorporer des vidéos dans des documents HTML
en utilisant un minimum de code
• Exemple de balisage :
<video src="intro.mp4" width="400" height="300">
</video>
• les attributs de video
poster : Affiche un fichier image statique avant le chargement de la vidéo
autoplay : Démarre automatiquement
la lecture de la vidéo après le chargement de la page
controls : Affiche un ensemble de contrôles utilisés pour lire, mettre en pause
ou arrêter la vidéo et régler le volume
loop : Répète la vidéo
53
Insertion des médias
la balise video( exemple)
54
Insertion des médias
la balise audio
• Permet d'incorporer du contenu audio,
comme de la musique et d'autres sons,
dans des documents HTML en utilisant
un minimum de code
• Exemple de balisage :
<audio src="sample.mp3"
controls="controls">
</audio>
55
Insertion des médias
la balise audio( exemple)
56
La table HTML
• <table> définit la table générale
• <tr> définit les lignes
• <th> définit les en-têtes de colonne
• <td> définit les cellules
• <caption> ajoute une légende au-dessus ou au-
dessous de la table
• <col> applique des styles CSS intralignes
• Les longues tables avec des barres de défilement
utilisent les balises <thead>, <tfoot> et <tbody>
57
La table HTML
• exemple1
58
La table HTML
exemple2
59
Les formulaires
création
• Permettent d’interagir avec l’utilisateur en lui
proposant d’entrer des informations
• En HTML : uniquement l’interface de formulaire
• Un formulaire HTML est placé à l’intérieur d’une
balise <form>. Celle-ci prend les attributs suivants :
• action: URL du script auquel sera soumis le formulaire.
• method: Méthode HTTP, valant soit "get" soit "post" .
• exemple
<form action=“page.php“ method="get">…</form>
60
Les formulaires
les champs de saisie
• La balise <input> a une utilisation très vaste dans les formulaires. Elle
représente un champ de saisie.
• L’attribut type détermine le type (text, password, file, email, etc.) du
champ.
• L’attribut name est obligatoire sauf pour les types "reset" et "submit"
• HTML5 introduit plusieurs nouvelles entrées et attributs d'éléments, tels :
– url pour entrer une adresse Web unique
– email pour une ou plusieurs adresse email
– search pour inviter les utilisateurs à entrer le texte à rechercher
• Exemple
<input type="text" name=“login" value=“amira"
maxlength="50">
<input type="password" name="pwd" >
<input type=“reset" name=“annuler" >
<input type=“submit" name=“valider" > 61
Les formulaires
les cases à cocher
• type ="checkbox" permet de choisir plusieurs
éléments parmi une liste de possibilités sous
forme de cases à cocher.
• Exemple
<input type="checkbox" name="pub" value="site"
checked="checked" id="pub-site"> Recevoir des
offres
<input type="checkbox" name="pub1" checked="checked"
value="externe" id="pub-externe"> Recevoir des
offres externes
62
Les formulaires
les boutons radio
• type ="radio" permet de choisir un seul
élément parmi une liste de possibilités sous
forme de boutons radio.
• exemple
<input type="radio" name="pub" value="oui"
id="pub-oui“ checked="checked"> accepter
<input type="radio" name="pub" value="non"
id="pub-non"> refuser
63
Les formulaires
liste de sélection
• La balise <select> permet d’ajouter une liste
de sélection
• Exemple
<select name="age">
<option value="20">Moins de 20 ans</option>
<option value="35" selected="selected">21 à 35
ans</option>
<option value="50">36 à 50 ans</option>
<option value="51">Plus de 51 ans</option>
</select>
64
Les formulaires – liste de sélection
Structuration de la liste de sélection
les balises <optgroup> et <label> permettent de regrouper plusieurs options
de même type sous un titre (label)
La balise <optgroup> crée un décalage des options ainsi regroupées; le titre
du groupe n’est pas sélectionnable
<form> <select>
<optgroup label="Europe">
<option> France </option>
<option> Belgique </option>
<option> Suisse </option>
</optgroup>
66
Les formulaires
Création d'un formulaire avec Fieldset
67
Les formulaires
Exemple de formulaire simple
68
Les formulaires – Organisation
<form> <fieldset>
<legend> Mentions obligatoires : </legend>
Nom: <input type="text" size="20" /> <br/>
Prenom: <input type="text" size="40" /> <br/>
</fieldset>
<fieldset>
<legend> Mentions facultatives : </legend>
Adresse email: <input type="text" size="20" /> <br/>
</fieldset> </form>
69
Les formulaires
Attribut de formulaire required
70
Les formulaires
Attribut de formulaire placeholder
• L'emplacement réservé au texte correspond
au texte qui s'affiche à l'intérieur d'un champ
d'entrée lorsque le champ est vide. Il permet aux
utilisateurs de comprendre le type d'informations
à entrer ou sélectionner.
• Exemple
<input name="fName" placeholder=
"First Name" />
71
Les formulaires
Attribut de formulaire pattern
• L'attribut pattern offre un format
(expression régulière) pour un champ d'entrée
qui est utilisé pour valider le contenu du
champ.
• Exemple de balisage :
<input type="text" id="empID"
name="EmployeeID" required
pattern="[A-Z]{2}[0-9]{4}"
title="ID d'employé commençant par
deux lettres majuscules suivies de
quatre chiffres">
72
Les formulaires
Attribut de formulaire pattern(suite)
73
Les formulaires
la validation
75
MERCI POUR VOTRE ATTENTION
76