HTML

HTML signifie HyperText Markup Language.

Le langage HTML est un standard; c'est un ensemble de recommandations issues du World Wide Web Consortium (W3C).

Tableaux

Listes
Formulaires
Input (champ de saisie)
Textarea (zone de saisie)
Select (liste déroulante)
Liens
Images



Format d'un fichier html:


<HTML>

<HEAD>
<TITLE> Titre </TITLE>
</HEAD>

<BODY>
Contenu de la page
</BODY>

</HTML>



balises :

TR = ligne
TD = colonne


<body background="fond.jpg"
bgcolor=#000000couleur de fond
text=#FFFFFF couleur du texte
topmargin=3marge haut
leftmargin=3 marge gauche
link=#0000FF couleur des liens
vlink=#9999FFcouleur des liens visités
alink=#FF0000couleur des liens activés
title="infobulle"
>

<br>


<hr size=3 épaisseur(exemple du hr juste dessus ^)
width=90%
align=center
color=#COFFEE
noshadepas d'ombre

>

<b>gras</b>
<u>souligné</u>
<i>italique</i>
<s>rayé</s>

<blink>clignotant</blink>
<big>plus grand</big>
<small>plus petit</small>
^{<sup>exposant</sup>}
_{<sub>indice</sub>}

<em>accentué</em>
<strong>mis en valeur</strong>
<cite>citation</cite>
<code>code</code>
<center>centré</center>

<blockquote>texte avec retrait des deux côtés</blockquote>



<font size=21 à 7
face=arial
color=#789ABC
>



Listes :


<ul type=disc>
<li>élement</li>
</ul>

<ul type=circle>
<li>élement</li>

</ul>

<ul type=square>
<li>élement</li>
</ul>



<ul type=I start=12>

 <li>élement</li>
 <li>suite</li>
 <li>suite</li>
 <li>suite</li>

</ul>




<ul type=1 start=12>
 <li>élement</li>
 <li>suite</li>

 <li>suite</li>
 <li>suite</li>
</ul>



<ul type=A start=12>

 <li>élement</li>
 <li>suite</li>
 <li>suite</li>
 <li>suite</li>

</ul>




Tableaux :

<table
 align="center"
 height="50%"
 width="100%"
 background="file"
 bgcolor="#333333"
 border="0"
 bordercolordark="#000000"bordure pour effet d'ombrage (sombre)
 bordercolorlight="#666666" bordure pour effet d'ombrage (claire)

 cellpadding="2"
 cellspacing="5"
>
<tr bgcolor=#FFEEDD>une ligne
<td align=left
 valign=top/middle/bottomalignement vertical
 bgcolor=#FFEEDD
 width=90%
 height=100%
 colspan=2 permet de se placer sur x colonnes

 rowspan=2 permet de se placer sur x lignes
 > contenant une colonne </td>
<td> et une autre </td>
</tr>

</table>
Résultat :


 contenant une colonne 
 et une autre 




Formulaires :

Ils permettent de passer des données d'une page à une autre.

<form name=nom_formulaire
action=page.htmlnom de la page qui sera appelée à la validation du formulaire
method=post post (invisible) ou get (affiché dans la barre d'adresse avec des ?)
>

<input type=

button <input type=button value=bouton name=bt1>

 checkbox <input type=checkbox value="case à cocher" name=cbox CHECKED>

 file <input type=file value=fichier name=file1>


 hidden <input type=hidden value=cache name=champ_cache>

 password <input type=password name=pass>

 radio bouton radio 1 <input type=radio value="radio1" name=radio1 CHECKED>bouton radio 1
 

  bouton radio 2 <input type=radio value="radio2" name=radio1>bouton radio 2

 text <input type=text value="texte libre" name=texte1>

 reset <input type=reset value="nettoyer le formulaire" name=reset1>

 submit <input type=submit value="envoyer" name=submit1>


 image <input type=image src=images/anim_terre.gif name=img1 title=envoyer>




name=nom_input
size=15taille de la zone de saisie
maxlength=50 longueur max de la saisie
value=valeur valeur par défaut
>




Voici le texte de la zone de texte



<textarea name=long_texte
rows=10 nombre de lignes
cols=20 nombre de colonnes
>Voici le texte de la zone de texte
</textarea>





<select name=nom
size=1> nombre d'éléments visibles
<option>élément 1</option>
<option selected>élément 2</option>
<option>élément 3</option>

<option>élément 4</option>
<option>élément 5</option>
</select>



</form>




Liens :

<a name=nom_ancrenom de l'ancre
href=page ou ancrenom d'une ancre (par name) dans la même page ou/et nom d'une autre page
>

ex : <a href=www.un_site_internet.fr> un site
 <a name=lien1> juste une ancre
 <a href=index.html#lien1> une autre page avec le lien dans la page




Images :

<img src=images/anim_terre.gif
hspace=2espace à gauche et à droite de l'image
vspace=2espace en haut et en bas de l'image
width=20largeur
height=20 hauteur
taille de la bordure
alt="image!"infobulle
>

Comment limiter la copie, l'enregistrement de vos images ?

Vous pouvez placer un "calque" par dessus votre imge, ainsi quand on voudra enregistrer l'image, seul le calque sera pris. Vous devez connaître les dimensions de votre image.
exemple :

<html>
<head>

</head>

<body>

<div style="background-image:url(im.jpg); height:600px; width:800px;">
<div style="background-image:url(tr.gif); height:600px; width:800px;"></div>
</div>

</body>

</html>

- im.jpg est votre image (elle mesure ici 800x600).
- tr.gif est une image transparente que vous pouvez récupérer ici (clic droit, enregistrer l'image).

Image de test : essayez de la récupérer simplement.

button		<input type=button value=bouton name=bt1>
checkbox		<input type=checkbox value="case à cocher" name=cbox CHECKED>
file		<input type=file value=fichier name=file1>
hidden		<input type=hidden value=cache name=champ_cache>
password		<input type=password name=pass>
radio	bouton radio 1	<input type=radio value="radio1" name=radio1 CHECKED>bouton radio 1
	bouton radio 2	<input type=radio value="radio2" name=radio1>bouton radio 2
text		<input type=text value="texte libre" name=texte1>
reset		<input type=reset value="nettoyer le formulaire" name=reset1>
submit		<input type=submit value="envoyer" name=submit1>
image		<input type=image src=images/anim_terre.gif name=img1 title=envoyer>

HTML

<html> <head> </head> <body> <div style="background-image:url(im.jpg); height:600px; width:800px;"> <div style="background-image:url(tr.gif); height:600px; width:800px;"></div> </div> </body> </html>