H. N.
Tran
Introduction
Technologies Informatiques
Internet Chapitre 3 - Développement Web - Cours 1 : HTML
Web
HTML et CSS
HTML
Hai Nam TRAN
Arborescence
UBO – Département Informatique
1 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Introduction
2 / 73
Qu’est-ce que le développement web ?
H. N. Tran
Introduction
Internet
Web
Créer les éléments graphiques du site (police de caractère,
HTML et CSS
HTML
positionnement des blocs, ergonomie)
Arborescence Coder l’ensemble des actions de navigation à réaliser par
l’ordinateur
Gérer les paramètres d’hébergement
Le développement back-end
...
3 / 73
Pourquoi apprendre le developpement web ?
H. N. Tran
Introduction
Internet
Web
HTML et CSS Dans le monde professionnel : tous les secteurs (ou presque) ont
HTML besoin de développeurs web pour leurs projets digitaux.
Arborescence
Un métier polyvalent et enrichissant
Cela peut aussi être l’un de votre loisirs
CV en ligne
Une page web de votre association
...
4 / 73
Qu’allons-nous apprendre ?
H. N. Tran
Introduction
Internet
Web
HTML et CSS
Créer un site Web sur un sujet au choix ayant au moins 3 ou 4
HTML
rubriques en utilisant les deux langages de programmation
Arborescence
HTML/CSS
Vous
ou/et
Une de vos passions
5 / 73
Organisation de la partie Web
H. N. Tran
Introduction
Internet
Web
HTML et CSS
CM (3 séances) : cours + presentation du tutoriel de la semaine
HTML TD (2 séances) : réalisation du tutoriel + exercices
Arborescence
TP (3 séances) : exercices + projet
Discussions, questions
[Link]@[Link]
Serveur Discord - lien sur la page Moodle de l’UE (avant toute
utilisation du serveur, merci de lire l’intégralité du #reglement)
6 / 73
Projet
H. N. Tran
Introduction
Dans ce projet, les étudiants doivent démontrer leurs
Internet
Web
compétences en HTML et CSS.
HTML et CSS
L’objectif est de développer par vous-même le site Web et
HTML
d’explorer, d’apprendre et d’acquérir une meilleure
Arborescence
compréhension du développement Web
Tous les projets sont strictement vérifiés automatiquement par
un vérificateur de plagiat et ”manuellement” par les enseignants
Les étudiants doivent déposer chaque semaine les versions
actuelles de leurs projets sur le Moodle
Les étudiants doivent être capables d’expliquer toutes les parties
de leurs projets lors de l’évaluation
Toute tentative de plagiat détectée entraı̂nera une note 0 du
projet et également les sanctions disciplinaires correspondantes
7 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Internet
8 / 73
Internet
H. N. Tran
Internet signifie interconnexion de réseaux.
Introduction Les réseaux peuvent être de natures très diverses : réseau routier,
Internet réseau ferré, réseau téléphonique, réseau radio ...
Web
Ce qui nous intéresse ce sont les réseaux informatiques.
HTML et CSS
Un réseau informatique est un ensemble de moyens matériels et
HTML
logiciels permettant de connecter différents utilisateurs.
Arborescence
Internet est un regroupement d’un ensemble de réseaux :
réseaux personnels ou PAN (Personal Aera Network).
réseaux locaux (LAN=Local Aera Network) quelques m à
quelques km à débit élevé.
MAN (Metropolitan Area Network) jusqu’à 100 km.
réseaux étendus (WAN=Wide Aera Network) souvent
internationaux.
Internet est le plus grand réseau informatique du monde.
9 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Web
19 / 73
Le Web
H. N. Tran
Introduction
Internet
Web
Il ne faut pas confondre le Web (ou WWW pour World Wide Web)
HTML et CSS
et Internet !
HTML
Arborescence
Internet est un réseau physique.
Le Web n’est qu’une des applications d’Internet.
Le Web est un ensemble de ressources (les pages Web) réparties sur
différents serveurs du réseau Internet.
Le Web permet de consulter, avec un navigateur, des pages
accessibles sur des sites.
20 / 73
Le Web
Le Web est un système d’information multimédia hypertextuel.
H. N. Tran
Multimédia : textes, images, sons, vidéos.
Introduction
Hypertexte : texte renvoyant vers une autre page via un lien.
Internet
Navigateur (browser, butineur,...) : affiche des pages Web.
Web
HTML et CSS
Navigateurs : Firefox, Chrome, Internet Explorer, Edge, Safari,
HTML
Opera ...
Arborescence
Une page Web désigne le contenu visible dans la fenêtre d’un
navigateur.
Un serveur Web est capables de fournir des ressources pour
pages Web.
Un site Web désigne l’ensemble des pages Web disponibles sur
un serveur Web.
Ne pas confondre navigateur et moteur de recherche !
21 / 73
Le modèle Client-Serveur
H. N. Tran
Introduction
Internet
Modèle de fonctionnement du Web : client/serveur.
Web Le client effectue des requêtes.
HTML et CSS
Le serveur exécute les requêtes et renvoie les résultats sous la
HTML
Arborescence
forme de ressources.
Protocole : HTTP.
22 / 73
Ressources
Une page Web est un assemblage de nombreuses ressources :
H. N. Tran
Ressources HTML (Hypertext Markup Language).
Introduction
Internet Ressources CSS (Cascading Style Sheets).
Web Ressources multimédia : images, son, vidéo.
HTML et CSS
HTML
Autres ressources (scripts).
Arborescence
Dans ce cours nous apprendrons à utiliser HTML5 et CSS3 les deux
langages à la base de tous les sites Web.
23 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
HTML et CSS
24 / 73
A quoi ressemble le HTML ?
H. N. Tran
Introduction
On peut afficher les sources d’une page Web :
Internet
Outils → Développement Web → Sources de la page
Web
HTML et CSS
HTML
Arborescence
25 / 73
HTML et CSS
H. N. Tran
Introduction
Internet
HTML et CSS sont deux langages de description de pages.
Web Pour créer un site Web il ne suffit pas de taper du texte il faut
HTML et CSS également positionner le texte, l’enrichir de contenus multimedia, de
HTML liens hypertexte ...
Arborescence Pour cela on utilise deux langages, HTML et CSS qui se complètent :
HTML (HyperText Markup Language, 1991) : gestion et
organisation du contenu.
CSS (Cascading Style Sheets ou Feuilles de style, 1996) : gestion
de l’apparence de la page web (positionnement, couleurs, polices
de caractère ...).
En gros HTML gère le fond et CSS la forme !
26 / 73
Sans et avec CSS
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Si HTML peut vivre sans CSS, CSS a besoin d’une page HTML pour
fonctionner.
27 / 73
HTML : histoire
H. N. Tran
HTML 1 : créée en 1991 par Tim Berners-Lee.
Introduction
HTML 2 : 1994-1996 créée par le W3C qui gère dorénavant les
Internet
versions suivantes.
Web HTML 3 : à partir de 1996 ajoute de nouvelles fonctionnalités
HTML et CSS (tableaux, applets, scripts, habillage des images par du texte ...).
HTML
Arborescence
HTML 4 : à partir de 1998. Introduction des frames, permet
d’exploiter les feuilles de style CSS.
HTML 5 : the last one. Amélioration de la version précédente
pour une mise en oeuvre enrichie et facilitée.
28 / 73
CSS : histoire
H. N. Tran
Introduction
Internet
Web
HTML et CSS CSS 1 : 1996. Les premiers pas pour la présentation de pages
HTML web : couleurs, marges, polices de caractères ...
Arborescence
CSS 2 : 1999. Ajout de nombreuses options permettant de
positionner avec précision les différents éléments d’une page.
CSS 3 : the last one. Encore plus de design : bordures arrondies,
dégradés, ombres ...
29 / 73
Website : au cours des années
H. N. Tran
[Link] - 1999
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Référence : https ://[Link]/2015/03/how-your-favorite-
websites-changed-over-the-years
30 / 73
Website : au cours des années
H. N. Tran
[Link] - 2001
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
31 / 73
Website : au cours des années
H. N. Tran [Link] - 2002
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
32 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2004
Internet
Web
HTML et CSS
HTML
Arborescence
33 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2007
Internet
Web
HTML et CSS
HTML
Arborescence
34 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2011
Internet
Web
HTML et CSS
HTML
Arborescence
35 / 73
Website : au cours des années
H. N. Tran [Link] - 2012
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
36 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2013
Internet
Web
HTML et CSS
HTML
Arborescence
37 / 73
Website : au cours des années
H. N. Tran
Introduction
[Link] - 2014
Internet
Web
HTML et CSS
HTML
Arborescence
38 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2015
Internet
Web
HTML et CSS
HTML
Arborescence
39 / 73
Website : au cours des années
[Link] - 1997
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Référence : https ://[Link]/2015/03/how-your-favorite-
websites-changed-over-the-years
40 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2001
Internet
Web
HTML et CSS
HTML
Arborescence
41 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2004
Internet
Web
HTML et CSS
HTML
Arborescence
42 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2006
Internet
Web
HTML et CSS
HTML
Arborescence
43 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2007
Internet
Web
HTML et CSS
HTML
Arborescence
44 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2008
Internet
Web
HTML et CSS
HTML
Arborescence
45 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2011
Internet
Web
HTML et CSS
HTML
Arborescence
46 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2012
Internet
Web
HTML et CSS
HTML
Arborescence
47 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2014
Internet
Web
HTML et CSS
HTML
Arborescence
48 / 73
Website : au cours des années
H. N. Tran
Introduction [Link] - 2015
Internet
Web
HTML et CSS
HTML
Arborescence
49 / 73
Editeur de texte
H. N. Tran
Introduction
Pour créer son site Web il faut un logiciel.
Internet
Il en existe deux grandes catégories :
Web
HTML et CSS les WYSIWYG (What You See Is What You Get). Ils se
HTML comportent comme des logiciels de traitement de texte : pas
Arborescence besoin de connaı̂tre HTML ni CSS pour créer son site Web. Les
plus connus sont Mozilla Composer, Microsoft Expression Web,
Dreamweaver, KompoZer ... Problèmes : génération de code
HTML et CSS de mauvaise qualité, aucune maı̂trise du code.
les éditeurs de texte. Non spécifiques à HTML et CSS mais
facilitent grandement le développement : Sublime Text,
NotePad++, Kwrite, gedit, Visual Studio Code, ...
En TP nous utiliserons l’éditeur de texte Visual Studio Code.
50 / 73
Navigateur
H. N. Tran
Un navigateur permet de voir les sites Web.
Introduction
Il en existe de nombreux : Google Chrome, Mozilla Firefox, Internet
Internet
Web
Explorer, Edge, Opera, Safari ...
HTML et CSS
Attention les pages n’apparaissent pas de la même façon selon le
HTML
navigateur !
Arborescence
51 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
HTML
55 / 73
Definition
H. N. Tran
Introduction
Internet
Web
HyperText Markup Language
HTML et CSS
HTML
HyperText : fonction qui permet de passer d’un document à
Arborescence
l’autre grâce à un système de liens. Ce système est à la base du
fonctionnement d’Internet.
Markup Language : un langage à balises (tags)
HTML est souvent utilisé conjointement avec le langage de
programmation JavaScript et des feuilles de style en cascade
(CSS)
56 / 73
Structure minimale d’une page HTML5
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
A enregistrer sous l’extension .html (ici [Link]).
57 / 73
Les balises
H. N. Tran
HTML est un langage à balises.
Introduction
Une balise est ce qui est entouré de chevrons < et >.
Internet
Web
Il y a deux types de balises :
HTML et CSS les conteneurs. Parenthésage de la forme <x>y</x>.
HTML Spécification x portant sur la portion de texte y. <x> est la
Arborescence balise ouvrante et </x> la balise fermante.
les marqueurs. Pour insérer un élément à un endroit précis (une
image par exemple). Dans <meta charset="utf-8" /> le /
n’est pas obligatoire mais permet de distinguer un marqueur
d’une balise ouvrante.
Aux balises s’ajoutent des attributs qui les complètent en fournissant
des informations supplémentaires.
Par exemple <balise attribut="valeur"> comme dans
<meta charset="utf-8" />.
58 / 73
Analyse du code HTML
H. N. Tran
Introduction
Internet <!DOCTYPE html> le doctype du HTML5.
Web
<html> englobe tout le contenu de la page.
HTML et CSS
HTML
<head> l’en-tête. Spécifie le titre, l’encodage. N’apparaı̂t pas sur
Arborescence la page.
<body> le corps. Contient la partie principale de la page.
<meta charset="utf-8" /> l’encodage. Pour l’affichage des
accents. Il faut également que le fichier soit enregistré en utf-8
dans l’éditeur.
<title> le titre principal. Ne s’affiche pas dans la page mais
dans le navigateur !
59 / 73
Commentaires
Comme pour les langages de programmation il est très important de
H. N. Tran
commenter son code HTML !
Introduction
Cela sert à :
Internet
mettre en valeur/séparer des zones de code
Web
ajouter des informations (auteur, date de création, suivi de
HTML et CSS
HTML
versions ...) qu’on ne souhaite pas afficher dans le navigateur
Arborescence
ajouter des explications à des parties complexes
faciliter la maintenance du code pour le créateur ou pour un tiers
Un commentaire est une balise particulière :
<!-- Ceci est un commentaire -->
Attention les commentaires sont visibles via l’édition du code source
(clic droit suivi de Afficher le code source de la page) !
60 / 73
Paragraphes et blocs
H. N. Tran Dans le corps (entre les balises <body> et </body>) du fichier HTML
Introduction le texte est en général structuré en paragraphes.
Internet <p>Vive le cours de Technologies Informatiques !</p>
Web
HTML et CSS
Pour faire des séparations <hr> trace une ligne horizontale de la
HTML
largeur de la fenêtre.
Arborescence
Si on souhaite passer à la ligne au sein d’un paragraphe, il faut
utiliser le marqueur <br> ou <br />.
Attention c’est visuellement différent que de séparer le texte en deux
paragraphes !
Si on souhaite avoir des espaces plus ou moins importants entre des
portions de texte c’est le rôle de CSS !
On peut faire des blocs identifiés avec <div id="bloc1"></div> ou
utiliser <div classe="type1"></div> pour regrouper dans une
même classe différents blocs.
61 / 73
Les titres
H. N. Tran Pour clairement organiser un texte on dispose de 6 niveaux de titres :
Introduction <h1> </h1> titre très important, premier niveau de titre.
Internet
<h2> </h2> titre important, deuxième niveau de titre.
Web
HTML et CSS ...
HTML
jusqu’à <h6> </h6> titre pas important du tout.
Arborescence
Attention à ne pas confondre avec la balise <title>.
62 / 73
Mise en valeur
Au sein d’un paragraphe on peut mettre en valeur un mot ou une
H. N. Tran
suite de mots :
Introduction
<em> </em> met un peu en valeur.
Internet
Web <strong> </strong> met bien en valeur.
HTML et CSS
<mark> </mark> fait ressortir visuellement une portion de texte.
HTML
Arborescence
<blockquote> </blockquote> citation.
<span> </span> groupe une portion de texte sans faire rien
ressortir.
Attention le navigateur interprète ces mises en valeur mais c’est à
CSS de spécifier ce que l’on en fait (italique, gras, encadrement ...).
63 / 73
Les listes
H. N. Tran
Deux grands types de listes :
Introduction
Internet Listes numérotées (ordered list)
Web
Listes non numérotées (unordered list)
HTML et CSS
HTML
Arborescence
64 / 73
Les tableaux
<table> </table> déclaration d’un tableau.
H. N. Tran
<tr> </tr> rangée ou ligne.
Introduction
<td> </td> cellule ou case.
Internet
<th> </th> titre dans une cellule (centré et en gras), en général
Web
la première ligne.
HTML et CSS
HTML
Arborescence
65 / 73
Liens
H. N. Tran
Introduction
Internet
Web lien vers un autre site en donnant l’URL :
HTML et CSS <a href="[Link]
HTML
Arborescence
lien vers une autre page de son site
<a href="myContent/[Link]">page 2</a>
lien vers une ancre : <a id="ici"> </a> définit une ancre et
<a href="#ici">Ici</a> lien renvoyant vers l’ancre ”ici”.
lien vers une ancre située sur une autre page
<a href="myContent/[Link]#ici">Ici</a>.
66 / 73
Liens
H. N. Tran
affichage d’une info bulle au survol
<a href="[Link]
Introduction
title="Université Brest">ubo</a>.
Internet
Web
forcer l’ouverture d’un lien dans une nouvelle fenêtre
HTML et CSS
<a href="[Link]
HTML target="_blank">ubo</a>.
Arborescence envoi d’un mail
<a href="[Link] Dupont</a>.
télécharger un fichier
<a href="[Link]">Téléchargez le fichier</a>.
67 / 73
Images
H. N. Tran
Il est facile d’insérer des images dans une page web.
Introduction
Internet
Attention toutefois à leur taille.
Web
<Les formats les plus usités :
HTML et CSS JPEG pour les photos d’extension .jpg ou .jpeg
HTML
PNG pour les graphiques d’extension .png
Arborescence
GIF pour les images animées d’extension .gif
Insertion d’une image :
<img src="images/[Link]" alt="un joli chien">
alt indique le texte qui sera affiché à la place de l’image si elle ne
peut être téléchargée.
Une image se place toujours dans un paragraphe (<p> </p>) et peut
servir d’hyperimage !
<a href="[Link] src="[Link]"></a>
68 / 73
Résumé et Devoir
H. N. Tran
Introduction
Devoir 1 : donner des definitions et des exemples des balises trouvées
Internet
Web
dans la liste ci-dessous (à rendre sur le Moodle avant le 13/11)
HTML et CSS HTML, CSS
HTML
Balise : conteneurs (ouvrante/fermante), marqueurs
Arborescence
html, head, body, title
p, h1, h2, em, strong, mark, blockquote, span
br, hr
ol, ul, li
table, td, tr
a, img
69 / 73
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML
Arborescence
Arborescence
70 / 73
Structure d’un site web
H. N. Tran
Introduction
Internet
Web
HTML et CSS
HTML Comment organiser des resources : images, audios, videos, css
Arborescence
Comment organiser des pages : [Link], [Link]
Connecter les ressources et les pages : hyperlink, balises (img,
video, ...)
71 / 73
Une organisation générale
H. N. Tran
web
Introduction
media
Internet
img
Web
- [Link]
HTML et CSS - [Link]
HTML video
Arborescence - funny.mp4
audio
- hurlevent.mp3
css
- [Link]
script
- [Link]
page
- [Link]
- [Link]
[Link]
72 / 73
Chemin absolu et relatif
H. N. Tran
Introduction
Le chemin relatif (absence de slash initial)
Internet La cible va être cherchée à partir du fichier
Web Dans [Link] :
HTML et CSS <a href="page/[Link]">Contact</a> - la cible
HTML ([Link]) va être cherchée par le navigateur à partir de la
Arborescence page html, dans le sous-répertoire ”page”.
Dans [Link] :
<a href="../[Link]">Index</a> - la cible ([Link])
est cherchée à partir du répertoire parent de la page html
../ : signifie que la page est cherchée à partir du répertoire
parent (on remonte d’un niveau)
Le chemin absolu (slash en préfixe du chemin)
La cible va être cherchée en partant de la racine du système de
fichiers
<a href="/home/web/page/[Link]">Contact</a>
73 / 73