Document de Synthèse HTML CSS

HTML CSS
Support de cours
Table des matières
I. Découvrir le fonctionnement des sites web .................................................................................. 4
I.1 - Comment se passe la communication entre le client et le serveur? .................................. 4
I.2 - Quelles sont les différentes sortes de sites web? ................................................................... 4
I.3 - De quoi sont composées nos pages Web? ............................................................................... 5
I.4 - CMS (Content Management System) ........................................................................................... 5
II. Les bases du Html ................................................................................................................................ 5
II.1 - Qu’est-ce que le HTML ? ................................................................................................................ 5
II.2 - Structure de base d’une page HTML .......................................................................................... 6
Le DOCTYPE .......................................................................................................................................... 6
La balise HTML ...................................................................................................................................... 7
L'en-tête <head> .................................................................................................................................... 7
L'encodage (charset) ........................................................................................................................... 7
Le titre principal de la page ................................................................................................................ 7
Le corps <body>.................................................................................................................................... 8
II.3 - Etudier les balises et les attributs ............................................................................................... 8
II.3.1 - Les balises ................................................................................................................................. 8
II.3.2 - Les attributs ............................................................................................................................... 9
III. Quelques balises et leurs fonctions ............................................................................................. 9
III.1 - Bien utiliser les paragraphes................................................................................................... 9
III.2 - Contrôler les sauts de ligne ..................................................................................................... 9
III.3 - Mettre du texte en évidence ..................................................................................................... 9
III.4 - Marquer le texte......................................................................................................................... 10
III.5 - Employer les niveaux de titre ................................................................................................ 10
III.6 - Définir des listes simples ....................................................................................................... 11
III.7 - Ajoutez des éléments multimédia ............................................................................................ 12
III.7.1 - Insérer des images ................................................................................................................ 12
III.7.2 - Insérer des vidéos ................................................................................................................. 12
III.7.3 - Incorporez des vidéos YouTube ....................................................................................... 13
III.7.4 - Ajoutez des fichiers audio .................................................................................................. 13
III.8 - Mettre en place des liens ............................................................................................................ 14
III.8.1 - Découvrir la balise <a> ........................................................................................................ 14
III.8.2 - Autres utilisations de la balise < a > ................................................................................ 14
III.8.3 - Liens pour télécharger des fichiers ................................................................................. 14
III.8.4 - Liens pour envoyer un e-mail ............................................................................................ 15
IV. Notions de CSS et mise en forme avec CSS ............................................................................ 16
IV.1 - Comprendre le rôle du CSS ................................................................................................... 16
IV.2 - Les sélecteurs CSS .................................................................................................................. 16
IV.3 - Les propriétés CSS .................................................................................................................. 16
IV.4 - Les déclarations CSS : premier exemple pratique .......................................................... 17
IV.5 - Comprendre où placer les styles CSS ................................................................................ 17
IV.6 - Sélecteurs CSS simple et multiples .................................................................................... 21
IV.7 - Sélecteurs CSS complexes et combinateurs ................................................................... 21
IV.8 - Utilisez les attributs du HTML class et id dans les sélecteurs .................................... 22
IV.9 - Class vs id : Quelles différences et quel attribut utiliser ? ........................................... 22
IV.10 - Utiliser les éléments HTML div et span ............................................................................ 23
IV.11 - Mémento des propriétés CSS ............................................................................................. 24
........................................................................................................ 25
V.1 - Formulaires ..................................................................................................................................... 25
V.1.1 - Les éléments des formulaires HTML ................................................................................ 25
V.1.2 - L’élément input et les valeurs de l’attribut type ............................................................ 26
V.1.3 - L’élément textarea ................................................................................................................. 26
V.1.4 - Les éléments select, option et optgroup ......................................................................... 26
V.1.5 - Les éléments fieldset et legend ......................................................................................... 27
V.2 - Tableaux........................................................................................................................................... 27
V.2.1 - Les éléments constitutifs essentiels d’un tableau HTML ........................................... 27
V.2.2 - Ajouter une ligne d’en-tête à un tableau HTML.............................................................. 27
V.2.3 - Fusionner des cellules entre elles avec colspan et rowspan .................................... 29
V.2.4 - Ajouter une légende à un tableau HTML avec caption ................................................ 29
VI. Notion de boite, de marge et de bordure ................................................................................... 30
VI.1 - Découvrir le modèle des boites ................................................................................................ 30
VI.2 - Les propriétés CSS liées aux différentes boites ................................................................. 31
VII. Généralité sur le dimensionnement et le positionnement .................................................... 31
VII.1 - Le positionnement .................................................................................................................. 31
VII.2 - Dimensionnement ................................................................................................................... 32
............................................................................................................................................. 32
I. Découvrir le fonctionnement des sites web
Commençons par expliquer de manière simple comment fonctionne un site web.
En fait, surfer sur le Web c’est un échange. Waouh c’est beau ! Non vraiment le Web est un
système d’échange entre un client et un serveur.
 Le client c’est nous, c’est notre navigateur Web, c’est lui qui va nous permettre de voir
le Web depuis notre ordinateur, smartphone ou tablette. C’est celui que vous
connaissez sans doute sous le nom de Chrome, Firefox, Safari, Internet Explorer, etc.
 Et le serveur, c’est en fait un ordinateur puissant qui stocke et héberge des sites Web.
C’est sur cet ordinateur que se trouvent les pages Web, c’est à dire tous les fichiers
du site internet auquel on veut accéder.
Le but du serveur web est de servir des clients, d’où le nom « serveur ».
I.1 - Comment se passe la communication entre le client et le serveur?
Le client accède à une page Web en utilisant l’adresse d’un site web – appelée URL – dans
son navigateur. Par exemple, l’URL http://monsite.fr/mondossier/mapage.html
On peut décomposer l’URL en plusieurs parties :
– “http”, c’est le nom du protocole de communication entre le client et le serveur,

– “monsite.com” est le nom de domaine du site Web auquel on veut accéder,
– “mondossier/mapage.html” est l’endroit où se trouve la page dans le site web.
La communication entre client et serveur se fait en trois étapes :
1. Premièrement, le client commande une page Web au serveur. Il saisit l’URL d’un site
dans son navigateur. Celui-ci envoie immédiatement une requête web au serveur.
2. Ensuite, le serveur prépare cette commande c’est-à-dire la page Web en question. Le
serveur va se charger de traiter la requête et renvoyer les données demandées (page
web, image, vidéo…).
3. Et enfin, le navigateur interprète les données reçues et les renvoient au client qui va les
afficher directement sur notre écran
I.2 - Quelles sont les différentes sortes de sites web?
Parfois, le rôle du serveur est vraiment simple, c’est le cas pour les sites Web statiques.
Le client envoie une requête au serveur qui se contente de renvoyer la page demandée. Le
serveur ne fait aucun travail sur la page en question, d’où le terme “statique”.
On utilise un site statique lorsque l’on a juste besoin de présenter des informations. On parle
alors de site vitrine. Créer une page web statique est très simple et est à la portée de tous.
Mais parfois le serveur doit bosser un peu plus dur et c’est le cas pour les sites Web
dynamiques.
Lorsque le client commande une page au serveur, le serveur prépare cette commande. Il fait un
vrai travail dessus avant de la renvoyer au client.
C’est grâce à ça que les pages Web peuvent être personnalisées en fonction de chaque client
ou en fonction de données externes au site.
Par exemple Facebook est un site dynamique. Le contenu est différent et personnalisé pour
chaque utilisateur.
I.3 - De quoi sont composées nos pages Web?
Comme vous l’avez compris, la visite d’un site Web est le résultat d’une communication entre un
client et un serveur.
Ce que le client, notre navigateur Web, recevra, sera écrit en langage client, c’est la partie
visible de l’Iceberg souvent appelée “Front-End”.
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous
consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent
pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML
et CSS pour savoir ce qu'il doit afficher
Par contre, tout le travail qu’effectuera le serveur sur nos pages Web avant de les envoyer au
client sera écrit en langage serveur c’est la partie cachée de l’Iceberg souvent appelée “Back-
End”.
I.4 - CMS (Content Management System)
Avant de finir, j’aimerais aussi vous parler des CMS. Vous avez sans doute entendu parler
de WordPress, et bien il s’agit d’un CMS.
Les CMS sont en fait des sites Web dynamiques clé en main. C’est génial pour quelqu’un qui
ne sait pas coder parce qu’il pourra créer un site Web assez rapidement.
Il sera tout de même limité dès qu’il voudra un petit peu le personnaliser et c’est pourquoi il est
préférable de connaître les bases du développement Web même si on décide de travailler avec
un CMS.
II. Les bases du Html

