Vous êtes sur la page 1sur 52

Cours:

HTML et CSS

2017-2018
Plan
Introduction au Web 2.0

Les bases en HTML

Nouveauts 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
dbut conu pour ne lire que les hyperdocuments, le navigateur
intgre aujourd'hui tous les services de l'Internet (e-mail, ftp,...)
Le navigateur dsigne par une adresse URL (Uniform Resource
Locator) les adresses compltes de l'Internet.

4
Hyperdocument
Un hyperdocument est un document lectronique contenant des images, du
vido, du texte, parfois des petits morceaux de programme, mais surtout des
liens vers d'autres hyperdocuments : des liens hypertextes.

UP WEB ESPRIT
5
Cest quoi le web?
Mis au point par Tim Berners-Lee (CERN) entre 1989 et 1991

Le Web est un systme 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 rle du client.

Les ordinateurs distants sur lesquels sont hbergs les sites web
sont des serveurs.

6
Diffrence entre le web et internet
Internet est un rseau informatique mondial de transport de
donnes constitu d'un ensemble de rseaux nationaux,
rgionaux et privs.
Il permet de transporter un paquet de donnes d'un ordinateur
A un ordinateur B.

Internet englobe
le web, email,
messagerie instantane..

7
Historique et volution du web

9
Dfinition dun site web

Un site web est un ensemble de pages


organises en structure hirarchique, 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
Requte HTTP:
Bonjour, je voudrais le document
http://www.site.com/document.html (URL)

TCP/IP

Rponse HTTP:
<!HTML>
<html>.</html>
Client Serveur http

11
Les sites web statiques VS dynamiques
Les sites web statiques :
Ce sont des sites raliss uniquement l'aide des langages HTML et CSS.
Ne peut pas tre mis jour automatiquement : il faut que le propritaire du
site (le webmaster) modifie le code source pour y ajouter des nouveauts.
Les sites statiques sont donc bien adapts pour raliser 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 donnes,
rcupre les donnes souhaites, construit la page, la retranscrit en HTML,
puis la renvoie au client..

12
Les architectures dun site web
dynamique
l'architecture 2 niveaux
l'architecture 3 niveaux

Cest une architecture client/serveur . Niveau 1 qui est le client. Le client est trs
Le serveur est polyvalent: il est capable lgers tant donn quil na aucun rle de
de fournir directement l'ensemble des traitement.
ressources demandes par le client. Niveau 2 nous avons le serveur dapplication
Niveau 3 est le serveur de base de donne.

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 lapplication.

Exemple: Si demain tu veux passer d'une base Mysql une base Oracle, tu n'as
logiquement qu'a modifier ta couche accs aux donns, sans toucher la
couche mtier!

L architecture 3 tiers offre une flexibilit beaucoup plus importante que


larchitecture 2-tiers. En effet, la portabilit du tiers serveur permet d'envisager une
allocation et ou modification dynamique au grs des besoins volutifs au sein d'une
entreprise.

14
Des langages web

Front End: dsigne 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 mtier et
la partie donnes.

15
Partie 2 :

HTML5

16
HTML: Dfinition et intrt
HTML = HyperText Markup Language
Date de cration: Cre en 1991
Dfinition: Langage de balisage
Fonction: Donne un sens au contenu de la page en indiquant au
navigateur les diffrents lments existants (ceci est un titre, image,
paragraphe, etc.)

HTML1 HTML2 HTML3 HTML4 HTML5

1991 1994 1996 1998 2011

17
HTML : Exemple de code
Pour quune page HTML soit dclare valide, elle doit obligatoirement
comporter certains lments et suivre un schma prcis.

Doctype: dfinit le type du document


html: dfinit la page html
head: dfinit les informations gnrales que la
page a besoin pour fonctionner
title: titre de la page
meta : encodage de la page
body: contenu visible de la page
18
Elments-balises-attributs
Elments =
Dfinissent des objets dans notre page web:
L lment p dfinit une paragraphe,
Les lments h1,h2,,h6 dfinissent des titres,
L lment a dfinit un lien,
Gnralement constitus dune paire de balises:
Balise ouvrante: <p>
Balise fermante: </p>
Exception : balise orphelines comme <br/>

