Cours:
HTML et CSS
2017-2018
Plan
Introduction au Web 2.0
Les bases en HTML
Nouveautés en HTML 5
Les bases en CSS
Atelier HTML/CSS
2
Partie 1 :
Introduction au web 2.0
3
Navigateur
Le navigateur est l'outil qui permet de lire les hyperdocuments. Au
début conçu pour ne lire que les hyperdocuments, le navigateur
intègre aujourd'hui tous les services de l'Internet (e-mail, ftp,...)
Le navigateur désigne par une adresse URL (Uniform Resource
Locator) les adresses complètes de l'Internet.
4
Hyperdocument
Un hyperdocument est un document électronique contenant des images, du
vidéo, du texte, parfois des petits morceaux de programme, mais surtout des
liens vers d'autres hyperdocuments : des liens hypertextes.
UP WEB ESPRIT
5
C’est quoi le web?
Mis au point par Tim Berners-Lee (CERN) entre 1989 et 1991
Le Web est un système client-serveur dont le fonctionnement
s'apparente à des relations client-fournisseur.
L'ordinateur personnel, doté de son logiciel de navigation
(Internet Explorer, Firefox…), joue le rôle du client.
Les ordinateurs distants sur lesquels sont hébergés les sites web
sont des serveurs.
6
Différence entre le web et internet
Internet est un réseau informatique mondial de transport de
données constitué d'un ensemble de réseaux nationaux,
régionaux et privés.
Il permet de transporter un paquet de données d'un ordinateur
A à un ordinateur B.
Internet englobe
le web, email,
messagerie instantanée..
7
Historique et évolution du web
9
Définition d’un site web
Un site web est un ensemble de pages
organisées en structure hiérarchique, disponible
sur un serveur. Il peut être construit avec
des pages statiques, des pages dynamiques ou
un assemblage des deux.
10
Fonctionnement d'un site web
Requête HTTP:
Bonjour, je voudrais le document
« http://www.site.com/document.html » (URL)
TCP/IP
Client
Réponse HTTP:
<!HTML>
<html>….</html>
Serveur http
11
Les sites web statiques VS dynamiques
Les sites web statiques :
Ce sont des sites réalisés uniquement à l'aide des langages HTML et CSS.
Ne peut pas être mis à jour automatiquement : il faut que le propriétaire du
site (le webmaster) modifie le code source pour y ajouter des nouveautés.
Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine ».
Les sites web dynamiques:
Plus complexes, ils utilisent d'autres langages en plus de HTML et CSS, tels que
PHP et MySQL.
Le contenu de ces sites web est dit « dynamique » parce qu'il peut changer
sans l'intervention du webmaster !
A partir de la demande du client, le serveur interroge une base de données,
récupère les données souhaitées, construit la page, la retranscrit en HTML,
puis la renvoie au client..
12
Les architectures d’un site web
dynamique
l'architecture à 2 niveaux
C’est une architecture client/serveur .
Le serveur est polyvalent: il est capable
de fournir directement l'ensemble des
ressources demandées par le client.
l'architecture à 3 niveaux
Niveau 1 qui est le client. Le client est très
légers étant donné qu’il n’a aucun rôle de
traitement.
Niveau 2 nous avons le serveur d’application
Niveau 3 est le serveur de base de donnée.
13
Architecture à 2 niveaux
VS 3 niveaux
Architecture 3 tiers permet de segmenter l'application, pour faciliter entre autre
l'administration, la maintenance et l'évolutivité de l’application.
Exemple: Si demain tu veux passer d'une base Mysql à une base Oracle, tu n'as
logiquement qu'a modifier ta couche accès aux donnés, sans toucher la
couche métier!
L’ architecture 3 tiers offre une flexibilité beaucoup plus importante que
l’architecture 2-tiers. En effet, la portabilité du tiers serveur permet d'envisager une
allocation et ou modification dynamique au grés des besoins évolutifs au sein d'une
entreprise.
14
Des langages web
Front End: désigne la partie qui
prend en charge l'interface d'une
application.
Back End: regroupe la partie gestion,
qui, par rapport à une architecture
trois tiers regroupe la partie métier et
la partie données.
15
Partie 2 :
HTML5
16
HTML: Définition et intérêt
HTML = HyperText Markup Language
Date de création: Crée en 1991
Définition: Langage de balisage
Fonction: Donne un sens au contenu de la page en indiquant au
navigateur les différents éléments existants (ceci est un titre, image,
paragraphe, etc.)
HTML1
HTML2
HTML3
HTML4
HTML5
1991
1994
1996
1998
2011
17
HTML : Exemple de code
Pour qu’une page HTML soit déclarée valide, elle doit obligatoirement
comporter certains éléments et suivre un schéma précis.
Doctype: définit le type du document
html: définit la page html
head: définit les informations générales que la
page a besoin pour fonctionner
title: titre de la page
meta : encodage de la page
body: contenu visible de la page
18
Eléments-balises-attributs
Eléments =
Définissent des objets dans notre page web:
L’ élément p définit une paragraphe,
Les éléments h1,h2,…,h6 définissent des titres,
L’ élément a définit un lien,
Généralement constitués d’une paire de balises:
Balise ouvrante: <p>
Balise fermante: </p>
Exception : balise orphelines comme <br/>
19
Eléments-balises-attributs
Attributs=
Utiliser pour donner des indications supplémentaires aux éléments.
Par exemple: indiquer la cible d’un lien.
<a href=‘http://www.youtube.com’> le site youtube </a>
Balise ouvrante
Balise fermante
<a href=‘http://www.youtube.com’> le site youtube </a>
Attribut
Element a
20
²
Eléments-balises-attributs
Besoin
Elément
Exemple
Titre
h1,h2,h3,h4,h5,h6
<h1> Code html </h1>
Paragraphe
p
<p> Ceci est un paragraphe
</p><p>Ceci est un deuxième
paragraphe</p>
Retour à la ligne
br
Bonjour tout le monde <br/> Je vous
contacte pour ….
Retour à la ligne
avec changement
de thématique
hr
HTML <hr/> CSS
Définir importance
du texte
Strong (important)
Em (relativement
important)
Le cours <strong> HTML </strong> est
<em>important</em>
21
Les listes
Besoin
Code
Output
Liste non ordonnée
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
• HTML
• CSS
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
1. HTML
2. CSS
<ol type=‘’A’’>
<li>HTML</li>
<li>CSS</li>
</ol>
A. HTML
B. CSS
<ol type=‘’i’’>
<li>HTML</li>
<li>CSS</li>
</ol>
i.
ii.
Liste ordonnée
HTML
CSS
22
Les liens
Nous distinguons plusieurs utilisations de liens:
•
Etablir des liens externes <a href="http://wikipedia.org">Lien</a>
•
Etablir des liens internes <a href="../fichier.html">Lien</a>
•
Créer un ancre
<a href="#ancre1">Lien ancre</a>
•
Envoyer un mail
<a href="mailto:foulen@esprit.tn">Mail</a>
•
Télécharger un document <a href="cours.pdf" >Cours</a>
23
Les tableaux
Pour créer un tableau, trois éléments sont obligatoires:
table (tableau): définir le tableau
tr (table row): introduire une ligne dans un tableau
td (table data): ajouter des cellules dans les lignes
24
Partie 3:
Les nouveautés HTML5
25
Les nouveautés dans le code
HTML5
Un allégement du code:
Certaines balises ont été simplifiées afin d’alléger le code.
HTML
HTML5
26
Les nouveautés dans le code
HTML5
Une nouvelle organisation des documents:
<div<header>
id="header">
<div class="article">
<article>
<div
<nav>
id="nav">
<div <section>
id="content">
<div
<aside>
id="right">
<div<footer>
id="footer">
27
Les nouveautés dans le code
HTML5
Nouvelles balises :
Balise
Description
<audio>
Définit un contenu audio
<video>
Définit une vidéo ou un film
<source>
Définit de multiples ressources pour les
médias <video> et <audio>
<embed>
Définit un conteneur pour une application externe
ou un contenu interactif (un plug-in)
<track>
Définit des pistes de texte pour les médias
<video> et <audio>
Insére un sous-titre (au format Web Video Text
Tracks (WebVTT) WebVTT) à une vidéo affichée avec
la balise video
28
Les nouveautés dans le code
HTML5
Nouvelles balises :
Balise
Définition
<embed>
Utilisé pour du contenu externe et interactif ou pour un
plug-in.
<progress>
Pour une barre de progression.
<param>:
Pour paramétrer un objet.
<meter>
Pour les mesures.
<menu>:
Pour une liste de commande.
<details>
Pour apporter des détails sur Widget, il peut être utilisé
pour cacher/afficher des informations complémentaires.
Il peut être le conteneur de la balise
29
Les nouveautés dans le code HTML5
Nouvelles balises :
Balises Vidéo:
Balises Audio:
30
Les nouveautés dans le code HTML5
API HTML 5 :
HTML 5 permet d'utiliser 8 nouvelles API:
une API de dessin 2D utilisé avec la nouvelle balise canvas
une API pour jouer des vidéos et des sons/musiques utilisé avec les
nouvelles balises video et audio
une API utilisée pour les applications hors-lignes
une API d'édition en combinaison avec le nouvel attribut
contenteditable
une API de drag and drop en combinaison avec l'attribut draggable
une API qui permet l'accès à l'historique et permet aux pages d'en
ajouter pour prévenir les problèmes de bouton retour-en-arrière
31
Les nouveautés dans le code HTML5
API HTML 5 :
file API
<input id="file" type="file" />
Géolocalisation:
L’API de Geo-localisation de HTML 5
est utilisée pour déterminer la
position géo-graphique de l’utilisateur.
32
Partie 3:
Les Formulaire HTML5
33
Les formulaires HTML
Les formulaires HTML sont un des vecteurs principaux d'interaction
entre un utilisateur et un site web ou une application.
Ils permettent à l'utilisateur d'envoyer des données au site web.
Un formulaire HTML est composé d'un ou plusieurs items:
Des zones de texte, des boîtes de sélection, des boutons, des
cases à cocher ou des boutons radio.
La plupart du temps, ces items sont associés à un libellé qui décrit
leur rôle.
34
Les formulaires HTML
L'élément <form>
Tous les formulaires HTML débutent par un élément <form> comme
celui-ci :
L'attribut action définit la localisation (une URL) où doivent être
envoyées les données collectées par le formulaire.
L'attribut method définit la méthode HTTP utilisée pour envoyer les
données (cela peut être « get » ou « post »).
35
Les formulaires HTML
L'élément <submit>
Tous
les
formulaires
HTML
se
terminent
par
un
élément <submit> comme celui-ci :
Un clic sur un bouton « submit » envoie les données du formulaire vers
la page définie par l'attribut action de l'élément <form>.
36
Eléments d’un formulaire
Elément
Définition
input
Définit un champ de 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’option dans une liste
option
Définit une option dans une liste
fieldset
Regroupe les éléments d’un formulaire en différentes
parties
legend
Ajoute une légende à un élément fieldset
37
Les formulaires - Exemple
38
Nouveautés : balises formulaire
<input type="text">
search tel mail url date
number range color
...etc
39
Nouveautés : attributs formulaire
required <input type=‘ ….‘ required />
download <a href="filename"
download="newfilename"></a>
Autocomplete <form action="" autocomplete="on">
pattern <input pattern="[A-Za-z0-9]">
Placeholder
min, max, step <input type="number" min="1"
max="100" step="3" />
40
Partie 3:
Les bases en CSS
41
CSS : Définition et intérêt
CSS = Cascading StyleSheets
- Langage de style
- Sert à mettre en forme du contenu
- Permet de modifier la taille d’un texte, ajouter des bordures, une couleurs, etc.
- Versions de CSS:
42
CSS : Définition et intérêt
Les versions CSS:
43
CSS : Exemple de code
44
Les sélecteurs
Pour appliquer un style sur un élément HTML, il faut le sélectionner.
Un sélecteur permet de cibler un ou plusieurs éléments HTML
Il y a deux types de sélecteurs:
Sélecteurs simples.
Sélecteurs complexes.
Syntaxe:
Sélecteur
Déclaration
Propriété
Valeur
Propriété
Valeur
45
Les propriétés
Pour appliquer un style sur un élément HTML, il faut modifier ses
caractéristiques
Les propriétés permettent de choisir les styles à appliquer sur un
élément HTML.
Chaque propriété est accompagnée d’une ou plusieurs valeurs qui vont
définir le comportement de cette propriété.
46
Sélecteurs et propriétés
Les sélecteurs les plus utilisés (communs)
Exemple
Classification
Définition
h1
Sélecteur de type
Sélectionne un élément par son
type (nom)
.redLigne
Sélecteur de classe
Sélectionne un élément par la
valeur d'attribut de classe, qui
peut être réutilisée plusieurs fois
par page
#intro
Sélecteur ID
Sélectionne un élément par la
valeur d'attribut ID, qui est unique
et ne doit être utilisée qu'une fois
par page
47
Sélecteurs et propriétés
Quelle est la différence entre une classe et un id ?
un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes
id dans une page
une classe peut caractériser plusieurs objets (identiques ou non)
Par exemple, il est possible d'avoir ce code :
Mais il n'est pas correct d'avoir ce code :
=> l'id ne doit désigner qu'un seul objet du document.
48
o
Les propriétés
Exemple de propriétés:
Exemple
Définition
Valeur(s) possible(s)
color
Définit une couleur
Red, yellow, Maroon, #800000, …
Background-color
Définit la Couleur de
l’arrière plan
font-size
Définit la taille d’une
police
15px, 25px, 150%,…
font-style
Définit le style de
police d’un texte
Normal, italic, …
width
Définit la largeur
10px, 15px, ….
hight
Définit la hauteur
margin
Définit les marges
haut et bas
Auto, 5px, …..
49
Où écrire le code CSS
•
Ecrire le CSS dans la balise ouvrante des éléments HTML
50
Où écrire le code CSS
•
Ecrire le CSS dans un élément HTML « style »
•
Ecrire le CSS dans un fichier CSS séparé
51
Atelier HTML5/CSS
52
Références
•
•
https://css.developpez.com/tutoriels/utiliser-nouveaux-selecteur-css3/
http://pierre-giraud.com/html-css/cours-complet/selecteursproprietes-css.php
53
0
