HTML - Internet de A À Z

Sommaire
HTML
Les chapitres du cour HTML
Principe du HTML 1.
Structure dune page XHTML 2.
Les balises HTML 3.
Principe du HTML
Concept de base
Le HTML permet de dcrire des donnes. Il na pas t cr pour dfinir le rendu visuel des
documents web, cest le rle des CSS, mais pour dfinir la structure des donnes du document et
dorganiser le contenu de celle-ci.
Le document HTML doit permettre laccessibilit [http://fr.wikipedia.org/wiki/accessibilit
%C3%A9] des donnes quil contient, toutes les pages web ne sont pas forcment affiche par
un navigateur ! (lecteur dcran, tlphone portable).
Le XHTML, dfini par le W3C [http://fr.wikipedia.org/wiki/W3C] [1], nest quune reformulation
du HTML 4.0 en XML [http://fr.wikipedia.org/wiki/XML]. Ce langage ouvre la porte aux
navigateurs davenir et par sa rigueur permet lexploitation des donnes par des logiciels tiers.
Un fichier XHTML est tout dabord un fichier texte crit dans un langage informatique. On peut
donc crer un document XHTML avec un diteur de texte (PSPAD ou notepad++ par exemple).
Le XHTML utilise des balises pour dcrire les donnes quil contient. Une balise est forme de 2
"tags", un tag "ouvrant" et un tag "fermant", exemple pour dsigner un paragraphe :
<p> Le texte du paragraphe est ici. </p>
Rgles dcritures des balises XHTML
Le nom des balises scrit en minuscule, comme <p> pour les paragraphes, <a> pour les liens
Toutes les balises souvrent et se referment, ex :
<p>blabla</p> ou <hr />
Ici 2 exemples diffrents, la balise <p> qui souvre et se ferme, et la balise <hr /> qui est
auto-ferme.
Les balises peuvent tre imbrique en respectant lordre douverture, ex :
<p> texte <strong>important</strong> du paragraphe </p>
Chaque balise une smantique : <strong> signifie important et non pas GRAS. Les navigateurs
reprsentent par dfaut (en CSS) la balise <strong> en gras, "texte en gras" nest pas une
smantique mais une reprsentation.
On peut complter une balise avec des attributs. Certains attributs sont obligatoire. Les attributs
sajoutent dans la balise "ouvrante". Ils sont composs du nom de lattribut, du signe "=" puis de
la valeur de lattribut entre guillemet :
<a href="http://www.google.fr">lien vers google</a>
Ici, la balise <a> dfinit un lien hypertexte, lattribut "href" (pour Hyperlink refrence) donne la
destination du lien, le rsultat sera donc : lien vers google
Les commentaires utilisent une syntaxe particulire :

HTML - Internet de A Z http://u2.ensg.eu/web/spip.php?page=imprime_rubrique&id_rubrique=6
1 sur 9 15/02/2010 16:41
Sommaire
Indiquer que lon crit du ()
Structurer le document
Rsultat final : premire ()
Validit du document
Notes
[1] World Wide Web Consortium
Structure dune page XHTML
Indiquer que lon crit du XHTML 1.0
La premire chose crire dans notre fichier texte est la
suivante :
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org
/TR/xhtml1/DTD/xhtml1-strict.dtd'>
Cest la rfrence la DTD [http://fr.wikipedia.org/wiki/DTD] [1] utilis pour le XHTML version
1.0. Ce document prcise quelles sont les rgles dutilisation des balises du XHTML 1.0. Cest une
ligne indispensable.
Structurer le document
On va dlimiter la zone "racine" de notre document :
<html> </html>
Ces balises indiquent le dbut et la fin du document XHTML ; on trouve donc <html> juste aprs
le doctype et </html> est la dernire balise du document.
Pour respecter les directives du XHTML 1.0 on crira :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
</html>
pour prciser lespace de nom principal des balises xhtml et la langue franaise.
On va ensuite indiquer les mtadonnes de la page :
<head></head>
Ces balises marquent le dbut et la fin de len-tte du document. Cette zone permet de spcifier
les mta-donnes, les feuilles de styles utilises, les fonctions JAVASCRIPT et lencodage de
caractres qui seront utiliss.
On crira au minimum :
<head>
<title>titre de la fentre</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
Cet entte indique que le titre du document est "titre de la fentre" et que lencodage est le
UTF-8
Et enfin le contenu de la page :
<body></body>
La balise body contient le "corps" du document cest dire lensemble des donnes affiches
lcran.
2 sur 9 15/02/2010 16:41
Par exemple :
<body>
<p>Mon premier paragraphe</p>
</body>
Rsultat final : premire page XHTML
Le code de notre premire page XHTML est :
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org
/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre de la fentre</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Le texte de mon premier paragraphe</p>
</body>
</html>
Exercice 1
Nous allons prparer notre espace de travail afin de dvelopper nos pages WEB :
Assurez vous davoir les lments ncessaires cf La boite outils du developper WEB
Installez WAMP ou easyPHP, puis dmarrez le serveur (apache).
Crez un alias pour votre site pointant vers votre dossier de travail.
Dans ce dossier, crez un nouveau document texte, nommez le "index.html" .
Copiez le code HTML de lexemple ci dessus dans ce fichier.
Vrifiez que lencodage du fichier est bien UTF-8.
Ouvrez le navigateur ladresse : http://127.0.0.1/votreAlias/ .
Soyez fier de vous.
Validit du document
Un outils propos par le W3C permet de valider la syntaxe XHTML de notre page WEB :
http://validator.w3.org [http://validator.w3.org]
Nous pouvons valider la page en utilisant directement loutil ad-hoc de la barre doutils
WEB-Developer de Firefox.
Continuez le cours: HTML - Les balises HTML
Rubrique parente | Haut de page
Notes
[1] Document Type Definition
Les balises HTML
3 sur 9 15/02/2010 16:41
Sommaire
Principales balises Bloc
Principales balises Inline
Les attributs id et class
Les tableaux
Les formulaires
Autres balises Bloc en ()
Autres balises En ligne ()
Nous allons maintenant voir les principales balises HTML, ce sont
ces balises qui donnent un sens vos donnes.Il ne faut donc pas
les utiliser nimporte comment et savoir quel balise employer pour
tel ou tel lment, et ainsi organiser et hirarchiser vos donnes.
Par exemple pour prsenter une liste de site WEB que vous
apprciez, il vous faudra utiliser des balises pour dsigner une liste
associes des balises pour dsigner des liens hypertexte.
On distingue deux catgories de balises ; Bloc ou En ligne [1] selon quelle dfinissent une
zone autonome ou pas.
Principales balises Bloc
Pour ces balises, on pourra assigner :
une hauteur, une largeur
un positionnement
une bordure, etc. en CSS.
Les titres : balises <h1> <h6>
<h1></h1>
<h2></h2>
...
<h6></h6>
La balise h1 reprsente un titre de niveau 1 : le titre de la page par exemple.
On dispose de 5 autres balises pour dsigner les niveaux de sous titres.
Ils organisent le contenu de la page de manire logique.
Les paragraphes : balise <p>
<p></p>
Lespacement des paragraphes se rgle en CSS , inutile de saisir des paragraphes vides (ou pire
des <br /> [2]).
Les listes : <ul> dsigne une liste puce non numrote et <ol> une liste puce
numrote
<ul>
<li></li>
</ul>
ou
<ol>
<li></li>
</ol>
Chaque liste est associe la balise en ligne <li> qui dsigne un lment de la liste.
Chaque <li> est matrialis par une puce ou un numro.
Laspect des puces est modifiable en CSS.
On peut imbriquer les niveaux de liste, ex :
<ol>
<li>lment 1</li>
<li>lment 2
<ul>
<li>lment 2.1</li>
<li>lment 2.2</li>
</ul> </li>
<li>lment 3</li>
</ol>
nous donne :
4 sur 9 15/02/2010 16:41
lment 1
lment 2
lment 2.1
lment 2.2
lment 3
Le bloc neutre : balise <div>
<div></div>
Ce bloc na pas de smantique particulire. On lutilise pour dsigner les grandes parties du
document. Souvent accompagn de largument "id" ou "class" pour en spcifier le rle.
A utiliser bon escient : ne pas abuser sous peine dalourdir le code sans raison !
Principales balises Inline [3]
Ces balises permettent en gnral de mettre en relief certaines parties de texte, ou renseigner
sur le contenu. Les balises en lignes doivent obligatoirement tre imbriques dans une balise
bloc (au moins une div).
Les images : balise <img>
<img src="UrIDeLImage" alt="TexteAlternatif" />
Insre une image dans le fil du texte.
Lattribut obligatoire src dsigne ladresse URI de limage afficher .
Lattribut obligatoire alt dsigne le texte de remplacement (obligatoire pour une question
daccessibilit)
Forte accentuation : balise <strong>
<strong> </strong>
Signifie : texte fortement accentu. Pour mettre laccent sur certaines portions de textes. Par
dfaut elle met le texte en gras.
Accentuation : balise <em>
<em> </em>
Signifie : texte accentu. Pour mettre laccent sur certaines portions de textes. Par dfaut elle
met le texte en italique.
Les liens : balise <a>
<a href="UrlDeDestination" title="InfoSurLeLien" >Texte Du Lien</a>
Lattribut obligatoire href dsigne la destination du lien qui peut tre absolue ou relative :
href="http://www.google.fr"
href="page2.html"
Lattribut facultatif title permet dafficher une bulle dinformation sur le lien lors de son survol.
Lapparence des liens est modifiable via CSS !
Balise neutre : balise <span>
<span></span>
Elle est aux balises en ligne, ce que div est aux balises en bloc. Elle sert identifier certaines
parties de texte qui nont pas de sens particulier.
A utiliser bon escient !!! (cest a dire rarement)
Saut de ligne : balise <br />
<br />
Permet un retour la ligne au sein du mme paragraphe.
Utilisation trs rare.
En gnral, une mauvaise utilisation est faite de cette balise car un nouveau paragraphe serait
plus appropri.
Exercice 2
5 sur 9 15/02/2010 16:41
Nous allons mettre en application ces diffrentes balises dans votre page XHTML, en ajoutant :
Un en-tte(head) spcifiant :
Le nom de lauteur (vous).
Le titre de la page (affich en haut de la fentre du navigateur).
La description du site.
Un titre de page et une ligne de paragraphe juste en dessous.
Un sous titre de partie.
Une srie de 3 sous-sous titres avec leurs paragraphes associs.
Dans le premier paragraphe, avant le texte, ajoutez une image.
Un ou deux paragraphes de fin contenant les informations de copyright.
Ajoutez des balises strong et em sur des mots importants.
Validez votre page
Attention : en HTML, les caractres spciaux tels que , , , , , se codent tels que :
=é
=è
=ê
=â
=à
Vous pouvez galement utiliser le menu Outils|Convertisseur utilisateurs de PSPad, et choisir
loption "Chars to named HTML entity - HTMLEntity1.ini"
Les attributs id et class
Les attributs id et class sont trs importants. Ils permettent de nommer ou de regrouper des
balises XHTML ayant un sens commun. Cela sera notamment indispensable pour grer les styles
CSS.
Id
Lattribut id (pour identifiant) permet de nommer (didentifier) une balise prcise. Par exemple,
une balise div regroupant les lments du menu pourrait avoir un id gal menu :
<div id="menu">
<ul>
<li>...</li>
</ul>
</div>
Attention, un id est unique. Il ne peut y avoir quun seul id identique par page.
Class
Lattribut class permet de nommer un ensemble de balises ayant un sens commun. En fait, le
principe est le mme que pour lattribut id, sauf que lon peut utiliser la mme class plusieurs
fois par pages, et ainsi regrouper diffrentes balises.
<div>
<p class="important">...</p>
<p>...</p>
<p>...<a class="important">...</a>...</p>
</div>
<h4 class="important"></h4>
Dans cet exemple, on ajoute la class important au premier paragraphe, au lien du troisime
paragraphe, et au h4. On signale donc que ces lments ont un sens commun. (et certainement
une mise en forme commune : par exemple, tous les lments ayant la class important seront
en rouge)
6 sur 9 15/02/2010 16:41
Exercice 3
Sparez le contenu de votre page XHTML en diffrentes parties : lentete, le menu, le contenu et
le footer, laide de div.
Utilisez lattribut class sur diffrents lments.
A lintrieur de votre div menu, ajoutez une liste non numrote de liens, afin de crer un
menu.
Les tableaux
Lutilisation de tableau en XHTML se fait de la sorte : tout dabord, utilisation de la balise
<table></table> pour crer le tableau. Ensuite, ajoutons une ligne, la balise est <tr></tr>.
Chaque cellule est ensuite ajoute laide de <td></td>. Voici donc le code pour un tableau
dune ligne :
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
</table>
Toutes les balises de tableau sont de types bloc, et donc leur taille est modifiable en CSS.
Exercice 4
Construisez un tableau de 3 lignes contenant chacune 4 cellules.
Les formulaires
Cration dun formulaire
Un formulaire se dclare avec la balise <form></form>, comme ceci :
<form action="page.php" method="get">
</form>
Lors de louverture, deux attributs sont obligatoires :
action : il a comme valeur le nom de la page php qui contient le traitement du formulaire.
Lenvoi vers la page seffectue quand lutilisateur clique sur le bouton submit.
method : cest le type mthode pour lenvoi, deux types sont possibles :
GET : cest laction par dfaut, les donnes sont envoyes dans la barre dadresse du navigateur.
POST : les donnes sont envoyes "caches", non visible dans la barre dadresse.
Ajouter des champs
Pour tous les champs, plusieurs attributs obligatoires :
type : cest le type de champ. (obligatoire sur les input uniquement)
name : cest le contenu que lon rcupre en PHP, lors du traitement du formulaire.
Champ texte : balise <input type="text" />
La syntaxe est la suivante :
<input type="text" name="nom" value="Jean"/>
Le rsultat est le suivant :
Champ mot de passe : balise <input type="password" />
7 sur 9 15/02/2010 16:41
<input type="password" name="password" value="mot-de-passe"/>
Cela provoque le masquage du contenu.
Bouton radios : balise <input type="radio" />
<label>Oui<input type="radio" name="ouinon" value="1"/></label>
<label>Non<input type="radio" name="ouinon" value="0"/></label>
Le rsultat est le suivant : Oui Non
Lutilisation de la balise <label> qui entoure le <input /> permet de cliquer sur le texte "Oui"
ou "Non", afin de faire son choix.
Un menu de slection : balise <select>
<select name="age">
<option value="20">0-20 ans</option>
<option value="40" selected="selected">21-40 ans</option>
</select>
Lattribut selected dont la seule valeur possible est selected (mais doit tre spcifi quand mme)
permet de choisir quelle option est choisie par dfaut.
Lattribut value renferme la valeur renvoye par le formulaire si loption est slectionne. Par
dfaut, cette valeur est la chane de caractres constituant loption ; si on ne spcifie pas value,
la valeur retourne sera par exemple "0-20 ans".
Bouton denvoi : balise <input type="submit" />
<input type="submit" name="envoi" value="OK"/>
Cela provoque la validation du formulaire lors du clic.
Regroupement de champ : balise <fieldset>
On utilise la balise <fieldset> qui regroupe des champs dun formulaire, par exemple des
boutons radio qui appartiennent au mme groupe.
<fieldset>
<ul>
<li><label><input type="radio" name="ouinon" value="1" /> Oui</label></li>
<li><label><input type="radio" name="ouinon" value="0" /> Non</label></li>
</ul>
</fieldset>
nous donne par dfaut :
8 sur 9 15/02/2010 16:41
Oui
Non
Smantique des formulaires
Comme dans lexemple ci dessus, nhsitez pas utiliser des lments de liste pour vos
formulaires, et mme une liste de dfinition est plus approprie :
<dl>
<dt>Nom</dt>
<dd><input type="text" name="nom" /></dd>
</dl>
Ici, la balise <dl></dl> cre une liste de dfinition, la balise <dt></dt> cre le titre de la
dfinition, et la balise <dd></dd> cre la dfinition. Cet exemple ne nous donne graphiquement
aucun changement.
Exercice 5
Crez un formulaire avec les caractristiques suivantes :
Le sous-sous titre "Formulaire".
Le sous-sous-sous titre "Informations personnelles".
Dans le mme regroupement de champs :
Un champ texte pour remplir le nom (nom de variable renseigne : "nom").
Un champ texte pour le prnom (nom de variable renseigne : "prenom").
Un menu droulant permettant de choisir la tranche dge (nom de variable renseigne : "age").
Le sous-sous-titre "Compte crer".
Dans le mme regroupement de champs :
Un champ texte pour remplir le pseudo (nom de variable renseigne : "login").
Un champ password pour remplir le mot de passe (nom de variable renseigne : "pass").
Deux boutons radio permettant de sabonner ou non la newsletter (nom de variable
renseigne : "news").
Un champ submit de validation du fomulaire.
Pensez la smantique !
Validez la syntaxe avec le validateur du w3c.
Cest la fin de la partie XHTML !
Autres balises Bloc en XHTML 1.0
Autres balises En ligne en XHTML 1.0
Notes
[1] Inline en anglais
[2] Voir plus loin
[3] En ligne en franais
9 sur 9 15/02/2010 16:41

HTML - Internet de A À Z

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML - Internet de A À Z

Hochgeladen von

Copyright:

Verfügbare Formate

Sommaire

Das könnte Ihnen auch gefallen