Développer des sites Web

statiques
Introduction & langage HTML
Sommaire
• 01 Créer une page web en HTML
• Introduction au langage HTML
• Utiliser l'environnement de développement
• Définir des éléments basiques d'une page HTML

• 02 Implémenter une page web statique

• Réaliser une page web statique
• Intégrer des formulaires dans une page web

• 03 Mettre en forme une page web avec les feuilles de style CSS
• Introduire le CSS
• Utiliser les propriétés CSS
• Manipuler le positionnement
• Adapter une page web au dispositif d’affichage
• Créer des animations
• Adapter des templates HTML/CSS avec un site Web

• 04 Maîtriser Bootstrap
• Intégrer Bootstrap
• Maitriser les classes CSS de base
• Utiliser les composants Bootstrap
• 05 Héberger un site Web
• Déployer en intranet
• Déployer en ligne
Internet et ses services
Services offerts par l’internet
• Internet est un ensemble de réseaux de toutes tailles composés
d'ordinateurs hétérogènes (Mac, PC, Unix,...) et interconnectés
en utilisant un langage commun appelé TCP/IP (Transmission
Control Protocol/Internet Protocol).
• Les services d'internet englobent aussi bien le Web
consultation de pages web (recherche) et le courrier
électronique (messagerie) que les informations fournies par les
groupes de discussion, les news, les forums, mais aussi par
FTP(téléchargement) ou Telnet.
 Protocoles Services

 HTTP (HyperText Transfert Protocol) : Visualisation de pages Web

 FTP (File Transfer Protocol) : Transferts de fichiers

 SMTP (Simple Mail Transfert Protocol) : Transferts de courriers électroniques (e-mail)

 POP (Post Office Protocol) : Récupération des e-mails sur le serveur

 NNTP (Network News Transfert Protocol) : Forums de discussions en temps différés

 IRC (Internet Relay Chat) : Dialogue en temps réel

Service Web
• Le World Wide Web (WWW), abrégé le Web, est le principal service de partage et de recherche
d'informations sur Internet (le réseau informatique mondial).

• Le Web donne aux utilisateurs l’accès à une vaste gamme de pages et de documents (appelés
ressources) qui sont connectés au moyen de liens hypertextes (hyperliens) et accessibles via un
navigateur.

• Les ressources du web correspondent aux entités informatiques comme le texte, les image, les
vidéos, d’autres ressources.

• Pour chaque ressource sur le web, une adresse en ligne appelée URL (Uniform Resource Locator)
est attribuée.
Service Web
• Un document hypertexte (composé du texte et des liens hypertextes) est écrit en langage de
balisage hypertexte (HTML).

• Le Web fonctionne dans le mode client-serveur :

• Les serveurs sont des programmes informatiques qui stockent et transmettent des
documents à d'autres ordinateurs sur le réseau

• Les clients sont des programmes qui demandent des documents à un serveur

• Le navigateur est le logiciel qui permet aux utilisateurs de visualiser les documents récupérés
Fonctionnement du web
Langages HTML & CSS
• 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
universels aujourd'hui. Ils sont à la base même du Web. Le langage HTML a
été inventé par un certain Tim Berners-Lee en 1991…

• Tim Berners-Lee suit encore aujourd'hui avec attention l'évolution du Web. Il

a créé le World Wide Web Consortium (W3C) qui définit les nouvelles
versions des langages liés au Web. Il a par ailleurs créé plus récemment
la World Wide Web Foundation qui analyse et suit l'évolution du Web.

• Les langages HTML et CSS sont à la base du fonctionnement de tous les

sites web
Les rôles de HTML et CSS
• HTML et CSS sont deux langages qui se complètent car ils ont des rôles
différents :

 HTML (HyperText Markup Language) : il a fait son apparition dès 1991 lors du
lancement du Web. Son 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. ».
 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.
Navigateur
• Pourquoi le navigateur est important

• Le navigateur est le programme qui nous permet de voir les sites web, son
rôle 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.

• 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.
• Actuellement il existe aussi des navigateurs pour mobile se sont
généralement des versions allégés des navigateurs web.
Langage HTML
Historique, concepts de base
Langage HTML
• HTML ou HyperText Markup Language est le langage utilisé par les
développeurs web pour créer et structurer le contenu d’une page web. Un fichier
HTML est un fichier texte dont l’extension est .html
• Pour créer un fichier HTML nos avons besoin d’un éditeur de texte.
• Editeur basic : bloc note
• Editeurs de texte plus conviviables:
 Sublime Text ;
 Notepad++ ;
 Visual studio code
