Web Statique 01HTML

04/02/2015 Formation en Dveloppement WEB

Formation en Dveloppement WEB

[Le Web Statique] HTML, CSS, et JavaScript


Plan Le WEB statique


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


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.


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


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 :




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



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.




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



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.


Les bases de HTML

Les bases de HTML

HyperText Markup Language


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.


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


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


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


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.



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 :


Les bases de HTML Votre premire page HTML

Ma premiere page HTML

Bonjour tout le monde!


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 :


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 .


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)


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.




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.


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.


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.


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


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.


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

Documents

Web Statique 01HTML