Bienvenue chez samati13 ===> Creation site web gratuitement de A à Z Accueil Cours Hebergement Logithèque Contact Plan
Navigation
Cours pour webmaster
Partenaires
Devenir partenaire
VOTRE PREMIERE PAGE
Nous pouvons à présent créer la première page de notre site, dans le Bloc-Note ou SimpleText, si vous ne possédez pas d'éditeur HTML.
Ecriture de la page
Commençons par entrer le squelette de la page :
<html>
<head>
<title>Mon site</title>
</head>
<body>
</body>
</html>
Dans le corps de la page (entre les balises <body> et </body>> nous allons ajouter notre contenu :
<html>
<head>
<title>Mon site</title>
</head>
<body>
<H1 align=center>Mon site web</H1>
<!-- La balise <H1> signale un titre de niveau 1; son attribut "align" permet de déterminer
l'alignement de l'élément ("right","center", "left" ou "justify") -->

<!-- Ajoutons un titre en gras -->
<b>Bienvenue sur mon site personnel !</b>

<p>
Vous pouvez écrire ici votre texte de présentation

<br>
N'hésitez pas à aller à la ligne
<br>
<br>
<!-- Ajoutons un texte souligné avant d'insérer une image, objet de la leçon suivante -->
<u>Ma photo préférée</u>
</body>
</html>
Remarquons que pour la balise de paragraphe <p>, la balise de fermeture est facultative ; il n'en faut pas pour celle de retour chariot <br>.
Sauvegarder et visualiser votre page
Avant de passer à l'étape suivante, nous allons enregistrer et visualiser notre page.
Comme il s'agit de la page d'accueil, on l'enregistre sous le nom "index.html" dans le dossier racine du site (en format texte seul). Vous pouvez ensuite ouvrir cette page dans votre navigateur.

Par la suite, à chaque changement enregistré dans votre éditeur, il vous suffira de cliquer sur "Actualiser" dans la barre de menu de votre navigateur pour observer les modifications effectuées.
Note : Prenez l'habitude de toujours nommer vos fichiers en minuscules, car sur le serveur web où votre site sera publié "index.html" n'est pas la même chose que "INDEX.HTML", ni que "Index.html".
Illustrer sa page:
Insérer une image:
Vous voudrez naturellement insérer des images dans votre page. Pour ce faire, utilisez la balise <img> et son indispensable attribut "src" (abréviation de "source") : src="emplacement de l'image/nom de l'image" précise le nom et le chemin que le navigateur doit emprunter pour trouver votre image, à partir de la page actuelle.
Pour notre exemple, vous allez placer une image (ici appelée "photo1.jpg") dans le dossier "images" créé précédemment, et l'insérer de la sorte dans la page d'accueil :
<img src="images/photo1.jpg">

La page "index.html" se trouvant dans le dossier racine, on doit indiquer au navigateur le dossier dans lequel se trouve l'image "photo1.jpg".
S'il ne peut pas la trouver, vous verrez s'afficher à la place de votre photo une croix rouge (Internet Explorer).
Ajoutons-lui une légende en italique :
<i>Légende de l'image</i>
Note : Comme nous l'avons vu dans les chapitres précédents, la balise <br> sert à insérer des sauts de ligne entre les éléments que vous placez dans vos pages.
Les différents formats d'image:
Les trois principaux formats d'image rencontrés sur le web sont le JPEG, le GIF et le PNG (ce dernier étant peu utilisé).
Le JPEG et le GIF sont des formats de compression, prévus pour se charger rapidement tout en gardant une qualité acceptable. Mieux vaut utiliser le JPEG pour les images photographiques détaillées et le GIF pour les dessins et schémas qui comportent des aplats de couleur.
Ajouter des liens:
 L'essence même du Web, c'est de permettre de naviguer entre les pages et les sites qui le constituent. Cette navigation s'effectue par l'intermédiaire de liens dits "hypertextes". Ces liens sont des caractères ou des images qui pointent vers une autre page ou une autre partie de la même page.

Délimités par la balise d'ouverture <a> et de fermeture </a>, on en trouve de quatre sortes :
  • les liens externes, qui pointent vers un autre site
  • les liens internes, qui appellent une autre page du même site
  • les liens vers une ancre, point préalablement défini dans une page Web (lien vers un paragraphe par exemple)
  • les liens vers une adresse email
Dans tous les cas, la syntaxe reste la même :
<a href="adresse">Texte de l'appel du lien</a>
Nous allons insérer 2 liens dans notre page d'accueil. Pour cela, commencez par créer la deuxième page de votre site, par exemple "mesliens.html", et placez-la dans le dossier correspondant.

Revenons à la page d'accueil et insérez le code suivant entre les balises <body> et </body> :
<!--Insérons une séparation à l'aide d'une barre horizontale-->
<hr>
<!-- Puis un premier lien vers la 2ème page de votre site -->
<a href="liens/mesliens.html">Mes sites favoris</a>
A l'attribut "href" nous avons assigné un chemin relatif, par rapport à la page où nous nous trouvons (cette méthode est fortement recommandée pour les liens internes).

Ajoutons ensuite un lien vers une adresse e-mail :
<a href="mailto:monpseudo@hotmail.com">Contactez-moi</a>
Vous avez à présent un lien sur la page "index.html" vers la page "mesliens.html".
Nous allons insérer un lien pour retourner de "mesliens.html" vers la page d'accueil :
<a href="/index.html">Accueil</a>
Nous voyons que pour revenir à un dossier de niveau supérieur, le chemin d'accès au fichier doit être précédé du signe "/", comme suit : "/chemin_du_fichier".

Insérez ensuite les liens vers vos sites Web favoris, en entrant cette fois ce qu'on appelle une adresse absolue, c'est-à-dire l'url complète :
<a href="http://samati13.c.la">Visitez SAMATI13</a>


Informatique
  • Cours video
  • Astuces
  • Logithèque
    • Liens





    Copyright © 2007 - SAMATI13 - Design by Kits Graphiques TeKa