S

1
Séminaire informel

• Création de pages web

2
Quest-ce quun site web ?
Des millions de pages sont enregistrées sur le web
Site web
Un site web est un ensemble de pages, liées entre
elles et avec lextérieur par de liens.
3
Pourquoi faire un site web ?
Pour partager des fichiers/photos/etc...
Pour mettre un CV
Pour partager un contenu intéressant, une
passion, avec le monde entier
4
Comment ça marche ?
Les pages sont enregistrées sur un serveur.
Cest un ordinateur (souvent très
gros) accessible par nimporte quel
internaute. Ils se trouvent généralement chez les
fournisseurs daccès. Cest lui qui contient tout
votre site web
Serveur
5
Comment ça marche ?
La personne (ou plutôt lordinateur ou plutôt le
logiciel) qui veut afficher une page web
sappelle le client.
Serveur
Client
6
Comment ça marche ?
Lorsque le client veut afficher une page
web, (cest-à-dire quand on tape une adresse) Il
envoie une requête au serveur
Serveur
Client
http//www.monsite.fr
Cher serveur, Peux-tu menvoyer la page que
demandée ?
7
Comment ça marche ?

• Le serveur cherche la page.
• Si il la trouve, il la renvoie
• Sil ne la trouve pas, il renvoie une erreur

Serveur
Client
Mon site web
Ok
8
Comment ça marche ?
La page est alors décodée et affichée par un
logiciel cest le navigateur.
Serveur
Client
Le navigateur est un logiciel qui interprète la
page HTML et renvoie une sortie sur lécran. Il
existe plein de navigateurs différents. Pour les
sites simple, ils se valent à peu prés tous.
Mon site web
9
Comment ça marche ?
Pour résumer
Etape 1
Etape 2
Etape 3
Commander une page
Récupérer la page
Afficher la page
10
Avec quoi fait-on une page web ?
11
Avec quoi fait-on une page web ?
Page Web
Le code compliqué qui décrit la page sappelle
lHTML Cest ce que nous allons apprendre à faire
12
Quest ce quune page ?
Page web
PHP
CSS
HTML
Java Script

13
Structure dune page HTML
HTML
lthtmlgt

• Une entête

ltheadgt lttitlegtPages
personnelleslt/titlegt lt/headgt

• Un corps

ltbodygt ltpgtBonjour !!!lt/pgt
lt/bodygt
lt/htmlgt
14
Les balises
Le fichier HTML est organiser par balises. Ce
sont des mots clés encadré par des chevrons (lt 
gt)
On les trouve sous 2 formes

• Les balises par pair une balise ouvrante une
  balise fermante (avec un  /  pour dire quon
  la ferme !)

HTML
lt balise gt . lt /balise gt

• Les balises seules avec un  /  à la fin !

HTML
lt balise /gt
15
Les balises
Les balises peuvent être de deux natures
différentes

• Les balises  block  Elles englobent le
  contenu. Elles contiennent des paragraphes,
  des titres, etc.

HTML
lt p gt Ceci est un paragraphe lt /p gt

• Les balises  inline  Elles sont dans le
  texte. (mettre en gras, souligner, etc)

