Introduction à la

conception de sites web

Yannick Prié
UFR Informatique
Université Claude Bernard Lyon 1
Objectifs
 Introduction aux langages à balises
 Introduction à (X)HTML / CSS
 Introduction à la gestion de sites web
Plan
 Séance 1
 Langages à balise
 XML
 Séance 2
 Le Web
 (X)HTML
 Sites web
 Séance 3
 Feuilles de style CSS
 RSS
Les arbres informatiques
 Arbre
 Noeud
 nœuds fils et pères 1
 Racine
 Feuille
 Chemin 2 3 4
 suite de nœud
 Branche
 chemin se terminant sur 5 6 7 8
une feuille
 Ancêtres et descendants
 Taille d’un arbre 9 10
 nombre de nœuds
 Profondeur d’un nœud
Arbres et séquences de caractères
 Fichier
 suite de caractères
 Objectif
 représenter un arbre dans un fichier
 Solution
 décrire l’arbre comme un ensemble d’éléments
qui se contiennent les uns les autres.
 représenter les éléments entre deux balises
 balises ouvrantes
 on les notera par exemple <nom>
 balises fermantes
 on les notera par exemple </nom>
Arbres et séquences
A 1
Eléments Eléments et balises

B 2
A 1 ⊂ B2 <A>
<B>
B2 ⊂ B3 C4 C5 <B>

B3 C C B3 ⊂ D 6 <D></D>
</B>
4 5
C4 ⊂ D 7 <C>
<D></D>
C5 ⊂ B8 C10 </C>
D D B8 B8 ⊂ B 9 <C>
6 7
<B>
B9 ⊂ D11 <B><D></D></B>

B C C10 ⊂ D12 <C><D></D></C>

</B>
9 10
</C>
</B>
D D </A>
11 12
Exemple
notice

mots-clés
auteur
nat: fr titre
terme terme terme
Type:pers Type: lieu
Victor
Quatre
Hugo
vingt treize <?xml version="1.0"
navire Marat Paris encoding="ISO-8859-1"?>
<notice>
<auteur nat="fr">Victor Hugo
</auteur>
<titre>Quatre vingt treize</titre>
<mots-clés>
<terme>navire</terme>
<terme Type="pers">Marat</terme>
<terme Type="lieu">Paris</terme>
</mots-clés>
</notice>
Langages à balises
 Tous les langages ayant pour objectif de
représenter de l’information en utilisant des
balises
 Définis par
 vocabulaire
 noms des éléments
 grammaire
 mode d’organisation des éléments
 des éléments en contiennent d’autres
 + attributs des éléments
 un peu plus de structure (voir cours XML)
 Une description
 ensemble d’éléments organisés dans un fichier
 contenus terminaux (texte)
Notion de grammaire
 Système formel
 vocabulaire + règles de
production
 permet de définir un
D
arbre
 Exemple
 vocabulaire
 D (Dossier) D F F
 F (fichier)
 règle
 D  (D|F)* F D
 Avec
 * == zéro ou plus
 | == ou
Autre exemple
 Vocabulaire A
 A, B, C, D
 Règles B
 A  B+
 avec
 + == 1 ou plus B C C
 B  BC* | D
 C(D|B)
 Question D D B
 quel est l’arbre le plus
petit que l’on peut écrire
avec cette grammaire ? B C

D D
XML
 eXtensible Markup Langage
 Méta-langage
 permet de définir des langages
 Grammaires
 DTD : Document Type Definition
 XML-Schema
 Quelques DTD
 TEI : Text Encodgin Initiative
 XHTML : Hypertext Markup Langage
 Document bien formé / documeent valide