II.1 - Qu’est-ce que le HTML ?
HTML signifie HyperText Markup Language.

HTML balise le contenu d'un site. Fondamentalement, il indique à l'ordinateur de l'utilisateur
quelles sont les choses. Il donne également accès à une quantité incroyable de fonctionnalités
déjà intégrées directement dans le navigateur. Vous pouvez appeler cette fonctionnalité en
utilisant certains codes HTML.
HTML est simple dans sa structure. Il n'y a pas de logique de programmation, pas de boucles ou
de fonctions. Au lieu de cela, HTML est ce qu'on appelle un langage déclaratif. Le code déclare
simplement, Hé, c'est un paragraphe ! Hé, faites-en un lien ! Hé, mettez un champ de formulaire
ici ! C'est tout du vocabulaire. C'est toutes les déclarations. C'est la simplicité du HTML qui lui
donne sa résilience et sa robustesse. Si quelque chose ne va pas avec HTML, si quelque chose
manque ou est mal orthographié, HTML est comme, hein, assez proche. Je vais juste deviner ce
qu'ils voulaient dire et le corriger. J'afficherai cette page de toute façon. HTML peut supporter
beaucoup d'abus et toujours livrer.
En résumé le rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce
qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : «
Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à
afficher, etc. »
II.2 - Structure de base d’une page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise
<html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du
code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un
exemple :
<html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit
aussi être fermée à l'intérieur.
<html><body></html></body> : incorrect, les balises s'entremêlent.
Le DOCTYPE
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il
s'agit bien d'une page web HTML.
La déclaration de type n'est pas une balise de l'HTML, c'est une instruction que l'on donne au
navigateur à propos de la version dans laquelle nous avons écrit le code HTML, la version de
l'HTML que nous utilisons.
Dans le cadre de HTML5, il a été décidé de la simplifier, pour le plus grand bonheur des
webmasters. Quand vous voyez une balise doctype courte (<!DOCTYPE html>), cela signifie que
la page est écrite en HTML5.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation).
Vous pouvez considérer que c'est un peu l'exception qui confirme la règle.
La balise HTML
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous
pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !
La balise <html> dit au navigateur qu'il s'agit d'un document HTML.
Cet élément <html> représente donc la racine de notre code, c'est-à-dire l'élément qui encadre
tous les autres à l'exception, rappelez-vous, de ce <!DOCTYPE> de la déclaration de type qui doit
être la toute première chose tout au début de notre document.
L'en-tête <head>
Une page web est constituée de deux parties :
L'en-tête <head> : cette section donne quelques informations générales sur la page, comme son
titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement
assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont
simplement des informations générales à destination de l'ordinateur. Elles sont cependant très
importantes !
Intéressons-nous par contre aux deux balises contenues dans l'en-tête…
L'encodage (charset)
<meta charset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html .
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon
dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont
s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
Il y a plusieurs techniques d'encodage, portant des noms bizarres, et utilisées en fonction des
langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée
aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun
problème pratiquement tous les symboles de toutes les langues de notre planète ! C'est pour cela
que j'ai indiqué utf-8 dans cette balise.
Il ne suffit pas de dire que votre fichier est en UTF-8. Il faut aussi que votre fichier soit bien
enregistré en UTF-8. C'est heureusement le cas désormais par défaut dans la plupart des éditeurs
de texte.
Le titre principal de la page

<title>
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un
titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères, en général).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du
navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le
titre s'affiche dans l'onglet.
Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google.
Le corps <body>
Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons
ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre
code.
II.3 - Etudier les balises et les attributs
II.3.1 - Les balises

Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran
pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des
symboles < et >, comme ceci : <balise>.
À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent
dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un
paragraphe de texte », etc.
On distingue deux types de balises : les balises en paires et les balises orphelines.
Les balises en paires

Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :
<titre>Ceci est un titre</titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre
se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est
pas un titre.
Les balises orphelines

Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste
dire à l'ordinateur « Insère une image ici ».
Une balise orpheline s'écrit comme ceci :

<image />
Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour
ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter
ce / (slash) à la fin des balises orphelines. Vous me verrez donc mettre un / aux balises
orphelines et je vous recommande de faire de même, c'est une bonne pratique.
II.3.2 - Les attributs

Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus
souvent une valeur, comme ceci :
<balise attribut="valeur">
À quoi cela sert-il ? Prenons la balise <image /> que nous venons de voir. Seule, elle ne sert pas
à grand-chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :
<image nom="photo.jpg" />

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg .
Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise
ouvrante et pas dans la balise fermante.
Les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais,
nous allons les découvrir dans la suite de ce support.
III. Quelques balises et leurs fonctions

Maintenant que vous connaissez les éléments de base de l'HTML, nous allons étendre notre
vocabulaire HTML et commencer l'étude systématique des principales balises.
III.1 - Bien utiliser les paragraphes

La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de
paragraphes. Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
<p>Bonjour et bienvenue sur mon site !</p>
<p> signifie « Début du paragraphe » ;
</p> signifie « Fin du paragraphe ».
III.2 - Contrôler les sauts de ligne
En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous
en avez l'habitude.
Il existe une balise « Aller à la ligne » !
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous devez
obligatoirement la mettre à l'intérieur d'un paragraphe.
III.3 - Mettre du texte en évidence

Nous allons maintenant étudier la manière dont on peut mettre du texte en évidence. Le plus facile
pour mettre du texte en évidence, c'est de le mettre en gras ou en italique.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>.
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort », ou «
important » si vous préférez. Elle s'utilise exactement de la même manière que <em>
III.4 - Marquer le texte
La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas
forcément considéré comme important, mais on veut qu'il se distingue bien du reste du texte. Cela
peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site, par
exemple.
Par défaut, <mark> a pour effet de surligner le texte. On pourra changer l'affichage en CSS
(décider de surligner dans une autre couleur, d'encadrer le texte, etc.). C'est le même principe que
les balises précédentes : <em>, <strong>, elles indiquent le sens des mots et non pas comment
ceux-ci doivent s'afficher.
III.5 - Employer les niveaux de titre

Dans un document web il y a des paragraphes, certes, mais il y a aussi plein d'autres types
d'éléments. Et parmi les éléments les plus couramment rencontrés, nous avons les titres, ou pour
parler dans le jargon de l'HTML, les headings. La première chose que vous devez savoir, c'est
que dans le langage HTML nous avons six niveaux de titres. On a donc six balises de titres
différentes :
<h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la
page au début de celle-ci ;
<h2> </h2> : signifie « titre important » ;
<h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre », si vous
voulez) ;
<h4> </h4> : titre encore moins important ;
<h5> </h5> : titre pas important ;
<h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
Attention: Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte ! Il
faut impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis
un titre de niveau 2 (<h2>), etc. Il ne devrait pas y avoir de sous-titre sans titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire cela en CSS un
peu plus tard.
III.6 - Définir des listes simples
Que peut-on encore mettre dans un document ? Pensez à un traitement de texte. Qu'avons-nous
comme éléments possibles dans un document Word par exemple ? On a des paragraphes. On a
des titres. Et puis on a aussi des listes…
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes :
Les listes non ordonnées ou listes à puces ;
Les listes ordonnées ou listes numérotées, ou encore énumérations.
Liste non ordonnée