Versions HTML
Depuis les débuts du Web, il existe plusieurs versions de HTML:

Année
Version
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

HTML5 est la version la plus récente et la plus améliorée de HTML.

Caractéristique du langage HTML
• HTML est un langage interprété.
• HTML est un langage de balisage.
• HTML est un langage côté client
Éléments, balises et attributs HTML
• Les éléments HTML vont nous permettre de créer la structure d’une
page HTML, de définir chaque contenu de notre page et également de
passer certaines informations utiles au navigateur pour afficher la page.
• Les éléments du HTML sont prédéfinis
• Selon l’élément utilisé, un navigateur va reconnaître le contenu comme
étant de telle ou telle nature. L’élément p, par exemple, sert à définir un
paragraphe
• Une balise est un élément encadrée par les caractères inférieur (<) et
supérieur (>)
Format minimal d’un élément HTML
• Un élément HTML peut être soit constitué d’une paire de balises (ouvrante
et fermante) et d’un contenu,

• soit d’une balise unique qu’on dit alors « orpheline ».

Éléments, balises et attributs HTML (suite)
Les attributs HTML
• Les balises sont parfois accompagnées d'attributs pour donner des
indications supplémentaires
• Les attributs seront placés au sein de la balise ouvrante de l’élément
• Un attribut contient toujours une valeur (peut être omise si évidente)
• Format général
Attribut = "valeur"
Remarque les doubles cotes sont obligatoires quelque soit la valeur
Format général d’un élément HTML
<balise [attribut="valeur"]*> Contenu </balise>

Balise ouvrante Attributs Balise fermante

Exemple
<a href= "http://google.ma"> Cliquez ici pour accéder à google </a>
Format général d’un élément HTML (suite)
Une balise peut aussi avoir la forme :

<balise /> : balises orphelines, elles permettent d'insérer un élément à

un endroit précis (par exemple saut de ligne <br/> ).

Exemple
Structure d’un fichier HTML
Squelette d’une page Web
Déclaration du type de document
(HTML 5)

Contient des informations

descriptives sur le document

Élément racine qui contient

tous les éléments du Contient tout ce que
document HTML nous voulons afficher
dans la fenêtre du
navigateur
Format Minimal d’un fichier HTML
<!DOCTYPE html>
<html>
<head>
<title>Page vide</title>
<meta charset="utf-8" />
</head>
<body>

</body>
</html>
 Le DOCTYPE
• La déclaration du doctype se fait toujours au début du fichier et
est (théoriquement) indispensable.
• Elle indique au navigateur le langage informatique utilisé dans
le fichier.
• Pour HTML5, le doctype est très simple, contrairement aux
versions précédentes.

<!DOCTYPE html>
L’élément HTML
• Les balises <html> et </html> délimitent le contenu du fichier. C’est
aussi la balise racine d’une page.
• Cette balise à deux balises enfants: head et body
<!DOCTYPE html>
Cette balise spécifie la version du langage HTML (HTML5 dans notre cas).

< html >

L'élément racine d'une page web. Peut spécifier un certain nombre de
métadonnées comme la langue et l'orientation de la page.

<head>
C'est l'élément entête qui contient les métadonnées d'une page web.
Cet élément n’est pas visible sur la page web.

<body>
C'est l'élément qui contient tous les composants visibles de la page web
: les textes, les paragraphes, les images, les tableaux, les animations…
Balises d’entêtes :
• L’entête est délimitée par les balises <head> et </head> et se situe
toujours en première partie. Elle contient des éléments utiles mais non
affichés du fichier
 La balise de titre : <title>

Cette balise permet de donner un titre complet à la page. Celui-ci n’est pas
affiché dans la fenêtre du navigateur mais dans sa barre de titre et est utilisé
par les moteurs de recherches pour nommer la page.

 Les balises de métadonnées : <meta />

 La balise <meta>
• Les métadonnées meta sont des données (informations) sur les données. La balise <meta>
fournit des métadonnées sur le document HTML. Les métadonnées ne seront pas affichées sur la
page, mais seulement interprétables par les machines.
Exemples de balises meta :