HTML
lt p gt On va écrire un texte ltstronggt en gras
lt/stronggt !!!lt/pgt
16
Lentête
HTML
lthtmlgt
ltheadgt lttitlegtTitre de la pagelt/titlegt
ltmeta http-equiv"Content-Type"
content"text/html charsetiso-8859-1"
/gt lt/headgt
/gt
ltbodygt ltpgtBonjour !!!lt/pgt
lt/bodygt
lt/htmlgt
17
Le corps
HTML
lthtmlgt
ltheadgt lt/headgt
ltbodygt lt/bodygt
lt/htmlgt
18
Les paraphes
ltpgt lt/pgt Balise de paragraphes (balise la
plus utile !)
Block
HTML
ltbodygt ltpgt Thomas Andrews (7 février 1873 - 15
avril 1912) est un architecte naval britannique
qui a travaillé à la construction de plusieurs
paquebots. Il grandit au sein d'une famille
aisée, puis devient apprenti dans les chantiers
navals Harland Wolff de Belfast dont le
président, Lord Pirrie, est son oncle. Pendant
quelques années, Andrews gravit progressivement
les échelons avant d'être nommé directeur
général de l'entreprise. La réparation du
paquebot de la White Star Line Suevic, à
laquelle il participe, fait de lui un des
architectes navals les plus renommés de son
époque. lt/pgt lt/bodygt
19
Les paraphes
ltbr/gt Retour à la ligne
Inline
HTML
ltbodygt ltpgt Ligne 1 ltbr/gt ligne 2 ltbr/gt
Ligne 3 toujours ligne 3 lt/pgt lt/bodygt
20
Les titres
lth1gt lt/h1gt Titre TRES important lth2gt
lt/h2gt Titre important lth3gt lt/h3gt Titre
moyen lth4gt lt/h4gt Titre pas important lth5gt
lt/h5gt Titre pas du tout important
Block
HTML
ltbodygt lth1gt Chapitre 1lt/h1gt lth2gt Section 1
lt/h2gt ltpgt Bla bla bla lt/pgt lth2gt Section 2
lt/h2gt ltpgt camion lt/pgt lth1gt Chapitre 2
lt/h1gt ltpgt Pouet pouet lt/pgt lt/bodygt
21
Les images
Inline
ltimg src " mon_fichier_image.jpg " alt "
texte alternatif " /gt
/gt
/gt
HTML
ltbodygt ltpgt Je suis content !! ltimg
src"images/content.gif" alt"Smile Content"
/gt lt/pgt lt/bodygt

• Lattribut src (source) permet dindiquer où se
  trouve limage.
• Deux choix
• Soit un chemin relatif de limage (par rapport à
  là où est enregistré la page) Ex "
  image/photo_identite.jpg "
