Scribd
Importer
2 vues165 pages

HTML5 CSS3

Le document présente une introduction au langage HTML, expliquant sa structure, ses balises, et l'utilisation des attributs. Il aborde également la création de pages HTML, le travail en local versus en production, et l'intégration de CSS pour le style des pages. Enfin, il décrit les éléments HTML de type block et inline, ainsi que les entités HTML et le codage de caractères.

Transféré par

thierryandriah
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2 vues165 pages

HTML5 CSS3

Le document présente une introduction au langage HTML, expliquant sa structure, ses balises, et l'utilisation des attributs. Il aborde également la création de pages HTML, le travail en local versus en production, et l'intégration de CSS pour le style des pages. Enfin, il décrit les éléments HTML de type block et inline, ainsi que les entités HTML et le codage de caractères.

Transféré par

thierryandriah
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

INTRODUCTION

HTML est un langage de balisage pour décrire les documents Web (pages
Web).

HTML signifie Hypertext Markup Language

Un langage de balisage est un ensemble de balises

Les documents HTML sont décrits par des balises HTML

Chaque balise HTML décrit de différent contenu du document


STRUCTURE D’UN DOCUMENT HTML

En-tête

Corps

EXPLICATION
 La déclaration DOCTYPE définit le type de document HTML
 Le texte entre <html> et </ html> décrit un document HTML
 Le texte entre <head> et </ head> fournit des informations sur le document
 Le texte entre <title> et </ title> fournit un titre pour le document
 Le texte entre <body> et </ body> décrit le contenu visible de la page
COMMENTAIRES
Les balises de commentaire <! - et -> sont utilisés pour insérer des
commentaires au format HTML.
Les commentaires ne sont pas affichés par le navigateur, mais ils
peuvent aider à documenter le code HTML.

On peut commenter les lignes de code HTML pour rechercher des
erreurs.
COMMENTAIRES CONDITIONNELS
 Les commentaires conditionnels définissent les balises HTML à
exécuter par Internet Explorer uniquement.
BALISES OU ELEMENTS HTML
Les éléments en HTML sont utilisés pour structurer du contenu, pour lui donner
du sens.
Les balises HTML sont des mots-clés (noms de balises) entourées par des signes <
et >: <tagname> contenu </ tagname>

Certains éléments HTML n’ont pas une balise de fin comme <br>. Les éléments
HTML sans contenu sont appelés éléments vides. Les éléments vides peuvent être
"fermés" dans la balise d'ouverture comme ceci: <br />.
Les éléments HTML peuvent être imbriqués (les éléments peuvent contenir des
éléments):
ATTRIBUTS D’UNE BALISE
 Les attributs fournissent des informations supplémentaires sur les
éléments HTML.
Les éléments HTML peuvent avoir des attributs
Les attributs sont toujours spécifiés dans la balise de début
Les attributs viennent en paires nom / valeur (name = "valeur") comme
dans l’exemple suivant:
ATTRIBUTS BALISES OU ELEMENTS HTML
 Les attributs suivants sont les plus utilisés dans des pages HTML
Attribut Description
alt Indique un texte alternatif pour une image
disabled Indique qu'un élément d'entrée doit être désactivé
class Indique la classe d’appartenance des éléments
href Indique l'URL (adresse web) pour un lien
id Indique un identifiant unique pour un élément
src Spécifie l'URL (adresse web) pour une image
style Spécifie un style CSS en ligne pour un élément
Indique des informations supplémentaires sur un élément (affiché comme un
title
outil de pointe)
DECLARATION <! DOCTYPE>
 Le <! DOCTYPE> aide le navigateur pour afficher une page Web
correctement.
 Il existe différents types de documents sur le web. Pour afficher un
document correctement, le navigateur doit connaître à la fois le type et la
version.
 La déclaration DOCTYPE n’est pas sensible à la casse. Les déclarations
suivantes sont acceptables:
VERSION HTML ET DECLARATION <! DOCTYPE>
OUTILS DE DEVELOPPEMENT
 Les pages HTML peuvent être créées en utilisant les éditeurs HTML
professionnels comme: Microsoft WebMatrix, Sublime Text, Netbeans,
Eclipse, Dreamweaver, etc.

 Cependant, pour apprendre le langage HTML, il est recommandé aux


débutants d’utiliser un éditeur de texte comme le Notepad++(Windows),
vim/nano(Linux).
TRAVAIL EN LOCAL VS EN PRODUCTION
Lorsque vous codez, vous pouvez travailler soit en local, soit en production.
 Travailler en local signifie travailler avec des fichiers enregistrés sur votre
propre ordinateur. Comme les fichiers ne sont que sur votre ordinateur, vous
seul pouvez voir ce que vous faîtes.
Travailler en local comporte de nombreux avantages. Le plus important est
le fait de pouvoir créer ou tester de nouvelles fonctionnalités sans impacter
le fonctionnement d’un site "live" qui serait déjà visité par des internautes.
TRAVAIL EN LOCAL VS EN PRODUCTION
 Travailler en production, au contraire, signifie intervenir sur des fichiers qui sont
déjà stockés sur un serveur web, c’est-à-dire travailler sur des fichiers déjà
accessibles via Internet. Un bon développeur commencera toujours son projet en
local, c’est-à-dire avec ses fichiers stockés sur sa propre machine.
Une fois le travail terminé, il faudra alors louer un hébergement web chez un
hébergeur, acheter et choisir une URL, c’est-à-dire une adresse web pour votre
site.
Ensuite, on va transférer tous les fichiers sur l'espace serveur que nous avons loué
chez notre hébergeur. L’hébergeur se charge alors de veiller à ce que le serveur
fonctionne toujours afin que le site soit toujours accessible via Internet.
Si on désire modifier quelques choses d’important sur le site, on crée une copie
du site live en local en récupérant tous les fichiers, et on implémentera d’abord les
modifications en local afin de minimiser le risque de bugs finaux et ainsi le temps
de maintenance sur votre site.
PREMIERE PAGE HTML
 Pour créer la première page HTML avec Notepad++, suivez les 04 étapes ci-
dessous:
 Etape 1: Ouvrir Notepad++
 Etape 2: Ecrire les codes HTML suivants:
PREMIERE PAGE HTML
 Etape 3: Enregistrer la page HTML dans le PC en cliquant sur le menu Fichier
> Enregistrer ou Enregistrer sous et nommer ce fichier en [Link]
PREMIERE PAGE HTML
 Etape 4: Visualiser la page HTML sur un navigateur web de votre choix en
cliquant sur le menu Exécuter > Lancer sur Firefox par exemple.
ENTITES HTML
Les caractères réservés au format HTML doivent être remplacés par des
entités de caractères.
Ceux qui ne sont pas présents sur le clavier, peuvent également être
remplacés par des entités.
 Un caractère d’entités ressemble à: &entity_name; OU &#entity_number;
Pour afficher un signe inférieur, on doit écrire: &lt; ou &#60;
L'avantage d'utiliser un nom d'entité, au lieu d'un nombre, est que le nom
est plus facile de se rappeler. L'inconvénient est que les navigateurs ne
supportent pas tous les noms d'entité, mais le soutien pour les nombres est
bon.
ENTITES HTML
Quelques autres entités de caractères HTML utiles sont représentées dans
le tableau suivant.
Résultat Description Nom Entité Numéro Entité
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
ENTITES HTML
Une marque diacritique est un "glyphe" ajouté à une lettre, comme les
accents grave et aiguë. Quelques exemples sont décrits par la suite:

Marque Caractère Constructeur Résultat


̀ a a&#768; à
́ a a&#769; á
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô
̃ O O&#771; Õ
ENTITES HTML
Les noms des entités sont sensibles à la casse. Quelques autres entités de
caractères HTML utiles sont représentées sur le tableau suivant.
Résultat Description Nom Entité Numéro Entité
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
CODAGE DE CARACTERES (Jeux de caractères)
 ASCII a été la première norme de codage de caractères (également
appelé jeu de caractères). Il définit 127 caractères alphanumériques
différents qui pourraient être utilisés sur Internet. ASCII prend en
charge les numéros (0-9), les lettres anglaises (A-Z), et certains
caractères spéciaux comme ! $ + - () @ <>.
 ANSI (Windows-1252) a été le jeu original de caractères Windows. Elle
a soutenu 256 codes de caractères différents.
ISO-8859-1 est le jeu de caractères par défaut pour HTML 4. Il a
également pris en charge 256 codes de caractères différents.
CODAGE DE CARACTERES (Jeux de caractères)
 Comme ANSI et ISO étaient limités, le codage de caractères par défaut a
été changé en UTF-8 en HTML5. UTF-8 (Unicode) couvre presque tous les
caractères et symboles dans le monde.
 Pour afficher une page HTML correctement, un navigateur Web doit
connaître le jeu de caractères utilisé dans la page, lequel est spécifié dans
l’en-tête du document avec la balise <meta>:
EN-TETE D’UN DOCUMENT HTML: Elément <title>
 La balise <title> définit le titre du document. Elle est requise dans tous les
documents HTML / XHTML.
Le élément <title>:
 définit un titre dans l'onglet du navigateur
 fournit un titre pour la page quand il est ajouté aux favoris
 affiche un titre pour la page de résultats des moteurs de recherche dans
EN-TETE D’UN DOCUMENT HTML: Elément <style>
 L'élément <style> est utilisé pour définir les informations de style pour un
document HTML.
A l'intérieur de <style>, on spécifie comment les éléments HTML doivent
être rendus dans un navigateur.
EN-TETE D’UN DOCUMENT HTML: Elément <link>
 L'élément <link> définit la relation d’une page à une ressource externe.
 Il est le plus souvent utilisé pour relier les feuilles de style.
EN-TETE D’UN DOCUMENT HTML: Elément <meta>
 L'élément <meta> est utilisé pour spécifier la description d’une page,
mots-clés, auteur, et d'autres métadonnées.
Les métadonnées sont utilisées par les navigateurs (comment afficher le
contenu), par les moteurs de recherche (mots clés) et d'autres services
Web.
INTRODUCTION SUR LE CSS
 CSS signifie Cascading Style Sheets.

CSS a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui
appliquant ce qu’on appelle des styles.

CSS permet par exemple de définir la taille, la couleur ou l’alignement d’un


texte.

HTML n'a jamais été destiné à contenir des balises pour le formatage d'une
page Web
SYNTAXE DU CSS ET SELECTEURS
 La syntaxe générale du CSS est la suivante:

Les sélecteurs CSS sont utilisés pour trouver (ou sélectionner) les éléments HTML
en fonction de leur nom d'élément, id, classe, attribut, et plus encore.
Les propriétés permettent de choisir quel(s) aspect(s) (ou "styles") d’un élément
HTML on souhaite modifier. Une propriété va être accompagnée d’une ou
plusieurs valeurs qui vont définir le comportement de cette propriété. Par
exemple, la propriété color peut prendre le nom d’une couleur (en anglais).
SYNTAXE DU CSS ET SELECTEURS
Sélecteur d’élément. Pour sélectionner tous les éléments <p> sur une page,
on écrit:
SYNTAXE DU CSS ET SELECTEURS
Sélectionner un élément unique d’attribut id. La règle de style ci-dessous
sera appliquée à l'élément HTML avec id = "para1":
SYNTAXE DU CSS ET SELECTEURS
Sélectionner des éléments d’attribut class. La règle de style ci-dessous sera
appliquée à tous les éléments HTML avec class="center":

Il est possible de spécifier que seuls les éléments HTML spécifiques
devraient être affectés par une classe. Dans l'exemple ci-dessous, seulement
les éléments <p> avec class = "center" seront alignés au centre:
SYNTAXE DU CSS ET SELECTEURS
 Si des éléments ont les mêmes définitions de style, il est possible de les
grouper comme ceci:
COMMENTAIRES EN CSS
 Les commentaires sont utilisés pour expliquer le code, et peut aider
lorsqu’on modifie le code source à une date ultérieure.
Les commentaires sont ignorés par les navigateurs.
Un commentaire CSS commence par / * et se termine par * /. Les
commentaires peuvent également étendre sur plusieurs lignes
INTEGRATION DU CSS DANS LA PAGE HTML
Le CSS peut être ajouté à des éléments HTML de 3 façons:

 En ligne: en utilisant un attribut style dans les éléments HTML

 Interne: en utilisant un élément <style> dans le code HTML <head>

 Externe: en utilisant un ou plusieurs fichiers CSS externes ( .css)


CSS EN LIGNE
 Il est utilisé pour appliquer un style unique à un élément HTML .

 Il utilise l'attribut style.


Cet exemple modifie la couleur du texte de la balise <p> en bleu:
CSS INTERNE
 Style interne est utilisé pour définir un style pour une page HTML.
Il est défini dans la section <head> d'une page HTML, dans un élément
<style> et utilise des sélecteurs.
CSS EXTERNE
Une feuille de style externe est utilisé pour définir le style de nombreuses
pages. Avec une feuille de style externe, on peut modifier l'apparence d'un
site Web entier en changeant un seul fichier.
Pour utiliser une feuille de style externe, ajouter un lien vers elle dans la
section <head> de la page HTML:
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
En HTML, tout élément est soit de type « block » (bloc), soit de type « inline
» (en ligne). Par exemple, l’élément p est un élément de type block tandis
que l’élément strong est un élément de type inline.
Un élément de type block va toujours commencer sur une nouvelle ligne et
prendre toute la largeur disponible dans la page.
De plus, un élément de type block peut contenir d’autres éléments de type
block ainsi que des éléments de type inline.
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Exemple
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Les éléments HTML de type block les plus communs sont les suivants :
 L’élément p
 Les éléments h1, h2, …
 Les éléments ul, ol
 L’élément form
 L’élément div
Les éléments de type inline ne vont pas commencer sur une nouvelle ligne
mais s’insérer dans la ligne actuelle.
Les élément de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu). Par exemple, l’élément
HTML strong est un élément de type inline.
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Les éléments HTML de type inline les plus communs sont les suivants :
 Les éléments strong, em;
 L’élément a, img
 L’élément span