19
Elments-balises-attributs
Attributs=
Utiliser pour donner des indications supplmentaires aux lments.
Par exemple: indiquer la cible dun 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

Elments-balises-attributs
Besoin Elment Exemple
Titre h1,h2,h3,h4,h5,h6 <h1> Code html </h1>
Paragraphe p <p> Ceci est un paragraphe
</p><p>Ceci est un deuxime
paragraphe</p>
Retour la ligne br Bonjour tout le monde <br/> Je vous
contacte pour .
Retour la ligne hr HTML <hr/> CSS
avec changement
de thmatique

Dfinir importance Strong (important) Le cours <strong> HTML </strong> est


du texte Em (relativement <em>important</em>
important)

21
Les listes
Besoin Code Output
Liste non ordonne <ul> HTML
<li>HTML</li> CSS
<li>CSS</li>
</ul>
<ol> 1. HTML
<li>HTML</li> 2. CSS
<li>CSS</li>
</ol>
<ol type=A> A. HTML
<li>HTML</li> B. CSS
Liste ordonne <li>CSS</li>
</ol>
<ol type=i> i. HTML
<li>HTML</li> ii. CSS
<li>CSS</li>
</ol> 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>
Crer un ancre <a href="#ancre1">Lien ancre</a>
Envoyer un mail <a href="mailto:foulen@esprit.tn">Mail</a>
Tlcharger un document <a href="cours.pdf" >Cours</a>

23
Les tableaux
Pour crer un tableau, trois lments sont obligatoires:
table (tableau): dfinir le tableau
tr (table row): introduire une ligne dans un tableau
td (table data): ajouter des cellules dans les lignes

24
Partie 3:

Les nouveauts HTML5

25
Les nouveauts dans le code
HTML5
Un allgement du code:
Certaines balises ont t simplifies afin dallger le code.

HTML

HTML5

26
Les nouveauts dans le code
HTML5
Une nouvelle organisation des documents:

<div<header>
id="header">

<div class="article">
<article>

<div <div
<nav> <div <section>
id="content"> <aside>
id="nav"> id="right">

<div<footer>
id="footer">

27
Les nouveauts dans le code
HTML5
Nouvelles balises :

Balise Description
<audio> Dfinit un contenu audio
<video> Dfinit une vido ou un film
Dfinit de multiples ressources pour les
<source>
mdias <video> et <audio>
Dfinit un conteneur pour une application externe
<embed>
ou un contenu interactif (un plug-in)
Dfinit des pistes de texte pour les mdias
<video> et <audio>
<track> Insre un sous-titre (au format Web Video Text
Tracks (WebVTT) WebVTT) une vido affiche avec
la balise video
28
Les nouveauts dans le code
HTML5
Nouvelles balises :
Balise Dfinition
<embed> Utilis pour du contenu externe et interactif ou pour un
plug-in.

<progress> Pour une barre de progression.

<param>: Pour paramtrer un objet.

<meter> Pour les mesures.


<menu>: Pour une liste de commande.
<details> Pour apporter des dtails sur Widget, il peut tre utilis
pour cacher/afficher des informations complmentaires.
Il peut tre le conteneur de la balise

29
Les nouveauts dans le code HTML5
Nouvelles balises :
Balises Vido:

Balises Audio:

30
Les nouveauts 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 vidos et des sons/musiques utilis avec les
nouvelles balises video et audio
une API utilise 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'accs l'historique et permet aux pages d'en
ajouter pour prvenir les problmes de bouton retour-en-arrire
31
Les nouveauts dans le code HTML5

API HTML 5 :
file API
<input id="file" type="file" />

Golocalisation:
LAPI de Geo-localisation de HTML 5
est utilise pour dterminer la
position go-graphique de lutilisateur.

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 donnes au site web.
Un formulaire HTML est compos d'un ou plusieurs items:
Des zones de texte, des botes de slection, des boutons, des
cases cocher ou des boutons radio.
La plupart du temps, ces items sont associs un libell qui dcrit
leur rle.

