Explorer les Livres électroniques
Catégories
Explorer les Livres audio
Catégories
Explorer les Magazines
Catégories
Explorer les Documents
Catégories
Cours HTML Css
Transféré par
Mohamed AyariDescription :
Copyright
Formats disponibles
Partager ce document
Avez-vous trouvé ce document utile ?
Ce contenu est-il inapproprié ?
Signaler ce documentDescription :
Droits d'auteur :
Formats disponibles
Cours HTML Css
Transféré par
Mohamed AyariDescription :
Droits d'auteur :
Formats disponibles
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
![HTML5 CSS3 Mait Standard App Web-[Www.worldmediafiles.com]](https://imgv2-1-f.scribdassets.com/img/document/135699270/149x198/a22741f210/1540548047?v=1)
