GUIDEGRATUIT.COM

Apprenez à créer un site en HTML simplement et progressivement...
Accueil
Introduction importante
Le HTML c'est quoi ?
Notre projet
Equipez vous
Votre première page
Gérer le texte
Mise en page
Images
Tableaux
Liens
Couleurs
Formulaires
Hébergeurs de sites
Mise en ligne FTP
Frames
Autres cours
Résumé des balises
Le dico du site
Vos questions (F.A.Q.)
Le Forum
Liens utiles
Contact webmaster
Copyright
RESUME DES BALISES

Je vous donne ici un "aide mémoire" pour retrouver rapidement une balise HTML, mais si vous n'avez pas lu le cours correspondant aux balises : faites le !!! Les cours sont en effet bien mieux expliqué !

Bases d'une page HTML :

<HTML>
<HEAD>
<TITLE>Le titre de votre page</TITLE>
</HEAD>
<BODY>
Le contenu de votre page
</BODY>
</HTML>

Gestion du texte :

- <b>texte</b> (BOLD en anglais) : permet de mettre un texte en gras. Résultat : voici un texte en gras.
- <i>texte</i> (Italic) : permet de passer un texte en Italique. Résultat : voici un texte en italique.
- <u>texte</u> (Underligne) : permet de souligner un texte. Résultat : voici un texte souligné.
- <s>texte</s> (Strike) : permet de rayer un texte. Beaucoup moins utile. Résultat : voici un texte rayé.

Mise en page :

<BR> : passer à la ligne (effet cumulable : deux <BR> saute une ligne)
<P> : sauter une ligne (effet non cumulable)
<CENTER>texte</CENTER> : pour centre un texte dans la page (très utile !)
<P ALIGN="LEFT ou RIGHT ou CENTER">texte à aligner</P> : pour aligner votre texte
<HR SIZE="épaisseur en pixels" WIDTH=largeur ALIGN=alignement> : créé une barre, peu utilisée mais utile parfois...

Images :

<IMG SRC="nomdevotreimage.extension" WIDTH="largeurenpixel" HEIGHT="hauteurenpixel"> : pour insérer vos images.

Tableaux :

Structure simple d'un tableau (dans l'ordre d'apparition des balises) :

- <TABLE> : pour ouvrir un tableau.
- <TR> : pour ouvrir une ligne.
- <TD></TD> : pour ouvrir et fermer une cellule.
- <TH></TH> : pour ouvrir et fermer une cellule contenant du texte centré et en gras.
- </TR> : pour fermer une ligne.
- </TABLE> : pour fermer le tableau.

Options de tableau :

<TABLE WIDTH="X" HEIGHT="X"> : où X est la largeur ou la hauteur du tableau définie en pixels ou en pourcentage en ajoutant %.
<TABLE BORDER="X"> : où X est l'épaisseur de la bordure.
<TABLE CELLSPACING="X"> : où X est l'espace entre les cellules.
<TABLE CELLPADDING="X"> : où X est l'espace entre une cellule et son contenu.

Fusionner les cellules :

<TD COLSPAN="X"> : où X est le nombre de colonnes sur lequel s'étend la cellule.
<TD ROWSPAN="X"> : où X est le nombre de lignes sur lequel s'étend la cellule.

Liens :

Un lien externe c'est : <A HREF="http://www.nomdusite.com">Accès au site nomdusite.com</A>
Un lien interne c'est : <A HREF="mapage.html">Aller sur ma page</A>
Un lien mail c'est : <A HREF="mailto:pseudo@provider.com">Cliquez pour m'écrire sur pseudo@provider.com</A>
Un lien sur une image c'est : <A HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg" BORDER="0" WIDTH="X" HEIGHT="X"></A>
Un lien sur une image avec une bulle d'information c'est : <A HREF="http://www.nomdusite.com"><IMG SRC="logodusite.jpg" BORDER="0" WIDTH="X" HEIGHT="X" ALT="votre texte pour information"></A>

Couleurs :

Polices :

De la couleur pour votre texte c'est : <FONT COLOR="#votrecodeenhexa">votre texte</FONT>
Définir la taille de votre police c'est : <FONT SIZE="votre taille de 1 à 7">votre texte</FONT>
Définir le type de votre police c'est : <FONT FACE="type de police">votre texte</FONT>

Page :


Définir le fond de page c'est : <BODY BGCOLOR="#votrecodeenhexa">

Tableaux :


Définir la couleur de bordure de votre tableau c'est : <TABLE BORDERCOLOR="#votrecouleurenhexa" BORDER="tailledelabordure">
ou <TABLE BORDERCOLORLIGHT="#0000FF" BORDERCOLORDARK="#votrecouleurenhexa" BORDER="tailledelabordure">
Définir la couleur de fond de votre tableau c'est : <TABLE BGCOLOR="#votrecouleurenhexa">
Définir la couleur de fond d'une cellule de votre tableau c'est : <TD BGCOLOR="#votrecouleurenhexa">

Liens (Bonus) :


Définir la couleur de vos liens c'est (code à mettre entre les balises <HEAD> et </HEAD>) :
<style TYPE="text/css">
A:link {color: #0000FF}
A:visited {color:#000082}
A:hover {color:#FF0000}
</style>

Formulaires :

Insérer un formulaire commence toujours par le placement de :

<FORM METHOD="post" ACTION="mailto:votrepseudo@votreprovider.com" ENCTYPE="TEXT/PLAIN">
Ici vos champs de choix.
</FORM>

Les différents champs (à mettre entre les balises <FORM> et </FORM> sont (par exemple) :

Champ de ligne simple : <INPUT TYPE="text" NAME="sonnom" SIZE="25" MAXLENGTH="50" VALUE="Entrez ici votre nom">

Champ multi-lignes : <TEXTAREA NAME="son adresse" ROWS="3" COLS="25" WRAP="PHYSICAL">Entrez ici votre adresse</TEXTAREA>

Une liste déroulante :
<SELECT NAME="genre" SIZE="1">
<OPTION VALUE="Madame" selected>Madame</OPTION>
<OPTION VALUE="Mademoiselle">Mademoiselle</OPTION>
<OPTION VALUE="Monsieur">Monsieur</OPTION>
</SELECT>

Des boutons radio : <INPUT TYPE="radio" NAME="Bouton choisi" VALUE="Contact téléphonique">

Des cases à cocher : <INPUT TYPE="checkbox" NAME="Case coché" VALUE="Création de site">

Un bouton d'envoi : <INPUT TYPE="submit" NAME="Submit" VALUE="A répondu à mon formulaire">


Un jeu de frame simple (sommaire en haut, contenu en bas) :

<html>
<head>
<title>Bienvenue sur mon site</title>
</head>

<frameset rows="50,*" frameborder="NO" border="0" framespacing="0">
<frame name="sommaire" src="sommaire.html" noresize scrolling="NO">
<frame name="contenu" src="page1.html">
</frameset>

<noframes>
<body bgcolor="#FFFFFF">
Désolé votre navigateur ne gère pas les frames !
</body>
</noframes>
</html>