Initiation langage HTML, balise, attribut, valeur

HTML

Le World Wide Web Consortium
W3C	Le Web n'est à personne mais il n'y règne pas l'anarchie. Le World Wide Web Consortium gère l'organisation du net. Le W3C établit des normes comme HTML, PHP, HTTP ou FTP, qu'il faut respecter pour le développement du Web.
Visiter le site	http://www.w3.org

Le langage HTML
Le langage HTML	Toute page Web est écrite dans un langage nommé HTML. La conversion automatique en HTML fonctionne assez bien, mais elle a ses limites générant maintes fois des anomalies qui doivent être corrigées. Pour créer une page Web il est donc indispensable de connaître le langage HTML. HTML définit un ensemble de commandes de formatage de documents, délimitées par des balises. Ses balises précisent la nature et l'emplacement du texte pour qu'il soit lisible dans tous les navigateurs. Les commandes HTML doivent être écrites en minuscules. Les espaces sont ignorés.
Téléchargement	Télécharger la bible du langage HTML

Créer un document HTML
Structure HTML	Ouvrez le bloc note de window$. Copier/Coller le code source ci dessous. Dans 'Fichier' faites 'enregistrer sous' et nommez le fichier mapage.htm <html> <head> <title>Le titre de la page Web en haut du navigateur</title> </head> <body> <div align="center">AIDE AU LANGAGE HTML</div> </body> </html>

Les balises <HTML> <HEAD> <TITLE>
HTML HEAD TITLE BODY	La balise <html> se situe au début du code source et la balise </html> à la fin du code source. Cette balise permet au navigateur de savoir qu'il s'agit bien d'un document dans le langage HTML. Les commandes <head> et </head> contiennent un générique de la page Web. Celui-ci n'est pas affiché dans la fenêtre de texte du navigateur. Il fournit entre autre des informations sur le document qui poura être alors enregistré par les moteurs de recherche. Le titre de votre page Web est affiché en haut à gauche de votre navigateur. Insérez le titre entre <title> et </title> Après l'en tête il y a le corps du texte, body en anglais. La page Web qui s'affiche à l'écran se trouve dans le body. Le texte entre <body> et </body> se retrouvera affiché dans le navigateur.

Principales notions sur les balises HTML
Commandes HTML avec Début et Fin	La commande de fin est introduite par un slash (/)pour la différencier de la commande de début. Exemple: <h1>Initiation au langage HTML</h1> Initiation au langage HTML
Commandes HTML sans Fin !	Toutes les commandes HTML n'ont pas deux parties. Ainsi, une ligne peut-être forcé avec la commande <br>

Commandes html avec attributs
Les attributs	On précise les commandes HTML avec des attributs. Un attribut est souvent suivi d'un signe égal (=) et d'une valeur déclarée entre guillemets. Exemple: <h1 align="center">Initiation au langage HTML</h1>. Initiation au langage HTML Cet attribut permet d'aligner le texte entre <h1> et </h1>. Notez que la valeur center est entre guillemets.

Les principaux attributs du tag <body>
Les attributs du tag <body>	bgcolor Définit la couleur du fond de l'écran. text Définit la couleur du texte par défaut. link Définit la couleur des liens par défaut. vlink Définit la couleur des liens visités par défaut. alink Définit la couleur d'un lien actif par défaut. background Définit une image de fond en mosaïque. OnLoad Evénement JavaScript. lang Définit la langue de la page. scroll Définit s'il y a une barre de défilement ou non. bgproperties Définit si l'image doit être fixe, seul valeur possible : fixed. style Insert des éléments de Feuilles de Styles. Le tag <body> avec ses attributs, sans valeurs : <body bgcolor="" text="" link="" vlink="" alink="" background="" OnLoad="" lang="" scroll="" bgproperties="" style="">