Une liste non ordonnée ressemble à ceci :
 Mangues
 Bananes
 Pommes
C'est un système qui nous permet de créer une liste d'éléments sans notion d'ordre (il n'y a pas de
« premier » ni de « dernier »). Créer une liste non ordonnée est très simple. Il suffit d'utiliser la
balise <ul> que l'on referme un peu plus loin avec </ul>.
Puis on va écrire chacun des éléments de la liste entre deux balises <li></li>. Chacune de ces
balises doit se trouver entre <ul> et </ul>.
Exemple :
<ul>
<li>Mangues</li>
<li>Bananes</li>
<li>Pommes</li>
</ul>
Retenez donc bien ces deux balises :

<ul></ul> délimite toute la liste ;
<li></li> délimite un élément de la liste (une puce).
Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas
limité à trois éléments.
Liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer
<ul></ul> par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter
les éléments.
L'ordre dans lequel vous placez les éléments de la liste est important. Le premier <li></li> sera
l'élément n° 1, le second sera le n° 2, etc…
Expérimentons cela à travers un exemple:
<h1>Ma journée</h1>
<ol>
<li>Je vais au boulot. </li>
<li>Je travaille. </li>
<li>Je retourne à la maison. </li>
</ol>
III.7 - Ajoutez des éléments multimédia

Sur une page Web nous pouvons mettre du texte. C'est ce que nous avons étudié dans le chapitre
précédent. Mais nous pouvons aussi enrichir nos pages d'une multitude de contenus multimédias,
comme des images, des audios ou des vidéos. C'est ce que je vous propose d'étudier dans ce
chapitre. On va commencer par les images.
III.7.1 - Insérer des images
Et maintenant, bonne nouvelle, dans l'HTML, il n'y a qu'une seule balise à retenir pour venir
insérer des images. Il s'agit de la balise img. Et cette balise img, elle ne se ferme pas. C'est un
petit peu comme le meta ou comme le br dont on a déjà parlé plus tôt.
Elle a besoin absolument de deux informations : la première, c'est le chemin d'accès vers votre
image src, et la seconde, c'est un contenu alternatif alt :
Voici un exemple d'insertion d'image :
<p>
Voici une photo que j'ai prise lors de mes congés au village :<br />
<img src="images/troupeau.jpg" alt="Photo de troupeau" />
</p>
III.7.2 - Insérer des vidéos
Un autre élément multimédia très populaire sur Internet c'est la vidéo.
La balise <video> est ajoutée dans HTML5 avec son frère, <audio>.
<video src="mavideo.mp4" controls poster="mavideo.jpg" width="600"></video>

Au minimum, pour utiliser l'élément video, les attributs suivants doivent être utilisés:
 src: définit l’URL, où le contenu vidéo est hébergé

 type: définit le format de fichier, exemple mp4
 controls: doit être spécifié ou aucun élément visuel n'apparaîtra pour contrôler la lecture du
contenu
De plus, il y a beaucoup d’attributs optionnels, qui peuvent être utilisés pour influencer la façon
dont le contenu vidéo est chargé. Ces attributs comprennent:
 autoplay: spécifie que la vidéo commencera à jouer dès qu'elle sera prête
 loop: spécifie que la vidéo va recommencer à chaque fois qu'elle est terminée
 poster: sélectionne une image à afficher comme affiche pour la vidéo jusqu'à ce que la lecture
commence
III.7.3 - Incorporez des vidéos YouTube
Quand on pense vidéo sur Internet on pense tous à YouTube, à Vimeo ou encore à DailyMotion.
En plus de pouvoir visionner des vidéos directement sur ces sites il nous propose une façon
simple d'intégrer des vidéos dans nos sites à nous. Voyons comment cela se passe au niveau de
YouTube.
Sur un ordinateur, accédez à la vidéo ou à la playlist YouTube que vous souhaitez intégrer.
Puis Cliquez sur PARTAGER . Dans la liste des options de partage, cliquez sur Intégrer.
Ensuite Copiez le code HTML figurant dans la zone qui s'affiche.
Collez le code dans le code HTML de votre site Web.
Exemple :
<iframe width="425" height="349" src="https://www.youtube.com/embed/MsM8SQ-Zyik"

frameborder="0" allowfullscreen></iframe>
III.7.4 - Ajoutez des fichiers audio
Au rang des éléments multimédias que l'on utilise couramment sur Internet il y a aussi les fichiers
audio.
Pour intégrer un fichier audio dans ma page, j'ai besoin de la balise audio et cette balise audio
fonctionne, vous allez le voir, de manière très similaire à la balise vidéo.
Exemple :
<audio src="musique.mp3" controls></audio>
Vous pouvez compléter la balise des attributs suivants :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut
sembler indispensable, et vous vous demandez peut-être pourquoi cela n'y figure pas par défaut,
mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la
lecture avec du JavaScript ;
width : pour modifier la largeur de l'outil de lecture audio ;
loop : la musique sera jouée en boucle ;
autoplay : la musique sera jouée dès le chargement de la page (évitez d'en abuser, c'est en
général irritant d'arriver sur un site qui joue de la musique tout seul !) ;
III.8 - Mettre en place des liens
Passons maintenant à l'un des chapitres les plus importants de cette formation. En effet nous allons maintenant parler
des liens et les liens c'est ce qui fait toute la différence entre un document Web et les autres types de documents
donc c'est très important de bien comprendre comment ils fonctionnent.
III.8.1 - Découvrir la balise <a>

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 » ou « ancre
» en français accompagné de son attribut href pour « hypertext reference » ou « référence hypertexte » en français.
L’élément HTML <a> est composé d’une paire de balises (balises ouvrante et fermante) et d’un contenu entre les
balises que l’on va appeler “ancre”. Ce contenu peut être un texte, une image, etc. et sera la partie visible et cliquable
du lien pour les utilisateurs.
L’attribut href va nous servir à indiquer la cible du lien, c’est-à-dire l’endroit où l’utilisateur doit être envoyé après avoir
cliqué sur le lien. Nous allons indiquer cette cible en valeur de l’attribut href.
D’un point de vue du code, la seule chose qui va changer pour créer un lien ancre plutôt qu’interne ou externe va être
la façon dont on va construire la valeur qu’on va passer à l’attribut href.
III.8.2 - Autres utilisations de la balise < a >

L’élément a en HTML ne va pas uniquement être très utile pour créer des liens entre différentes
pages ou de ramener à différents endroits d’une même page mais va également nous permettre
de lier des ressources à nos pages.
Dans ces derniers thèmes, nous allons étudier deux autres utilisations courantes de cet élément :
III.8.3 - Liens pour télécharger des fichiers

Utiliser l’élément a pour permettre aux utilisateurs de télécharger un fichier.
Exemple : on imagine qu’on possède une image nommée ‘‘logo.png’’ située dans le même dossier
que notre page Html.
<p>Mon <a href="logo.png" download="logo_ODC" >logo </a>à télécharger</p>
C'est tout ! Le navigateur, voyant qu'il ne s'agit pas d'une page web à afficher, va lancer la
procédure de téléchargement lorsqu'on cliquera sur le lien.
Note : Vous n’allez pas pouvoir faire télécharger n’importe quel type de fichiers à vos visiteurs. En
effet, les navigateurs récents vont bloquer le téléchargement de certains fichiers dont les
extensions auront été jugées comme « potentiellement dangereuses ».
De plus, certaines autres extensions de fichier vont être directement interprétées par le navigateur
de vos visiteurs. Cela va être le cas si vous essayez de faire télécharger la source d’un
fichier .html à vos visiteurs par exemple : le navigateur va ouvrir le fichier et interpréter son code
comme pour n’importe quelle autre page et n’afficher donc que le résultat visuel lié au code HTML
du fichier.
Ici, une astuce simple consiste à compresser les fichiers que vous voulez faire télécharger
en .zip par exemple.
III.8.4 - Liens pour envoyer un e-mail
Utiliser l’élément a pour permettre aux utilisateurs de nous envoyer un mail ;

<p><a href="mailto:ODC.Guinee@orange-sonatel.com">Envoyez-moi un e-mail !</a></p>
Il suffit donc de faire commencer le lien par mailto: et d'écrire l'adresse e-mail où on peut vous
contacter. Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre
adresse e-mail.
IV. Notions de CSS et mise en forme avec CSS
IV.1 - Comprendre le rôle du CSS
Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir les
différents éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en forme les
différents contenus définis par le HTML en leur appliquant des styles.
CSS (Cascading Style Sheets, aussi appelées feuilles de style) : le rôle du CSS est de gérer
l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).
Ce langage est venu compléter le HTML en 1996.
Le CSS est un langage qui a été inventé pour styliser les contenus de nos pages en leur
appliquant des styles.
Dans cette nouvelle partie, nous allons passer en revue les notions de base du CSS en
comprenant notamment les grands principes de fonctionnement de ce langage et en apprenant à
cibler des contenus de manière précise pour pouvoir leur appliquer des styles.
IV.2 - Les sélecteurs CSS

