Vous pouvez créer votre site web à l'aide du HTML. Le HTML est un langage de programmation. Je vais vous l'expliquer.
Attributs: aucuns
Exemple: <u>Aide au HTML</u> Aide au HTML
1. Commencement.
Pour commencer, il vous faut ouvrir le bloc notes (Démarrer, programmes, accessoires, bloc notes). Tout le code sera à taper dedans. Pour enregistrer la page, vous devrez faire "Fichier, enregistrer sous, sélectionner "Tous" dans le menu déroulant en bas, et tapez le nom de la page que vous souhaitez suivi de .html
Une page HTML est fondée sur cette base :
<html>
<head>
</head>
<body>
</body>
</html>
Tout le code doit être compris entre les balises <html> et </html>, toujours en HTML.
Entre <head> et </head> nous mettrons certaines informations propres a la page. Par exemple <title>Ma 1ere page HTML</title> (ceci mettra un titre a la page que vous verrez affiche dans la bande bleue tout en haut du navigateur).
Dans la balise <body>, nous mettrons toutes les couleurs relatives à la page. Elle a pour attributs "bgcolor" correspond au font du site, text a la couleur du texte "link" aux liens et "vlink" aux liens déjà clique. Maintenant il faut les colorer, pour cela il existe un code de couleur. Ce code est compose de # + 6 caractères. Voici un exemple de balise body : <body bgcolor="#AFEEEE&" text="#FA8072" link=#7FFF00 vlink=#32CD32> Ce qui nous donnera un fond bleu ciel avec du texte saumon, des liens verts clair et des liens clique vert un peu plus fonces; ce n'est pas très esthétique mais c'est pour l'exemple ;o).
Entre les balises <body> et </body> il faudra mettre tout le corps de la page.
2. Bases du HTML
Le html est compose de balises comprises entre "<" et ">" par exemple : <body>
Chaque balise peut avoir des attributs, c'est-à-dire que dans la balise après avec espace nous mettrons attribut="option de l'attribut". Voici une balise body avec l'attribut bgcolor : <body bgcolor="#000000"> bgcolor étant le fond du document et #000000 la couleur noire. Ce qui nous donnera un document avec un fond noir. Mais une balise peut avoir plusieurs attributs : <body bgcolor="#000000" text="#FFFFFF">. Text étant la couleur du texte et #FFFFFF le blanc.
Vous avez également la possibilité de mettre un commentaire, ce commentaire ne sera visible que dans le code source (il peut servir pour donner un renseignement ou pour publicité...). <!--Commentaire--!>.
3. Les paragraphes
Pour débuter un paragraphe mettez la balise <p> et la balise de fermeture (n'oubliez pas votre texte entre les deux) </p> a la fin du paragraphe. Il existe deux attributs, nowrap (pas de retour a la ligne) et align. Align possède 4 valeurs ; left, center, right et justify. Left mettra le texte à gauche, right à droite, center au centre et justify justifiera le texte.
Exemple:
<p align="center">Exemple de texte</p> ce qui nous donnera :
Exemple de texte
La balise <br> insère un simple retour a la ligne (a noter qu'il n'y a pas de balise de fermeture).
La balise <nobr> interdit le retour a la ligne et met tout le texte sur une même ligne à noter qu'il y a une balise de fermeture, </nobr> (le défilement horizontal c'est pas très... agréable, a utiliser avec modération)
4. Les textes
Pour débuter un paragraphe mettez la balise <p>. N'importe quel texte doit être compris entre la balise <font> et </font>. Cette balise possède beaucoup d'attributs :
- color, permet de spécifier la couleur: <font color="#000000">Exemple</font>: Exemple.
- face qui permet de définir la police de caractères (par défaut Times New Roman). <font face="arial">Exemple</font> :
- lang pour préciser le langage du texte (quasiment inutile donc pas d'exemple :-p).
- size (de 1 à 6) définit la taille du texte: <font size="5">Exemple</font> : Exemple
Le soulignage d'un texte s'active avec la balise <u> et se desactive avec </u> : <u>Exemple</u>: Exemple
Pour mettre un texte en gras il faut le mettre entre <b> et </b> : <b>Exemple</b> : Exemple
Il est bien sur possible de mettre un texte gras & souligné : <b> <u>Exemple</u> </b> : Exemple
5. Les images & vidéos.
Les images :
Les images s’insèrent avec la balise <img> il y a un attribut obligatoire src (adresse de l'image). Exemple: <img src="http://site.voila.fr/html_4/divers/darkvador.jpg">.
Voici tous les attributs :
- title Affiche un texte a l’arrêt du curseur sur l'image. <img src="http://site.voila.fr/html_4/divers/darkvador.jpg" title="Luke je suis ton père">
- alt Affiche un texte en cas d’inexistence de l'image. <img src="http://site.voila.fr/html_4/divers/darkvador.jpg" alt="Luke je suis ton pere">
- border Met une bordure à l'image (de 1 à 6). <img src="http://site.voila.fr/html_4/divers/darkvador.jpg" border="4">"
- widht & height Indique la hauteur et la largeur de l'image en pixels. <img src="http://site.voila.fr/html_4/divers/darkvador.jpg" wight="277" height="390" >"
Voici donc notre image avec tous ses attributs: <img src="http://site.voila.fr/html_4/divers/darkvador.jpg" alt="Luke je suis ton père" border="4" wight="277" height="390">
6. Les vidéos.
Si vous voulez insérer une vidéo dans votre page, il y a deux possibilités ; soit en ouvrant le lecteur, soit en l’intégrant directement dans la page.
Pour l'ouvrir avec Windows media player il suffit de faire un lien vers video.mpg (ou mpeg, avi...).
Pour l’insérer directement dans la page il faut utiliser la balise <embed> avec l'attribut src (obligatoire) spécifiant l'url de la vidéo. Ses attributs sont nombreux...
- border De 1 a 6 spécifie la bordure.
- widht et height Largeur et hauteur de "l’écran", en pixels.
– loop. Spécifie le nombre de fois qu'est jouée la vidéo (pour infini, mettre -1).
- controls Active ou desactive la présence des boutons (lecture, pause, stop...) sous l'image "true" pour oui et "false" pour non. Par défaut les boutons seront présents (true).
- autostart Active (true) ou desactive (false) le démarrage automatique. Par défaut true. Si les boutons ne sont pas actives ne mettez pas false a cet attribut au quel cas votre visiteur ne pourrait pas voir la vidéo.
- autoload Active (true) ou desactive (false) le chargement automatique de la vidéo. Par défaut true.
Voici un exemple de code de vidéo embed ; <embed src="http://www.tintin.fr/tintinautibet.mpg" border="1" widht="300" height="300" loop="1" controls="false" autostart="true" autoload="true">
7. L'audio mestre une musique dans un site
Comme pour les vidéos la balise <embed> grâce à cette balise vous pourrez mettre n'importe quel type de sonorité il y un attribut obligatoire, comme d'habitude, src qui permet de préciser l'url de votre son. Voici les attributs les plus utiles et les plus fréquents:
- loop Nombre de fois qu'est joue le son (-1 pour l'infini).
- widht et height Largeur et hauteur de la fenêtre .
-volume En %, permet de régler le volume.
Cette méthode est uniquement si vous voulez faire écouter un mp3 avant de le télécharger ou si vous avec un site de sonneries de téléphone portable...
Vous pouvez également le faire avec un lien :
<a href="http://site.voila.fr/slimp4/son.mid">Musique! </a> : Musique !
Je vais maintenant vous expliquer comme insérer un fond sonore, a sa page comme vous pouvez l'entendre. Il suffit d’insérer la balise <bgsound> qui possède seulement deux attributs :
- src Indique l'url du morceau (obligatoire)
- loop Spécifie le nombre de nombre de fois qu'est joue le morceau (-1 pour infini)
Voici la balise que j'ai mis dans la page : <bgsound src="http://site.voila.fr/slimp4/son.mid" loop="1">
8. Les tableaux
Alors maintenant ça ne rigole plus ! Les tableaux sont indispensables pour pouvoir avoir un site parfaitement organiser et clair. Comme ca, ca a l'air très complique, mais ne vous inquiétez pas c'est très simple mais c'est a connaître parfaitement.
Tout un tableau est fonde sur ces 4 balises :
-<table> : indique la création du tableau.
-<th> : Défini la première ligne de chaque colonnes.
-<tr> : Rajoute une ligne.
-<td> : Définit l’intérieur d'une cellule
La balise <caption> Permet de donner un titre au tableau.
Exemple :
<table border="2">
<caption>Titre du tableau</caption>
<tr>
<th>Colonne n°1</th>
<th>Colonne n°2</th>
<th>Colonne n°3</th>
</tr>
<tr>
<td>Cellule n°1</th>
<td>Cellule n°2</th>
<td>Cellule n°3</th>
</tr>
<tr>
<td>Cellule n°4</th>
<td>Cellule n°5</th>
<td>Cellule n°6</th>
</tr>
<tr>
<td>Cellule n°7</th>
<td>Cellule n°8</th>
<td>Cellule n°9</th>
</tr>
</table>
L'attribut de <table>, border, permet de préciser la taille (en pixel) de la bordure. Pour la faire invisible (conseille) mettez 0.
Voici donc le résultat de notre tableau :
Titre du tableau
Colonne n°1
Colonne n°2
Colonne n°3
Cellule n°1
Cellule n°2
Cellule n°3
Cellule n°4
Cellule n°5
Cellule n°6
Cellule n°7
Cellule n°8
Cellule n°9
Voici le même tableau en changeant l'attribut border="2" en border="0":
Titre du tableau
Titre du tableau
Colonne n°1
Colonne n°2
Colonne n°3
Cellule n°1
Cellule n°2
Cellule n°3
Cellule n°4
Cellule n°5
Cellule n°6
Cellule n°7
Cellule n°8
Cellule n°9
Voici les différents types d'alignements :
- align="left" : attribut de <td> <th> <tr> alignera tous les éléments a gauche dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- align="right" : attribut de <td> <th> <tr> alignera tous les éléments a droite dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- align="center" : attribut de <td> <th> <tr> alignera tous les éléments au centre dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- valign="middle" : attribut de <td> <th> <tr> alignera tous les éléments au milieu verticalement et horizontalement dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- valign="top" : attribut de <td> <th> <tr> alignera tous les éléments en haut dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- valign="bottom" : attribut de <td> <th> <tr> alignera tous les éléments au milieu (vertical) dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
- valign="baseline" : attribut de <td> <th> <tr> alignera tous les éléments en bas dans une cellule (td), toute une ligne (td) ou toute une colonne (th).
Il est possible exactement de la même manière de mettre un fond a une cellule avec la balise bgcolor="#code-couelur". Il est également possible de régler la couleur de la bordure avec l'attribut de
bordercolor="#code-couleur" et même l'ombre des cellules: bordercolordark="#code+couleur".
Les attributs height et widht (hauteur et largeur en pixels) fonctionnent aussi. Exemple:
<table border="2" bordercolor="#f2486f" bordercolordark="#ffffff" <caption>Titre du tableau</caption>
<tr>
<th> <bgcolor="#84a624f">Colone n°1</th>
<th>Colone n°2</th>
<th>Colone n°3/th
</tr>
<tr>
<td>Cellule n°1</th>
<td>Cellule n°2</th>
<td>Cellule n°3</th>
</tr>
<tr>
<td>Cellule n°4</th>
<td>Cellule n°5</th>
<td>Cellule n°6</th>
</tr>
<tr>
<td>Cellule n°7</th>
<td>Cellule n°8</th>
<td>Cellule n°9</th>
</tr>
<tr>
</table>
Titre du tableau
Colone n°1
Colone n°2
Colone n°3
Cellule n°1
Cellule n°2
Cellule n°3
Cellule n°4
Cellule n°5
Cellule n°6
Cellule n°7
Cellule n°8
Cellule n°9
9. Les formulaires
Pour l'insertion d'un formulaire il faut utiliser la balise <form> avec comme attribut action qui va nous indiquer l'adresse du script CGI, l'attribut méthode avec post comme valeur (nous verrons les autres valeurs plus tard). Il existe un autre attribut ; enctype. Mettez comme valeur text/plain, sauf si, le formulaire comporte un fichier attache.
Voici maintenant comme insérer un bouton:
Il faut utiliser la balise input avec comme attribut type. Ce type aura deux valeurs; submit (valide) et reset (annule). La valeur value indique le texte qui est sur le bouton. Exemple:
<input type="submit" value="Boutton">
Pour insérer une zone de texte il faut aussi utiliser la balise <input> avec comme valeur pour type "text". Sans oublier de rajouter l'attribut name (obligatoire), size (taille), maxlenght (Nombres de caractères maximum) et value (texte par défaut). Exemple :
<input type="text" name="barre-texte" size="30" maxlength="50" value="texte">>
Ce que nous venons de voir n'est que pour indiquer un nom un mail... Pour mettre un texte complet il vaut mieux utiliser la balise <textarea>. L'attribut name est obligatoire, et rows et cols spécifiant la largeur et la longueur de la boite de texte...
Exemple :
<textarea cols="50" rows="10" name"zone-text">Exemple de boite de texte</textarea>
Pour insérer une case a cocher (checkbox) la même balise <input> sera utilisé, avec comme valeur de type ; checkbox.
Exemple:
<input type="checkbox" name="case">Exemple de checkbox </input>
Exemple de checkbox
Pour insérer une radio (un seul choix) il faudra toujours utiliser <input>, le fonctionnement est le même que pour la checkbox...
Exemple :
<input type="radio" name="radio">Radio1<br> <input type="radio" name="radio">Radio2</input>
Radio1 Radio2
A noter que pour qu'une case soit cochée par défaut il faut ajouter l'attribut checked sans valeur.
Un menu déroulant se créera à partir de la balise <select>. Je vous laisse observer l'exemple pour que vous compreniez mieux :
<select name="liste"> <option value="1er-exemple">1er exemple<option value="2nd-exemple">2nd exemple</select>
La balise option avec l'attribut selected sans valeur sera Sélectionnée par défaut.
Voici comment avoir la possibilité d'ajouter un fichier attache au formulaire :
<input type="file" value="attachement">
L'autre valeur de méthode dont je vous avais parle au début, est get, elle permettra de faire un moteur de recherches interne...
Et n'oubliez pas la balise </form> à la fin de votre formulaire !
Les cours sont finis ! Vous connaissez maintenant le HTML, il ne vous reste plus qu'a mettre votre site en ligne !
(c) SLOCHE.COM
korckchit
- Créé à l'aide de Populus.
Modifié en dernier lieu le 10.06.2004-
Déjà 3682 visites sur ce site!