Intérêt XML
 Représenter de l’information…
 Liée à des textes
 balisage de textes
 Non liée à des textes
 ex. carte de visite
 … pour
 échanger / diffuser
 stocker
 présenter avec des feuilles de style
 (d’après http://sophia.univ-lyon2.fr/didacticiel/unite1/module2.html)

Structures logique / physique

Structure physique :
typographie, blocs,
espacements, ...

Structure logique :
organisation des
contenus
Travaux pratiques
 Dessiner l’arbre d’un document XML
 Transformer un arbre en document XML
 Baliser un texte avec une grammaire
simple
 Rechercher quelques DTD sur le web
Plan
 Séance 1
 Langages à balise
 XML
 Séance 2
 Le Web
 (X)HTML
 Sites web
 Séance 3
 Feuilles de style CSS
 RSS
Les grands principes du web (1)
 Client / serveur
 réseau
 programmes communicants
 échange de données
 protocoles
 Application au web
 serveurs web / client web (navigateurs)
 protocole HTTP
 demande de ressources
 envoi de ressources
Les grands principes du web (2)
 URL : Uniform Ressource Locator
 identifier une ressource quelconque sur Internet
 protocole://machine/chemin
 http://www.univ-lyon1.fr/
 http://bat710.univ-
lyon1.fr/~yprie/Enseignement/index.html
 Navigateur
 chargement de pages web (protocole HTTP)
 affichage de pages web (langage HTML – Hypertext
Markup Language)
 activation de lien : chargement d’une nouvelle page
 exemples de navigateurs
Bases de HTML (1)
 Principes de description de documents par éléments et
balises
 Décomposition d’un document en éléments contenus les uns
dans les autres
 Notion d’arbre des éléments
 racine, feuille, chemin
 attributs/valeurs : informations associées à un élément
 Inscription d’un arbre dans un fichier, notion de balise
 balise ouvrante contenant les attributs
 <nom>,<nom attribut1="valeur1" attribut2="valeur2">
 balises fermantes
 </nom>
 éléments vides
 <nom />
 Applications
 baliser un texte
 décrire des données
Bases de HTML (2)
 Historique
 SGML
 1960  1988
 HTML 1.0  HTML 4.01
 années 1990
 Les problèmes de HTML
 notion de contenu et de présentation
 XHTML
 transitionnel
 strict
Bases de HTML (3)
 Eléments HTML principaux
 Structure générale
 html  head, body
 Structuration
 h1, h2, ..., h6
 Images
 img, attributs src et alt
 <img src="toto.gif" alt="Photo d’identité de toto" />
 Tableaux
 table  tr  td
 Liens
 ancres a
 <a href="http://www.univ-lyon.fr">…</a>
 Autres éléments
 formulaires, frames
Sites web
 Remarque
 1 page avec 2 images  3 fichiers / 3 requêtes
 Site web
 ensemble cohérent de pages web
 sur un même serveur web
 Ensemble de fichiers
 organisés dans une arborescence de dossiers
Web avancé
 Scripts
 Javascript
 langage de programmation simple
 code dans la page web, fonction simple et accès au
document (à son arbre des éléments)
 Plug-ins
 Élément HTML object
 délégation de gestion du navigateur vers un programme
externe
 Java, flash, realvideo, etc.
 Sites dynamiques
 programmes côté serveurs qui génèrent les pages en
fonction des besoins
 exemple :
 Retour moteur de recherche
Principes de la publication sur le web
 Publier un site
 mettre à disposition l’ensemble des fichiers
d’un site sur un serveur web
 Outils pour la publication
 transfert de fichiers FTP
 gestionnaires de site
 Conception / réalisation / publication
 concevoir un site : public, contenu, forme
 réaliser un site : langages, outils
 publication : fournisseur d’accès, transfert
A l’Université
 Outil FTP
 FileZilla
 Compte Unix
 Nom : etu.univ-lyon1.fr
 Login : p0001234
 MdP standard
 Créer un dossier public_html pour mettre
son site web
 Accès par
 http://etu.univ-lyon1.fr/~p0001234
Travaux pratiques
 Conception d'un première page web
 Par exemple, fabriquer son CV
 Conception d'une seconde page web
 Par exemple, une page qui décrit ses domaines
d'intérêt, une passion
 images, liens vers l’extérieur
 Conception d'une page d'accueil pour son site
personnel
 Mettre en relation toutes les pages du site
 Organisation du site
 images dans un dossier images/
 Publication du site web
 utilisation d'un logiciel de transfert de fichiers
Plan
 Séance 1
 Langages à balise
 XML
 Séance 2
 Le Web
 (X)HTML
 Sites web
 Séance 3
 Feuilles de style CSS
 RSS
Introduction à CSS (1)
 Idée de CSS
 décorer un arbre (X)HTML
 ajouter à chaque élément des attributs de style
(propriétés).
 les attributs sont hérités par les enfants des éléments
 si le paragraphe est rouge, les éléments mis en évidence dans
le paragraphe le seront aussi par défaut
 Feuille de style
 ensemble de règles de style
 Ex. de règle : h1 { color: purple; }
 un document XHTML est associé à une ou plusieurs
feuilles de styles
 le système gère les concurrences de style éventuelles
 notion de cascade
Introduction à CSS (2)
 Deux types d’éléments
 blocs
 blocs rectangulaires qui sont positionnés dans la page et dans
d’autres blocs (mise en page)
 saut de ligne à la fin
 exemple : p
 inline (en ligne)
 dans le flux du texte
 exemple : em
 Remarques
 En HTML, on peut déterminer des éléments de regroupement
(pour leur appliquer des styles) avec
 div : bloc
 span : inline
 Deux types de propriétés de style
 propriétés de blocs
 propriétés d’éléments inline
Introduction à CSS (3)
 Quelques propriétés inline
 font-size:
 small | medium…| % | x pt
 font-family:
 fontname1, fontname2 (si la première n’est pas
disponible), familyname (serif, sans-serif, etc.)
 text-align:
 left | center | right | justify
 color:
 red | blue…| hexcode
Introduction à CSS (4)
 Quelques propriétés de bloc
 Position
 absolute, top, left, right, bottom
 Float
 left, right, none
 Taille
 width, heigth
 Bordure
 border-width
 border-color
 border-style (solid, etc.)
Introduction à CSS (5)
 Où placer les propriétés de style ?
 Dans l’élément
 attribut style
 <h1 style="font-family: Arial; font-style:
italic;">Un texte qui se retrouvera en arial
italique<h1>
 Dans l’en-tête
 élément style
 <style type="text/css">.important {color: red;}
</style>
 Dans une feuille externe
 élément link dans l’en-tête
 <link rel="stylesheet" type="text/css"
href="fichier-de-style.css" >
Introduction à RSS
 Real Simple Syndication
 Format très simple
 diffusion d’information sur les modifications des sites
web
 on s’abonne à un flux RSS
 Aggrégation de flux RSS
 pour visualiser rapidement les modifications des sites
web qu’on « suit »
 utilisé pour la veille sur n’importe quel sujet
 méta-aggrégateurs
 Autre format : Atom
Travaux pratiques
 Améliorations variées du site web
 utilisation d'un feuille de style CSS globale
 génération automatique de pages avec des
outils bureautique
 outil visuel de conception de pages web
 NVU
 Exploration du contenu XML d’un flux RSS
 Utilisation d’un aggrégateur
 Par exemple netvibes