Voici un petit tutoriel pour les novices en programmation web. Ce tuto vous explique comment faire un page basique en html.
Tout d'abord, il faut savoir que en html, toutes les balises (ou tags) commence par < et se termine par >. Exemple :
<html>
Continuons sur la lancée de cet exemple. Tout le code html de votre page doit se trouver entre ces deux balises :
<html> </html>
Toute page web est divisée en deux parties : l'entête et le corps.
1. L'entête
Il ce trouve entre ces deux balises :
<head> </head>
Dedans, on peut trouver, le titre de la page, l'appel de la feuille de style (voir plus loin) ou de fichiers javascript, les méta-données,...
Pour le titre, il faut le placer entre ces deux balises :
<title> Le titre de votre site </title>
L'appel de la feuille de style se fait comme suit :
<link rel=stylesheet href="styles.css" type="text/css">
Voici un exemple d'appel de fichier javascript :
<script type="text/javascript" src="fichierjs.js"></script>
Et pour terminer avec l'entête, voici un exemple de méta-donnée
<META NAME="Nom du tag" CONTENT="Attribut">
2. Le corps
Le corps de la page se trouve entre ces deux balises :<body> </body>
C'est ici que vous écrirez tout ce qui doit figurer à l'écran.
Vous pouvez mettre une image :
<img src="nomimage.ext" />
Un lien vers une autre page :
<a href="destination.ext"> </a>
L'attribut a peut prendre en paramètre la cible c'est à dire si vous voulez que la page soit affichée dans la même, ou dans un pop-up ou dans une nouvelle fenêtre :
- target = "_blank" : dans une nouvelle fenêtre
- target = "_parent" : dans la fenêtre parent des frames
- target = "_top" : propriété par défaut, ouvre le document dans la même fenêtre
- target = "_self" : la page s'ouvre dans la même frame
Je parle des possibilités pour les frames, mais je vous les déconseille.
Il est aussi possible de faire des liens avec des ancres, c'est-à-dire un lien dans la même page mais à un niveau différent :
<a href="#ancre"> </a>
Et pour dire au navigateur où se situe l'ancre :
<a name="ancre"> </a>
Voilà pour les liens.
On peut aussi faire de la mise en page en html, mais je ne développerait pas trop ce point.
- Le texte inclu entre les balises <B> et </B> apparaitra en gras
- Le texte inclu entre les balises <I> et </I> apparaitra en italique
- Le texte inclu entre les balises <U> et </U> apparaitra souligné
Les lettres accentuées sont elles aussi encodées pour permettre aux navigateurs d'afficher la bonne lettre et non une suite de caractères spéciaux.
Voici les principaux :
- " : "
- & : &
- € : €
- é : é
- è : è
- ê : ê
- â : â
- à : à
- < : <
- > : >
- 'espace' :
Voyons maintenant les titres. Les titres se situent entre les balises <h></h>. Exemple :
<h2>Deuxieme titre</h2>
Ce qui donne :
Premier titre
Deuxieme titre
Il est aussi possible de faire une ligne grâce à la balise <hr />
Les sauts de lignes se font de la manière suivant : <br />
Je commence déjà à en parler mais nous le verrons plus en detail dans la mise en page avec le css. Les paragraphes :
<p> Texte du paragraphe </p>
Ce qui aura pour but d'isoler un paragraphe (saut de ligne avant et après le paragraphe). Il existe un attribut qui permet d'isoler seulement un morceau de texte dans un paragraphe. Sans paramètre supplémentaires, on ne verra pas la différence.
<span> </span>
Et idem que pour les paragraphes mais les divisions sont plus pour de la mise en page :
<div> </div>
En ce qui concerne les tableaux, un tableau commence par les balises :
<table> </table>
Une ligne par :
<tr> </tr>
et une case par :
<td> </td>
Exemple :
<table>
<tr>
<td>hello</td>
<td>coucou</td>
</tr>
<tr>
<td>hello2</td>
<td>coucou2</td>
</tr>
</table>
Ce qui donne :
| hello | coucou |
| hello2 | coucou2 |
Les listes se font de la forme suivante :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
</ul>
<ul></ul> correspond à un liste non-ordonnée, il existe aussi <ol></ol> qui est, cette fois ci une liste ordonnée. Voilà pour les principaux.
Et pour terminer, les commentaires :
<!-- tout ce qu'il y a entre ces deux balises ne sont pas interprétées par le navigateur -->
Il existe beaucoup d'autre attribut pour la mise en forme de texte, mais je préfère ne pas les aborder pour le moment, histoire d'être sûr que vous allez utiliser le CSS.
3. Un exemple concret
Voici une page de base commentée
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- balise de début de la page -->
<head> <!-- balise d'entête -->
<title>Ma première page</title> <!-- balise de titre -->
</head> <!-- fin de l'entête -->
<body>
<!-- balise de corps -->
Bonjour, bienvenue sur ma première page
<hr />
<!-- balise pour tracer une ligne -->
Voici un exemple de texte en <b>gras</b>, en <i>italique</i> et un <u>souligné</u>.
</body>
<!-- fin du corps -->
</html> <!-- fin de la page html -->
Utilisez votre éditeur de texte et essayez de changer cette page. Pour pouvoir la tester, il suffit d'enregistrer le fichier sous la forme test.html, ouvrez votre navigateur préféré, et faites fichier>ouvrir.
Je pense que vous avez maintenant toutes les bases nécessaires en html pour pouvoir faire un site statique. Pour ce qui est du dynamique, il suffit juste d'ajouter du php dans la page. Par contre pour pouvoir afficher des fichiers de type .php, il faut soit passer directement par un serveur web, soit par EasyPHP ou Wamp.
Une fois que le html maitrisé, passons à la mise en page avec le css.