Celui qui se relâche dans son
travail est frère de celui qui
détruit »
[Proverbes 18:9]
1 « La discipline est le pont entre un
objectif et sa réalisation »
[Jim Rolm]
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
2
Ingénieur BANDZOUZI CHRISTOFER
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
3 Plan du cours
Généralités sur le web
Chapitre 1 : Présentation de HTML
Chapitre 2 : Balises et insertion
Chapitre 3 : Présentation de CSS
Chapitre 4 : Mises en forme et feuilles de style
Chapitre 5: Utilisation de Bootstrap
Chapitre 6: Création d’un site statique
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
4 Généralités sur le web
Historique du web
• L’idée est partie de Tim
Berners-Lee autour de
l’an 1990
• Il s’appuie sur le réseau
Internet
et le protocole Http
World Wide Web (www), ou « toile
(d’araignée) mondiale », communément
appelé le Web, et parfois la Toile
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
5 Généralités sur le web
Différence entre l’Internet et le Web
Internet:
Internet (contraction de Inter Network) est un
réseau informatique qui relie des ordinateurs
entre eux à l'échelle du monde.
Ce gigantesque réseau se compose de millions
de réseaux publics et privés plus petits, par
exemple des réseaux universitaires,
gouvernementaux ou commerciaux.
Elle a de multiples usages comme le partage
de fichiers, la messagerie instantanée, la
téléphonie, l'envoi de courrier électronique et le
web.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
6 Généralités sur le web
Différence entre l’Internet et le Web
Web:
Le web (abréviation de World Wide Web ou
toile mondiale) est donc un service d'Internet
parmi d'autres.
Pour expliquer autrement la différence entre
web et Internet, on pourrait dire que le web
n'est pas l'Internet mais sa principale
application.
Il s'agit d'un système de publication et de
consultation de documents : des sons, des
images et des textes
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
7 Généralités sur le web
Comment fonctionne le web
Les pages d’un site sont publiées via un
hébergeur
Elles peuvent être consultées partout à
partir d’un navigateur en se connectant
sur Internet
Web 3
Tim Berners-Lee Http 2.0
Web 2
Http 1.1 Très rapide
Media
Web 1 (images &
video)
Http 1.0
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
HTML & +tard
le W3C
8 Généralités sur le web
Le mode client/serveur
Les échanges entre un navigateur et un site
distant sur Internet sont de type
client/serveur
[Link]
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
9 CHAP 1 : Présentation de HTML
Définition
HTML(HyperText Markup Language) crée en 1991 lors du
lancement du Web. Son rôle est de gérer et organiser le
contenu de la page (Paragraphes, titres...). 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. ».
Il est un langage «balisé» qui permet de structurer des
informations sur une page web. Il est incontournable et n’a pas
de concurrent, il est à la base de tout projet de développement
web.
Il s'agit des langages informatiques (HTML et CSS) qui
permettent de créer des sites web. Tous les sites web sont
basés sur ces langages, ils sont incontournables et
universels aujourd’hui et sont à la base du Web.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
10 CHAP 1 : Présentation de HTML
Environnement de travail
Les navigateurs web: des programmes qui
permettent de traduire le code HTML et d'afficher le
contenu des sites web.
L'éditeur de texte : des programmes qui permettent
d‘écrire du code html, js et du css.
Note pad++
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
11 CHAP 1 : Présentation de HTML
Comment créer une page Web?
Ouvrir notre éditeur de texte: c’est lui qui nous
permet d’écrire du code HTML.
Écrire du texte dedans: écrire ce que nous voulons
comme phrase.
Enregistrer ce fichier avec l’extension .html:
l’enregistrer dans un dossier que nous appellerons
Cours HTML_CSS.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
12 CHAP 1 : Présentation de HTML
Structure de base d’une page HTML
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
13 CHAP 1 : Présentation de 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> : est correct. Une balise qui est ouverte à
l'intérieur d'une autre doit aussi être fermée à l'intérieur.
<html><body></html></body> : est incorrect, les balises s'entremêlent.
Le DOCTYPE :
C’est la toute première ligne, elle est indispensable car c'est elle qui indique
qu'il s'agit bien d'une page web HTML. 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.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
14 CHAP 1 : Présentation de HTML
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 !
L’en-tête : <head>
Qui 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 !
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.
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.).
Le titre principale 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) et il faut noter que le titre ne s'affiche pas dans votre page mais en haut
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
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, comme sur la figure suivante:
15 CHAP 1 : Présentation de HTML
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
16 CHAP 1 : Présentation de HTML
Un commentaire: <!– Ceci est un commentaire -->
Un commentaire en HTML est un texte qui sert simplement de mémo. Il n'est pas
affiché, il n'est pas lu par l'ordinateur, cela ne change rien à l'affichage de la
page. On utiliser les commentaires pour laisser des indications sur le
fonctionnement de votre page.
On peut visualiser votre commentaire: Tout le monde peut voir le
code HTML de votre page une fois celle-ci mise en ligne sur le Web. Il suffit de
faire un clic droit sur la page et de sélectionner « Afficher le code source de
la page » (l'intitulé peut changer selon votre navigateur), comme le montre la
figure suivante.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
17 CHAP 1 : Présentation de HTML
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
18 CHAP 2 : Balises et insertion
Pratique
Types de balises
Attributs
Les paragraphes
Les listes
Les liens
Les images
Tableaux
Sons et Vidéos
Formulaires
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
19
Les balise: Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le
caractère supérieur (>). par exemple « <H1> ».
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>
Types de balises
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 :
Code html:
<titre> Ceci est un titre </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 ».
Code html:
<img />
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
20
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.
Code html: <balise attribut ="valeur">
Exemple: <img nom ="[Link]">
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.
Code html : <p> Salut! Comment tu vas ? </p>
<p> signifie « Début du paragraphe » et </p> signifie « Fin du paragraphe ».
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
21
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
22
Exemple:
Le rendu de la page:
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
23
La balise <br/> nous permet d’aller à la ligne et elle doit obligatoirement
être à l’intérieur d’un paragraphe:
<p> </p> pour organiser son texte en paragraphes et <br/> pour aller à la ligne.
Les titres:
en HTML on a le droit d’utiliser six titres différents et 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> </6> : titre vraiment, mais alors là vraiment pas important du tout.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
24
La mise en valeur:
Au sein de vos paragraphes, certains mots
sont parfois plus importants que d'autres et vous aimeriez les
faire ressortir. 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.
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie « fort
», ou « important » siBANDZOUZI
CHRISTOFER vous préférez. Elle s'utilise exactement de la même manière
INGENIEUR EN INFORMATIQUE
que <em> :
CHAP 2 : Balises et insertion
25
La mise en valeur:
La balise <mark> permet de faire ressortir visuellement une
portion de texte. Par défaut, <mark> a pour effet de surligner le texte. C'est le
même principe que les balises précédentes : elles indiquent le sens des mots
et non pas comment ceux-ci doivent s'afficher.
<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>
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
</html>
CHAP 2 : Balises et insertion
26
Les listes
Les listes :
Les listes nous permettent de mieux structurer notre
texte et d’ordonner nos informations et il existe deux types de
listes:
Les listes non ordonnées ou listes à puces;
Les listes ordonnées ou listes numérotées ou encore
énumération.
Les listes à puces
une liste non ordonnée ressemble à ceci:
• Mangue
• Banane
• Avocat
C’est un système qui nous permet de créer une liste d’éléments sans la
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
notion d’ordre
CHAP 2 : Balises et insertion
27
Les éléments de la liste sont écris entre deux balises <li></li> et ces balises
doivent se retrouver entre <ul></ul>
On peut imbriquer des listes à puces (créer des listes à puces dans une liste
à puces afin d’avoir des listes complexes), pour cela il suffit d’ouvrir une
seconde balise <ul> à l’intérieur d’un élément <li></li>.
. CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
28
Il faut noter que la balise <ul></ul> délimite toute la liste alors que celle-ci
<li></li> délimite un élément de la liste (une puce).
Exo: Donnez le code html de ceci
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 2 : Balises et insertion
29 EXO
Liste ordonnée: Elle fonctionne de la même façon que la liste non
ordonnée, seule une balise change : il faut remplacer <ul></ul> par
<ol></ol>, à l’intérieur de la liste on ne change rien car on utilise toujours la
balise <li></li> pour délimiter les éléments.
L’ordre dans lequel vous placer les éléments de la liste sera très utile et
important car le premier <li></li> sera l’élément n° 1, le second sera le n° 2
etc...
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
.
CHAP 2 : Balises et insertion
30
Pour information, 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).
Le HTML comporte de nombreuses balises qui nous permettent d'organiser
le texte de notre page. Ces balises donnent des indications comme « Ceci
est un paragraphe », « Ceci est un titre », etc.
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> et
<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 CHRISTOFER
éléments avec
BANDZOUZI une
INGENIEUR balise <li> pour chaque item.
EN INFORMATIQUE
CHAP 3 : Création des liens et
31 l’ajout des images
Comme nous le savons tous, un site web est composé de plusieurs pages.
Maintenant Comment faire pour aller d'une page vers une autre ? C’est à
l'aide de liens!
Dans ce chapitre, nous allons justement apprendre à créer des liens entre
nos pages.
Et qu’est-ce qu'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: Comment le faire?
Il est facile de reconnaître les liens sur une page : ils sont écrits d'une façon
différente (par défaut, en bleu et soulignés) et un curseur en forme de main
apparaît lorsqu'on pointe dessus.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
32 l’ajout des images
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 le Site du Zéro,
situé à l'adresse [Link] :
plaçons ce lien au sein d'un paragraphe. Voici donc comment reproduire
l'exemple de la figure précédente :
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
33 l’ajout des images
Un lien vers une autre page:
Deux pages situées dans le même dossier
Créer deux fichier correspondant à deux pages html
si les deux fichiers sont situés dans le même dossier, il suffit d'écrire comme cible du lien
le nom du fichier vers lequel on veut amener. Par exemple :
[Link]
[Link]
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
34 l’ajout des images
Un lien vers une autre page:
Deux pages situés dans des dossiers différents
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
35 l’ajout des images
Un lien vers une ancre:
Une ancre est une sorte de repère que l’on peut mettre dans des pages
HTML lorsqu’elles sont très longues
Pour créer une ancre, il suffit de rajouter id à une balise qui va alors
servir de repère. Ce peut être n’importe quelle balise, un titre par
exemple.
Ensuite, il suffit de créer un lien, cette fois l’attribu href contiendra un
dièse (#) suivi du nom de l’ancre.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
36 l’ajout des images
Un lien vers une ancre:
L'attribut id sert à donner un nom « unique » à une balise, pour s'en servir de
repère. Ici, on s'en sert pour faire un lien vers une ancre mais, en CSS, il nous
sera très utile pour « repérer » une balise précise. Évitez cependant de créer
des id avec des espaces ou des caractères spéciaux, utilisez simplement,
dans la mesure du possible, des lettres et chiffres pour que la valeur soit
reconnue par tous les navigateurs.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
37 l’ajout des images
lien vers une ancre située dans une autre page:
L'idée, c'est de faire un lien qui ouvre une autre page ET qui amène directement
à une ancre située plus bas sur cette page. En pratique c'est assez simple à faire :
il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
Par exemple : <a href="[Link]#rollers">
Voici une page qui contient trois liens, chacun amenant vers une des
ancres de la page de l'exemple précédent :
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
CHAP 3 : Création des liens et
38 l’ajout des images
Un lien qui affiche une infobulle au survol:
Un lien qui ouvre une nouvelle fenêtre:
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
39 CHAP 3 : Présentation de CSS
Définition:
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
Les versions de CSS
CSS 1 : dès 1996, la première version du CSS est utilisable. Elle pose
les bases de ce langage qui permet de présenter sa page web,
comme les couleurs, les marges, les polices de caractères etc...
CSS 2 : apparue en 1999 puis complétée ensuite par CSS 2.1,
cette nouvelle version de CSS rajoute de nombreuses options. On
peut désormais utiliser des techniques de positionnement très
précises qui nous permettent d'afficher des éléments où on le
souhaite sur la page.
CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues comme les bordures arrondies, les
dégradés, les ombres, etc.
NB: N'oubliez pas : HTML pour le fond, CSS pour la forme
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
40 CHAP 4 : Mises en forme et
feuilles de style
Où mettre du CSS
On peut écrire du code CSS à 3 endroits
différents, selon ce qu'on préfère :
Méthode A : dans un fichier .css (le moyen
le plus recommandé)
Méthode B : dans l'en-tête du fichier XHTML
Méthode C : dans les balises
NB: La méthode A est celle qui est
recommandée.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
41 CHAP 4 : Mises en forme et
feuilles de style
Dans le dossier du site il doit y avoir au moins 2
fichiers: un fichier HTML et un Fichier CSS
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
42 CHAP 4 : Mises en forme et
feuilles de style
Le fichier HTML
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
43 CHAP 4 : Mises en forme et
feuilles de style
Le fichier CSS
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
44 CHAP 4 : Mises en forme et
feuilles de style
Sélection d’une balise
balise1
{
propriete: valeur;
propriete: valeur; Exemple
propriete: valeur; p
} {
color: red;
balise2 background: red;
{ border: 2px solid black;
propriete: valeur; }
propriete: valeur;
propriete: valeur;
}
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
45 CHAP 4 : Mises en forme et
feuilles de style
Formatage du texte en CSS
Taille du texte
Polices
Alignement
Effet de style
Mettre en italique
Mettre en gras
Les majuscules en CSS
Les couleurs
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
Les font (en image ou en couleur)
46 CHAP 4 : Mises en forme et
feuilles de style
Les liens en css
Au moment du clic
Lorsque le lien est sélectionné
Quand la page a déjà été vue...
Les listes à puces
Représentation de la puce
Changer l'image de la puce
La taille
Minimum
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
Maximum
47 CHAP 4 : Mises en forme et
feuilles de style
Les bordures
Les marges
Transformer un inline en block
Les flotants
Positionnement absolu, fixe et relatif
Pratique dans les detailles.
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
48 CHAP 5 : Utilisation de Bootstrap
Cas Pratique
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
49 CHAP 6 : Création d’un site
statique
Cas Pratique
Projet site personnel
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE
50 Travaux Pratiques
Site de publication
Site vente en ligne
CHRISTOFER BANDZOUZI INGENIEUR EN INFORMATIQUE