< meta charset="UTF-8"> Spécifie le format d'encodage du contenu.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cet élément est indispensable pour avoir une page web responsive (qui s'adapte à la taille de l'écran utilisé ).

<meta name="author " content=" x y z ">

<meta name="description " content=" Cours web ">
<meta name="keywords " content=" HTML,CSS,JavaScript ">
Ces éléments fournissent des informations sur le document html (utilisées par les moteurs de recherche)
Balise du corps : body
• Le contenu affichable d’une page web est délimité par les balises <body> et </body>

• En HTML il est possible d’imbriquer les balises à condition de respecter la règle:

Emboiter mais pas chevaucher

Exemple

<x> <y> <z> </z></y></x> //Emboîter accepté

<x> <y> </x></y> //Chevauchement non accepté

Quelques balises courantes du
HTML
Quelques balises HTML
•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 éléments avec une
balise <li> pour chaque item.
Les paragraphes en HTML
La balise <p> désigne un nouveau paragraphe
L'attribut "title" permet d'afficher une infobulle quand la souris survole le
paragraphe.

Exemple de déclaration d’un paragraphe :

<p title="infobulle sur le paragraphe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Enim tortor at auctor urna. Dignissim
enim sit amet venenatis. Varius sit amet mattis vulputate enim. Urna et pharetra
pharetra massa massa.
</p>
 Les titres en HTML
Il existe 6 niveaux de titres (headers) en HTML. Les balises <h1>, <h2>, …<h6> permettent
l'affichage de ces titre.

Exemple
Niveau1
<h1>Niveau1</h1> Niveau2
<h2>Niveau2</h2>
<h3>Niveau3</h3>
<h4>Niveau4</h4>
Niveau3
<h5>Niveau5</h5>
<h6>Niveau6</h6>
Niveau4
Niveau5
Niveau6

Les titres en HTML

Les listes en HTML
 Les listes en HTML
Les listes sont utiles pour apporter de la clarté et de l’ordre aux documents web.
En HTML, il est possible de définir trois types de listes :
les listes ordonnées, les listes non ordonnées, et les listes de définition.

Les balises et les attributs utilisées sont:

• Balise ul : définir une liste non ordonnée
• Balise ol : définir une liste ordonnée
• Balise dl : définir une liste de définition
• Balise li : définir un élément de liste
• L'attribut "type" permet de préciser le type de numérotation utilisée pour présenter la liste
• L'attribut "value" permet d'initialiser le numéro courant par la valeur souhaitée
 Attributs des listes ordonnées
reversed
Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre
inversé (l'objet le moins important apparaît en première position).
start
La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la
liste sont numérotés. Bien que les indices des éléments puissent être des nombres
romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour
commencer la numérotation des éléments avec la lettre « C », il faudra entrer : <ol
start="3">.
type
Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les
caractères suivants :
•a : lettres minuscules
•A : lettres majuscules
•i : nombres romains en minuscules
•I : nombres romains en majuscules
•1 : nombres
Le type sélectionné est alors utilisé pour toute la liste à moins qu'un élément <li> de la
Exemple de Listes

<ul>
<li>Élément1</li>
Exemple de liste non ordonnée <li type="circle">Élément2</li>
<li type="square">Élément3</li>
</ul>
Liste non ordonnée

<ol>
<li type="I">Élément1</li>
<li type="i">Élément2</li>
Exemple 1 de liste ordonnée
<li type="A">Élément3</li>
<li type="a">Élément4</li>
</ol> Liste ordonnée 1

<ol>
<li>Élément1</li>
Exemple 2 de liste ordonnée
<li>Élément2</li>
<li value="1">Élément3</li>
<li>Élément4</li> Liste ordonnée 2
</ol>
Listes imbriquées utilisant <ol> et <ul>
<ol> Le HTML ci-dessus produira :

<li>Premier élément</li> 1. Premier élément

<li>Deuxième élément <!-- La balise </li> n'est pas placée 2. Deuxième élément
ici ! -->
• Premier élément de la liste non-ordonnée
imbriquée
<ul>
• Deuxième élément de la liste non-ordonnée
<li>Premier élément de la liste non-ordonnée imbriquée</li> imbriquée
• Troisième élément de la liste non-ordonnée
<li>Deuxième élément de la liste non-ordonnée imbriquée</li> imbriquée

<li>Troisième élément de la liste non-ordonnée 3. Troisième élément

imbriquée</li>

</ul>

</li> <!-- La balise </li> est ici. -->

<li>Troisième élément</li>

</ol>
 Les listes de définition
La liste de définition est délimitée par les balises <dL> (Definition List),
L'élément dt (Definition Title) est utilisé pour donner le titre de la définition et l'élément dd pour
donner la définition.
Pour les deux éléments DT et DD, la balise fermante est optionnelle.

Exemple

<dl>
<dt>Langages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
<dt>SGBD</dt>
<dd>MySQL</dd>
<dd>MS SQL Server</dd>
<dd>Oracle</dd>
</dl>
Liste de définition
Les liens et les ancres en HTML
Les liens
• Un site web est un ensemble de pages web liées.
• Dans la pratique un site web est un dossier formé de sous dossiers et
de fichiers ( pages web, fichiers css, images ….)
• Exemple
Site
Pages
Page1.html
Page2.html
Contenu
Page3.html
Page4.html
 Les Liens
• La balise <a>
La balise <a> permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active suite au clic de
l’utilisateur.
Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic.
Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un mail.

Les principaux attributs des liens hypertextes sont :

• href : la cible du lien attribut obligatoire
• title : affiche une info bulle sur le lien.
• Target :
_blank : ouverture de la page cible dans une nouvelle fenêtre.

_parent : ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur).