• Soit un chemin absolue de limage (commençant
  par  http// ) pour pointer vers un autre site,
  par exemple

Lattribut alt (Alternative) permet décrire un
texte de remplacement (si jamais limage indiquée
nexiste pas). On peut par exemple mettre le
titre de limage
La balise img est de type inline, cest-à-dire
quelle doit se trouver à lintérieure de balises
block ! Elle est considérée comme une lettre !
22
Les liens
ltagtlt/agt Faire un lien vers une image ou un
fichier.
Inline
lta href"mon_lien"gttexte à cliquerlt/agt
HTML
ltbodygt ltpgt Pour plus dinformations, lta
href"http//fr.wikipedia.org/Un_amour_de_coccinel
le"gt cliquez ici ! lt/agt lt/pgt lt/bodygt
Mot clé pour indiquer ladresse (une autre page
web, un fichier, )
Chemin vers le lien
Texte qui servira de  bouton"
Lien vers un mail
lta href"mailtoallais.raphael_at_free.fr"gtEcrivez-mo
i !lt/agt
23
Mise en évidence du texte
ltstronggtlt/stronggt important (en
gras). ltemgtlt/emgt Mise en évidence (italic).
Inline
Inline
HTML
ltbodygt ltpgt Ceci est une ltstronggtchose
importantelt/stronggt, Ceci est une ltemgtmise en
évidencelt/emgt. lt/pgt lt/bodygt
24
Les listes
ltulgtlt/ulgt Début et fin dune liste ltligtlt/ligt
Début et fin dun des points de la liste
Block
Block
HTML
ltbodygt ltpgtPour être un bon thésard, il faut
lt/agt ltulgt ltligtaimer les ordinateurslt/ligt ltligt
être poète (surtout la 3ltsupgtèmelt/supgt
année)lt/ligt ltligtaimer les voyageslt/ligt ltligtlt/
ligt lt/ulgt lt/bodygt
25
Les tableaux
lttablegtlt/tablegt Indique le début et la fin du
tableau
lttrgtlt/trgt indiquent le début et la fin dune
ligne
Les balises lttdgtlt/tdgt indiquent le début et la
fin dune colonne
ltbodygt lttablegt lttrgt lttdgtLigne 1 Colonne
1lt/tdgt lttdgtLigne 2 Colonne
2lt/tdgt lt/trgt lttrgt lttdgtLigne 2 Colonne
1lt/tdgt lttdgtLigne 2 Colonne
2lt/tdgt lt/trgt lt/tablegt lt/bodygt
26
Les balises à tout faire
ltdivgtlt/divgt Balise de type  block .
Block
HTML
ltbodygt ltdivgt Les chaussettes de
lachi-duchesse sont-elles sèches, archi sèches
? lt/divgt lt/bodygt
ltspangtlt/spangt Balise de type  inline .
Inline
HTML
ltbodygt ltpgt Les chaussettes de
lachi-duchesse sont-elles sèches, ltspangtarchi
sècheslt/spangt ? lt/pgt lt/bodygt
Ces balises ne servent à priori à rien. En fait,
elles serviront plus tard, lorsquon voudra les
mettre en forme (souligner, mettre en rouge, etc)
27
Exercice 1 !

• But du jeu créer une page CV avec

Nicolas

• Un tableau 1 ligne/ 2 colonnes avec
• Votre nom en titre 1 dans la colonne de droite
• Une photo de vous dans la colonne de gauche

Moi

• Nom Nicolas
• Adresse Sucé-sur-Erdre
• Email ilovexfem_at_free.fr

• Un paragraphe  état Civil  avec les
  informations sous forme de liste

Ma vie

• 1962 Ecole maternelle
• 1966 CP
• 1999 Change le monde

• Un paragraphe  formations  avec des liens vers
  les écoles/universités,

28
CSS ? Pourquoi ?
Le CSS est un langage permettant la mise en page
dune page web.

• Le HTML dit le contenu de ce quil y a sur la
  page

Je veux un titre, Je veux un image, Je veux un
paragraphe qui dit ça, ça, ça

• Le CSS dit comment afficher ce quil y a sur
  la page

Je veux que les titres soient centrés, Je veux un
image soit encadrées en vert, Je veux que le fond
soit rouge
Cascading Style Sheets
29
CSS ? Pourquoi ?
Exemple
Page sans CSS
Page avec CSS
30
CSS comment ?
2 façons de faire

• Soit balise par balise
• Soit toutes les balises dun coup !

31
CSS balise par balise
Le CSS se met à lintérieur de la balise
ouvrante, en ajoutant lattribut style.
HTML
ltpgt Mon texte lt/pgt
HTML
ltp style"" gt Mon texte lt/pgt
Les propriétés CSS se mettent à la place des   
32
CSS balise par balise
Les propriétés CSS se mettent toujours sous la
forme
Propriété valeurs
33
CSS balise par balise
Exemple
HTML
ltp style" color red " gt Mon texte lt/pgt
Si vous voulez appliquer plusieurs propriétés CSS
il suffit de les mettres les unes à la suite des
autres (sans oublier les    entre chaque !)
HTML
ltp style" color red margin 0px " gt Mon
texte lt/pgt
34
Liste des propriétés CSS usuelles

• color donne la couleur du texte (et des
  traits).
• Valeurs le nom de la couleur en anglais, ou le
  code hexadécimal de la couleur précédé dun
     (F4A42E)

HTML
ltp style" color red " gt Mon texte lt/pgt

• font-size donne taille du texte.
• Valeurs la taille en pixel (suivie de  px ),
  ou certains mots clés comme  small ,
   medium ,  large ,  x-large 

HTML
ltp style" font-size 50px " gt Mon texte lt/pgt

• text-align donne lalignement du texte.
• Valeurs left, right, center, justify.

HTML
ltp style" text-align center " gt Mon texte lt/pgt
35
Liste des propriétés CSS usuelles

• font-weight épaisseur du trait (gras ou pas
  gras).
• Valeurs  bold  (gras) ou  normal 

HTML
ltpgtCeci est ltspan style" font-weight bold " gt
Importantlt/spangt !lt/pgt

• font-style Style de trait (italic)
• Valeurs  italic ,  oblique  ou  normal .

HTML
ltp style" font-style italic " gt Texte italic
lt/pgt

• text-decoration  décore  le texte.
• Valeurs  underline  (souligné),
   line-through  (barré),  overline  (ligne
  au-dessus),  blink  (clignotant),  none 
  (normal).

HTML
ltp style" text-decoration blink " gt CEST
LES SOLDES !!!!lt/pgt
36
Liste des propriétés CSS usuelles

• font-family donne la police du texte.
• Valeurs le nom de la police arial, "Arial
  Black", Georgia,

HTML
ltp style" font-family Arial " gt Mon texte lt/pgt
HTML
ltp style" font-family Verdana, Arial, Serif "
gt Mon texte lt/pgt
37
Liste des propriétés CSS usuelles

• height Définit la hauteur de la balise.
• width Définit la largeur de la balise
• Valeurs la taille en pixel (suivie de  px ),
  ou pourcentage (suivie de   ) de la largeur de
  la balise englobante.

HTML
ltp style" width 200 px " gt Mon texte lt/pgt
Le paragraphe fera 200px de large
HTML
ltbodygt ltp style" width 80 " gt Mon texte
lt/pgt lt/bodygt
Le paragraphe fera 80 de la largeur de la page
(body)
38
Liste des propriétés CSS usuelles

• border Définit plein de choses sur les
  bordures.
• Valeurs - Le type (none, solid, dotted, )
• - Lépaisseur (en px)
• - la couleur (red, blue, AA34F2,)

HTML
ltp style" border solid 2px green " gt Mon
texte lt/pgt

• background-color Définit la couleur larrière
  plan.
• Valeurs La couleur (red, ) ou  transparent 

HTML
ltp style" background-color AAAAFF " gt Mon
texte lt/pgt

• background Image darrière-plan
• Valeurs - lemplacement de limage de la forme
  url(fichier_image)
• - des propriété sur laffichage (alignement,
  répétition, )

HTML
ltp style" background url(image/fond.jpg)
right no-repeat " gt Mon texte lt/pgt
39
Le fichier CSS
Si les balises de même types ont toutes la même
mise en forme comme ci-dessous
HTML
lth2 style"text-decorationunderline
colorred" gt Chapitre I lt/h2gt ltp
style"font-styleitalic" gtblablablalt/pgt lth2
style"text-decorationunderline colorred" gt
Chapitre II lt/h2gt ltp style"font-styleitalic"
gtpatati patatalt/pgt lth2 style"text-decoration
underline color red" gt Conclusionlt/h2gt ltp
style"font-styleitalic" gtgnagnagnalt/pgt
plutôt que de les réécrire à chaque fois pour
chaque balsie, on peut écrire toutes ces
propriétés CSS dans un fichier, une fois pour
toute !
40
Le fichier CSS
Exemple
HTML
CSS
lth2gt Chapitre I lt/h2gt ltpgtblablablalt/pgt lth2gt
Chapitre II lt/h2gt ltpgtpatati patatalt/pgt lth2gt
Conclusionlt/h2gt ltpgtgnagnagnalt/pgt
h2 text-decoration underline color red
p font-style italic
41
Le fichier CSS
HTML
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" http//www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd"gt lthtml xmlns"http//www.w3.org/1999/
xhtml" xmllang"fr" gt ltheadgt lttitlegtBienvenue
sur mon site !lt/titlegt ltmeta http-equiv"Content
-Type" content"text/html charsetiso-8859-1"
/gt ltlink rel"stylesheet" media"screen"
type"text/css" title"Design" href"style.css"
/gt lt/headgt ltbodygt lth2gt Chapitre I
lt/h2gt ltpgtblablablalt/pgt lth2gt Chapitre II
lt/h2gt ltpgtpatati patatalt/pgt lth2gt
Conclusionlt/h2gt ltpgtgnagnagnalt/pgt lt/bodygt lt/html
gt
Par contre il faudra dire à la page html
daller chercher le fichier CSS ? On lindique
dans lentête de la page
42
Hiérarchie des balises
On peut restreindre la portée des propriétés CSS
à certaines balises contenues dans dautres
balises. Pour cela, on mes les balises dans
lordre hierarchique, séparées par des espaces.
CSS
h1 a text-decoration none color black
43
Les exceptions class et id
Si vous avez fait un fichier CSS, mais que vous
souhaitez faire exception avec quelques balises,
2 solutions

• Décrire directement dans les balises (comme
  avant)

HTML
CSS
lth2gt Chapitre I lt/h2gt ltpgtblablablalt/pgt lth2gt
Chapitre II lt/h2gt ltp style"colorredfont-weight
bold"gt patati patatalt/pgt lth2gt Conclusionlt/h2gt ltpgt
gnagnagnalt/pgt
h2 text-decoration underline color red
p font-style italic
44
Les exceptions class et id
Si vous avez fait un fichier CSS, mais que vous
souhaitez faire exception avec quelques balises,
2 solutions

• Donner un nom à vos balises !

HTML
CSS
lth2gt Chapitre I lt/h2gt ltpgtblablablalt/pgt lth2gt
Chapitre II lt/h2gt ltp class"important"gtpatati
patatalt/pgt lth2gt Conclusionlt/h2gt ltpgtgnagnagnalt/pgt
h2 text-decoration underline color red
p font-style italic .important color
red font-weightbold
45
Les exceptions class et id
Si vous avez fait un fichier CSS, mais que vous
souhaitez faire exception avec quelques balises,
2 solutions

• Donner un nom à vos balises !

HTML
CSS
lth2gt Chapitre I lt/h2gt ltpgtblablablalt/pgt lth2gt
Chapitre II lt/h2gt ltp id"important"gtpatati
patatalt/pgt lth2gt Conclusionlt/h2gt ltpgtgnagnagnalt/pgt
h2 text-decoration underline color red
p font-style italic important color
red font-weightbold
46
Les exceptions class et id
Quelle différence entre  class  et  id  ?
 class  peut être réutilisé avec le même nom
pour plusieurs balises.
Pour un nom donné,  id ne peut être utilisé
que pour une balise unique.
Par exemple sil ny a quun seul menu sur le
coté de votre page, on peut définir son style en
le nommant
CSS
HTML
menu width100px Floatleft menu
a displayblock width90px Background-colorblu
e
ltdiv id"menu"gt lta href"lien1.html"gtlien
1lt/agt lta href"lien2.html"gtlien 2lt/agt lta
href"lien3.html"gtlien 3lt/agt lt/divgt
47
Exercice 2

• Tous les H1 centré souligné
• Tous les H2 police différente souligné
• Lien de couleur en rouge gras
• Arrière plan en beige
• Le corps est encadré en noir.

48
Le Frameset
Les framesets permettent de faire faire une page
composée de plusieurs pages
Page1.html
Page2.html
Page3.html
Page0.html
49
Le Frameset

• La page  Page0.html  va appeler les autres pages

• 1 découpage avec 2 lignes
• Une de hauteur 15 de la taille totale (qui
  affichera  entete.html )
• Une de hauteur quelconque () qui affichera un
  autre frameset.

• Un deuxième découpage
• Une colonne de 10 de la largeur totale (qui
  affichera  menu.html )
• Une de largeur quelconque (qui affichera
   contenu.html )

HTML
lthtmlgt ltheadgt lttitlegtMa Pagelt/titlegt lt/headgt
ltframeset row"15 , "gt ltframe
scr"entete.html" name"entete" gt ltframeset
cols"10 , "gt ltframe src"menu.html"
name"menu" gt ltframe scr"contenu.html"
name"contenu" gt lt/framesetgt lt/framesetgt lt/html
gt
50
Comment faire un lien vers une frame particulière
?
entete
HTML
menu
contenu
Lien 1 Lien 2 Lien 3
lta href"lien1.html" target"contenu"gtlien
1lt/agt lta href"lien2.html" target"contenu"gtlien
2lt/agt lta href"lien3.html" target"contenu"gtlien
3lt/agt
51
Exercice 3

• Faire une page complète avec les Frameset avec
• Entete
• Menu
• contenu

52
Transférer vers le serveur

• Comment avoir un serveur
• Des sociétés proposent des espaces en ligne pour
  mettre vos sites. (11, )
• Vos fournisseur daccés internet propose en
  général un espace de stockage (free, orange, )
• Il existe des espaces gratuits (mais ils sont
  souvent lents)

53
Transférer vers le serveur

• Comment envoyer son site sur lespace ?
• Via le protocole  FTP .
• Cest un moyen denvoyer des fichiers dun
  ordinateur à lautre.
• Des logiciels permettent de le faire très
  facilement (Filezilla (gratuit), FireFTP (addon
  Firefox - gratuit), FTP Expert, etc)
• Certain serveurs proposent des transferts FTP en
  ligne (directement sur leur site)

54
Clients / serveur

• Comment se connecter à un serveur
• Serveur FTP requière
• Une adresse de serveur (exemple
  ftpperso.free.fr)
• Un login (exemple raphael.allais)
• Un mot de passe (exemple )
• Un numéro de port (normalement, cest le n21)

55
Clients / serveur

• Comment envoyer ?
• Une fois connecté, cest comme un exploreur de
  dossier ! Il suffit de faire des
  copier/coller/supprimer, etc

56
FIN !

• Pour aller plus loin
• Pour reprendre tout ce cours www.siteduzero.com
• Les autres langages internet
• Le PHP Ce nest plus vous, mais une machine qui
  écrit la page avant de lenvoyer
• Le Java-script Permet de modifier la page après
  lavoir envoyé

57

• Et maintenant
• ACTION !

Mails raphael.allais_at_ec-nantes.fr Jad.matar_at_irc
cyn.ec-nantes.fr