|
| Encarta 2008 - COURS D'INITIATION
|
|
|
|
1
1
COURS D'INITIATION
A LA CREATION DE
PAGES INTERNET
EN HTML
Denis Bourdon
dbourdon@dbourdon.com
Étudiant 2ème année
Département Télécommunications ENSIMAG/ENSERG
2
PLAN
Introduction
Qu'est-ce que HTML ?
Notions de base et mise en page du texte
Insérer des liens, des images
Les tableaux
Les frames
Mettre son site en ligne
Le référencement
2
3
Introduction
Pré-requis
:
• Navigation sur Internet.
• Utilisation d'un éditeur de texte ou d'un
traitement de texte.
Support de cours en téléchargement
:
www.dbourdon.com/development/cours_html
4
Qu'est-ce que HTML ?
(1)
HTML = Hyper-Text Mark-Up Language
• hypertexte = texte + liens vers d'autres pages
•
(images, son, vidéo)
• spécification décidée par le W3O
mise en forme de texte et d'objets multimédia
.
•
à ce jour, HTML 4.01ce n'est pas un langage de programmation
mais un langage de mise en page de contenu
multimédia
•
multi-système et multi-plateforme
• document HTML est
interprété par le navigateur
.
même système avec différents navigateurs
différences si on visualise une page sur un
tester ses pages sur différents browsers
3
5
Une page Internet est constituée de
éléments ou fichiers
• Un fichier HTML: "
plusieurs:script", "fichier source", etc...
Extension
• De photos ou d'images, au format JPEG ".jpg" ou
".jpeg" (optimisé pour les photos), au format GIF
".gif" (optimisé pour les images, logos, etc..).
• Du son (WAVE ".wav"), des vidéos (MPEG ".mpeg"
ou ".mpg", AVI ".avi"), des animations Flash ou
QuickTime, des codes Javascript/JScript, etc...
: ".htm" ou ".html"
Qu'est-ce que HTML ?
(2)
6
Pour
Internet, il existe
• Un
o Notepad, Wordpad, UltraEdit sous Windows.
o Nedit, Kedit, Emacs, XEmacs sous Unix/Linux.
• Un
o Macromedia Dreamweaver.
o Microsoft Frontpage.
o Netscape Composer.
L'utilisation d'un générateur de pages nécessite
toutefois un minimum de connaissance de bases en
HTML pour l'exploiter au mieux et connaître les
possibilités de HTML car ces logiciels ne font que
générér du code HTML.
créer un document HTML, c'est-à-dire une pagedeux solutions :éditeur de texte :générateur de pages Internet :
Qu'est-ce que HTML ?
(3)
4
7
•
Programmation par "balises"
"tags" en anglais
mots-clés syntaxiques entourés de crochets:
<KEYWORD>
la plupart des balises "ouvertes" doivent être
"fermées":
</KEYWORD>
on utilise indifféremment l'écriture en majuscules
ou en minuscules
Notions de base et
mise en page du texte
(1)
8
•
Un premier exemple
<HTML>
<HEAD>
<TITLE>
Mon site perso
</TITLE>
</HEAD>
<BODY>
Hello world!
</BODY>
</HTML>
Notions de base et
mise en page du texte
(2)
5
9
•
Le tag font
<font face="
texte
</font>
police" size=entier color=couleur>
•
Les tags attributs de police
<i>texte</i>
<b>texte</b>
<u>texte</u>
.
Notions de base et
mise en page du texte
(3)
10
• par défaut, le texte est aligné à gauche
pour le centrer (passage automatique à la ligne):
<center>
texte
</center>
• <br>
phrase 1<br>
phrase 2<br>
Notions de base et
mise en page du texte
(4)
6
11
• <p>
<p>
texte
</p>
• <hr>
par défaut, tire un trait sur toute la largeur
mais on peut paramétrer la largeur :
tire un trait horizontal
<hr width=20%>
<hr width=350>
Notions de base et
mise en page du texte
(5)
12
•
Les liens
<a href=
URL>nom de la page</a>
URL
absolue: http://www-telecoms.imag.fr/etudiants/
ou
relative : index.html
.
"déjà visités" dans la balise
personnalisation de la couleur des liens et des liens<body> :
<body link=
color vlink=color>
• Les liens internes
1. créer à l'endroit "cible" une ancre grâce à la balise
<a name=paragraphe>
2. créer le lien avec une balise un peu modifiée
<a href=#paragraphe>Paragraphe</a>
Insérer des liens, des
images...
(1)
7
13
• Possibilité de faire des liens vers des images, des
.doc Word, des fichiers sons...
Si le navigateur ne peut exécuter le fichier, il
proposera de le télécharger (par exemple un fichier
compressé).
• Pour faire un lien vers son adresse e-mail, l'attribut
est modifié:
<a href="mailto:bart.simpson@ensimag.imag.fr">écrivez-moi</a>
Quand le visiteur cliquera sur le lien, son client de
messagerie s'ouvrira avec un nouveau message
dont vous serez le destinataire (champ To: ou A:).
Insérer des liens, des
images...
(2)
14
• Image de fond
<body bgcolor=color background=file>
<body background=file bgproperties=fixed>
• Les images
<img src=
file width=x height=y border=n
alt="
commentaire">
format JPEG (".jpg" ou ".jpeg") pour les images
format GIF (".gif") pour les logos et GIFs animés
format PNG (".png") vise à remplacer les GIFs
statiques
Insérer des liens, des
images...
(3)
8
15
• Alignement du texte
insertion d’images dans du texte
.
contrôle de l'alignement grâce à l'attribut align:
<img src=
URL align="left|right|middle|absmiddle">
• Les images réactives
attribution des liens spécifiques à différentes parties d'une image
<img src=
<map name="map1">
<area shape="shape" coords="
</map>
shape
image usemap="index.html#map1">x,y,..." href=URL>peut être:
• rect
(alors coords="gauche-x,haut-y,droit-x,droit-y")
• circle
(alors coords="centre-x, centre-y, rayon")
• poly
(alors coords="x1,y1,x2,y2...")
Insérer des liens, des
images...
(4)
16
• En-tête du CV
<!-- en-tête du CV-->
<table border=0>
<tr>
<td valign=top width=85%>
<font face="Verdana" size=3 color=black>
<b>Bart SIMPSON</b><br>
238 High Street<br>
Springfield, IL 35875
</font>
</td>
<td valign=center>
<center><img src=photo.gif width=143 right=200></center>
</td>
</tr>
</table>
Les tableaux
9
17
• Listes énumérées
<ul>
<li> Premier élément</li>
<li> Deuxième élément</li>
</ul>
Les puces
• Premier élément
• Deuxième élément
• Listes numérotées
<ol>
<li> Premier élément</li>
<li> Deuxième élément</li>
</ol>
1. Premier élément
2. Deuxième élément
Options:
<li type=square>
(carré)
<li type=circle>
(cercle)
<li type=disc>
(disque plein – valeur par défaut)
18
Les frames
(1)
navigation
Fenêtre
principale
index.html nav.html
main.html,
page1.html,
page2.html,
etc.
10
19
Les frames
(2)
<html>
<head>
<title>Exemple de frames</title>
</head>
<frameset cols="108,*" frameborder="0" framespacing="0" border="0">
<frame src="main.html" name="bar" marginwidth="0" marginheight="2"
scrolling="auto" noresize>
<frame name="win" src="main.html" marginwidth="5" marginheight="2">
</frameset>
<noframes>
<meta http-equiv="Refresh" content="0;URL=main.html">
</noframes>
</html>
20
Mettre son site en ligne
•
Hébergement
o avec des ISP (gratuit): Free, Chez, Wanadoo, Geocities, Tripod…
o hébergement professionnel (payant): Oléane…
•
Mise à jour par FTP
Utiliser un client FTP:
o CuteFTP
o WS_FTP
o LeechFTP
o FTP Explorer
o etc.
11
21
Le référencement
•
Les balises META
<meta name="keywords" contents="keywords">
mots-clés
: énumération de
<meta name="description" contents="description">
: petit résumé
<meta name="author" contents="votre_nom">
: créateur de la page
<meta name="generator" contents="description">
pages Internet utilise cette balise pour établir des statistiques.
: les éditeurs de
•
Référencement manuel
S’enregistrer sur chaque moteur de recherche…
Ou:
o http://www.multimania.com/stoi/: Le Référenceur Gratuit
o http://home.cbhouse.fr/carpe/: Référencement gratuit
en pixels.en pourcentage oupour structurer le texte en paragraphespour passer à la ligne (ne pas fermer le tag)A PROSCRIRE !!!!: souligné (underlined): gras (bold): italique (italic) |
| Aujourd'hui sont déjà 132 visiteurs (148 hits) Ici!
|
|
|
|
