Elhaidaoui@hotmail.com
Cr éation Des Sites Création Web
1
Lire des données sur Internet
Pages HTML
Serveur Web
Images
Son, Vidéo …
navigateur
Requête
Web
Un site Internet = un ensemble de pages HTML, d’images, de fichiers son, vidéo, … Quand un utilisateur clique sur un lien, il génère une requête (Transfert en Protocole HTML) au serveur Web Les fichiers correspondants sont envoyés sur le Web
navigateur navigateur
1
Les fichiers HTML sont interprétés (décodés) par le navigateur (Internet Explorer ou Netscape) qui les affiche 2 correctement
Création Des Sites Web
Elhaidaoui@hotmail.com
Les navigateurs utilisé utilisés Internet Explorer
/
Firefox
81,2 % 14,8 % 2,5 % 0,2 % 0,2 %
…… …
Autre s
1,1 %
3
Les outils de recherche
France : classement des outils de recherche en 2005 Outil
Déc 05
Google.fr
60,2 %
Msn.fr
9,3 %
Google.com
7,0 %
Yahoo.fr
6,8 %
Voila.fr
6,2 %
Google.be
2,6 %
AOL.fr
1,7 %
Autres
6,3 %
4
2
Création Des Sites Web
Elhaidaoui@hotmail.com
Publier des données sur Internet
Pages HTML
Serveur Web
Images
Sons, Vidéo …
navigateur
Web Le site Internet est créé par un éditeur de pages Web (FrontPage, DreamWeaver) sur un poste Les pages Web, les images, … sont transférées sur serveur (généralement en FTP)
Transfert en FTP
éditeur navigateur
Les fichiers sont accessibles aux autres utilisateurs via leur navigateur 5
Principe du langage HTML ( HyperText Mark-up Language ) HTML est une langue de définition des documents.
6
3
Création Des Sites Web
Elhaidaoui@hotmail.com
Les lettres accentuées en HTML Lettre
HTML
HTML
à
Lettre î
à â
â
ï
ï
ä
ä
ô
ô
ç
ç
ö
ö
è
è
ù
ù
é
é
û
û
ê
ê
ü espace
ü  
ë
ë
î
une balise marque une action pour le navigateur : ce qu’il doit faire les attributs précisent les modalités de cette action : comme il doit le faire7
1. Introduction à HTML : Hyper Text Markup Language Un document HTML est composé de texte et de commandes (tag en anglais). Ces commandes permettent de mettre en forme le texte (Titre, caractère gras, italique, image, liens, etc...). Les commandes HTML peuvent être écrites en minuscules ou en majuscules. <HTML> . </HTML> Commandes de début et de fin du document HTML <HEAD> . </HEAD> Informations non affichées concernant le document <TITLE> . </TITLE> Titre du document Cette information apparait dans la barre de titre du client WWW. <BODY> . </BODY> Corps du document Toutes les informations affichées par le client WWW y sont contenues.
4
8
Création Des Sites Web
Elhaidaoui@hotmail.com
Leçon 1 :Créer son premier site Web Lancez également « Bloc-notes » (dans Accessoires sous Programmes dans le menu Start)
9
5
<HTML>
Ceci est le début d'un document de type HTML.
</HTML>
Ceci est la fin d'un document de type HTML.
<HEAD>
Ceci est le début de la zone d'en-tête
</HEAD>
Ceci est la fin de la zone d'en-tête.
<TITLE>
Ceci est le début du Titre de la page.
</TITLE>
Ceci est la fin du Titre de la page.
<BODY>
Ceci est le début du document
</ BODY>
Ceci est la fin du document
10
Création Des Sites Web
Elhaidaoui@hotmail.com
• Dans « Bloc-notes », sélectionnez « Enregistrer sous... » dans « Fichier », dans le menu supérieur. • Sélectionnez « Tous fichiers » dans la boîte « Enregistrer avec le type ». C'est très important, car sinon vous l'enregistrerez comme un document de type texte et non comme document HTML. • Maintenant sauvegardez votre document avec le nom « page1.htm » dans le dossier c:\html
11
Maintenant allez au navigateur : •Dans le menu supérieur, sélectionnez « Ouvrir » dans « Fichier ». •Cliquez « Parcourir » dans le dialogue qui apparaît. •Cherchez votre document HTML et cliquez « Ouvrir ».
Il devrait alors s'afficher « Hourra ! Mon premier site Web.» dans le navigateur. Félicitations !
12
6
Création Des Sites Web
Elhaidaoui@hotmail.com
Dans la section « body », vous inscrivez le contenu réel de la page.
13
14
7
Création Des Sites Web
Elhaidaoui@hotmail.com
15
Les balises élémentaires Gras
[Bold]
<B>...</B>
Début et fin de zone en gras
Italique
[Italic]
<I>...</I>
Début et fin de zone en italique
Taille de caractère
[Font size]
<FONT SIZE=?>...</FONT>
Début et fin de zone avec cette taille
Couleur de caractère
[Font color]
<FONT COLOR="#$$$$$$"></FONT>
Début et fin de zone en couleur
A la ligne
[Line break]
<BR>
Aller à la ligne
Commentaires
[Comments]
<!-- *** -->
Ne pas afficher
Paragraphe
[Paragraph]
<P>
Début d'un nouveau paragraphe
Centrage
[Center]
<CENTER></CENTER>
Centrer
Bleu
#0000FF
Blanc
#FFFFFF
Rouge
#FF0000
Gris clair
#C0C0C0
Vert
#00FF00
Violet
#8000FF
Jaune
#FFFF00
Noir
#000000
16
8
Création Des Sites Web
Elhaidaoui@hotmail.com
Exercice 1
17
Exercice 2
18
9
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
Exercice 3
19
Exercice 4
20
10
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
CrĂŠer des tableaux
Attributs : align, border, bgcolor, width, bordercolor, background
align=(top,middle,botton,left,right)
21
22
11
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
height : Impose la hauteur du tableau (en pixels). width : Indique la largeur du tableau par rapport à la page (en % ou en pixels). align : Indique l'alignement du tableau par rapport à la page. bgcolor : Indique la couleur du tableau. background : Indique l'image de fond du tableau. border : Indique la largeur du bord du tableau (en pixels). cellspacing : Indique la largeur des traits du tableau (en pixels). cellpadding : Indique l'écart entre le texte d'une cellule et le bord de la cellule (en pixels).
Dans une balise <TR> (ligne) : align : Indique l'alignement horizontal du texte de la ligne. valign : Indique l'alignement vertical du texte de la ligne. bgcolor : Indique la couleur de fond de la ligne. Dans une balise <TD> (cellule) : width : Indique la largeur de la cellule (et donc de la colonne!!). height : Indique la hauteur de la cellule (et donc de la ligne!!). bgcolor : Indique la couleur de fond de la cellule. background : Indique l'image de fond de la cellule. align : Indique l'alignement horizontal du texte de la cellule. valign : Indique l'alignement vertical du texte de la cellule.
23
24
12
Création Des Sites Web
Elhaidaoui@hotmail.com
25
26
13
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP1
27
TP2
28
14
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP3
29
30
15
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP4
31
32
16
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP5
33
34
17
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP6
35
36
18
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
TP7
37
38
19
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
Images
39
40
20
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
Liens
41
42
21
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
Formulaire
43
Exercice
44
22
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
Solution
45
Formulaire 2
46
23
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
47
Formulaire 3
48
24
CrĂŠation Des Sites Web
Elhaidaoui@hotmail.com
49
25
CrĂŠation Des Sites Web