Pour pouvoir appliquer un style à un contenu, il va déjà falloir le cibler, c’est-à-dire trouver un
moyen d’indiquer qu’on souhaite appliquer tel style à un contenu en particulier.
Pour cela, nous allons utiliser des sélecteurs. Les sélecteurs sont l’un des éléments fondamentaux
du CSS.
De manière très schématique et très simplifiée, nous allons utiliser nos sélecteurs en CSS pour
cibler des contenus HTML et leur appliquer des styles.
Il existe différents types de sélecteurs en CSS : certains sélecteurs vont s’appuyer sur le nom des
éléments, comme le sélecteur CSS p par exemple qui va servir à cibler tous les éléments p d’une
page. Ce type de sélecteurs est appelé « sélecteur d’éléments » tout simplement car ils vont être
identiques aux éléments HTML sélectionnés ou encore « sélecteurs simples ».
D’autres sélecteurs, en revanche, vont être plus complexes et nous permettre de sélectionner un
élément HTML en particulier ou un jeu d’éléments HTML en fonction de leurs attributs ou même
de leur état : on va ainsi pouvoir appliquer des styles à un élément uniquement lorsque la souris
de l’utilisateur passe dessus par exemple.
p{
color: blue;
}
p:hover{
color: orange;
}
N’essayez pas forcément de comprendre immédiatement le code ci-dessus : le but n’est ici que de
vous fournir un exemple concret de ce qu’on va pouvoir faire en CSS. Nous allons apprendre à
utiliser la majorité des sélecteurs CSS et notamment les plus courants et les plus utiles dans la
suite de ce cours.
IV.3 - Les propriétés CSS

Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou “styles”) d’un élément HTML
on souhaite modifier.
Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui appliquer la couleur que l’on
souhaite grâce à la propriété color (« couleur », en français).
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). Si l’on donne la
valeur red (rouge) à notre propriété color, les textes au sein des éléments HTML auxquels on
applique cette propriété s’afficheront en rouge.
IV.4 - Les déclarations CSS : premier exemple pratique