_self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel.

_top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET).

L’attribut href
• Href est un attribut obligatoire de la balise a
• Href contient le chemin d’accès à la page cible à partir de la page
source.
• Page source est la page qui contient le lien
• Page cible ou destination est la page vers laquelle on voudrait aller.
Chemin Absolu:
Lien vers une page externe c’est-à-dire d’un autre site.
<a href="https://openclassrooms.com">OpenClassrooms</a>
Liens (suite)
• Chemin relatif: un chemin relatif est utilisé pour lier des pages d’un
même site web.
• un chemin relatif dépend de l’emplacement de la page cible par
rapport à la page source.
• Les pages sont dans un même dossier
• La page cible est dans un sous dossier de celui contenant la page source.
• La page cible est dans un dossier parent de celui contenant la page source.
Un lien vers une autre page de son site
Deux pages situées dans un même dossier
• Il suffit d'écrire comme cible du lien le nom du fichier vers lequel on veut amener.
• Par exemple page1.html vers page2.html :
<a href="page2.html">.
Deux pages situées dans des dossiers différents
• Exemple page1.html vers page3.html du sous-dossier Contenu. Dans ce cas
de figure, le lien doit être rédigé comme ceci :
<a href="contenu/page3.html">Aller à Page3 </a>
• Si votre fichier cas
l'arborescence, cibledeest placé dansil un
la page4.html fautdossier qui se
écrire deux trouve
points « plus
comme cecihaut
: » dans
<a href="../page4.html">Aller à Page4 </a>
Un lien vers une ancre
• Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML
lorsqu'elles sont très longues.
• En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que
le visiteur puisse sauter directement à la partie qui l'intéresse.
• Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère.
Ce peut être n'importe quelle balise, un titre par exemple.
• Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien
vers cette ancre. Par exemple :

<h2 id="mon_ancre">Titre</h2>
• Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un
dièse (#) suivi du nom de l'ancre. Exemple :

<a href="#mon_ancre">Aller vers l'ancre</a>

• Lien vers une ancre située dans une autre page:

• <a href=“cheminAccèsPage.html#nomAncre">Aller vers l'ancre</a>

Les liens (suite)
• Un lien qui affiche une infobulle au survol

<a href="page2.html" title="Cliquer, Vous ne le regretterez pas !">ma page2</a>

• Un lien qui ouvre une nouvelle fenêtre

<a href="page2.html" title=" Cliquer, Vous ne le regretterez pas ! " target="_blank"">ma page2</a>
• Un lien pour envoyer un e-mail

<a href="mailto:votrenom@bidule.com">Envoyez-moi un e-mail !</a>

• Un lien pour télécharger un fichier

Supposez que vous vouliez faire télécharger monfichier.zip. 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 :

<a href="monfichier.zip">Télécharger le fichier</a>