Une fois le notepad ouvert, allez dans le menu fichier, et ouvrez
index.htm
il ne vous reste plus que a saisir le texte ci dessous.
Sauvez.
Avant de commencer cette
section vous devez avoir réalisez votre première
page à l'aide de la section précédente.
Vous disposez donc d'un repertoire avec un fichier index.htm, c'est
votre page d'accueil, nous allons modifier cette page de la
façon suivante :
<html>
<head><title>ma page d'accueil</title></head>
<body>
Bonjour bienvenue sur ma page d'accueil, voici ma page 1 :
<a href="page1.htm">ici</a>
</body>
</html>
Créez de la même façon une page
nommée
page1.htm (attention pas de
majuscule) sui contient le texte suivant :
<html>
<head><title>ma page d'accueil</title></head>
<body>
Voici ma page 1, retour à la page d'accueil :
<a href="index.htm">ici</a>
</body>
</html>
Vous avez ainsi deux pages, ouvrez la première. Elle
contient un lien si vous cliquez sur ce lien, vous pourrez
accédez à la page suivante et inversement.
Vous venez de créer un site avec deux pages et un lien
permettant de naviguer d'une page à l'autre. Un site web est
ni plus ni moins qu'un ensemble de pages html contenant du texte et des
liens pour permettre la navigation d'une page à une autre.
Attention: les couleurs et le soulignement qui
apparaissent sur les exemples ci-dessus sont destinés
à aider la lecture, dans le notepad (ou 'bloc note'), tout
apparaitra en noir.
tutorial html
pour créer son site web sur internet
Un document html est un fichier texte tout ce qu'il y a de plus
classique, vous pouvez donc utiliser un éditeur de texte
comme le notepad, vim, emacs pour éditer votre fichier. Afin
de présenter votre document il existe plusieurs tags pour
mettre en forme votre texte, par exemple : <b>
ce
texte est en gras</b>. Ainsi lorsque vous
encadrez un texte avec le tag
b le texte est en
gras.
Tous les tags html sont formés de la même
façon, la commande est encapsulée entre un
<
et un
> pour démarrer et
encapsulée entre un
</ et un
>
pour la terminer.
La structure de départ d'un document html est toujours la
suivante:
<html>
<head>
</head>
<body>
</body>
</html>
Le tag
html indique que ce document est de l'html,
le tag
head renferme des informations sur le
document qui sera contenu dans la section body.
le tag
body défini donc la partie
principale de votre document, c'est ici que sera écrit le
texte de votre page ainsi que les références de
vos images.
Presenter son
texte en HTML
Vous
allez en tapant votre texte avoir besoin de quelques tags qui vont vous
permettre de mettre en forme et de présenter votre document,
voici quelques tags indispensables:
- h1, h2 .. h6
: ces tags permettent de modifier la taille de votre texte, du plus
gros h1 au plus petit h6.
- b : pour
écrire en gras
- font
: pour changer la taille (eg: <font size=+2> ) ou la
couleur (eg: <font color=red> )
- div
: pour centrer un texte (eg: <div align=center> )
- p
: permet de définir un paragraphe
- pre
: la présentation du texte contenu dans une section pre ne
sera pas modifiée, en effet en html une succesion de blanc
ou de retour à la ligne sera considérer comme un
seul blanc sauf a l'intérieur d'nue section pre, cela est
très pratique pour présenter un code de programme
n'oubliez pas de toujours
refermer un tag ouvert ( eg: </font> ).
Explications : le tag
table
permet de débuter un tableau,
tr une
ligne et
td une cellule. Les attributs
intéressants sont width pour table et td pour donner la
largeur du tableau par rapport à la page ou de la cellule
dans la ligne.
border permet de spécifier la bordure des
cellules, par défaut il n'y en a pas ( i.e: border=0 ).
valign et
align permettent de
gérer l'alignement vertical et horizontal.
l'attributs
colspan specifie que la cellule aura la
largeur de deux cellules des autres lignes. (
rowspan
s'utilise de la même manière pour les colonnes )
Les frames en HTML
Les framesets permettent de diviser une page en plusieurs parties,
pour ensuite insérer dans chaque partie une page à part entière.
Exemple :
<frameset cols="100,*">
<frame name=menu src="menu.html">
<frame name=princ src="princ.html">
</frameset>
Dans un fichier ( généralement index.html ), on met le
code ci dessus. Cela permettra de séparer la page avec une colonne
de 100 pixels à gauche et le reste a droite. A gauche figure le
contenu du fichier menu.html, à droite princ.html.
Chaque frame a un nom, ce qui permet lorsque vous faites un lien
d'afficher le résultat dans la frame ad hoc ( voir section suivante ).
Pour séparer la page dans la hauteur, utilisez l'attribut rows à la
place de cols
Les
liens en HTML
L'une des
particularités d'un document web est de pouvoir cliquer sur
une partie de texte ou une image et d'être renvoyé
vers une autre page, c'est un lien.
Pour cela il suffit
d'encadrer le texte ou l'image avec le tag a:
<a
href="page_suivante.html">vers la page suivante</a>
Un attribut utile est target, il permet de
spécifier ou la page pointée sera
affichée, ex: target=princ affichera le résultat
du lien dans la frame ou la fenêtre princ.
Attention si vous
voulez faire un lien vers un autre site n'oubliez pas de mettre
l'addresse complète, c'est à dire
précédée de http:// , ex:
<a
href="http://www.salemioche.net">créer son site
web</a>
Un editeur de page web
NVU , Frontpage , Webexpert,....