WEB1 : WEB : Principes de base�Introduction

EPFC-ULB

2015-2016 EPFC-ULB 1

Objectifs du cours

•  Concevoir, implémenter et déployer un site web statique en utilisant les technologies HTML5 et CSS3.

2015-2016 EPFC-ULB 2

Tous les intitulés correspondent à des unités d’enseignement capitalisables qui comprennent parfois plusieurs cours. L’admission à l’épreuve intégrée et donc l’obtention du diplôme sont soumises à la réussite de toutes ces unités d’enseignement.

EPREUVE INTEGREE DU BACHELIER EN INFORMATIQUE DE GESTION 120 p

20 ECTS

UE déterminantes p = période (50 minutes de cours) ECTS = crédits : signale la / les UE à réussir pour être admis dans une autre UE

Initiation aux bases de données

60 p 5 ECTS

UE = unités d’enseignement, précédemment appelées unités de formation.

Mathématique appliquée à

l’informatique

60 p 5 ECTS

Eléments de statistique

40 p 3 ECTS

Information et communication professionnelles

40 p

3 ECTS

Anglais en situation dans l’ens. supérieur

UE2

80 p 7 ECTS

Bases des réseaux

80 p 6 ECTS

Administration, gestion et sécurisation des

réseaux

100 p 8 ECTS

Principes d’analyse informatique

60 p 4 ECTS

Gestion et exploitation de bases de données

60 p 5 ECTS

Techniques de gestion de projets

40 p 3 ECTS

Projet d’analyse et de conception

100 p 10 ECTS

Principes algorithmiques et programmation

120 p

8 ECTS

Web : principes de base

40 p 3 ECTS

Structure des ordinateurs

60 p 5 ECTS

Programmation orientée objet

120 p 9 ECTS

Projet de développement Web

100 p 10 ECTS

Système d’exploitation

100 p 8 ECTS

Organisation des entreprises et éléments de management

40 p 4 ECTS

Notions de e-business

80 p 7 ECTS

Produits logiciels de gestion intégrés

120 p

9 ECTS

Veille technologique

40 p 4 ECTS

Stage d’intégration professionnelle

120 p

5 ECTS

Activité professionnelle de formation

240 p

12 ECTS

Projet de développement SGBD

80 p 8 ECTS

Projet d’intégration de développement

60 p 9 ECTS

Sitewebsta*que

Sitewebdynamique

Sitewebdynamique(et/ouapplica*on)

avecbasededonnées

Structure du cours

•  Introduction à l'architecture d'un site web

•  Introduction à HTML5 : concevoir une page web–  Langage à balises–  Structure d'un document HTML–  Balises HTML5

•  Introduction à CSS3 : présenter une page web–  Feuilles de styles–  Propriétés et sélecteurs–  Positionnement

2015-2016 EPFC-ULB 3

Evaluation

•  Evaluation continue (TJ) :–  Interros

•  Evaluation sommative (Examen) : –  Examen de labo : exercices à cours ouvert sur machine.–  Accès à la documentation mais pas à Internet.

•  Cote finale : –  Si ( TJ < Examen )

•  Examen–  Sinon

•  TJ * 1/3 + Examen * 2/3

2015-2016 EPFC-ULB 4

Références

2015-2016 EPFC-ULB 5

A"en%on,tousleslivresetressourceswebnesevallentpasetcertainscon%ennentbeaucoupd'erreurs…

Documenta*onenligne/horsligne:h?p://devdocs.io/

Architecture d'un site web

2015-2016 EPFC-ULB 6

Web ?

Web <> Internet :Internet : le réseau des réseauxWeb : une application d'Internet, ensemble de pages liées entre elles.

•  Concept du World Wide Web (WWW) développé dans les années 80 par Tim Berners-Lee (CERN).

•  Technologies à l'origine du Web : –  Concept de page web : contenu textuel.–  URL (Uniform Resource Locator) : adresse unique pour chaque page.–  Protocole HTTP : interroger un serveur pour obtenir son contenu (page,

ressources).–  Liens hypertextes : lier une page vers une autre (toile, net).

2015-2016 EPFC-ULB 7

Fonctionnement d'un site statique

•  Un site statique est un site qui ne change que si son webmaster en modifie les pages à la main. Il ne possède aucun automatisme de modification de page du côté du serveur.