Quelques balises pour développer avec HTML
Balises HTML	Faire un saut de ligne avec <br> Créer une barre de séparation avec <hr> Marger votre texte avec le tag <blockquote> </blockquote> Barrer votre texte avec le tag <strike> </strike> Ecrire en petit avec le tag <small> </small> Ecrire en grand avec le tag <big> </big> Ecrire en gras avec le tag <b> </b> Ecrire en italique avec le tag <i> </i> Ecrire un indice avec le tag <sub> </sub> Ecrire un exposant avec le tag <sup> </sup> Un texte avec des espaces réguliers avec le tag <tt> </tt> Un texte séparé en paragraphes avec le tag <div> </div>

Balises spécifiques à Internet Explorer
Spécifique à Internet Explorer	<marquee width="50" bgcolor="red">HTML</marquee> Si vous avez Internet Explorer, vous pouvez voir l'effet.

Les puces en HTML
Les puces	<ul type="circle"> <li>Votre</li> <li>Texte</li> <li>Numéro 1</li> </ul>	Votre Texte Numéro 1
	<ul> <li>Votre</li> <li>Texte </li> <li>Numéro 2</li> </ul>	Votre Texte Numéro 2
	<ul type="square"> <li>Votre</li> <li>Texte</li> <li>Numéro 3</li> </ul>	Votre Texte Numéro 3
	<ol> <li>Votre</li> <li>Texte</li> <li>Numéro 4</li> </ol>	Votre Texte Numéro 4
	<ol type="I"> <li>Votre </li> <li>Texte </li> <li>Numéro 5</li> </ol>	Votre Texte Numéro 5
	<ol type="a"> <li>Votre</li> <li>Texte </li> <li>Numéro 6</li> </ol>	Votre Texte Numéro 6
	<ol type="A"> <li>Votre </li> <li>Texte</li> <li>Numéro 7</li> </ol>	Votre Texte Numéro 7

Insérer des images avec le langage HTML
Insérez des images avec le langage HTML	La balise pour insérer des images est <img> Les attributs de <img> : <img src="" width="" height="" alt="" border="" align="" hspace="" vspace=""> src="" Lien vers l'image (Absolu ou Relatif) width="" Largeur de l'image en pixel. height="" Hauteur de l'image en pixel. alt="" Déscription de l'image. border="" Donne un bord à l'image avec des valeurs 0, 1, 5. align="" Aligner l'image avec les valeurs left, right, center. hspace="" Espacement horizontal avec des valeurs 0, 5, 10. vspace="" Espacement vertical avec des valeurs 0, 5, 10. Retour à la ligne avec <img src="" width="50" height="50" alt="Exemple. Retour à la ligne.">

Créer un lien hypertexte
Lien Absolu	<a href="http://visionduweb.com">Voici mon site</a> <a href="http://visionduweb.com/index.php4">Index</a>
Lien Relatif	On travail actuellement dans le fichier html_01.html On veut passer de la page html_01.html à html_02.html Le lien est donc le suivant : <a href="html_02.html">Page 01 à 02</a>
	Ajoutons dans le répertoire HTML un répertoire image. Nous travaillons toujours sur le fichier html_01.html. L'image html.gif que nous voulons afficher se trouve dans le répertoire image Pour afficher l'image sur 'html_01.html' le lien est : <img src="image/html.gif">
	Nous allons afficher l'image html.gif qui se trouve dans le répertoire HTML. Nous travaillons sur le fichier index.html qui se trouve dans le répertoire image. Le lien à insérer dans 'index.html' est : <img src="../html.gif">