Prenons immédiatement un premier exemple ensemble en expliquant bien à quoi correspond
chaque élément du code afin d’illustrer ce que nous venons de dire et de bien voir comment le
CSS fonctionne.
p{
color: blue;
border: 2px solid orange;
padding: 5px;
}
Détaillons le code CSS ci-dessus. Ici, nous utilisons le sélecteur CSS simple p pour cibler tous les
paragraphes de nos pages HTML.
Ensuite, nous ouvrons une paire d’accolades. Entre ces accolades, nous allons préciser les
différents styles que l’on souhaite appliquer à nos éléments p.
En l’occurrence, on définit une couleur, bordure et une marge interne personnalisées pour tous
nos paragraphes grâce aux propriétés CSS color, border et padding.
Le texte de nos paragraphes va donc s’afficher en bleu et nos paragraphes auront des bordures
solides oranges de 2px d’épaisseur et des marges internes de 5px.
Le couple « propriété : valeur » est appelée « déclaration » en CSS. Chaque déclaration doit
se terminer par un point-virgule.
On va pouvoir écrire autant de déclarations que l’on souhaite à l’intérieur du couple d’accolades
qui suit un sélecteur en CSS et ainsi pouvoir définir le comportement de plusieurs propriétés
facilement.
IV.5 - Comprendre où placer les styles CSS
Avant d’étudier les mécanismes du CSS en soi, il convient de comprendre où placer le code CSS
afin qu’il s’applique bien à un fichier HTML.
Dans le cas présent, nous avons notre code HTML d’un côté et nous aimerions lui appliquer des
styles en CSS. Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à
notre code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles
qu’on a voulu leur appliquer en CSS.
Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque
méthode va présenter des avantages et des inconvénients selon une situation donnée et c’est le
sujet que nous allons aborder dans cette partie.
Méthode n°1 : écrire le CSS au sein du fichier HTML, dans un élément style
La première façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein
d’un élément style.
En plaçant le CSS de cette façon, le code CSS ne s’appliquera qu’aux éléments de la page HTML
dans laquelle il a été écrit.
Cette première méthode d’écriture du CSS n’est pas recommandée, pour des raisons de
maintenance et d’organisation du code en général. Cependant, elle peut s’avérer utile pour
modifier rapidement les styles d’une page HTML ou si vous n’avez pas facilement accès aux
fichiers de style de votre site.
Nous voyons donc cette première méthode à titre d’exemple, afin que vous sachiez l’identifier si
un jour vous voyez du code CSS écrit de cette façon dans un fichier et que vous puissiez l’utiliser
si vous n’avez pas d’autre choix.
Nous allons devoir ici placer notre élément style au sein de l’élément head de notre fichier HTML.
Voici comment on va écrire cela en pratique :
<!DOCTYPE html>
<html lang="en">
<head>
<title>>Où écrire le CSS ?</title>
<style>
body{
background-color: orange;
}
p{
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Un titre de niveau 1</h1>
<p>Un paragraphe</p>
<p>Un deuxième paragraphe</p>
</body>
</html>
Ici, nous créons un fichier HTML tout à fait classique contenant un titre h1 et deux paragraphes.
Nous voulons ensuite rajouter des styles à notre page. Pour cela, nous plaçons un
élément style dans l’élément head de notre page. Nous allons déclarer nos styles CSS au sein de
cet élément.
Dans mon code CSS, je commence par cibler l’élément body avec le sélecteur élément du même
nom et je définis une couleur de fond (background-color) orange pour cet élément. Comme
l’élément body représente toute la partie visible de ma page, le fond de la page entière sera
orange.
Ensuite, je définis également une couleur bleue pour le texte de mes paragraphes ainsi qu’une
taille de police d’écriture de 16px.
Méthode n°2 : déclarer le CSS au sein du fichier HTML, dans des attributs style
Nous pouvons également écrire notre code CSS au sein d’attributs style qu’on va ajouter à
l’intérieur de la balise ouvrante des éléments HTML pour lesquels on souhaite modifier les styles.
Nous allons passer en valeurs des attributs style des déclarations CSS pour modifier certains
styles précis de l’élément HTML en question. En effet, en utilisant cette méthode, les styles
déclarés dans un attribut style ne vont s’appliquer qu’à l’élément dans lequel ils sont écrits, et c’est
la raison pour laquelle nous n’allons pas avoir besoin de préciser de sélecteur ici.
Attention à ne pas confondre les attributs style qu’on va devoir placer au sein de la balise ouvrante
de chaque élément dont on souhaite modifier les styles avec l’élément style qu’on va placer dans
l’élément head de nos fichiers HTML.
Dans l’exemple ci-dessous, on applique à nouveau une couleur de fond orange à notre
élément body ainsi qu’une couleur bleue et une taille de 20px au texte de notre premier
paragraphe uniquement :
<!DOCTYPE html>
<html lang="en">
<head>
<title>>Où écrire le CSS ?</title>
</head>
<body style="background-color:orange;">
<p style="color: blue; font-size: 20px;">Un paragraphe</p>
</body>
</html>
Cette deuxième méthode d’écriture du CSS, bien qu’elle puisse sembler pratique à priori
puisqu’elle permet de n’appliquer des styles qu’à un élément en particulier plutôt qu’à tous les
éléments d’un même type n’est également pas recommandée et est à éviter tant que possible
pour des raisons de maintenabilité et de performance du code.
En effet, déclarer nos styles comme cela n’est vraiment pas efficient puisque cela va demander
énormément d’écriture et également énormément de temps de réécriture le jour où l’on souhaite
modifier des styles.
Pas d’inquiétude : nous allons apprendre à cibler précisément un élément ou un groupe

d’éléments en particulier pour leur appliquer des styles personnalisés plus tard dans ce support.
Méthode n°3 : écrire le CSS dans un fichier séparé
Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css
». C’est la méthode recommandée, qui sera utilisée autant que possible.
Cette méthode comporte de nombreux avantages, notamment une meilleure maintenabilité du
code grâce à la séparation des différents langages, ainsi qu’une meilleure lisibilité.
Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à
plusieurs pages HTML en même temps, d’un seul coup.
En effet, en utilisant l’une des deux premières méthodes, nous aurions été obligés de réécrire tout
notre code CSS pour chaque page HTML (ou même pour chaque élément !) composant notre site
puisque les codes CSS étaient déclarés dans une page ou dans un élément spécifique et ne
pouvaient donc s’appliquer qu’à la page ou qu’à l’élément dans lesquels ils étaient déclarés.
De plus, en cas de modification, il aurait également fallu modifier chacune de nos pages à la main,
ce qui n’est pas viable pour un site de taille moyenne qui va être composé de quelques centaines
de pages.
En déclarant notre code CSS dans un fichier séparé, au contraire, nous allons pouvoir utiliser le
code de ce fichier CSS dans autant de fichiers HTML qu’on le souhaite, en indiquant aux
différents fichiers HTML qu’ils doivent appliquer les styles contenus dans ce fichier CSS. Ainsi,
lorsque nous voudrons modifier par exemple la couleur de tous les paragraphes de nos pages
HTML nous n’aurons qu’à modifier la déclaration relative dans le fichier CSS.
Voyons immédiatement comment mettre cela en place en pratique.
Pour cela, nous allons commencer par créer un nouveau fichier dans notre éditeur qu’on va
appeler cours.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que notre
page HTML pour plus de simplicité.
Nous travaillons donc dorénavant avec deux fichiers : un fichier appelé cours.html et un
fichier cours.css.
Il va donc maintenant falloir « lier » notre fichier HTML à notre fichier CSS pour indiquer au
navigateur qu’il doit appliquer les styles contenus dans le fichier cours.css à notre
fichier cours.html.
Pour cela, nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français). On
va placer l’élément link au sein de l’élément head de notre fichier HTML. Cet élément se présente
sous la forme d’une balise orpheline et va avoir besoin de deux attributs pour fonctionner
correctement :
 Un attribut rel qui va nous servir à préciser le type de ressource que l’on souhaite lier à
notre fichier HTML. Dans notre cas, nous indiquerons la valeur stylesheet pour « feuille de
style » ;
 Un attribut href qui va indiquer l’adresse relative de la ressource que l’on souhaite lier par
rapport à l’emplacement de notre fichier HTML. Ici, comme nous avons enregistré nos deux
fichiers dans le même dossier, il suffira d’indiquer le nom de notre fichier CSS en valeur
de href.
Nos deux fichiers sont maintenant liés et les styles déclarés dans notre fichier CSS vont bien être
appliqués aux éléments de notre page HTML.
IV.6 - Sélecteurs CSS simple et multiples
Le CSS va nous permettre de mettre en forme nos contenus HTML en appliquant des styles aux
différents éléments. Cependant, pour appliquer un style particulier à un ou plusieurs éléments
HTML en CSS, il va avant tout falloir les cibler, c’est-à-dire indiquer avec précision à quels
éléments doivent s’appliquer les styles créés en CSS.
Il existe de nombreux types de sélecteurs CSS et autant de moyens de cibler des contenus HTML
en CSS.
La manière la plus simple de cibler un type d’éléments HTML en CSS est néanmoins d’utiliser des
sélecteurs éléments ou sélecteurs « simples ». Ces sélecteurs sont appelés « sélecteurs éléments
» tout simplement car ils reprennent le nom des éléments HTML qu’ils sélectionnent.
Par exemple, le sélecteur CSS p va cibler tous les éléments p (c’est-à-dire tous les paragraphes)
d’une page HTML.
De même, le sélecteur CSS h1 va nous permettre d’appliquer des styles à notre titre h1 ; le
sélecteur a va nous permettre de mettre en forme nos liens, etc.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>Un paragraphe contenant un <a href="http://wikipedia.org">lien</a></p>
</body>
</html>
/*Notre titre h1 va s'afficher en rouge*/

h1{
color: red;
}
/*Nos paragraphes seront bleus*/
p{
color: blue;
}
/*Le texte de nos liens sera vert et gras*/
a{
color: green;
font-weight: bold;
}
IV.7 - Sélecteurs CSS complexes et combinateurs
Toute la puissance du CSS réside dans les options que nous offre ce langage pour cibler
précisément un contenu HTML dans une page.
En effet, en plus des sélecteurs simples, le CSS met à notre disposition une panoplie de
sélecteurs que l’on va pouvoir utiliser pour cibler des contenus de manière très précise :
 On va pouvoir utiliser des sélecteurs CSS combinateurs qui vont être en fait la combinaison
de plusieurs sélecteurs simples à l’aide de caractères spéciaux à la signification précise ;
 On va pouvoir cibler des contenus HTML selon le fait qu’ils possèdent un certain attribut ou
même selon la valeur d’un attribut ;
 On va pouvoir utiliser les pseudo classes qui vont nous permettre d’appliquer des styles à
des éléments en fonction de leur état, c’est-à-dire en fonction des actions d’un utilisateur
(contenu cliqué, coché, visité, etc.), de la place de l’élément dans le document, etc. ;
 On va pouvoir utiliser les pseudo éléments qui vont nous permettre de n’appliquer des