•  Le client, un navigateur web, envoie une requête HTTP à un serveur web pour obtenir une page web via son URL.

•  Le serveur web va chercher la page web correspondante (un fichier au format HTML) et le renvoie au navigateur via une réponse HTTP.

•  Ensuite, le navigateur traduit, formatte et affiche la page HTML reçue.

2015-2016 EPFC-ULB 8

Protocole HTTP

•  Hypertext Transfer Protocol

•  Protocole permettant au navigateur de communiquer avec le serveur web.

•  Exemple de requête HTTP GET : obtenir une ressource–  GET /index.html HTTP/1.1 –  Host : www.epfc.eu

•  Exemple de réponse HTTP 200 (la ressource existe et est renvoyée)–  HTTP/1.1 200 OK

Date : … Server : …

–  Last Modified : … –  Content length : … –  Content type: text/html –  <html> … </html>

•  Nous étudierons ce protocole en détail plus tard.

2015-2016 EPFC-ULB 9

entête

corps(contenu)Quidd'uneréponse404?Etd'uneréponse500?

URL : Adresse d'une ressource

•  Uniform Resource Locator

•  Protocole : –  HTTP pour les pages web. Il en existe d'autres : smb://, telnet://, ssh:// …

•  Nom de domaine (ou adresse IP) : –  Identifie le serveur web sur lequel est hébergé le site

•  Chemin : –  "Emplacement" de la ressource au sein du serveur web.

2015-2016 EPFC-ULB 10

Serveur web

•  "Serveur web" peut distinguer deux choses : –  L'ordinateur physique sur lequel est hébergé le site web.–  Le programme qui tourne en fond sur cet ordinateur et qui a pour mission

d'intercepter les requêtes HTTP et d'y donner suite. Par exemple : Apache, Microsoft IIS.

•  L'ordinateur physique peut offrir plusieurs "services" : serveur web, serveur de mail, serveur de bases de données… D'où la distinction.

•  On verra également que le même ordinateur peut faire office de serveur et de client (à l'aide d'un logiciel navigateur web). Dans certains laboratoires, vous utiliserez un logiciel serveur web installé sur votre poste de travail : celui-ci sera donc à la fois serveur et client.

2015-2016 EPFC-ULB 11

Page web dynamique (2ième année)

•  Une page est dite dynamique dès que son contenu est calculé à la volée.

•  Pour répondre à une requête HTTP, le serveur web doit construire une page web sur base d'autres informations, par exemple le contenu d'une base de données.

•  Il consulte donc la base de données afin de générer du code HTML en fonction (par exemple, les derniers tweets d'une personne).

•  Cela peut se faire via des langages de programmation comme PHP, Java, Python, …

2015-2016 EPFC-ULB 12

Envoyer de l'information à une page web

•  Le protocole HTTP prévoit au moins deux façons pour le client (navigateur) d'envoyer des données à une page web : les requêtes GET et les requêtes POST (voir plus loin).

•  http://www.google.be/search?q=EPFC&hl=nl

•  Par exemple, si l'on envoie une requête GET à l'aide de l'URL ci-dessus, on récupère la page search de www.google.be en lui envoyant deux paramètres : –  q qui vaut "EPFC"–  hl qui vaut "nl"

•  Dans ce cas, si la page est dynamique, le serveur web peut construire son code HTML en fonction de ces paramètres.

•  Syntaxe : �www.domaine.be/pageweb?nom_param1=valeur&nom_param2=valeur

2015-2016 EPFC-ULB 13

Technologies (site web statique)

•  HTML 5 : –  Langage permettant de décrire le contenu d'une page web (texte, titres,

sémantique, …) : le fond.

•  CSS 3 : –  Langage permettant de formatter une page web (organisation, couleurs, rendus,

…) : la forme.

•  JavaScript (voir cours de 2ième année) : –  Langage permettant au navigateur (client) d'effectuer de petites actions

"dynamiques". Exemples : vérifier qu'un champ possède au moins 8 caractères, sinon l'afficher en rouge, faire apparaître un menu quand on survole une image, … : dynamique côté client, statique (et/ou dynamique) côté serveur

–  jQuery est un framework (une boite à outils) écrit en JavaScript.

2015-2016 EPFC-ULB 14

