Créer votre site
Etape 1
Les préparations
Munissez-vous d'un papier et d'un crayon et commencez à identifier tout ce que vous souhaitez voir apparaître sur votre site. Symbolisez ainsi chaque page de votre site sur papier et tracez tous les liens qui les relieront.
Figure 1 : La structure type d'un site
Un conseil, concevez toujours votre site à partir de sa page d'accueil. C'est par elle qu'arriveront vos visiteurs. C'est donc de là que devront être accessibles toutes les rubriques de votre site. Et chaque page devra posséder un lien permettant le retour vers cette page d'accueil. Cette première page devra impérativement se nommer index.html (ou index.htm). Il s'agit là d'une convention établie sur l'Internet. Les visiteurs tapant dans leur navigateur l'adresse de votre site de cette façon http://www.mon_site.com arriveront directement sur cette page d'index : http://www.mon-site.com/index.html
La bonne extension. Vous pouvez indifféremment enregistrer
vos pages Web avec l'extension .htm ou .html
Pour les autres pages du site, rien n'est obligatoire mais prenez dès à présent les bons réflexes. Tout d'abord, évitez les espaces, caractères accentués et autres lettres bizarres. Pensez donc aux visiteurs étrangers qui n'ont pas forcément ces caractères sous la main. Tenez-vous en aux 26 lettres de l'alphabet et à quelques chiffres, c'est bien suffisant. Ensuite, nommez toutes vos pages, images et autres fichiers entièrement en minuscule. Cela vous évitera bien des confusions lorsque vous aurez à créer des liens.
Etape 2
La structure d'une page HTML
Chacune de vos pages Web doit respecter la structure de base des documents HTML. Mais rassurez-vous, cette structure reste très simple, elle se compose uniquement de quelques balises :
Code :
<html>
<head>
L'en-tête de ma page
< title >Le titre de ma page</title>
</head>
<body>
Le corps de ma page
</body>
</html>
Chacune des trois balises utilisées dans ce squelette de page HTML a un rôle bien précis :
- <html> et </html> délimitent le début et la fin de votre page.
- <head> et </head> délimitent l'en-tête de votre page. Cette partie de la page contient certaines informations de première importance comme le nom de l'auteur, le titre de la page et des données nécessaires au bon référencement de votre site.
- <title> et </title> définissent le titre de votre page. Ce titre s'affiche dans la barre de titre du navigateur.
- <body> et </body> délimitent le corps de la page, c'est-à-dire tout ce qui est affiché dans la fenêtre du navigateur. C'est ici que vous placerez vos images, animations et, bien sûr, vos textes.
Etape 3
Type de mise en page
Pour créer votre mise en page vous devez utiliser la fonction div, et le langage CSS (Feuille de style).
CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique
qui sert à décrire la présentation des documents HTML et XML.
Sélectionner la mise en page que vous souhaitez :
Déclaration d'une feuille de style : <link rel='stylesheet' type='text/css' href='http://www.monsite.com/style.css' media='screen' /> entre les balises <head></head>
| Les bases du css : Les couleurs et les arrières-plans | |
La propriété 'background-color' :
La propriété background-color décrit la couleur d'arrière-plan des éléments.
L'élément <body> est le réceptacle de tout le contenu du document HTML. Pour changer la couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background-color' à l'élément <body>.
On peut aussi appliquer une couleur d'arrière-plan à d'autres éléments y compris les titres et le texte. Dans l'exemple ci-dessous, Des couleurs d'arrière-plan différentes sont appliquées aux éléments <body> et <h1>.
Les images d'arrière-plan [background-image] :
La propriété CSS background-image sert à insérer une image d'arrière-plan.
Comme exemple d'image d'arrière-plan, nous utilisons notre logo ci-dessous. Vous pouvez télécharger l'image pour l'utiliser sur votre propre ordinateur (en cliquant sur le bouton de droite de la souris et en sélectionnant « Enregistrer l'image sous », ou vous pouvez utiliser une autre image si vous voulez.
Pour insérer l'image du logo en arrière-plan d'une page Web, appliquez simplement la propriété background-image à l'élément <body> et indiquez le chemin de l'image.
Code :
<html>
<head>
<style type='text/css'>
body {
background-image: url('http://thillaprod.jpg');
}
</style>
</head>
<body>
</body>
</html>
Répéter l'image d'arrière-plan [background-repeat] :
Avez-vous remarqué, dans l'exemple précédent, que le logo était répété par défaut horizontalement et verticalement pour couvrir la totalité de l'écran ? Ce comportement est contrôlé par la propriété background-repeat.
Le tableau suivant décrit les quatre valeurs différentes de background-repeat.
| Valeur | Description |
|---|---|
| Background-repeat: repeat-x | L'image se répète horizontalement |
| background-repeat: repeat-y | L'image se répète verticalement |
| background-repeat: repeat | L'image se répète horizontalement et verticalement |
| background-repeat: no-repeat | L'image ne se répète pas |
Bloquer l'image d'arrière-plan [background-attachment] :
| Valeur | Description |
|---|---|
| Background-attachment: scroll | L'image défile avec la page (non bloquée) |
| Background-attachment: fixed | L'image est bloquée |
Positionner une image d'arrière-plan [background-position] :
| Valeur | Description |
|---|---|
| background-position: 2cm 2cm | L'image est positionnée à 2 cm de la gauche et à 2 cm du haut de la page |
| background-position: 50% 25% | L'image est positionnée au centre et à un quart de la page vers le bas |
| background-position: top right | L'image est positionnée au coin supérieur droit de la page |
Etape 4
La mise en forme de vos textes
Il est maintenant temps de s'occuper un peu des textes. Pour afficher un texte dans votre page, rien de plus facile. Il vous suffit simplement d'écrire celui-ci à l'intérieur des balises <body> et </body> de cette page. Enregistrez votre travail avec l'extension .htm ou .html et ouvrez le fichier qui en résulte dans votre navigateur Internet... Magique, le texte apparaît ! La base n'est pas plus compliquée que cela.
Mais vous pourriez améliorer la mise en forme de votre texte à l'aide de quelques balises. Que diriez-vous d'ajouter un peu de gras à votre texte ? Pour cela, il vous suffit d'utiliser la balise <b> autour de l'élément que vous souhaitez mettre en valeur. Par exemple :
'<b>Le site http://thillaprod.e-monsite.com/ est un site avec des services et des tutoriaux !</b>'
De la même façon, vous pouvez utiliser les balises <i> et <u> pour respectivement mettre votre texte en italique et le souligner. Toujours sur le même exemple :
'<b>Le site http://thillaprod.e-monsite.com/ est un site avec des services et des tutoriaux !</b>'
'<i>Le site http://thillaprod.e-monsite.com/est un site avec des services et des tutoriaux !</i>'
'<u>Le site http://thillaprod.e-monsite.com/ est un site avec des services et des tutoriaux !</u>'
Vous noterez que l'on peut également imbriquer les balises entre elles. Ainsi, on peut mettre en forme un texte à la fois en gras et en italique, en combinant simplement les balises <b> et <i>.
Voici un petit récapitulatif des balises utiles pour la mise en forme de vos textes :
| Balise | Description |
|---|---|
| <b> | Style gras |
| <i> | Style italique |
| <font> | Utilisation des polices de caractères |
| <table> | Insertion d'un tableau |
| <tr> | Insertion d'une ligne dans un tableau |
| <td> | Insertion d'une cellule dans une ligne de tableau |
| <ul> | Insertion d'une liste numérotée |
| <ol> | Insertion d'une liste à puces |
| <li> | Elément d'une liste |
| <a href='votrelien'></a> | Lien hypertexte |
Afficher une image
Pour afficher une image dans votre page, rien de plus facile. Il vous suffit simplement d'écrire la balise <img src='lienversmonimage.png'>
Etape 5
Rassembler le contenu de vos pages
Et maintenant nous n'allons parler de la fonction include. Très simple d'emploi et fréquemment utilisée, elle permet d'inclure le contenu d'une page PHP dans une autre page PHP.
Supposons que sur votre site web il y ait un menu à gauche. Ce menu est affiché sur toutes les pages de votre site.
Voici comment on fait pour inclure la page menu.php :
Code :
<?php include('menu.php'); ?>
Un exemple concret ? N'allez pas chercher bien loin, regardez ce site web.
Voici l'accueil de notre site :
Voilà vous avez maintenant toutes les cartes en main pour créer votre site internet ! Pour réaliser les graphismes, animations, ect... rendez-vous dans la page des tutoriaux Astuces et conseils !
Ajouter un commentaire