styles qu’à certaines parties des éléments.
Sélecteur CSS Signification
* Sélectionne tous les éléments
E, F Sélectionne tous les éléments de type E et de type F
EF Sélectionne tous les éléments F à l’intérieur des éléments E
E>F Sélectionne les éléments F enfants directs des éléments E
E+F Sélectionne tout élément F placé directement après un élément E
E~F Sélectionne tout élément F placé après un élément E dans la page
IV.8 - Utilisez les attributs du HTML class et id dans les sélecteurs
Ces deux attributs sont particuliers en HTML puisqu’ils n’ont pas été créés pour préciser le
fonctionnement d’un élément HTML en particulier (ce qui est normalement le rôle de tout attribut
HTML) mais vont être principalement utilisés pour cibler certains éléments HTML et leur appliquer
des styles en CSS.
Les attributs HTML class et id sont des attributs dits globaux car on va pouvoir les ajouter dans la
balise ouvrante de n’importe quel élément HTML.
Ces deux attributs vont être principalement utilisés dans un but de mise en forme : ils vont nous
servir à appliquer des styles CSS aux éléments qui vont les contenir.
En effet, à la différence d’un attribut href par exemple, les attributs class et id ne vont pas servir à
préciser le fonctionnement d’un élément HTML mais vont simplement être très utiles pour cibler un
élément précisément.
Nous allons effectivement très facilement pouvoir nous resservir de ces deux attributs en CSS
grâce aux sélecteurs associés .class et #id.
Pour cibler un id en particulier en CSS, on utilisera le symbole dièse # suivi de la valeur de

l’id auquel on souhaite lier des styles.
Pour cibler une class en particulier en CSS, on utilisera le symbole point . suivi de la valeur de
la class à laquelle on souhaite lier des styles.
IV.9 - Class vs id : Quelles différences et quel attribut utiliser ?

Il existe une différence notable entre les deux attributs class et id : chaque id doit avoir une valeur
unique dans une même page tandis que plusieurs attributs class peuvent partager la même
valeur.
Cela fait que l’attribut id est beaucoup plus spécifique que l’attribut class et que ces deux attributs
vont avoir des rôles et buts différents notamment pour la mise en forme CSS.
Ainsi, nous utiliserons généralement des attributs class pour définir des styles généraux et
communs à plusieurs éléments dans une même page. Comme nous pouvons donner une
même class à plusieurs éléments, ils hériteront tous des mêmes styles sauf en cas de conflit
(c’est-à-dire dans le cas où le comportement d’une même propriété a déjà été défini en CSS) bien
évidemment.
L’ordre de priorité d’application des styles en CSS est le suivant (du plus prioritaire ou moins
prioritaire) :
1. Les styles liés à un sélecteur #id ;
2. Les styles liés à un sélecteur .class.
3. Les styles liés à un sélecteur élément ;
IV.10 - Utiliser les éléments HTML div et span
Il est toujours bon de commencer par rappeler le rôle du HTML : le HTML a pour but de structurer
du contenu et de lui donner du sens.
A ce titre, les éléments HTML div et span sont très spéciaux puisque ce sont deux éléments
HTML qui ne possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à préciser la
nature d’un contenu.
Les éléments HTML div et span ont été créés principalement pour simplifier la mise en page de
nos pages HTML en CSS c’est-à-dire pour simplifier l’application de certains styles CSS.
Les attributs class et id sont des attributs universels ce qui signifie qu’on va pouvoir les utiliser
avec n’importe quel élément HTML, et notamment avec les éléments div et span.
En pratique, il va être très courant de préciser des attributs class et id pour nos
éléments div et span pour pouvoir appliquer des styles à un div (ou span) ou à un groupe
d’éléments div ou span) définis.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="conteneur" id="cp">

<p>Un premier paragraphe</p>
<p>Un autre paragraphe</p>
<ul>
<li>Un élément de liste</li>
<li>Un <span class="gras">autre élément</span> de liste</li>
</ul>
</div>
<p>Un <span class="gras fondjaune">troisième</span> paragraphe</p>
<div>
<p class="gras">Un dernier paragraphe</p>
</div>
</body>
</html>
/*Couleur de fond du body (donc de la partie visible de la page) : bleu clair*/

body{
background-color: lightBlue;
}
div{
background-color: purple; /*Les div auront un fond violet*/
color: white; /*Textes des éléments dans les div blancs par héritage*/
}
.conteneur{
width: 80%; /*La largeur de l'élément sera égale à 80% de son parent*/
}
#cp{
margin: 0 auto; /*Permet de centrer le div dans son élément parent (body ici)*/
}
.gras{
font-weight: bold; /*Les textes seront en gras*/
}
.fondjaune{
background-color: yellow; /*Fond des span jaune*/
}
Avec ce qu’on a appris, vous devriez être capable de comprendre les styles appliqués ici en vous
concentrant. Je vous laisse donc essayer, ça vous fera un bon exercice !
Quelles différences entre les éléments div et span et quand utiliser l’un plutôt que l’autre ?
La grande différence entre les éléments div et span va concerner ce qu’ils vont pouvoir contenir :
un élément div va pouvoir conteneur plusieurs éléments et va donc nous servir de conteneurs
d’éléments tandis que l’élément span va nous servir de conteneur pour une partie du contenu d’un
élément et va donc être utilisé à l’intérieur d’un élément.
Cette différence est due au fait que les éléments div et span sont de niveau ou au « type »
différents : l’élément div est un élément de niveau block tandis que l’élément span est un élément
de niveau inline.
IV.11 - Mémento des propriétés CSS

Ces liens contiennent des propriétés CSS les plus utilisées en CSS3. Pour la plupart, ce sont des
propriétés que nous avons vues lors de notre formation, mais vous trouverez aussi quelques
nouvelles propriétés que nous n'avons pas abordées :
https://www.cssdebutant.com/debuter-en-css-les-definitions-css.html
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-
css3/1608902-memento-des-proprietes-css
http://www.css-faciles.com/proprietes-css-liste-alphabetique.php
V.1 - Formulaires
En HTML, nous avons de nombreux éléments spécifiques aux formulaires qui vont nous permettre
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.
Cependant, vous devez bien comprendre ici qu’on touche avec les formulaires aux limites du
langage HTML. En effet, nous allons tout à fait pouvoir construire nos formulaires en HTML, mais
le HTML ne va nous permettre ni de recueillir les données envoyées par nos visiteurs, ni de les
manipuler, ni de les stocker.
Pour réaliser ces différentes opérations, il faudra utiliser d’autres types de langages comme le
PHP (pour la manipulation des données) et le MySQL (pour le stockage) par exemple qui vont
s’exécuter côté serveur.
V.1.1 - Les éléments des formulaires HTML
Commençons avec la liste des éléments que l’on va pouvoir utiliser dans nos formulaires HTML
ainsi que leur rôle :
Elément Définition
Form Définit un formulaire
Input Définit un champ d’entrée des données pour l’utilisateur
Label Définit une légende pour un élément input
textarea Définit un champ de texte long
Select Définit une liste de choix
optgroup Définit un groupe d’options dans une liste
Option Définit une option dans une liste
fieldset Permet de regrouper les éléments d’un formulaire en différentes parties