Introduction au langage HTML 5

2015-2016 EPFC-ULB 15

Cette première introduction ne se veut pas exhaustive.Seul un sous ensemble restreint est présenté : soyez patients J

Danscecours,nousessa

yonsdevousenseigner

lesdernièrestechnologi

eset

bonnespra%ques.

Nousnous

intéresseronsauxancien

nesplustard…

HyperText Markup Language

•  Langage : –  Il obéit à des règles d'écriture et à une sémantique bien précises.

•  Markup : –  Signifie "balise". Ce langage est construit à l'aide de balises qui délimitent et

structurent l'information.

•  HyperText : –  La navigation est interactive via l'insertion dans chaque page de liens vers

d'autres pages : les liens hypertextes.

•  Pour rappel, HTML sert uniquement (ou devrait uniquement servir) à écrire le fond, le contenu, d'une page web. CSS s'occupera de la présentation.

2015-2016 EPFC-ULB 16

Le concept de "balises"

•  Les documents HTML sont construits à l'aide de balises, que l'on nomme tag ou markups en anglais. Ces éléments (balises + contenu) se distinguent facilement du contenu réel d'une page (finalement, juste du texte et des médias). Ces balises permettent d'annoter le contenu et de lui donner une sémantique (un sens).

•  Exemple : –  <title>Ma collection de verres à bière</title>

•  On voit que les balises englobent du contenu pour lui donner un sens : ici, le contenu "Ma collection de verres à bière" est un titre et pourra s'afficher comme un titre.

2015-2016 EPFC-ULB 17

baliseouvrante balisefermanteRemarquezle"/"

Balises imbriquées

•  Les balises HTML peuvent être imbriquées pour indiquer qu'un élément se trouve dans un autre.

•  Exemple d'une page qui contient un article composé de plusieurs sections :

–  <article> •  La Gaume, une belle région. •  <section>

–  Introduction –  …

•  </section> •  <section>

–  Historique –  …

•  </section> –  </article>

2015-2016 EPFC-ULB 18

Page

Ar*cle

Sec*on Sec*on

con%ent

con%entcon%ent

Balises imbriquées

•  Attention, les éléments ne peuvent jamais se chevaucher.

•  Le code suivant est faux :

–  <article> •  La Gaume, une belle région. •  <section>

–  Introduction –  …

–  </article> –  …

</section>

2015-2016 EPFC-ULB 19

Erreur:ilfautrefermerlabalisesec*onavantderefermerar*cle.

Balises et attributs

•  Les balises peuvent être enrichies d'informations divers par l'ajout d'attributs.

•  Les attribus se placent dans les balises.

•  La valeur de l'attribut, entourée (ou non) de guillemets, est séparée du nom de l'attribut par le signe égal (=).

•  Exemple : l'attribut "lang" :

–  <article lang="fr"> •  Bonjour

–  </article> –  <article lang="en">

•  Hello –  </article>

2015-2016 EPFC-ULB 20

Tous les attributs possibles sont définis dans le standard HTML et vous ne pouvez pas, à priori, en inventer d'autres.

Ce langage à balises se base (en partie) sur un (méta-)langage à balises : XML.

Structure d'un document HTML

Un document HTML5 devrait toujours commencer toujours par la ligne suivante :

<!DOCTYPE html>

Ensuite, se contruit le document HTML proprement dit, qui commence toujours par une balise racine html englobant tout le reste du document. <!DOCTYPE html>

<html lang="fr">

<head> </head>

<body> </body>

</html>

2015-2016 EPFC-ULB 21

contenudel'entête(encodage,%tre,auteur,date,…)

contenududocument(corpsdudocument)

Exemple (plus) complet

2015-2016 EPFC-ULB 22

Fichier .html�écrit dans un �éditeur de texte�et ouvert dansun navigateur.

*tre

corps

2015-2016 EPFC-ULB 23

?

Encodage d'une pageQue se passe-t-il si l'on omet la balise <meta charset="utf-8"/> ?

2015-2016 EPFC-ULB 24

Remarquez que les accents sont détruits…��L'encodage permet au navigateur de savoir dans quel format a été encodé le fichier pour pouvoir le décoder. En informatique, une lettre est représentée par un nombre, son indice et il existe plusieurs représentations différentes : UTF-8, le plus standard, ISO8859-1, … Dans l'un, la lettre "è" pourrait (fictivement) valoir 277 et, dans l'autre, valoir 321. �Plus de détails dans le cours STO3.