Améliorer votre lien hypertexte
Le target	Un lien correct doit contenir l'attribut target. <a href="" target=""> Les valeurs de l'attribut sont : _blank (Le navigateur affiche le document cible dans une nouvelle fenêtre) _parent (Le document cible remplace le document qui définit le jeu de cadres auquel appartient le cadre actuel s'il en existe un. Sinon, il est traité comme _self) _self (Le document cible remplace le document actuel dans sa fenêtre ou dans son cadre) _top (Le document cible remplace tous les jeux de cadres éventuellement chargés. Sinon, il est traité comme _self)

Pointer vers un paragraphe
Pointer vers un paragraphe	Pour aller sur une autre page : <a href="adresse_de_la_page">Le texte du lien</a> Pour pointer vers l'emplacement d'une page, il faut insérer un code HTML à cet emplacement. <a name="paragraphe4"> </a> Le lien suivant pointe vers le paragraphe numéro 4 <a href="adresse_de_la_page#paragraphe4">Ce lien pointe vers le paragraphe 4 de adresse_de_la_page</a>

Créer un lien vers une adresse mail
Créer un lien vers une adresse mail	Le code source HTML à insérer est le suivant : <a href="mailto:mail@adresse.fr?subject=Bonjour"> Envoyer message</a> Ce code HTML donne le lien suivant : Envoyer un message

Lire un fichier .txt
Code source	<a href="html.txt" target="_blank">Lire</a>
Exemple	Lire

Tableau en HTML et la balise <table>
Tableau HTML Balise <table>	Pour débuter, utilisez des logiciels comme Dreamweaver ou FrontPage. Vous aurez alors le loisir de comprendre le code source d'un tableau HTML. <table align="" width="" height="" border=""cellspacing="" cellpadding=""> </table> align="" sert à aligner le tableau avec center left ou right. width="" height="" largeur et hauteur du tableau en pixel. border="" présence ou non du cadre, testez 0, 1, 5, 10 cellspacing="" modifie l'épaisseur du cadre. cellpadding="" modifie l'espace entre texte et cadre.
Téléchargement	Travailler en HTML avec Dreamweaver Travailler en HTML avec FrontPage

Tableau en HTML et les balises <tr> et <td>

HTML 1

HTML 2

HTML 3

Créer des lignes avec la balise <tr> </tr>
<table width="150" border="1">
<tr>
<td>HTML 1</td>
</tr>
<tr>
<td>HTML 2</td>
</tr>
<tr>
<td>HTML 3</td>
</tr>
</table>

Créer des colonnes avec la balise <td> </td>
<table width="150" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

HTML 1	HTML 2
HTML 3	HTML 4

Créer des lignes et des colonnes
<table width="150" border="1">
<tr>
<td>HTML 1</td>
<td>HTML 2</td>
</tr>
<tr>
<td>HTML 3</td>
<td>HTML 4</td>
</tr>
</table>

HTML 1	HTML 2
HTML 3 et 4

Faire fusionner 2 cellules horizontal avec l'attribut colspan dans la balise d'ouverture de <td>
<table width="150" border="1">
<tr>
<td>HTML 1</td>
<td>HTML 2</td>
</tr>
<tr>
<td colspan="2">HTML 3 et 4</td>
<-- Le tag <td> </td> de la case 4 est supprimé. -->
</tr>
</table>

HTML 1	HTML 2 et 4
HTML 3

Faire fusionner 2 cellules vertical avec l'attribut rowspan dans la balise d'ouverture de <td>
<table width="150" border="1">
<tr>
<td>HTML 1</td>
<td rowspan="2">HTML 2 et 4</td>
</tr>
<tr>
<td>HTML 3</td>
<-- Le tag <td> </td> de la case 4 est supprimé. -->
</tr>
</table>

HTML
HTML 1	HTML 2

Vous savez maintenant comment créer un tableau.
Le tag HTML suivant <caption></caption> permet d'insérer un titre devant un tableau. Ce tag HTML doit être placé juste après la balise <table>

Les formulaires en HTML
Indispensable La balise <form>	Un formulaire doit toujours être encadré par les balises <form></form> La balise <form> et ses attributs : <form action="mailto:tonmail@test.fr ?subject=Aide HTML" method="POST" enctype="text/plain" name="Formulaire">
	<input type="text" name="nom" value="Le nom" size="10" maxlength="15" style="BORDER-RIGHT: #006699 1px outset; BORDER-TOP: #006699 1px outset; FONT-SIZE: 10pt; BORDER-LEFT: #006699 1px outset; COLOR: #006699; BORDER-BOTTOM: #006699 1px outset; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff">
	<select name="region" size="4"> <option selected>Votre région :</option> <option value=Alsace>Alsace</option> <option value=Aquitaine>Aquitaine</option> <option value=Auvergne>Auvergne</option> </select> <select size="1" name="domaine"> <option>.com</option> <option>.fr</option> </select>
	<input type="file" name="joindre" value="Fichiers" size="10" maxlength="40">
Monsieur Madame Permis A Permis B	<input type="radio" name="sex" value="Monsieur" checked>Monsieur<br> <input type="radio" name="sex" value="Madame"> Madame<br> <input type="checkbox" name="PermisA" value="Aoui" checked>Permis A<br> <input type="checkbox" name="PermisB" value="Boui"> Permis B
Le Textarea	<textarea name="textarea" rows="3" wrap=virtual cols="15">Le Textarea</textarea>
	<input type=text name="ddn_jour" size="2" maxlength="2"> <input type=text name="ddn_mois" size="2" maxlength="2"> <input type=text name="ddn_annee" size="4" maxlength="4" value="19xx">
	<input type="button" value="Avertissement" onClick="window.alert('Ceci est une boîte de dialogue d\'avertissement.');" name="button">
	<input type="button" value="Confirmation" onClick="temp = window.confirm('Cliquez sur OK pour confirmer.'); window.status=(temp)?'Confirmation : oui':'Confirmation : non'; " name="button">
	<input type="button" value="Invite" onClick="var temp = window.prompt('Entrez le texte de votre choix :','Ceci est la valeur par défaut'); window.status=temp; " name="button3">
J'accepte Je refuse	Les informations qui vous concernent sont destinées à X. www.XXX.com Nous pouvons être amenés à les transmettre à des tiers (partenaires commerciaux, etc). Si vous ne le souhaitez pas, cliquez ici Vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données qui vous concernent (art. 34 de la loi "Informatique et Libertés"). Pour l'exercer, adressez vous à X, 1 Rue de la Pomme Verte, 68190 Ensisheim ou à mail@X.com
	<input type="submit" name="Submit" value="Envoyer">
	<input type="reset" value="Effacer" name="reset">

Un menu déroulant en HTML
	<form> <SELECT name="Fruits" size="1"> <OPTION value="">Poire <OPTION value="">Pomme <OPTION value="">Pêche </SELECT> </form>
	<form> <select name="list" onChange="top.location.href=this.form.list.options [this.form.list.selectedIndex].value"> <OPTION SELECTED VALUE="http://www.yahoo.fr">Yahoo <OPTION VALUE="http://www.francite.com">Francite <OPTION VALUE="http://www.nomade.fr">Nomade <OPTION VALUE="http://www.altavista.com">Altavista <OPTION VALUE="http://www.excite.com">Excite <OPTION VALUE="http://www.infoseek.com">Infoseek <OPTION VALUE="http://www.lycos.com">Lycos <OPTION VALUE="http://www.magellan.com">Magellan </select> </form>

Le son avec le langage HTML
Du son avec HTML	La balise à utiliser pour le son est <embed> src="" (Emplacement du fichier) align="" (Alignement left center right) width="" (Largeur en pixel) height="" (Hauteur en pixel) autostart="" (true false) controls="" (smallconsole largeconsole) hidden="" (true false) loop="" (true false) volume="" (0 à 100) type="" (mime)

La vidéo avec le langage HTML
La vidéo avec HTML	La balise à utiliser pour la vidéo est <embed> src="" align="" width="" height="" autostart="" (true false) controller="" (true false) cache="" (true false) loop="" la vidéo est jouée x fois. Si 1 le fichier est joué indéfiniment. volume="" Playeveryframe="true" la vidéo se joue au fur et à mesure de son chargement. Avec false, la lecture du fichier commence à la fin du téléchargement.

Accents et norme ISO
Norme ISO	& --> & a m p ; ¤ --> & c u r r e n ; © --> & c o p y ; ® --> & r e g ; µ --> & m i c r o ; ¶ --> & p a r a ; ¼ --> & f r a c 1 4 ; ½ --> & f r a c 1 2 ; ¾ --> & f r a c 3 4 ; « --> & l a q u o ; » --> & r a q u o ; < --> & l t ; > --> g l t ; " --> & q u o t l ; (espace forcé) --> & n b s p ; à --> & a g r a v e ; â --> & a c i r c ; ã --> & a t i l d e ;	ä --> & a u m l ; ç --> & c c e d i l ; é --> & e a c u t e ; è --> & e g r a v e ; ê --> & e c i r c ; ë --> & e u m l ; î --> & i c i r c ; ï --> & i u m l ; ñ --> & n t i l d e ; ô --> & o c i r c ; õ --> & o t i l d e ; ö --> & o u m l ; ù --> & u g r a v e ; û --> & u c i r c ; ü --> & u u m l ; € --> & e u r o ; € --> & # 8 3 6 4 ;

Les frames avec HTML
Balise <noframes>	<frameset rows="20%,80%"> <frame src="zone1.htm" name="zone1"> <frame src="zone2.htm" name="zone2"> </frameset> <noframes> <body> Désolé mais ce site comme vous pouvez le voir utilise la technique des frames. Merci de faire la mise à jour de votre navigateur. </body> </noframes>
Exemple de frame	<html> <head> </head> <frameset cols="150,"> <frame name="gauche" scrolling="auto" target="haut_droite" src="droite.htm"> <frameset rows="20%,"> <frame name="haut_droite" target="bas_droite" src="haut.htm"> <frame name="bas_droite" src="principale.htm"> </frameset> </frameset> <body> </body> </html>
Exemple de frame	<html> <head> </head> <frameset rows=","> <frame name="haut" src="haut.htm" scrolling="auto"> <frame name="bas" src="bas.htm"> </frameset> <body> </body> </html>
Exemple de frame	<html> <head> </head> <frameset rows="75,,75"> <frame name="haut" scrolling="no" noresize target="sommaire" src="haut1.htm"> <frameset cols="416,"> <frame name="sommaire" target="principal" src="droite1.htm"> <frame name="principal" src="gauche1.htm"> </frameset> <frame name="bas" scrolling="no" noresize target="sommaire" src="bas1.htm"> </frameset> <body> </body> </html>

Retomber de la frame sur un cadre
Les problèmes que posent les frames	Si on charge une frame de l'extérieur, on perd le cadre et souvent la navigation. Pour éviter cela mettre dans chaques frames sauf la principal le script : <script type="text/javascript"> <!-- if (parent.location.href == self.location.href) {window.location.replace('index.html');} // --> </script> Les problèmes des frames : - on risque de mettre en favori une frame et pas la page. - on risque d'imprimer une frame et pas la bonne. - on risque de tomber sur un bout du site via un moteur. - on rend le site inaccessible à certains. - le plus souvent on met le menu dans une frame, donc il ne change pas et ne reflète pas l'endroit où l'on se trouve. Les avantages des frames : - on s'embête un peu moins à la conception. - on accelère le chargement.

Balises HTML pour le référencement de votre site Internet
Les balises META	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN"> <title></title> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META name=Author content="Bernard Bass"> <META name=Copyright content="Bernard Bass"> <META NAME=Reply-to CONTENT="contact@domaine.com"> <META NAME=CREATION_DATE CONTENT="15/03/2005"> <META http-equiv=Content-Language content="fr, de, ch"> <META name=GENERATOR content="Bloc Note"> <META name=Robots content="all"> <META name=Identifier-url content=http://domaine.com> <META name=Description content="langage html, HTML"> <META name=Keywords content="trojan, lexique, virus, php, informatique, langage html, langage, HTML"> <META HTTP-EQUIV="Refresh" CONTENT="5;URL= http://www.nom_de_domaine.net"> Attention, cette dernière ligne de code HTML vous fait changer de page au bout de 5 secondes.

Quelques unité utile avec HTML

Unité

Unité	Signification
in	Inch
cm	Centimétre
pt	Point (1/72 pouces)
pc	Picas (12 points)
em	Ems (hauteur de la police par défaut)
ex	X-height (hauteur de la lettre 'X')
px	Pixels
%	Pour cent

HTML

Initiation au langage HTML

Initiation au langage HTML