Les éléments de type inline ne vont pas commencer sur une nouvelle ligne
mais s’insérer dans la ligne actuelle.
Les élément de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu). Par exemple, l’élément
HTML strong est un élément de type inline.
LES ELEMENTS HTML DIV ET SPAN
Les éléments HTML div et span sont un peu spéciaux puisqu’ils ne
possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à
donner du sens à un contenu.
Les éléments div et span servent de conteneurs et faciliter la mise en
forme d’une page HTML à des niveaux différents.
UTILISATION DE L’ELEMENT HTML DIV
Les éléments HTML div est un élément de type block. Cet élément va
souvent être utilisé comme conteneur pour plusieurs autres éléments
HTML.
Il faut appliquer des styles CSS directement à cet élément afin de faciliter la
mise en forme de la page.
UTILISATION DE L’ELEMENT HTML SPAN
Les éléments HTML span est un élément de type inline. Cet élément va de
servir de conteneur pour du contenu textuel. Cet élément s’avère pratique
dans certains cas où nous aimerions mettre en forme une portion de texte à
l’intérieur d’un élément.
Cet élément sera souvent utilisé avec un attribut class afin de pouvoir le
cibler plus facilement en CSS.
PARAGRAPHES
Les documents HTML sont divisés en paragraphes.
Pour créer un paragraphe, utiliser la balise <p>
La balise <br> peut être utilisé à l’intérieur d’un paragraphe si on veut aller à la ligne.
TITRES
Les titres sont importants dans les documents HTML.
Les titres sont définis avec la balise <h1> à <h6>. <h1> définit la position la plus importante. <h6> définit le
titre le moins important.
Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de vos pages Web.
MISE EN VALEUR DES TEXTES
Le code HTML <b> définit le texte en gras sans aucune importance supplémentaire et <i> définit le texte en
italique, sans aucune importance supplémentaire(Voir CSS).
La balise <em> est utilisée pour mettre un texte un peu en valeur, tandis que <strong> sert à indiquer que le
texte est important.
INDICE ET EXPOSANT
Le code HTML <sub> définit le texte indicé(ex: H2O)
L'élément HTML <sup> définit le texte exposant( ex: 103)
LISTES
Les listes permettent souvent de mieux structurer le texte et d'ordonner les informations.
Il existe deux types de listes :
 les listes non ordonnées ou listes à puces (Unordered List) ;
 les listes ordonnées ou listes numérotées ou encore énumérations (Ordered List)

Liste non ordonnée Liste ordonnée

• Coffee 1. Coffee
• Tea 2. Tea
• Milk 3. Milk
LISTES NON ORDONNEES
Une liste non ordonnée commence par la balise <ul>. Chaque élément de la liste commence par la balise
<li>.
Les éléments de la liste seront marqués par des balles (petits cercles noirs).
LISTES NON ORDONNEES ET CSS
Style Description
list-style-type:disc Les éléments de liste sera marquée par des balles (par défaut)
list-style-type:circle Les éléments de la liste seront marqués par des cercles
list-style-type:square Les éléments de liste sera marquée avec des carrés
list-style-type:none Les éléments de liste ne seront pas marqués
LISTES ORDONNEES
Une liste ordonnée commence par la balise <ol>. Chaque élément de la liste commence par la balise <li>.
Les éléments de la liste seront marqués avec des numéros.
LISTES ORDONNEES ET ATTRIBUT TYPE
Un attribut de type peut être ajouté à une liste ordonnée, afin de définir le type de marqueur.
Type Description
type="1" Les éléments de la liste seront numérotés avec des nombres (par défaut)
type="A" Les éléments de la liste seront numérotés avec des lettres majuscules
type="a" Les éléments de la liste seront numérotés avec des lettres minuscules
type="I" Les éléments de la liste seront numérotés avec des chiffres romains en majuscules
type="i" Les éléments de la liste seront numérotés avec des nombres romains minuscules
LISTES DE DESCRIPTION
Une liste de description est une liste de termes, avec une description de chaque terme.
La balise <dl> définit la liste de description, balise <td> définit le terme (nom), et <dd> décrit chaque terme.
LISTES IMBRIQUEES
LISTE HORIZONTALE
Les listes HTML peuvent être décorées de différentes façons avec CSS. Une façon populaire, est d’afficher la
liste horizontalement.
LISTE HORIZONTALE
Avec un peu de style supplémentaire, vous pouvez le faire ressembler à un menu.
LIENS HYPERTEXTS
Un lien hypertexte est un texte ou une image qu’on peut cliquer pour aller une autre page.
En HTML, les liens sont définis avec la balise <a>. L'attribut href spécifie l'adresse de destination
([Link] et le texte du lien est la partie visible (Visitez le site web de l’UF).
LIENS HYPERTEXTES
L'exemple ci-dessus utilise une URL absolue (Une adresse Web complète). Un lien interne (lien vers le même
site) est spécifié avec une URL relative (sans http: // www ....).

Il est courant d'utiliser des images sous forme de liens:

Utiliser l’attribut target pour afficher le document dans une nouvelle fenêtre du navigateur ou dans un
nouvel onglet:
LIENS HYPERTEXTES - COULEUR
Lorsque vous déplacez la souris sur un lien, deux choses vont normalement se produire:
 La flèche de la souris se transforme en une petite main
 La couleur de l'élément de liaison va changer
Par défaut, un lien apparaîtra comme ceci (dans tous les navigateurs):
 Un lien non visité est souligné et bleu
 Un lien visité est soulignée et violet
 Un lien actif est souligné et rouge
Vous pouvez modifier les couleurs par défaut, en utilisant des styles:
LIENS HYPERTEXTES - SIGNET
Les signets HTML sont utilisés pour permettre aux lecteurs de sauter à des parties spécifiques d'une page
Web. Signets sont pratiques si votre site a de longues pages.
Pour faire un signet, vous devez d'abord créer le signet, puis ajouter un lien vers elle. Lorsque le lien est
cliqué, la page défile à l'emplacement avec le signet.
 Tout d'abord, créer un signet avec l'attribut id:

 Ensuite, ajoutez un lien vers le signet ( haut), à partir de la même page:

 Ou, ajouter un lien vers le signet (haut) d'une autre page:


IMAGES
En HTML, les images sont définies avec la balise <img>. La balise <img> est vide, il contient des attributs
uniquement, et ne dispose pas d'une balise de fermeture. L'attribut src spécifie l'URL (adresse web absolue
ou relative) de l'image.
L'attribut alt spécifie un texte alternatif pour une image, si l'image ne peut pas être affichée. Si un navigateur
ne peut pas trouver une image, il affiche le texte alt.

On peut utiliser l'attribut de style pour spécifier la largeur et la hauteur d'une image. Les valeurs sont
exprimées en pixels (utilisation px après la valeur).

Alternativement, des attributs de largeur et de hauteur peuvent être utilisés. Ici, les valeurs sont exprimées
en pixels par défaut:
TABLEAU
Les tables sont définies avec la balise <table>.
Les tableaux sont divisés en lignes de la table avec la balise <tr>.
Les lignes de tableau sont divisées en données de la table avec la balise <td>.
Une rangée de table peut aussi être divisé en rubriques de table avec le <th> tag.
Les données du tableau <td> sont les conteneurs de données de la table. Ils peuvent contenir toutes sortes
d'éléments HTML comme du texte, des images, des listes, d'autres tables, etc.
TABLEAU
Par défaut, un tableau sera affiché sans bordure(une frontière). Cette dernière peut être ajoutée en utilisant
l'attribut border:

L'attribut border est hors de la norme HTML. Il est préférable d'utiliser les CSS. Pour ajouter des bordures,
utilisez la propriété CSS border:
TABLEAU
Les propriétés CSS suivantes peuvent être appliquées sur un tableau.
 Utilisez la propriété CSS border pour définir une frontière
 Utilisez la propriété CSS border-collapse à l'effondrement des frontières cellulaires
 Utilisez la propriété CSS padding pour la marge interne des cellules
 Utilisez la propriété CSS text-align pour aligner le texte de la cellule
 Utilisez la propriété CSS border-spacing pour définir l'espacement entre les cellules
TABLEAU
Pour fusionner les cellules , utilisez les attributs colspan et rowspan.
TABLEAU
Pour ajouter une légende à une table, utilisez la balise <caption>. La balise <caption> doit être insérée
immédiatement après la balise <table>.
TABLEAU
Pour définir un style spécial pour un table, ajouter un attribut id.
Maintenant, vous pouvez définir un style spécial pour ce tableau pour la suite.
FONT-FAMILY ET LES GOOGLE FONTS
La propriété CSS font-family
 La propriété CSS font-family va nous permettre de définir la police de notre texte.
 Tous les navigateurs, selon la version possédée par les visiteurs, ne supportent pas tous les mêmes polices.
Pour cette raison, il faut toujours indiquer plusieurs noms de police à utiliser en valeur de la propriété font-
family en commençant par celle souhaitée, et en séparant chaque valeur par une virgule.
 Le navigateur va lire les différentes polices renseignées dans font-family dans l’ordre et utiliser la première
qu’il supporte.
 Si on renseigne un nom de police qui contient des espaces, on doit le mettre entre guillemets ou
apostrophes.
FONT-FAMILY ET LES GOOGLE FONTS
Web safe fonts et familles génériques
 Les web safe fonts sont un ensemble de polices qui sont lues par tous les navigateurs quels qu’ils soient.
 Les familles génériques regroupent un ensemble de polices ayant une allure similaire, comme les polices de
la famile serif par exemple.
FONT-FAMILY ET LES GOOGLE FONTS
Intégration des Google Fonts
 Google a développé sa propre liste de polices d’écriture appelées les Google Fonts. Ces polices peuvent être
utilisées sur n’importe quel site, le tout est de faire un lien en HTML vers la police Google désirée puis de
l’utiliser comme valeur de notre propriété font-family en CSS.
 Le grand intérêt des Google Fonts est qu’elles ne dépendent pas d’un navigateur mais peuvent être lues par
(quasiment) tous les navigateurs.
 L’autre grand avantage est qu’on peux faire le choix parmi une très longue liste de polices et ainsi totalement
personnaliser l’écriture sur votre site.
 Pour utiliser les Google Fonts, il va tout d’abord nous falloir choisir une police dans la liste proposée sur le
site Google dédié [Link]
FONT-FAMILY ET LES GOOGLE FONTS
Pour exemple, on va choisir la police « Open sans ». Cliquez sur le bouton « quick use » pour obtenir le lien de
la police.
FONT-FAMILY ET LES GOOGLE FONTS
Ensuite, il faut insérer le lien dans une page HTML avec l’élément link et il ne restera plus qu’à utiliser la police
choisie en CSS.
LES PROPRIETES CSS DE TYPE FONT(font-size)
Les propriétés de type font permettent de modifier l’apparence de la police d’écriture, et donc des textes.
On peux transformer la taille, le poids ou le style de la police d’écriture. Les propriétés de type font- les plus
utilisés sont décrites ci-après:
 font-size: pour modifier la taille des textes.
 Cette propriété accepte deux grands types de valeurs : des tailles de polices absolues ou fixes et des tailles
relatives ou variables.
 Les valeurs de type absolu sont souvent exprimées en px (pixels) ou éventuellement en pt (points).
 Une taille absolue est fixée : elle ne bougera jamais. Les valeurs de type relatif sont exprimées soit en %
(pourcentage), en em ou en ex.
 L’intérêt des valeurs relatives est qu’elles s’adaptent relativement à certains paramètres : soit par rapport
aux préférences enregistrées dans le navig ateur par un visiteur, soit par rapport à la taille d’un
élément parent.
 La propriété font-size peut également prendre la valeur « inherit », ce qui veut dire que l’élément ciblé
héritera de la valeur de son parent.
LES PROPRIETES CSS DE TYPE FONT(font-size)
Exemple de la propriété font-size.
LES PROPRIETES CSS DE TYPE FONT(font-style)
 font-style: pour modifier le style des textes. Par exemple on peut mettre les textes en italique. La propriété
font-style accepte quatre valeurs différentes :
 normal (par défaut) ;
 italic (italique) ;
 oblique (penché) ;
 inherit (l’élément ciblé hérite du style de son élément parent).
LES PROPRIETES CSS DE TYPE FONT(font-weight)
 font-weight: pour modifier le poids des textes c’est-à-dire son épaisseur. Cette propriété peut prendre
différentes valeurs :
 normal (valeur par défaut) ;
 lighter (la police sera plus fine) ;
 bold (la police sera plus épaisse) ;
 bolder (la police sera très épaisse) ;
 une centaine entre 100 (police très fine) et 900 (police très épaisse). 400 correspond à la valeur « normal »
et 700 à « bold » ;
 inherit (l’élément hérite du style de son parent) ;
 initial (définit la propriété sur sa valeur d’origine).