Elément Définition
legend Ajoute une légende à un élément fieldset
V.1.2 - L’élément input et les valeurs de l’attribut type
Commençons la présentation des éléments de formulaire avec un élément que nous connaissons
: l’élément input.
Cet élément est l’élément à connaitre dans le contexte de la création de formulaires HTML
puisqu’il va nous permettre de créer tous types de champs pour récolter des données utilisateurs.
Le type de champ va être défini par la valeur que l’on va donner à son attribut type.
L’attribut type peut prendre de nombreuses valeurs. Voici les valeurs les plus utiles et les plus
courantes :
Type
Définition
d’input
text Définit un champ de saisie monoligne qui accepte du texte
number Définit un champ qui accepte un nombre décimal
email Crée un champ qui permet de renseigner une adresse mail
date Permet à l’utilisateur d’envoyer une date
password Créer un champ de saisie monoligne dont la valeur va être cachée
Permet de créer une case à cocher. L’utilisateur peut cocher une ou plusieurs
checkbox
cases d’un coup
Permet de créer un bouton radio. Par définition, un seul bouton radio peut être
radio
coché dans un ensemble
url Crée un champ qui accepte une URL
file Permet à un utilisateur de télécharger un fichier
submit Crée un bouton d’envoi des données du formulaire
V.1.3 - L’élément textarea

Pour créer un champ de saisie classique dans nos formulaires, le premier réflexe va être d’utiliser
un input type="text" et cela va marcher pour toutes les données de type « texte court ».
Le souci ici est qu’on ne va plus pouvoir utiliser d’input type="text" si on veut par exemple laisser
la possibilité à un utilisateur de commenter quelque chose ou si on lui demande de se décrire car
le texte qu’on va pouvoir placer dans un input type="text" est limité en taille.
Dans le cas où on souhaite laisser la possibilité à un utilisateur d’écrire un texte long, on utilisera
plutôt un élément textarea qui définit un champ de texte long.
V.1.4 - Les éléments select, option et optgroup

L’élément select va nous permettre de créer une liste d’options déroulante. Dans cette liste, nous
allons placer autant d’éléments option que l’on souhaite donner de choix aux utilisateurs.
Les listes d’options forcent l’utilisateur à faire un choix unique dans la liste et sont généralement
utilisées lorsqu’on souhaite proposer de nombreux choix, comme par exemple dans le cas où on
demande à l’utilisateur de choisir son pays de résidence.
L’élément optgroup va nous permettre d’ordonner notre liste d’options et groupant des options.
Par exemple, dans une liste de choix de pays, on pourrait grouper les différents pays par
continent.
V.1.5 - Les éléments fieldset et legend

Les éléments fieldset et legend vont nous permettre de structurer et d’améliorer la sémantique
d’un formulaire.
L’élément fieldset va nous permettre de grouper plusieurs champs dans un formulaire pour
l’organiser en parties.
L’élément legend va nous permettre d’ajouter une légende à une partie de notre formulaire
déterminée par fieldset pour expliquer son but par exemple.
V.2 - Tableaux
Un tableau en HTML représente un ensemble organisé de données. Pour créer un tableau en

HTML nous allons utiliser l’élément table qui signifie « tableau » en anglais.
Les tableaux sont une notion importante du HTML et il est important que vous sachiez comment
les créer. Dans ce chapitre, nous allons voir comment créer un tableau simple.
V.2.1 - Les éléments constitutifs essentiels d’un tableau HTML
Un tableau est un ensemble de lignes et de colonnes. L’intersection entre une ligne et une
colonne est une cellule de tableau.
Pour créer un tableau fonctionnel en HTML, nous allons devoir utiliser à minima 3 éléments :
 Un élément table (« tableau » en français) qui va définir le tableau en soi ;
 Des éléments tr, pour « table row » ou « ligne de tableau » en français qui vont nous
permettre d’ajouter des lignes dans notre tableau ;
 Des éléments td, pour « table data » ou « donnée de tableau » en français qui vont nous
permettre d’ajouter des cellules dans nos lignes et ainsi de créer automatiquement de
nouvelles colonnes.
L’élément HTML table va représenter le tableau en soi. Cet élément est composé d’une paire de
balises ouvrante <table> et fermante </table> au sein desquelles nous allons placer les différents
autres éléments de notre tableau. Les éléments tr et td sont également représentés sous la forme
d’une paire de balises avec leur contenu entre les balises.
V.2.2 - Ajouter une ligne d’en-tête à un tableau HTML
Souvent, lorsque nous choisirons d’organiser de l’information dans un tableau, cette information
sera hiérarchisée et on voudra que notre tableau possède une ligne d’en-tête dans laquelle on va
préciser le type de données attendues dans chaque colonne voire une légende, etc.
Très souvent, les tableaux vont posséder une ligne d’en-tête dans laquelle on va donner des
informations au lecteur sur le type des données qui seront renseignées dans chaque colonne.
Pour créer une ligne d’en-tête en HTML, nous allons cette fois-ci devoir utiliser l’élément th, pour «
table head » ou « en-tête du tableau » en français à la place de nos éléments td dans notre
première ligne.
Si vous devez créer des tableaux assez longs, il peut être judicieux de commencer à les structurer
en les subdivisant en plusieurs parties.
Pour définir chaque partie d’un tableau, nous disposons d’un élément HTML spécifique :
 thead pour la tête du tableau ;
 tbody pour le corps du tableau ;

 tfoot pour le pied du tableau.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>Page</th>
<th>Nombre de visites 2020</th>
<th>Nombre de visites 2021</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Page 1</td>
<td>100</td>
<td>250</td>
<td>350</td>
</tr>
<tr>
<td>Page 2</td>
<td>1200</td>
<td>5400</td>
<td>6600</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1300</td>
<td>5650</td>
<td>9950</td>
</tr>
</tfoot>
</table>
</body>
</html>
Vous pouvez par ailleurs noter ici une chose intéressante : il est strictement équivalent de
mentionner un élément tfoot avant ou après un élément tbody. En effet, même si le tfoot est
déclaré avant le tbody, son contenu s’affichera tout de même après dans le rendu final.
Cette curiosité nous vient du HTML4 dans lequel il était interdit de déclarer un élément tfoot après
un élément tbody ; il fallait absolument le mentionner avant. Cette règle totalement contre intuitive
a été supprimée avec le HTML5.
V.2.3 - Fusionner des cellules entre elles avec colspan et rowspan
Le CSS, bien que puissant aujourd’hui, ne nous permet pas encore de tout faire et certains
attributs HTML ne sont pas encore dépréciés. C’est notamment le cas des
attributs colspan et rowspan qui vont nous permettre de fusionner plusieurs cellules adjacentes
d’une même ligne ou d’une même colonne.
V.2.4 - Ajouter une légende à un tableau HTML avec caption
On va également pouvoir ajouter un titre ou une légende à notre tableau afin d’indiquer ce que
contient notre tableau.
Pour ajouter une légende, nous allons utiliser l’élément HTML caption. Cet élément est très simple
d’utilisation, mais il faut respecter une règle : il doit être inséré immédiatement après la balise
ouvrante de l’élément table.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table>
<caption>Informations participants
</caption>
<thead>
<tr>
<th>Nom</th>
<th>Prénom 1</th>
<th>Prénom 2</th>
<th>Prénom 3</th>
<th>Adresse mail 1</th>
<th>Adresse mail 2</th>
<th>Inscrit ?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Halimatou</td>
<td>Balde</td>
<td colspan="2">HTML CSS</td>
<td colspan="2">ODC.Guinée@orange-sonatel.com</td>
<td rowspan="2">Oui</td>
</tr>
<tr>
<td>Ousmane</td>
<td colspan="3">Diallo</td>
<td>pjl@gmail.com</td>
<td>jolyp@hotmail.fr</td>
</tr>
</tbody>
</table>
</body>
</html>
VI. Notion de boite, de marge et de bordure

Dans cette nouvelle partie, nous allons présenter le fameux « modèle des boites » CSS.
Comprendre le concept de « boites » va être essentiel pour construire des designs de pages
efficaces puisque cela va nous permettre d’appréhender la façon dont vont être calculées les
dimensions de chaque élément.
VI.1 - Découvrir le modèle des boites