Quelques premiers éléments de structuration HTML

•  La balise <p> représente un paragraphe de texte.

•  La balise <article> représente un article, c'est à dire un morceau de contenu de la page web qui peut-être lu séparément du reste. Un article contiendra généralement plusieurs paragraphes…

•  La balise <section> permet de regrouper des articles de forme ou de contenu similaire (les articles qui parlent de faits divers par exemple) ou de diviser un article en plusieurs morceaux (introduction, conclusion, …).

•  Les balises <h1>, <h2>, <h3>, … représentent des titres de niveaux différents. Un document aura généralement un seul titre de niveau un, ensuite plusieurs titres de niveau 2, chacun comportant des titres de niveau 3, et ainsi de suite. A ce stade, rien n'est précisé sur l'aspect graphique de ces différents titres : HTML se limite à constater que plusieurs niveaux de titres peuvent coexister.

2015-2016 EPFC-ULB 25

Exemple complet

2015-2016 EPFC-ULB 26

Les commentaires HTML

•  On peut introduire des commentaires dans du code HTML de la façon suivante :

•  <!–- This is a comment -->

•  <!–- Un commentaire peut faire plusieurs •  lignes et même englober du code •  html qui ne sera pas interprété par •  le navigateur. •  <p>Un paragraphe par exemple</p> •  -->

•  Attention, les commentaires HTML font partie du code source et donc sont lisibles par les "clients" s'ils consultent le code source de la page web.

2015-2016 EPFC-ULB 27

Les liens hypertextes

•  Un lien hypertexte permet de lier des documents (ou des parties de documents) HTML ensemble.

•  Syntaxe :–  <a href="url">texte du lien</a>

•  Exemple : –  <a href="http://www.epfc.eu">Mon école</a>

•  Lien local (vers une autre page hébergée sur le même serveur) : –  <a href="biographie.html">Ma biographie</a> –  Remarquez que l'on utilise ici un URL relatif et non pas un URL absolu.–  Voir cours de SYS3.

2015-2016 EPFC-ULB 28

Les ancres

•  Il est possible de créer un lien vers un certain endroit d'une page HTML que l'on appelle "ancre".

•  Définir une ancre (ici pour une balise article mais fonctionne avec tout élément) : –  <article id="unCertainEndroit"></article>

•  Attention, un ID doit être unique au sein d’un document HTML.

•  Lien vers une ancre de la même page :–  <a href="#unCertainEndroit">Lien vers un certain endroit</a>

•  Lien vers une ancre d'une autre page : –  <a href="unepage.html#unEndroit">Cliquez ici !</a>

2015-2016 EPFC-ULB 29

Les listes

2015-2016 EPFC-ULB 30

D'autres éléments structurants

2015-2016 EPFC-ULB 31

•  HTML5 contient un certain nombre d'éléments stucturants : –  <article> et <section> : organiser le contenu principal de la page.–  <header> : l'entête de la page (ou d'une section ou d'un article)–  <nav> : ensemble de liens (menu)–  <aside> : information "sur le côté" (publicité, articles connexes…)–  <footer> : le pied de page (ou d'une section ou d'un article)

•  Les navigateurs utilisent ces informations�de structure pour déterminer le sens.

•  CSS utilisera ces informations pour�présenter, formatter la page tout en �positionnant ces éléments.

•  Il existe également les éléments <div> qui permettent de définir�des zones : ceux-ci n’ont pas une sémantique aussi précise et ne �devraient être utilisés que si aucun élement structurant ne convient.

Cecin'estqu'unexempled'u%lisa%on…

Travail dirigé : Curriculum Vitae en HTML de base

2015-2016 EPFC-ULB 32

Exercice

•  Ecrivez votre CV en HTML5 en utilisant un maximum de concepts appris.•  Ne vous souciez que du fond (HTML5), pas de la forme (CSS3).•  Voici un exemple incomplet :

•  Vous avez uniquement droit à un éditeur de texte (par exemple Notepad++) , un navigateur (Google Chrome) et des ressources (Internet, livres, notes, voisins, …).

2015-2016 EPFC-ULB 33