COULEUR EN CSS
Nous avons changé la couleur d’un texte avec la propriété color dans les cours précédents.
En fait, la propriété color accepte différents types de valeurs :
 Un nom de couleur (red, blue, etc.) ;
 Une valeur hexadécimale (#AA8811, etc.) ;
 Une valeur RGB ou RGBa.
La façon la plus simple de changer la couleur d’un texte est de donner le nom d’une couleur (en anglais) en
valeur de la propriété color. Le problème avec les noms est que nous sommes très limités dans le choix de
couleurs. Il n’y a que 16 qui soient réellement, universellement supportées. Ces couleurs sont représentées
sur le tableau ci-après.
COULEUR EN CSS
COULEUR EN CSS(Notation Hexadécimale)
 Le mot « hexadécimal » signifie « qui fonctionne en base 16 ».
 Le système hexadécimal va lui compter non pas par dizaines mais par seizaines. Les « unités » de 10 à 15
vont être représentées par les lettres A, B, C, D, E et F. Par exemple, l’équivalent de « 12 » en base
hexadécimale est « 0C ».
 Pour construire une valeur hexadécimale pour la propriété color, il faut tout d’abord commencer par un
dièse (#) afin de dire à la propriété qu’on va utiliser une valeur hexadécimale.
 Ensuite, on doit indiquer trois suites de valeurs représentant respectivement les intensités de rouge, de vert
et de bleu dont va être composée la couleur.
 Chacune de ces trois intensités doit être comprise entre 0 et 255 en base 10, c’est-à-dire entre 00 et FF en
notation hexadécimale.
COULEUR EN CSS(valeur RGB)
• RGB signifie « Red Green Blue » (rouge, vert, bleu). Ce type de valeur utilise le même système de nuances
que les valeurs hexadécimales.
• Pour créer une couleur RGB, on va à nouveau devoir indiquer trois intensités de rouge, de vert et de bleu qui
vont être mixées pour créer une couleur. La différence est que cette fois-ci on indique bien l’intensité entre 0
et 255, et non pas entre 00 et FF.
OPACITE DES TEXTS EN CSS
Il y a deux manières de gérer l’opacité (le fait d’être plus ou moins transparent) des textes:
 La première est en utilisant la propriété CSS opacity. Cette propriété va prendre une valeur entre 0 (texte
totalement transparent) et 1 (texte totalement opaque).
 La deuxième façon est d’indiquer une quatrième valeur définissant l’opacité dans la notation RGB. Dans ce
cas là, la notation devient RGBa. Cette quatrième valeur, tout comme pour opacity, doit être comprise entre
0 (texte transparent) et 1 (texte opaque).
GESTION DES ESPACES AU SEIN D’UN TEXTE EN CSS
La propriété CSS line-height permet de choisir la distance ou l’écartement entre deux lignes de texte. Cette
propriété accepte des valeurs absolues ou relatives. Généralement, on fixera la valeur de line-height à 1,5
fois la taille des textes.

Les propriétés CSS letter-spacing et word-spacing permettent respectivement de définir l’espace entre les
lettres et entre les mots dans un texte. Pour enlever une partie de l’espace ou même inverser les lettres ou
les mots, on peut donner des valeurs négatives.
LES PROPRIETES CSS DE TYPE TEXT
Les propriétés CSS de type- permettent de changer la mise en forme des textes et leur apparence.
La propriété CSS text-align permet de définir l’alignement du texte. On peut choisir l’alignement du texte
parmi cinq valeurs :
 left : Le texte sera aligné à gauche (par défaut) ;
 right : Le texte sera aligné à droite ;
 center : Le texte est centré ;
 justify : Le texte est justifié ;
 inherit : Hérite de la valeur de l’élément parent.
La propriété CSS text-transform permet de transformer un texte ou une partie d’un texte en majuscules ou
en minuscules. Cette propriété permet de choisir parmi cinq valeurs :
 lowercase : Met tout le texte en minuscules ;
 uppercase : Met tout le texte en majuscules ;
 capitalize : Met la première lettre de chaque mot en majuscule ;
 inherit : Hérite de la valeur de l’élément parent ;
 none : Pas de transformation du texte. Utile pour annuler une transformation par défaut donnée par
héritage.
LES PROPRIETES CSS DE TYPE TEXT
La propriété CSS text-decoration permet d’ajouter ou d’enlever des décorations aux textes. Cette propriété
accepte six valeurs différentes :
 underline : Le texte sera souligné ;
 overline : Une ligne apparaît au dessus du texte ;
 line-through : Le texte sera barré ;
 inherit : Hérite de la valeur de l’élément parent ;
 initial : Utilise la valeur par défaut de la propriété ;
 none : Pas de décoration.
La propriété CSS text-indent permet de gérer l’indentation d’un texte. Pour rappel, indenter un texte, c’est le
décaler vers la droite. La propriété text-indent accepte aussi bien des valeurs absolues (en px par exemple)
que des valeurs relatives (en % ou em par exemple). On peut également lui attribuer des valeurs négatives
afin de décaler un texte vers la gauche.
LES PROPRIETES CSS DE TYPE TEXT
La propriété CSS text-shadow permet de créer des ombres autour des textes, afin que ceux-ci se détachent
de l’arrière plan. On doit indiquer quatre valeurs dans un ordre précis à la propriété color afin que celle-ci
fonctionne correctement :
 La projection horizontale de l’ombre (en px) ;
 La projection verticale de l’ombre (en px) ;
 Le rayon de propagation de l’ombre (le « radius », en px) ;
 La couleur de l’ombre. Accepte les mêmes valeurs que la propriété
Si l’on indique des valeurs positives pour les projections horizontales et verticales de l’ombre, l'ombre sera
projetée en bas à droite du texte. En indiquant des valeurs négatives, on peut modifier l’orientation de notre
ombre.
DEFINITION ET IMPORTANCE
Le modèle des boîtes est un concept essentiel et central pour la mise en page d’une page web. La
compréhension de celui-ci permet de positionner les différents éléments d’une page à l’endroit voulu et de
créer de belles pages web.
Le modèle des boîtes dit que « tout élément HTML peut être considéré comme une boîte rectangulaire »,
qu’il soit de type block ou inline.
Grâce au modèle des boîtes, on comprend comment définir des marges intérieures et extérieures et des
bordures autour du contenu de l’élément. On peut également positionner les éléments les uns par rapport
aux autres de façon efficace.
DEFINITION ET IMPORTANCE

 La première boîte (la boîte centrale) représente le contenu de l’élément ou l'élément en soi.
 Ensuite, autour du contenu, la deuxième boîte contient en plus la marge intérieure de l’élément (padding en
CSS).
 La troisième boîte contient en plus la bordure de l’élément (border en CSS).
 Enfin, la dernière boîte contient également la marge extérieure de l’élément(margin en CSS).
DEFINITION ET IMPORTANCE
Un exemple pratique avec l’élément HTML div est illustré par les figures ci-dessous.
DEFINITION ET IMPORTANCE
DIMENSIONS
La dimension d’un élément est représentée par la largeur(width) et la hauteur(height).
La hauteur par défaut d’un élément HTML est déterminée par son contenu. Ainsi, un paragraphe, selon qu’il
occupe une ou deux lignes, ne possèdera pas la même hauteur par défaut.
La largeur d’un élément est avant tout déterminée par son type: les éléments de type block occuperont par
défaut tout l’espace disponible. Les éléments de type inline, en revanche, n’occuperont que la largeur
nécessaire à leur contenu.
 Pour modifier la hauteur par défaut d’un élément, on va utiliser la propriété height. Cette propriété peut
prendre des valeurs absolues, relatives (utiles dans le cas d’un site responsive) ou la valeur « auto » (la
hauteur sera calculée automatiquement par le navigateur).
Pour modifier la largeur par défaut d’un élément, on va cette fois-ci utiliser la propriété width. Cette
propriété peut prendre les mêmes valeurs que la propriété height.
Dans l’exemple suivant, on va définir la largeur et la hauteur de l’élément div. La couleur de fond a été
donnée également afin de bien voir sa taille.
DIMENSIONS
DIMENSIONS
DIMENSIONS
BORDURES
Il est possible de définir des bordures de couleurs, épaisseurs ou types différents autour des éléments HTML
en CSS.
La bordure prend l’espace qui va se trouver entre la marge intérieure et la marge extérieure d’un élément
HTML.
En CSS, on peut définir les bordures d’un élément de différentes manières en CSS : soit en utilisant les trois
propriétés border-width, border-style et border-color, soit un utilisant directement la notation courte
border.
BORDURES
La propriété border-style peut prendre huit valeurs différentes qui vont définir l’allure générale (le style) de
notre bordure. Les différentes valeurs possibles ainsi que l’apparence donnée à la bordure sont représentées
sur l’image ci-après.
BORDURES
Le CSS permet également de définir des bordures différentes au dessus, à droite, en dessous et à gauche de
des éléments HTML.
Pour cela, on va ajouter les mots clefs top(haut), right(droit), bottom(bas) et left(gauche) dans le nom des
propriétés.
BORDURES
L’une des fonctionnalités nouvelles apportées par le CSS3 qui figure parmi les plus attendues par les
développeurs a été la possibilité de créer des bordures arrondies.
Pour cela, on va utiliser la propriété border-radius. Cette propriété va prendre une valeur en pixels
correspondant à la valeur du radius de la bordure.
On peut définir des bordures plus ou moins arrondies de chaque côté d’un élément HTML, cette fois-ci en
utilisant les mots clefs top-right, bottom-right, top-left et bottom-left.
MARGES
En CSS, on distingue deux types de marges: les marges intérieures (padding) et les marges extérieures
(margin).
Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Si on définit une couleur de
fond pour un élément, celle-ci s’applique également dans l'espace correspondant aux marges intérieures.
Les marges intérieures d’un élément peuvent être définies en CSS grâce à la propriété padding. Cette
propriété peut prendre des valeurs absolues (px) ou relatives (%).
On peut définir des marges intérieures haute, droite, basse et gauche de tailles diverses avec padding-top,
padding-right, padding-bottom et padding-left.
Les marges extérieures définit l’espace autour d’un élément. Les marges extérieures se trouvent en dehors
des bordures d’un élément et servent généralement à éloigner un élément d’un autre. Celles-ci ne sont pas
affectées par la couleur de fond donnée à un élément.
MARGES
En CSS, on distingue deux types de marges: les marges intérieures (padding) et les marges extérieures
(margin).
Les marges intérieures se trouvent entre le contenu de l’élément et sa bordure. Si on définit une couleur de
fond pour un élément, celle-ci s’applique également dans l'espace correspondant aux marges intérieures.
Les marges intérieures d’un élément peuvent être définies en CSS grâce à la propriété padding. Cette
propriété peut prendre des valeurs absolues (px) ou relatives (%).
On peut définir des marges intérieures haute, droite, basse et gauche de tailles diverses avec padding-top,
padding-right, padding-bottom et padding-left.
MARGES
On peut définir des marges extérieures (« en dehors » des éléments) en CSS grâce à la propriété margin.
Cette propriété accepte des valeurs absolues, relatives, ainsi que les valeurs inherit ou auto. Cette dernière
valeur, auto, va souvent nous être utile pour centrer horizontalement un élément par rapport à un élément
parent.
On peut définir des marges extérieures haute, droite, basse et gauche de tailles diverses avec margin-top,
margin-right, margin-bottom et margin-left.
MARGES
On peut également centrer horizontalement un élément par rapport à son élément parent en utilisant la
valeur auto. Pour que cela fonctionne, il faut que deux critères soient réunis : l’élément doit être de type
block et doit posséder une largeur définie.
MARGES
On peut également centrer horizontalement un élément par rapport à son élément parent en utilisant la
valeur auto. Pour que cela fonctionne, il faut que deux critères soient réunis : l’élément doit être de type
block et doit posséder une largeur définie.
MARGES
Finalement, on peut définir des marges intérieures et extérieures de tailles différentes pour chaque côté des
éléments en utilisant directement les propriétés padding et margin plutôt que padding-top, padding-right,
etc.
Pour cela, il faut tout simplement enchaîner les quatre valeurs à la suite. La première valeur correspond à la
marge haute, la seconde à la marge droite, la troisième à la marge basse et la dernière à la marge gauche.
On peut également ne préciser que deux valeurs. Dans ce cas, la première correspond aux marges haute et
basse, et la seconde aux marges droite et gauche.
OMBRES DES BOITES
On peut créer des ombres autour des boîtes (à l’extérieur ou à l’intérieur des bordures) grâce à la propriété
CSS box-shadow. Tout comme la propriété text-shadow, box-shadow prend quatre valeurs différentes
dans l’ordre suivant :
 Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;
 Le déplacement vertical (vers le bas ou le haut) de l’ombre ;
 Le rayon de propagation de l’ombre ;
 La couleur de l’ombre.
Notez qu’on peut également créer des ombres intérieures (à l’intérieur des bordures d’un élément) en
rajoutant une cinquième valeur à box-shadow : la valeur « inset ».
OMBRES DES BOITES
AFFICHAGE
Par défaut, les éléments HTML vont s’afficher soit sous forme de « bloc », soit « en ligne ». C’est la différence
majeure entre les éléments de type block et inline.
La propriété display est une propriété CSS très puissante, puisqu’elle permet de maîtriser la façon dont un
élément va être affiché, et ainsi de gérer la mise en page des éléments.
La propriété display peut prendre de nombreuses valeurs permettant de gérer précisément la façon dont
chaque élément va être affiché:
 inline: l’élément ciblé va se comporter comme un élément de type inline et donc n’occuper que la largeur
qui lui est strictement nécessaire.
 block: les éléments ciblés vont se comporter comme des éléments HTML (par ex span) de type block et ainsi
prendre toute la largeur disponible.
 inline-block: va permettre d’emprunter certaines propriétés des éléments de type block et certaines
propriétés des éléments de type inline. Càd l’élément en soi va être de type inline tandis que ce qu’il
contient (« l’intérieur de la boîte ») va être considéré comme étant de type block.
 none: va permettre tout simplement de ne pas afficher un élément.
AFFICHAGE
POSITIONNEMENT
On peut gérer le positionnement des éléments HTML en CSS grâce à la propriété CSS position.
La propriété CSS position supporte quatre valeurs différentes: static, relative, fixed, absolute.
La valeur static correspond au positionnement par défaut des éléments HTML dans une page. Tout élément
positionné de façon « static » ne pourra pas être affecté par les propriétés top, right, bottom, left.
POSITIONNEMENT
Un élément positionné grâce à position:relative est repositionné relativement par rapport à sa position par
défaut.
Par exemple, si on positionne un élément HTML de façon relative et qu’on lui ajoute left:50px, l’élément sera
déplacé de 50 pixels vers la droite par rapport à sa position par défaut.
POSITIONNEMENT
Un élément HTML possédant un positionnement « fixed » va toujours rester à la même place, même si l’un
des visiteurs descend ("scroll") dans la page. Cette valeur est très utile pour conserver un élément
constamment visible, comme un menu ou un sommaire par exemple.
POSITIONNEMENT
La valeur absolute de la propriété position permet de positionner un élément de façon relative par rapport à
son parent le plus proche auquel on a appliqué un positionnement spécifique (relative, fixed ou absolute).
NB: si l’élément auquel on applique position:absolue ne possède pas d’élément parent positionné
spécifiquement, celui-ci va se positionner par rapport à la page entière.
POSITIONNEMENT
La propriété position permet de modifier et de casser le flux normal des éléments HTML dans la page en les
positionnant où l’on souhaite dans la page.
On peut choisir quel élément va apparaître au dessus de quel autre grâce à la propriété z-index
La propriété z-index prend un nombre en valeur : un nombre plus grand positionnera un élément devant un
autre ayant un z-index plus petit.
POSITIONNEMENT
La propriété position permet de modifier et de casser le flux normal des éléments HTML dans la page en les
positionnant où l’on souhaite dans la page.
On peut choisir quel élément va apparaître au dessus de quel autre grâce à la propriété z-index
La propriété z-index prend un nombre en valeur : un nombre plus grand positionnera un élément devant un
autre ayant un z-index plus petit.
Exemple 1:
POSITIONNEMENT
Exemple 1:
FLOAT ET CLEAR
La propriété float permet de faire « flotter » des éléments HTML à gauche ou à droite dans une page web.
On utilisera généralement soit la valeur right (l’élément ciblé flotte à droite), soit left (l’élément ciblé flotte à
gauche) avec cette propriété.
La propriété float fait sortir un élément du flux normal de la page. Il y a trois choses à retenir lorsque l’on
utilise cette propriété :
• Les éléments suivant un élément flottant vont se positionner à côté de celui-ci par défaut. On peu annuler ce
comportement grâce à la propriété clear.
• Les élément positionnés de façon absolue avec position:absolue ignoreront la propriété float (ils ne
pourront pas flotter)
• Un élément flottera toujours dans les limites (en terme de largeur) de son élément parent conteneur
FLOAT ET CLEAR
FLOAT ET CLEAR
FLOAT ET CLEAR
La propriété clear permet de contrôler le comportement d’éléments flottants. Plus précisément, cette
propriété permet d’empêcher des éléments de venir se positionner aux côtés d’éléments flottants.
Cette propriété peut prendre les valeurs suivantes :
• Left : neutralise l'effet d'un float:left
• Right : neutralise l'effet d'un float:right
• Both : neutralise l'effet d'un float:left et float:right
NB: Il ne faut pas utiliser clear sur l’élément qui possède la propriété float.
POSITIONNEMENT: FLOAT ET CLEAR
COULEUR DE FOND
Pour changer la couleur de fond d’un élément, on va utiliser la propriété CSS background-color. Cette
propriété va prendre couleur sous forme de nom, valeur hexadécimale, valeur RGB ou RGBa.
IMAGE DE FOND
Pour ajouter une image de fond derrière un élément, on va cette fois-ci utiliser la propriété background-
image. Cette propriété va prendre comme valeur l’adresse de l’image que l’on souhaite afficher.
IMAGE DE FOND
Une image de fond peut se répèter verticalement, horizontalement, dans les deux sens ou pas du tout grâce
à la propriété CSS background-repeat. Cette propriété peut prendre l’une des quatre valeurs suivantes:
 repeat (valeur par défaut) : l’image se répète horizontalement et verticalement ;
 repeat-x : l’image va se répéter horizontalement seulement ;
 repeat-y : l’image va se répéter verticalement seulement ;
 no-repeat : l’image ne se répétera pas.
Pour fixer l’image de fond ou de la faire défiler en même temps qu’un utilisateur va descendre dans la page
grâce à la propriété CSS background-attachment. Cette propriété peut prendre deux valeurs différentes :
fixed (pour fixer le fond) et scroll (valeur par défaut).
NOTATIONS LONGUES ET COURTES
En CSS, certaines propriétés peuvent être regroupées en une seule qui constitue leur notation courte.
La propriété font est la notation short hand des propriétés CSS font-style, font-weight, font-size, line-height
et font-family.
NOTATIONS LONGUES ET COURTES
La propriété border regroupe border-width, border-style, border-color.
La propriété padding est la notation courte de padding-top, padding-right, padding-bottom et padding-left.
NOTATIONS LONGUES ET COURTES
La dernière notation courte qu’on doit connaître correspond à la propriété background. Cette propriété va
regrouper les valeurs des propriétés background-color, background-image, background-repeat,
background-attachment et background-position.
PSEUDO CLASSES CSS(:link, :visited, :hover et :active )
Les pseudo classes permettent de changer le style d’un élément HTML selon son état, c’est-à-dire de façon
quasi dynamique. Par exemple, on peut afficher un paragraphe en gras lorsque l’utilisateur passe sa souris
dessus ou changer la couleur d’un lien une fois celui-ci cliqué.
Les pseudo classes sont reconnaissables au fait qu’elles commencent tous par le symbole « : » (deux-points).
Les pseudo classes :link, :visited, :hover et :active s’utilisent sur les liens HTML, mais :hover peut être sur
des paragraphes.
Généralement, la pseudo classe :
 :link permet de styliser un lien non visité
 :visited permet de styliser un lien une fois celui-ci visité.
 :hover permet de changer l’aspect d’un élément lorsque les visiteurs poseront leur curseur dessus.
 :active permet de modifier l’aspect d’un lien lors du clic
PSEUDO CLASSES CSS(:link, :visited, :hover et :active )
PSEUDO CLASSES CSS(:first-child et :last-child)
Les pseudo classes CSS :first-child et :last-child permettent respectivement de sélectionner le premier
élément et le dernier élément enfant HTML d’un certain type par rapport à un élément parent.
PSEUDO CLASSES CSS nth-child()
La pseudo classe CSS nth-child() permet de sélectionner certains enfants d'un élément HTML. On peut
indiquer entre les parenthèses de cette pseudo classe soit un nombre, soit un mot clef.
SELECTEUR UNIVERSEL (*)
Le sélecteur « * » (étoile) permet de sélectionner tous les éléments HTML d’une page d’un coup.
SELECTEUR UNIVERSEL (*)
Le sélecteur « * » (étoile) permet de sélectionner tous les éléments HTML d’une page d’un coup.
SELECTION D’UN ELEMENT PAR RAPPORT A UN ELEMENT
Le sélecteur « A B » permet de sélectionner un élément B contenu dans un élément A.
SELECTION D’UN ELEMENT PAR RAPPORT A UN ELEMENT
le sélecteur « A + B » va lui nous permettre de sélectionner tous les éléments B de même niveau et suivant
immédiatement les éléments A.
SELECTION D’UN ELEMENT PAR RAPPORT A UN ELEMENT
Finalement, le sélecteur « A > B » va sélectionner tous les éléments B qui sont des éléments enfants directs
de A.
SELECTEUR D’ATTRIBUT
Le CSS permet de sélectionner un élément HTML selon le fait qu’il possède ou non un attribut et selon la
valeur de l’attribut. Le sélecteur « A[attribut] » va sélectionner tous les éléments A possédant un attribut en
particulier.
SELECTEUR D’ATTRIBUT
Le sélecteur CSS « A[attribut="valeur"] » va sélectionner tous les éléments A possédant un attribut en
particulier avec une valeur précise.
PRESENTATION DES FORMULAIRES
Les formulaires permettent de recueillir des données envoyées par les utilisateurs.
On utilise par exemple des formulaires HTML pour créer des formulaires d’inscription, des formulaires de
contact, etc.
Les données envoyées par les utilisateurs ne peuvent pas être traitées , ni les stocker.
Pour effectuer ces opérations, on a besoin de connaître de nouveaux langages informatiques qui vont traiter
les informations envoyées côté serveur, comme le PHP par exemple et pouvoir enregistrer les données
efficacement comme c’est le cas du système de gestion de bases de données MySQL.
CREATION D’UN FORMULAIRE
Le HTML met à notre disposition une série d'éléments permettant de créer des formulaires. Ces différents
éléments permettent de définir le formulaire en soi, de créer des zones de saisie de texte courtes ou
longues, de proposer des zones d'options à nos utilisateurs, etc.
Voici la liste des éléments qu’on va étudier dans les parties suivantes :
CREATION D’UN FORMULAIRE
Exemple
DIFFERENTS TYPES D’INPUT ET LES LISTES
L’élément HTML input permet de créer toutes sortes de champs de formulaire en changeant la valeur de son
attribut type:
 type="text" permet de créer un champ de saisie mono-ligne dans lequel l’utilisateur entrera des données.
 type="password" permet de créer un champ de saisie « sécurisé » pour par exemple demander un mot de
passe aux utilisateurs.
DIFFERENTS TYPES D’INPUT ET LES LISTES
 type="date" est utilisé pour créer des champs de formulaire devant recevoir une date, comme une date de
naissance par exemple.
DIFFERENTS TYPES D’INPUT ET LES LISTES
 type="email" permet de créer un champ de formulaire devant recevoir une adresse email.
 type="url" permet de créer une zone de saisie acceptant une URL.
 type="number" permet de créer une zone de saisie n’acceptant que les nombres.
DIFFERENTS TYPES D’INPUT ET LES LISTES
 type=" radio " permet de créer des boutons de type « radio », c’est-à-dire de demander à l’utilisateur de
choisir une option et une seulement dans une liste proposée.
DIFFERENTS TYPES D’INPUT ET LES LISTES
 type="checkbox" permet également de créer des options à choisir par les visiteurs. L’utilisateur peut ne
choisir aucun choix, un choix ou même plusieurs choix.
DIFFERENTS TYPES D’INPUT ET LES LISTES
 type="submit" permet de créer un bouton d’envoi des données du formulaire. Les données seront envoyées
via la méthode précisée dans l’attribut method de l’élément form à l'adresse précisée en valeur de l’attribut
action de ce même élément.
DIFFERENTS TYPES D’INPUT ET LES LISTES
Les listes vont permettre à un utilisateur de choisir une valeur dans une liste d’options déroulante.
DIFFERENTS TYPES D’INPUT ET LES LISTES
On peux grouper différentes options entre elles au sein d’une liste grâce à l’élément optgroup.
FORMULAIRE ET ATTRIBUTS HTML
Il existe de nombreux autres attributs HTML disponibles permettant d’améliorer le formulaire.
FORMULAIRE ET ATTRIBUTS HTML
 L’attribut autocomplete permet de finir automatiquement le remplissage d’un champ en se basant sur les
informations entrées précédemment dans d’autres formulaires par l’utilisateur. Cet attribut peut prendre
deux valeurs : on (le champ va s’auto compléter) et off.
 L’attribut HTML autofocus permet d’attribuer automatiquement le focus sur un élément lors du chargement
de la page.
 Les attributs HTML min et max permet de préciser les valeurs minimale et maximale attendues pour un
champ. Ces attributs seront généralement utilisés avec un élément input type="number".
FORMULAIRE ET ATTRIBUTS HTML
 L’attribut placeholder permet de donner un exemple de remplissage d’un champ dans le champ lui même.
La valeur donnée au placeholder apparaitra sous forme de valeur grise, à moitié transparente. Dès que
l’utilisateur cliquera dans le champ, la valeur du placeholder disparaitra.
FORMULAIRE ET ATTRIBUTS HTML
 L’attribut checked permet respectivement de pré-cocher une ou plusieurs zones d’option selon le type
d’élément input utilisé.
 L’attribut checked va occuper le même rôle pour l’élément select, c-à-d pour les listes d’option des
formulaires.
FORMULAIRE ET ATTRIBUTS HTML
FORMULAIRE ET ATTRIBUTS HTML
 L’attribut required permet de rendre un champ de formulaire obligatoire : si l’utilisateur n’a pas rempli ce
champ, le formulaire ne pourra pas être envoyé.
PERSONNALISER LE FORMULAIRE
L’attribut fieldset permet de regrouper certains éléments d’un formulaire HTML entre eux, afin de créer
différentes « sections » pour le formulaire et de le structurer. Pour donner un nom à chaque section, on va
utiliser l’élément HTML legend à l’intérieur de fieldset.
PERSONNALISER LE FORMULAIRE
 Pour mettre en forme un formulaire, on va utiliser les propriétés width et height pour harmoniser les lignes
du formulaire. Pour aérer les formulaires, on va ajouter les propriétés padding et margin.
PERSONNALISER LE FORMULAIRE
PERSONNALISER LE FORMULAIRE
AUDIO
Pour insérer du contenu audio dans un document HTML, on va utiliser l’élément HTML audio. Ci-dessous la
liste des formats audio principaux supportés par l’élément HTML audio et leur prise en charge ou non par
les dernières versions des navigateurs les plus utilisés
AUDIO
L’élément audio possède un attribut obligatoire : l’attribut controls qui ne possède qu'une valeur (que nous
ne sommes donc pas strictement obligé de préciser car celle-ci est implicite). Celui-ci va tout simplement
afficher les contrôles de base (lecture, pause, retour au début et volume) de notre piste audio.
Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, on utilise en plus de l’élément audio
un élément source (représenté sous forme de balise orpheline) avec son attribut src.
AUDIO
L’élément audio possède un attribut obligatoire : l’attribut controls qui ne possède qu'une valeur (que nous
ne sommes donc pas strictement obligé de préciser car celle-ci est implicite). Celui-ci va tout simplement
afficher les contrôles de base (lecture, pause, retour au début et volume) de notre piste audio.
Afin de laisser le choix au navigateur d’utiliser le fichier qu’il souhaite, on utilise en plus de l’élément audio
un élément source (représenté sous forme de balise orpheline) avec son attribut src.
AUDIO
On peut ensuite ajouter d’autres fonctionnalités au fichier audio en rajoutant des attributs facultatifs à
l’élément audio:
• Un attribut preload pertmet de charger le fichier en même temps que la page web. Cet attribut accepte trois
valeurs : auto, metadata et none (pas de chargement) ;
• Un attribut autoplay va automatiquement lancer le fichier audio dès que celui-ci est prêt.
• Un attribut loop va faire se répéter le fichier en boucle
• Un attribut muted va mettre le son du fichier sur 0.
AUDIO
VIDEO
• Il est conseillé d’utiliser différents formats vidéo afin de s’assurer une bonne compatibilité avec les
navigateurs les plus utilisés par des visiteurs.
VIDEO
L’élément video s’utilise exactement comme l’élément audio. De plus, il possède les mêmes attributs que ce
dernier à savoir :
 Un attribut control pour ajouter les contrôles de base de la vidéo (lecture, arrêt, etc.) ;
 Un attribut preload pour précharger la vidéo. Cet attribut accepte trois valeurs : auto (chargement total),
metadata (chargement partiel de la vidéo) et none (pas de chargement) ;
 Un attribut autoplay pour activer la lecture automatique de la vidéo
 Un attribut loop pour lire une vidéo en boucle
 Un attribut muted pour désactiver le son de la vidéo.
L’élément video va également posséder quelques attributs qui lui sont propres, notamment l’attribut poster
qui va permettre d’afficher une image de fond avant que la vidéo ne soit lancée.
On peut changer la taille de la vidéo sans problème en CSS en appliquant les propriétés height et width sur
l’élément video.
VIDEO

Vous aimerez peut-être aussi