Création des sites Web avec HTML
& CSS
PROF : [Link] Manel
vendredi 21 février 2025
1 • Les sites Web
PLAN
• HTML & CSS
2
3
• Les rôles HTML & CSS
4 • Versions HTML
5 • Versions CSS
2
Comment fonctionnent les
sites web ?
3
Le fonctionnement des sites web 1/2
Vous consultez des sites web tous les jours. Pour cela, vous lancez un
programme appelé le navigateur web en cliquant sur l'une des icônes
représentées à la figure suivante
4
Le fonctionnement des sites web 2/2
Avec le navigateur, vous pouvez consulter n'importe quel site web.
Voici par exemple un navigateur affichant le célèbre site web Wikipédia
HTML & CSS 1/3
HTML, de CSS, est-ce que cela a un rapport avec le
fonctionnement des sites web ?
• Il s'agit de langages informatiques qui permettent de créer des sites web.
Tous les sites web sont basés sur ces langages, ils sont incontournables et
universel. aujourd'hui. Ils sont la base même du Web.
• Le langage HTML a été inventé par un certain Tim Berners-Lee en
1991…
• De nombreuses personnes confondent (à tort) Internet et le Web.
Il faut savoir que le Web fait partie d'Internet.
Internet est un grand ensemble qui comprend, entre autres : le Web, les e-
mails, la messagerie instantanée, etc.
HTML & CSS 2/3
Quand vous consultez un site avec votre navigateur, il faut savoir que, en
coulisses, des programmes s'activent pour permettre au site web de s'afficher.
Traduction par
l’ordinateur
HTML & CSS 3/3
HTML et CSS : deux langages pour créer un site web
Pour créer un site web, on doit donner des instructions à l'ordinateur.
Il ne suffit pas simplement de taper le texte qui devra figurer dans le site
(comme on le ferait dans un traitement de texte Word, par exemple), il faut
aussi indiquer où placer ce texte, insérer des images, faire des liens entre les
pages, etc.
Les rôles de HTML & CSS 1/3
HTML (HyperText Markup CSS (Cascading Style Sheets,
Language) : aussi appelées feuilles de style)
• il a fait son apparition dès 1991 :
lors du lancement du Web. Son • le rôle du CSS est de gérer
rôle est de gérer et organiser le l'apparence de la page web
contenu. C'est donc en HTML (agencement, positionnement,
que vous écrirez ce qui doit être décoration, couleurs, taille du
affiché sur la page : du texte, texte…). Ce langage est venu
des liens, des images… compléter le HTML en 1996.
Les rôles de HTML & CSS 2/3
La figure suivante montre ce que donne une page sans CSS, puis avec le CSS
Pour vous donner une idée
Les rôles de HTML & CSS 3/3
La figure suivante montre la relation entre les deux langages
Les différentes versions de HTML
12
Les différentes versions de HTML
HTML 1&2 1
c'est la toute première version créée
par Tim Berners-Lee en 1991.
La deuxième version apparaît en
1994, cette version posera les bases
des versions suivantes du HTML.
13
Les différentes versions de HTML
2
HTML 1&2 1 HTML 3
apparue en 1996, cette nouvelle
c'est la toute première version créée
par Tim Berners-Lee en 1991. version du HTML rajoute de
La deuxième version apparaît en nombreuses possibilités au langage,
1994, cette version posera les bases comme les tableaux, les applets, les
des versions suivantes du HTML. scripts, etc.
14
Les différentes versions de HTML 1/2
HTML 4
Elle apparaît en 1998 et propose l'utilisation de
frames, des structures plus complexes. Cette
version permet pour la première fois
d'exploiter des feuilles de style.
3
2
HTML 1&2 1 HTML 3
apparue en 1996, cette nouvelle
c'est la toute première version créée
par Tim Berners-Lee en 1991. version du HTML rajoute de
La deuxième version apparaît en nombreuses possibilités au langage,
1994, cette version posera les bases comme les tableaux, les applets, les
des versions suivantes du HTML. scripts, etc.
15
Les différentes versions de HTML
HTML 5
c'est la dernière version. Elle apporte de
nombreuses améliorations, C'est cette version que
HTML 4 nous allons découvrir ensemble.
Elle apparaît en 1998 et propose l'utilisation de
frames, des structures plus complexes. Cette
version permet pour la première fois
4
d'exploiter des feuilles de style.
3
2
HTML 1&2 1 HTML 3
apparue en 1996, cette nouvelle
c'est la toute première version créée
par Tim Berners-Lee en 1991. version du HTML rajoute de
La deuxième version apparaît en nombreuses possibilités au langage,
1994, cette version posera les bases comme les tableaux, les applets, les
des versions suivantes du HTML. scripts, etc.
16
Les différentes versions de CSS
17
Les différentes versions de CSS
CSS 1
dès 1996, on dispose de la
première version du CSS. Elle
pose les bases de ce langage CSS 2
qui permet de présenter sa apparue en 1999 puis
page web, comme les complétée par CSS 2.1, cette
couleurs, les marges, les nouvelle version de CSS
polices de caractères, etc. ajoute de nombreuses
options. On peut désormais
utiliser des techniques de
positionnement très précises,
qui nous permettent CSS 3
d'afficher des éléments où on c'est la dernière version, qui
le souhaite sur la page. apporte des fonctionnalités
particulièrement attendues
comme les bordures
arrondies, les dégradés, les
ombres, etc.
18
Conception Graphique
Cette étape est la spécialité du web
designer, durant ce processus le graphiste
va créer le visuel du site internet.
Les maquettes graphiques sont
généralement créer avec le logiciel
Photoshop ou Illustrator d’Adobe.
Une fois les fichiers graphiques finis, ils
sont envoyés à l’intégrateur pour
l’intégration web.
Développement Informatique
Le développement complet du site à partir des maquettes graphiques. Cela
nécessite de solides connaissances dans divers languages de programmation.
Bootstrap est une collection d'outils utiles à la création du design de sites et
d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des
formulaires, boutons, outils de navigation et autres éléments interactifs.
L'éditeur de texte
Il existe effectivement de nombreux logiciels dédiés à la création de sites web.
Mais, je vous rassure, vous n'aurez pas à débourser un seul millimes. Pourquoi aller
chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut
chez vous ? il suffit de… Bloc-Notes !
L'éditeur de texte
Il y a cependant des logiciels plus puissants aujourd'hui et personne n'utilise
vraiment Bloc-Notes. On peut classer ces logiciels de création de site web en deux
catégories :
WYSIWYG
Ce sont des programmes Ce sont des programmes
qui se veulent très faciles dédiés à l'écriture de code.
d'emploi, ils permettent de On peut en général les
créer des sites web sans utiliser pour de multiples
les éditeurs de texte
apprendre de langage langages, pas seulement
particulier. Parmi les plus HTML et CSS. Ils se révèlent
connus d'entre eux : Mozilla être de puissants alliés pour
Composer, Microsoft les créateurs de sites web !
Expression Web,
Dreamweaver… et même
Word !
Sublime Text
Sublime Text est un éditeur de texte devenu très populaire parmi les
développeurs. On l'utilise aussi bien pour développer en HTML et CSS que
dans d'autres langages (Python, Ruby, etc.). Il fonctionne sur Windows, Mac OS
X et Linux.
Il a l'avantage d'être simple, épuré et facile à lire dès le départ.
Malgré les apparences, il ne faut pas croire qu'il est limité. Au contraire : il est
possible de l'étendre avec tout un système de plugins. Ça devient un peu plus
compliqué et on ne rentrera pas là-dedans, mais il faut savoir que certains
personnalisent énormément leur Sublime Text pour gagner du temps !
En somme, Sublime Text est à la fois simple et puissant. Même pour l'usage
basique que nous allons avoir, il s'avèrera très pratique.
Sublime Text
Pourquoi le navigateur est
important ?
26
Les navigateurs
Le navigateur est le programme qui nous permet de voir les sites web. Le
travail du navigateur est de lire le code HTML et CSS pour afficher un
résultat visuel à l'écran.
Si votre code CSS dit « Les titres sont en rouge », alors le navigateur
affichera les titres en rouge. Le rôle du navigateur est donc essentiel !
En effet, comprendre le code HTML et CSS n'est pas une mince affaire. Le
principal problème, c'est que les différents navigateurs n'affichent pas le
même site exactement de la même façon !
Les navigateurs
La compatibilité reste toujours un problème ?
Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre
site fonctionne correctement sur la plupart des navigateurs.
Il existe de nombreux navigateurs web différents : Google Chrome, Mozilla
Firefox, Internet Explorer, Safari, Opera… Chacun affiche un site web de
manière légèrement différente des autres navigateurs.
Chrome a résolu en grande partie le problème en mettant en place des mises à
jour automatiques, sans intervention de l'utilisateur. Firefox a semble-t-il
décidé de suivre le rythme lui aussi. Internet Explorer est de plus en plus à
jour, et son remplaçant Edge.
Pour Conclure…
Pour créer des sites web, on utilise deux langages informatiques :
HTML : permet d'écrire et organiser le contenu de la page (paragraphes, titres…)
CSS : permet de mettre en forme la page (couleur, taille…).
Il y a eu plusieurs versions des langages HTML et CSS. Les dernières versions
sont HTML5 et CSS3.
Le navigateur web est un programme qui permet d'afficher des sites web. Il lit
les langages HTML et CSS pour savoir ce qu'il doit afficher.
MERCI
POUR
VOTRE
ATTENTION
Organisez un texte
On va découvrir de nombreuses balises HTML dans ce cours. Certaines existent
depuis la toute première version de HTML, d'autres ont été introduites plus
récemment dans HTML5.
On va voir successivement dans ce chapitre :
comment structurer sa page avec les titres ;
comment donner de l'importance à certains mots de son texte ;
comment organiser les informations sous forme de listes.
Les paragraphes
La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à
l'intérieur de paragraphes.
<p>Bonjour et bienvenue sur mon site !</p>
<p> signifie « Début du paragraphe » ;
</p> signifie « Fin du paragraphe ».
On écrit le contenu du site web entre les balises <body></body> .
Je reprends donc exactement le même code précédent et j'y ajoute mon
paragraphe :
Les paragraphes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Paragraphes</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !</p>
</body>
</html>
Sauter une 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. Essayez donc ce code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Essais de sauts de ligne</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !
Ceci est mon premier test alors soyez indulgents
s'il vous plaît, j'apprends petit à petit comment cela marche.
Pour l'instant c'est un peu vide, mais revenez
dans 2-3 jours quand j'aurai appris un peu plus de choses, je
vous assure que vous allez être surpris !</p>
</body>
</html>
Sauter une ligne
Si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième
<!DOCTYPE html>
balise <p>
<html>
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br />
Vous devez obligatoirement
<head> la mettre à l'intérieur d'un paragraphe.
<meta charset="utf-8" />
<title>Sauts de ligne</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test.</p>
Les titres
Lorsque le contenu de votre page va s’étendre avec de nombreux paragraphes, il va
devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent
utiles.
En HTML, on a six balises de titres différentes :
1. <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 ;
2. <h2> </h2> : signifie « titre important » ;
3. <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un «
sous-titre », si vous voulez) ;
4. <h4> </h4> : titre encore moins important ;
5. <h5> </h5> : titre pas important ;
6. <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
NB
Ne vous laissez pas impressionner par
toutes ces balises. En fait, six niveaux de
titres, c'est beaucoup. 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.
37
Les titres
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>
La mise en valeur
HTML vous propose différents moyens de mettre en valeur le texte de votre page.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em> .
Son utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises
et c'est bon !
Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence de mettre le
texte en italique.
En fait, c'est le navigateur qui choisit comment afficher les mots.
On lui dit que les mots sont assez importants et, pour faire ressortir cette
information, il change l'apparence du texte en utilisant l'italique.
La mise en valeur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Emphase</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors <em>soyez indulgents</em> s'il vous
plaît, j'apprends petit à petit comment cela marche.</p>
</body>
</html>
Mettre bien en valeur
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
<html>
que <em> :
<head>
<meta charset="utf-8" />
<title>Forte emphase</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors <strong>soyez
indulgents</strong> s'il vous plaît, j'apprends petit
à petit comment cela marche.</p>
</body>
</html>
Mettre bien en valeur
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.
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 ce que je vous disais pour les balises précédentes : elles indiquent
le sens des mots et non pas comment ceux-ci doivent s'afficher.
Mettre bien en valeur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Marquage du texte</title>
</head>
<body>
<p>Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test alors <mark>soyez
indulgents</mark> s'il vous plaît, j'apprends petit à petit
comment cela marche.</p>
</body>
</html>
NB
HTML pour le fond, CSS pour la
forme
44
Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner
nos informations. Les deux types de listes :
1. les listes non ordonnées ou listes à puces ;
2. les listes ordonnées ou listes numérotées, ou encore énumérations.
Les listes non ordonnées
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>
</ul>
Et maintenant, 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> .
Vous allez comprendre de suite avec cet exemple :
Les listes non ordonnées
Retenez donc 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.
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…
Il existe un troisième type de
liste, beaucoup plus rare : la
liste de définitions. Elle fait
intervenir les balises <dl>
(pour délimiter la liste), <dt>
(pour délimiter un terme)
et <dd> (pour délimiter la
définition de ce terme).
49
Résumé
Le HTML comporte de nombreuses balises qui nous permettent d'organiser le tex
de notre page.
Les paragraphes sont définis par la balise <p> </p> , et les sauts de ligne par la
balise <br /> .
Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6> , à utiliser selon
l'importance du titre.
On peut mettre en valeur certains mots avec les balises <strong> <em> <mark>.
Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée)
ou <ol> (liste ordonnée). À l'intérieur, on insère les éléments avec une balise <li>
pour chaque item.
.
Liens HTML
un site web est composé de plusieurs pages. On peut aller d'une page vers une
autre à l'aide d'un lien.
Un lien : il s'agit d'un texte sur lequel on peut cliquer pour se rendre sur une autre
page.
On peut faire un lien d'une page [Link] vers une page [Link] , mais on peut
aussi faire un lien vers un autre site (par exemple, [Link] ).
Dans les deux cas, nous allons voir que le fonctionnement est le même.
Un lien vers un autre site (lien absolu)
Pour faire un lien, la balise que nous allons utiliser est très simple à retenir : <a> .
Il faut cependant lui ajouter un attribut, href , pour indiquer vers quelle page le
lien doit conduire.
Par exemple, le code ci-dessous est un lien qui amène vers Stackoverflow, situé à
l'adresse [Link] :
Liens HTML - L'attribut cible
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour
changer cela, vous devez spécifier une autre cible pour le lien.
L'attribut cible spécifie où ouvrir le document lié.
L'attribut cible peut avoir l'une des valeurs suivantes:
_self - Par défaut. Ouvre le document dans la même fenêtre / onglet où il a été
cliqué
_blank - Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent - Ouvre le document dans le cadre parent
_top - Ouvre le document dans tout le corps de la fenêtre
Un lien vers une autre page de son site (lien
relatif)
Comment faire un lien de la page 1 vers la page 2, sans avoir d'adresse
en http:// ?
En fait, c'est facile : si les deux fichiers sont situés dans le même dossier, il suffit
d'écrire comme cible le nom du fichier vers lequel on veut amener.
Par exemple : <a href="[Link]"> . On dit que c'est un lien relatif.
La page 2 (page d'arrivée) affichera simplement un message pour indiquer que
l'on est bien arrivé sur la page 2 :
Autre Utilisation des liens
Un lien pour envoyer un e-mail
On utilise des liens de type mailto . Rien ne change au niveau de la balise, vous
devez simplement modifier la valeur de l'attribut href comme ceci :
Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à
votre adresse e-mail.
Un lien pour télécharger un fichier
il faut procéder exactement comme si vous faisiez un lien vers une page web, mais
en indiquant cette fois le nom du fichier à télécharger. Placez simplement ce fichier
dans le même dossier que votre page web (ou dans un sous-dossier) et faites un lien
vers ce fichier :
Les Images
La balise HTML <img> est utilisée pour ajouter une image dans une page Web.
La balise <img> a deux attributs obligatoires:
• src - Spécifie le chemin vers l'image
• alt - Spécifie un autre texte pour l'image
Ajouter une infobulle
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il
s'agit de title . Cet attribut est facultatif
Les Images
Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de
la placer au sein d'une balise <figure> . La balise <figcaption> permet d'écrire la
légende de l'image.
Taille des images
Vous pouvez utiliser l'attribut style pour spécifier la largeur et la hauteur d'une
image.
Vous pouvez également utiliser les attributs width et height:
Taille des images
Pour pointer vers une image sur un autre serveur, vous devez spécifier une URL
absolue (complète) dans l'attribut src:
Si vous avez vos images dans un sous-dossier, vous devez inclure le nom du
dossier dans l'attribut src:
Taille des images
Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » dans
l'arborescence, il faut écrire deux points, comme ceci :
Pour utiliser une image comme lien, placez la balise <img> à l'intérieur de la balise
<a>:
Débutez avec CSS
Pour utiliser une image comme lien, placez la balise <img> à l'intérieur de la balise
<a>:
Utilisez la propriété CSS float pour laisser l'image flotter à droite ou à gauche d'un
texte: