Web Statique 01HTML
description
Transcript of Web Statique 01HTML
-
04/02/2015 Formation en Dveloppement WEB
Formation en Dveloppement WEB
[Le Web Statique] HTML, CSS, et JavaScript
-
04/02/2015 Formation en Dveloppement WEB
Plan Le WEB statique
04/02/2015 Formation en Dveloppement WEB
1-Les bases du WEB
Lhistoire du Web Les bases de HTML Les bases de CSS Les bases de JavaScript
2-Le HTML 5
Vue densemble HTML 5 vs XHTML1.1 Navigation et Support lments et Attributs Les formulaires Audio et Vidos Les canevas
3-Le CSS 3
Vue densemble Les principales proprits de CSS 3 Les prfixes de navigateur Les transitions Les bordures Les arrire-plans multiples
4-jQuery Ecrire moins et faire Plus
Premiers pas avec jQuery Les Slecteurs Le vnements Les Effets Ajax / json La bibliothque jQuery UI
-
04/02/2015 Formation en Dveloppement WEB
Lvolution du Web et de HTML
Lre du Web 1.0(90s) s'est construite autour
d'une forme pyramidale. Les webmasters
rdigent et envoient des informations vers les
internautes sans que ces derniers puissent
rellement interagir avec le site web.
Lre du Web 2.0(2000s) les usagers entrent
dans un mode actif : au fur et mesure de leur
navigation, les utilisateurs ajoutent du contenu,
et contribuent a la richesse des sites web.
Le web de lavenir ou Le web 3.0 est un
concept en pleine volution qui a fait son
apparition dans les annes 2008.
-
04/02/2015 Formation en Dveloppement WEB
Lvolution du Web et de HTML
Le langage HTML1.0 a t dvelopp initialement
par Tim Berners-Lee(1989), Il a rapidement connu un
vif succs grce au navigateur Mosaic.
La spcification HTML 2.0 (RFC 1866 de novembre
1995) a vu le jour sous le contrle de lIETF
(Internet Engineering Task Force)
Le groupe de travail HTML du W3C (World Wide Web
Consortium) diffuse en janvier 1997 la spcification HTML
3.2, qui apporte plusieurs amliorations et modifications
HTML 4, un progrs immense. Ses principales innovations
concernent linternationalisation, laccessibilit, les tableaux, les
documents composs, les feuilles de style, et les scripts.
HTML5 est la dernire rvision majeure d'HTML
disponible depuis 2011, Le W3C vise une finalisation
de la spcification en 2014
-
04/02/2015 Formation en Dveloppement WEB
Fonctionnement du web
Le Protocole HTTP
Le protocole de transfert hypertexte http (HyperText Transfer Protocol), de la
couche application du modle OSI (Open Systems Interconnection), est le
langage commun entre logiciels clients (navigateurs) et serveurs Web.
Il est utilis pour la plupart des transactions du Web : requte d'une ressource,
envoi de donnes d'un formulaire, navigation...
Communication entre navigateur et serveur
La communication entre le navigateur et le serveur se fait en deux temps :
-
04/02/2015 Formation en Dveloppement WEB
Fonctionnement du web
Communication entre navigateur et serveur
Requte du navigateur(Client)
Soit l'URL demande par un utilisateur :
http://www.serveur.ma/. Voyons quoi ressemble
la requte du navigateur au serveur
GET / HTTP/1.1
Accept: image/gif, image/jpeg, */*
Accept-Language: en-US
Accept-encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)
Host: www.serveur.me
Connection: Keep-Alive
-
04/02/2015 Formation en Dveloppement WEB
Fonctionnement du web
Communication entre Client et Serveur GET / HTTP/1.1 Accept: image/gif, image/jpeg, */*
Accept-Language: en-US
Accept-encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)
Host: www.serveur.me
Connection: Keep-Alive
Ligne par ligne, cette requte veut dire :
1. Il s'agit d'une requte GET, associe la version 1.1 du protocole HTTP. Cette requte
permet de rcuprer une ressource. Il en existe d'autres : HEAD (informations sur la
ressources uniquement), POST (on fournit des informations au serveur),... Le slash qui
suit GET indique l'URL absolue de la ressource.
2. Le client peut rcuprer en particulier des images gif et jpeg, mais en fait n'importe
quel autre type MIME (des en-ttes dcrivant le contenu du message en utilisant un
codage */* exemple: text/plain, multipart/mixed).
3. Le langue de prfrence.
4. Le client sait interprter une rponse qui serait compresse avec GZIP.
5. Le navigateur est MSIE 5.01 !
6. Rappelle l'adresse littrale du serveur.
7. La connexion restera ouverte aprs cette requte, jusqu' ce que le client demande de
la clturer.
-
04/02/2015 Formation en Dveloppement WEB
Fonctionnement du web
Communication entre navigateur et serveur
Rponse du serveur
La rponse du serveur sera par exemple la
suivante :
HTTP/1.1 200 OK
Date: Sun, 14 Apr 2004 09:30:12 GMT
Server: Apache-/1.3.6 (Unix)
Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT
ETag: "57d44-122-3cb64bfc"
Accept-Ranges: bytes
Content-Length: 278
Connection: Close
Content-Type: text/html
-
04/02/2015 Formation en Dveloppement WEB
Fonctionnement du web
Communication entre navigateur et serveur HTTP/1.1 200 OK
Date: Sun, 14 Apr 2004 09:30:12 GMT
Server: Apache-/1.3.6 (Unix)
Last-Modified: Sun, 14 Oct 2003 09:29:32 GMT
ETag: "57d44-122-3cb64bfc"
Accept-Ranges: bytes
Content-Length: 278
Connection: Close
Content-Type: text/html Ligne par ligne, cette requte veut dire :
1. Le serveur rpond lui aussi en HTTP 1.1, avec un message OK, associ au code 200.
404 Not Found; il y en a d'autres : 302 Moved Temporarily, 401 Unauthorized, 500
Server error,...
2. La date actuelle du serveur par rapport l'heure de Greenwich (GMT).
3. Le logiciel serveur est Apache 1.3.6 sous Unix.
4. La date de dernire modification de document.
5. Un tag d'entit, c'est un numro unique qui identifie la ressource sur le serveur, et
est aussi utilis pour exploiter des donnes en cache.
6. Le serveur peut renvoyer des contenus binaires.
7. La taille en octets du document HTML qui suit...
8. La connexion sera ferme aprs l'envoi des donnes.
9. un document de type MIME text/html, donc un fichier HTML qui est envoy.
10. Enfin, le code HTML.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML
Les bases de HTML
HyperText Markup Language
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Introduction
Le langage HTML (HyperText Markup Language) est un langage de balisage (dit aussi
langage de marquage), dvelopp initialement par Tim Berners-Lee il permet de
structurer le contenu des pages web dans diffrents lments (en-ttes, paragraphes,
listes, liens hypertextes, etc..).
Il peut tre cr et trait par de nombreux outils, depuis des diteurs de texte simples
jusqu des outils ddis sophistiqus WYSIWYG (What You See Is What You Get).
En HTML, chaque lment doit tre renferm dans un lment.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Les lments et attributs
En HTML, chaque lment un nom dtermin et la liste des lments utilisables est
limitative et clairement dfinie dans la DTD (Document Type Definition) lie la version
utilise du langage.
quelques exceptions prs, un lment HTML a la structure suivante :
Contenu
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Les lments et attributs
Les caractristiques de chaque lment peuvent tre prcises par des informations
complmentaires que lon dsigne en tant quattributs de llment.
Les attributs dun lment sont toujours dfinis dans la balise douverture et doivent tre
spars les uns des autres par au moins une espace, Chaque attribut doit avoir une valeur.
La prsence de certains attributs est obligatoire dans quelques lments particuliers.
La syntaxe conforme dun lment ayant des attributs est donc la suivante : Contenu
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Les attributs de base
Dans leur quasi-totalit, les lments disponibles en HTML ont en commun un ensemble
dattributs ayant chacun le mme rle. Ces attributs se rpartissent en trois catgories.
Les attributs courants (noyau): id, class, title, style Ils sappliquent quasiment tous les lments
Les attributs dinternationalisation: lang, dir Il permet de dcrire la langue et le sens de lecture du contenu
Les attributs de gestion dvnements: Ces attributs permettent de grer les vnements dont un lment peut tre le sige et qui sont crs par lutilisateur. Leur contenu est un script
cot client
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Structure gnrale dun document HTML
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Structure gnrale dun document HTML
Nous retrouvons bien dans cet exemple la structure arborescente dun document
HTML valide.
Llment racine, au sens XML du terme, est , et il inclut les lments
et . Llment contient llment , qui est obligatoire, et
llment , qui ne doit pas tre vide (ce qui est vident). Du point de vue
hirarchique, est bien le parent ou lanctre de tous les autres.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML - Structure gnrale dun document HTML
Llment racine
Cest llment qui est llment racine du document, au sens XML du terme.
Cest donc lui qui est le parent de tous les autres lments
Len-tte dun document : llment
Llment englobe un certain nombre dinformations utiles au bon affichage de
la page web. Ces informations sont contenues dans six lments diffrents qui ont
chacun un rle bien dtermin. Il sagit des lments , , , ,
et
Le corps du document : llment
Llment est le conteneur de lensemble des lments textuels et graphiques
dune page web.
Les commentaires
Comme tout code informatique dailleurs, pour en permettre une meilleure
comprhension, en particulier quand on souhaite le relire un certain temps aprs lavoir
crit. Exemple :
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Votre premire page HTML
Ma premiere page HTML
Bonjour tout le monde!
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Les titres
Niveaux de titre
Le langage HTML dfinit 6 niveaux de titre (en anglais heading), afin de dfinir une
structuration hirarchique des paragraphes dans un texte :
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Paragraphes
Paragraphes
Le langage HTML considre les paragraphes comme des blocs de texte. Les navigateurs
rpartissent au mieux leur contenu dans la fentre.
Espaces
A l'intrieur d'un paragraphe, les espaces, tabulations comptent pour un seul espace.
La mise en page par blocs de texte est ralise par l'intermdiaire de la paire de balises
et . Cette balise accepte n'importe lequel des attributs vus prcdemment.
Retour chariot
Le retour chariot (retour la ligne simple) est ralis grce la balise.
On peut aussi insrer une ligne horizontale grce la balise .
-
04/02/2015 Formation en Dveloppement WEB
Une liste est un paragraphe structur contenant une suite d'articles. Le langage HTML
dfinit trois types de listes :
La liste non ordonne ;
La liste ordonne ;
La liste de dfinition.
Liste simple non ordonne
Une liste doit tre encadre par le conteneur UL et chaque item doit tre introduit par la
balise LI. Le conteneur provoque une tabulation.
Syntaxe :
item n1
item n2
item n3
Par dfaut, les puces d'une liste non ordonne sont
des disques pleins. On peut les modifier avec
l'attribut TYPE qui peux prendre les valeurs : square
(carr plein), circle (cercle), disc (rond plein).
Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)
-
04/02/2015 Formation en Dveloppement WEB
Syntaxe :
item n1
item n2
item n3
Liste ordonne
Une liste ordonne doit tre encadre par le conteneur OL et chaque item doit tre
introduit par la balise LI.
La numrotation est par dfaut les chiffres arables. On peut en changer avec l'attribut
TYPE qui peut prendre les valeurs suivantes : [1,a,A,i,I].
La numrotation d'une liste ordonne commence par dfaut par le premier lment du
type de la numrotation choisie. Mais on peut contraindre la numrotation commencer
au ime lment grce l'attribut START.
Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Les Liste s(UL LI - OL LI - DL DT DD)
Syntaxe :
terme n1
dfinition n1
dfinition n2
terme n2
dfinition n1
Liste de termes avec dfinitions
Une telle liste est encadre par le conteneur DL et contient une liste de termes spcifis
par la balise DT. Un terme ayant lui-mme une liste de dfinitions chacune introduite par la
balise DD.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Les images
On insert une image dans une page HTML avec la balise dont les attributs sont
NAME : le nom de l'image (ncessaire pour le JavaScript) SRC : l'adresse (relative ou
absolue) de l'image, WIDTH : sa largeur en pixels ou en pourcentage, HEIGHT : sa hauteur
en pixels ou en pourcentage, BORDER : son ventuelle bordure en pixels (=2 par dfaut
lors d'un lien, sinon 0), ALT : un commentaire plac dans le cadre en attendant son
chargement et constitutif d'une bulle lors du passage de la souris, ALIGN : alignement,
HSPACE : marge horizontale entre l'image et les autres lments (texte, image...) en pixels,
VSPACE : marge verticale en pixels.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Liens hyper-texte
Un lien hyper-texte : C'est un lment graphique ou textuel d'une page web qui sous
l'action d'un clic de souris commande le chargement d'une autre page dans le navigateur.
La balise de base
La balise qui a pour attributs HREF : l'adresse de destination et TARGET : le cadre de
destination (facultatif). Les lments situs l'intrieur (texte, images) renverront vers une
page sous l'action d'un clic. De plus, lorsque la souris survole un lien, son apparence change
d'une flche a une main.
Syntaxe : Texte_ou_image__cliquer
Les liens internes
Lorsqu'on dsire crer une page volumineuse, il est prfrable d'insrer un menu avec des
liens hyper-texte internes la page (comme pour cette page). Pour cela on utilise la mme
balise mais cette fois l'adresse de destination est un mots cl prcd du signe musical
dise #. Et il faudra, au sein de la page insrer une balise marqueur dont l'identifiant sera ce
mot cl pour qu'un clic de souris sur le lien se dirige vers ce marqueur.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Les tableaux
En premier lieu pour mettre en forme des tableaux de donnes mais aussi et surtout pour
mettre en page son propre site web. En effet, on a tous eu besoin d'crire du texte sur
plusieurs colonnes, d'aligner des paragraphes avec des images... En HTML, la balise
permet de faire de la vritable mise en page. Mais avec l'apparition des blocs
DIV et des feuilles de styles, on peut dsormais s'en passer.
une seule cellule
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML Les cadres
Pourquoi les cadres ?
Un site qui retient l'attention c'est un site sur lequel il est trs ais de naviguer et de
prendre des repres. Il faut donc que l'internaute soit capable de se dplacer rapidement
de page en page et de revenir plus tard trs facilement au mme endroit. Pour cela, il est
ncessaire d'offrir des menus efficace qui puissent permettre vos visiteurs de se balader
sur vos pages. La technique la plus utilise pour cela, et la plus simple : c'est les cadres.
Qu'est-ce qu'un cadre ?
Un cadre est une zone de la fentre associe un fichier HTML. On utilise au minimum
deux cadres dans une fentre, l'un associ au menu et l'autre aux documents.
-
04/02/2015 Formation en Dveloppement WEB
Les bases de HTML TP Ralisation dun CV
Travail a faire:
Ralisation dun CV sous forme dune page WEB, avec un Index des lments constituant le
CV.
Elments constituant le CV:
Menu (index) Informations personnelles avec photo Formation Expriences professionnelles