34
Les formulaires HTML
L'lment <form>
Tous les formulaires HTML dbutent par un lment <form> comme
celui-ci :

L'attribut action dfinit la localisation (une URL) o doivent tre


envoyes les donnes collectes par le formulaire.
L'attribut method dfinit la mthode HTTP utilise pour envoyer les
donnes (cela peut tre get ou post ).

35
Les formulaires HTML
L'lment <submit>
Tous les formulaires HTML se terminent par un
lment <submit> comme celui-ci :

Un clic sur un bouton submit envoie les donnes du formulaire vers


la page dfinie par l'attribut action de l'lment <form>.

36
Elments dun formulaire
Elment Dfinition
input Dfinit un champ de donnes pour lutilisateur
label Dfinit une lgende pour un lment input
textarea Dfinit un champ de texte long
select Dfinit une liste de choix
optgroup Dfinit un groupe doption dans une liste
option Dfinit une option dans une liste
fieldset Regroupe les lments dun formulaire en diffrentes
parties
legend Ajoute une lgende un lment fieldset

37
Les formulaires - Exemple

38
Nouveauts : balises formulaire

<input type="text">

search tel mail url date


number range color
...etc

39
Nouveauts : 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 : Dfinition et intrt
CSS = Cascading StyleSheets

- Langage de style
- Sert mettre en forme du contenu
- Permet de modifier la taille dun texte, ajouter des bordures, une couleurs, etc.
- Versions de CSS:

42
CSS : Dfinition et intrt
Les versions CSS:

43
CSS : Exemple de code

44
Les slecteurs
Pour appliquer un style sur un lment HTML, il faut le slectionner.
Un slecteur permet de cibler un ou plusieurs lments HTML
Il y a deux types de slecteurs:
Slecteurs simples.
Slecteurs complexes.
Syntaxe:

Slecteur Dclaration

Proprit Valeur Proprit Valeur

45
Les proprits
Pour appliquer un style sur un lment HTML, il faut modifier ses
caractristiques
Les proprits permettent de choisir les styles appliquer sur un
lment HTML.
Chaque proprit est accompagne dune ou plusieurs valeurs qui vont
dfinir le comportement de cette proprit.

46
Slecteurs et proprits
Les slecteurs les plus utiliss (communs)

Exemple Classification Dfinition


h1 Slecteur de type Slectionne un lment par son
type (nom)
.redLigne Slecteur de classe Slectionne un lment par la
valeur d'attribut de classe, qui
peut tre rutilise plusieurs fois
par page
#intro Slecteur ID Slectionne un lment par la
valeur d'attribut ID, qui est unique
et ne doit tre utilise qu'une fois
par page

47
Slecteurs et proprits
Quelle est la diffrence entre une classe et un id ?
un id s'applique un objet unique : il ne peut pas y avoir deux mmes
id dans une page
une classe peut caractriser 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 dsigner qu'un seul objet du document.

48
o
Les proprits
Exemple de proprits:

Exemple Dfinition Valeur(s) possible(s)


color Dfinit une couleur Red, yellow, Maroon, #800000,
Background-color Dfinit la Couleur de
larrire plan
font-size Dfinit la taille dune 15px, 25px, 150%,
police
font-style Dfinit le style de Normal, italic,
police dun texte
width Dfinit la largeur 10px, 15px, .

hight Dfinit la hauteur


margin Dfinit les marges Auto, 5px, ..
haut et bas 49
O crire le code CSS
Ecrire le CSS dans la balise ouvrante des lments HTML

50
O crire le code CSS
Ecrire le CSS dans un lment HTML style

Ecrire le CSS dans un fichier CSS spar

51
Atelier HTML5/CSS

52
Rfrences

https://css.developpez.com/tutoriels/utiliser-nouveaux-selecteur-css-
3/
http://pierre-giraud.com/html-css/cours-complet/selecteurs-
proprietes-css.php

53

Vous aimerez peut-être aussi