L’idée centrale du modèle des boites est que tout élément HTML peut être représenté par un
empilement de différentes boites rectangulaires :
 La première boite, centrale, va être composée du contenu de l’élément en soi ;

 La deuxième boite va être composée de la première boite ainsi que des marges internes de
l’élément ;
 La troisième boîte va être composée de la deuxième boite et des bordures de l’élément ;
 La quatrième boite va être composée de la troisième boite et des marges externes de
l’élément.
Voici la représentation d’un élément selon le modèle des boites :
VI.2 - Les propriétés CSS liées aux différentes boites
Le CSS va déjà nous fournir différentes propriétés qui vont nous permettre de spécifier la taille
des différents éléments composants les différentes boites :
 Les propriétés width et height vont nous permettre de définir la largeur et la hauteur de la
boite « contenu » ;
 La propriété padding va nous permettre de définir la taille des marges internes ;
 La propriété border va nous permettre de définir des bordures pour notre élément ;
 La propriété margin va nous permettre de définir la taille des marges externes.
Nous allons dans cette partie commencer avec l’étude de ces différentes propriétés qui sont
fondamentales. Nous parlerons également de la propriété box-sizing qui va nous permettre de
changer la façon dont la largeur et la hauteur d’un élément vont être calculées et donc de modifier
le modèle des boites par défaut.
VII. Généralité sur le dimensionnement et le positionnement

VII.1 - Le positionnement
Comprendre comment est calculée la taille de chaque élément et de quoi chaque élément est
composé est essentiel pour créer des mises en page efficaces.
Pour choisir le type d’affichage et de positionnement des éléments HTML, le CSS va nous fournir
des propriétés très puissantes qui vont nous permettre de modifier le flux normal de la page, c’est-
à-dire de modifier l’ordre d’affichage des éléments ou la place réservée par défaut à chacun
d’entre eux.
Ici, nous allons nous intéresser aux propriétés suivantes :
 La propriété display qui va nous permettre de définir un type d’affichage pour un élément ;
 La propriété position qui va nous permettre de positionner nos éléments de différentes
façons dans une page ;
 La propriété float qui va nous permettre de faire « flotter » des éléments HTML dans la
page.
VII.2 - Dimensionnement
Largeur (width) et hauteur (height) de la boite de contenu
Tout contenu d’un élément HTML va prendre un certain espace dans une page, c’est-à-dire
posséder une largeur et une hauteur. Cet espace pris, c’est-à-dire la largeur et la hauteur de ce
contenu vont être représentées respectivement par les propriétés CSS width (largeur)
et height (hauteur).
Pour comprendre comment fonctionnent les propriétés width et height et comment les manipuler il
est avant tout nécessaire d’avoir une vue claire sur les types d’affichage principaux des éléments :
l’affichage block (sous forme de bloc) et inline (en ligne).
En effet, je vous rappelle que les éléments HTML peuvent être affichées de deux grandes façons
différentes : soit sous forme de bloc, soit en ligne.
Les dimensions par défaut du contenu des éléments HTML vont avant tout être déterminées par le
type d’affichage des éléments : en effet, les éléments de type block occuperont par défaut toute la
largeur disponible dans leur élément parent tandis que les éléments de type inline n’occuperont
que la largeur nécessaire à leur contenu.
Vous pouvez ainsi déjà retenir ici que nous n’allons pas pouvoir modifier la taille de l’espace pris
par le contenu des éléments de type inline avec les propriétés width et height : les valeurs qu’on
va pouvoir définir vont tout simplement être ignorées.
En effet, le principe de base d’un élément de type inline est que l’espace pris par sa boite «
contenu » soit toujours égal à l’espace strictement nécessaire à l’affichage de ce contenu.
Cours HTML/CSS d’OpenClassroom: Apprenez à créer votre site web avec

HTML5 et CSS3
Pour se former sur des points précis :
• MDN web docs (Mozilla)

• W3schools (en anglais)
Connaître les spécificités des navigateurs : Caniuse.com

Pour récupérer les couleurs : https://www.code-couleur.com/
Pour télécharger des polices font : Google Fonts
Pour télécharger les icons : Fonts Awesone
Pour avoir des idées de Design : Html5Up

Document de Synthèse HTML CSS

Transféré par

Informations du document

Titre original

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

Document de Synthèse HTML CSS

Transféré par

Droits d'auteur :

Formats disponibles

HTML CSS

I.1 - Comment se passe la communication entre le client et le serveur?

On peut décomposer l’URL en plusieurs parties :

– “http”, c’est le nom du protocole de communication entre le client et le serveur,

La communication entre client et serveur se fait en trois étapes :

I.2 - Quelles sont les différentes sortes de sites web?

I.3 - De quoi sont composées nos pages Web?

I.4 - CMS (Content Management System)

II. Les bases du Html

HTML signifie HyperText Markup Language.

II.2 - Structure de base d’une page HTML

<html><body></html></body> : incorrect, les balises s'entremêlent.

Le titre principal de la page

II.3 - Etudier les balises et les attributs

II.3.1 - Les balises

Les balises en paires

Les balises orphelines

Une balise orpheline s'écrit comme ceci :

II.3.2 - Les attributs

<image nom="photo.jpg" />

III. Quelques balises et leurs fonctions

III.1 - Bien utiliser les paragraphes

<p>Bonjour et bienvenue sur mon site !</p>

<p> signifie « Début du paragraphe » ;

</p> signifie « Fin du paragraphe ».

III.2 - Contrôler les sauts de ligne

III.3 - Mettre du texte en évidence

III.5 - Employer les niveaux de titre

<h2> </h2> : signifie « titre important » ;

<h4> </h4> : titre encore moins important ;

<h5> </h5> : titre pas important ;

Liste non ordonnée

Retenez donc bien ces deux balises :

Expérimentons cela à travers un exemple:

III.7 - Ajoutez des éléments multimédia

III.7.1 - Insérer des images

Voici un exemple d'insertion d'image :

<img src="images/troupeau.jpg" alt="Photo de troupeau" />

III.7.2 - Insérer des vidéos

Un autre élément multimédia très populaire sur Internet c'est la vidéo.

<video src="mavideo.mp4" controls poster="mavideo.jpg" width="600"></video>

 src: définit l’URL, où le contenu vidéo est hébergé

III.7.3 - Incorporez des vidéos YouTube

Ensuite Copiez le code HTML figurant dans la zone qui s'affiche.

Collez le code dans le code HTML de votre site Web.

<iframe width="425" height="349" src="https://www.youtube.com/embed/MsM8SQ-Zyik"

III.7.4 - Ajoutez des fichiers audio

<audio src="musique.mp3" controls></audio>

Vous pouvez compléter la balise des attributs suivants :

width : pour modifier la largeur de l'outil de lecture audio ;

loop : la musique sera jouée en boucle ;

III.8 - Mettre en place des liens

III.8.1 - Découvrir la balise <a>

III.8.2 - Autres utilisations de la balise < a >

III.8.3 - Liens pour télécharger des fichiers

<p>Mon <a href="logo.png" download="logo_ODC" >logo </a>à télécharger</p>

III.8.4 - Liens pour envoyer un e-mail

Utiliser l’élément a pour permettre aux utilisateurs de nous envoyer un mail ;

IV.2 - Les sélecteurs CSS

IV.3 - Les propriétés CSS

IV.4 - Les déclarations CSS : premier exemple pratique

IV.5 - Comprendre où placer les styles CSS

Pas d’inquiétude : nous allons apprendre à cibler précisément un élément ou un groupe

/Notre titre h1 va s'afficher en rouge/

/Couleur de fond du body (donc de la partie visible de la page) : bleu clair/