Visiteurs
Visiteurs : 88838,
Aujourd'hui : 304,
En ligne : 1.
Membres
Membres enregistrés : 13,
Membres connectés : 0.
Serveur
Hébergeur : OVH,
Domaine : www.jcordier.fr,
IP du serveur : 213.186.33.87,
Signature : 30,
Commentaire : 31.
Vous concernant
Adresse IP : 38.107.191.118,
Navigateur : Navigateur inconnu.
Tutorial HTML
1. Présentation du langage
2. Les balises et les entités
3. Structure d'un document HTML
4. Préparation de l'en-tête
1. La balise <meta> (information)
2. La balise <title> (titre)
3. La balise <base> (origine)
4. La balise <style> (style)
5. La balise <link> (relation)
6. La balise <script> (script)
5. Préparation du corps
1. La balise <h1>, ... (niveau titre)
2. La balise <p> (paragraphe)
3. La balise <br/> (saut de ligne)
4. La balise <hr/> (ligne horizontale)
5. La balise <ul>, <ol>, <dt> (liste)
6. La balise <table> (tableau)
7. La balise <a> (lien hyper-texte)
8. La balise <img> (image)
9. La balise <div> (division)
6. Sondage
1. Présentation du langage
L'Hyper Text Markup, généralement appelé HTML, est un langage informatique utilisé pour créer les pages web comme celle où vous vous trouvez à l'instant même.
Le HTML est un langage de balisage hypertexte. Une balise est un identificateur compris entre "<" et ">" que le navigateur web va interpréter.
Exemple avec une balise de titre <h4> et un paragraphe <p> :
<h5>Titre</h5>
<p>Contenu d'un paragraphe</p>
Voici le résultat obtenu :
Titre
Contenu d'un paragraphe
Un point trés important d'un langage de balisage hypertext, c'est que chaque balise ouverte doit être fermé, comme dans l'exemple ci-dessus, la balise "<h4>" doit être fermée comme ceci </h4>.
La lecture d'une page web est assez simple. C'est un échange standard entre un client (navigateur web) et un serveur (OVH ici).
- Le client expédie au serveur une requête lui demandant d'afficher tel ou tel document,
- Le serveur web accepte la requête et envoie au client le document demandé précédé par un en-tête (header) qui indique le type de codage de l'information pour chaque fichier envoyé (Texte, PDF, vidéo, audio, ...).
Selon la réponse du serveur, le navigateur lancera les visualisateurs adaptés. Un visualisateur est un outil qui permet de lire un type de document. Vous vous n'utiliseriez pas un lecteur mp3 pour lire un dvd ? Ici c'est exactement pareil, il faut que le navigateur sache quel type de document on s'aprète à lire pour charger le lecteur adéquat.
Comme vous l'aurez compris, un serveur web est un logiciel capable de répondre à la demande de clients Web. Dans un premier temps, nous n'utiliseront aucun serveur web.
Voila pour ce qui est de l'explication du côté serveur web, passons maintenant aux navigateurs. voici un sondage sur les navigateurs les plus couramment utilisés.
| Navigateur | Date du sondage |
|---|---|
| Microsoft Internet Explorer | 80% |
| Mozilla/FireFox | 14% |
| Safari | 2% |
| Netscape | 1% |
| Opéra | 1% |
| Autres | 2% |
Pour ma part, j'utilise Mozilla, car j'ai rencontré beaucoup de bugs d'affichage sous IE, notament avec l'utilisation de feuilles
de style. Je vous conseil donc de le télécharger à la page suivante :
2. Les balises et les entités
Comme vu précédement, à chaque balise ouvrante correspond généralement une balise fermante. Cependant il existe toujours l'exeption qui confirme la régle, comme les balises <hr> (horizontal rule, affiche d'un trait horizontal ) et <br/> (saut de ligne).
Il existe deux types de balises :
- Les balises vides, qui contiennent généralement des informations sur la page, comme <title> ou <meta>,
- Les balises blocks, qui contiennent les éléments d'une page HTML, comme <body> ou <button>,
- Les balises inlines, qui contiennent un ensemble de régles pour un élément de la page, comme <p> ou <h1>.
Voici une liste des balises vides les plus courantes.
| Nom | Fermeture | Fonction |
|---|---|---|
| applet | non | Charge et lance l'exécution d'un élément |
| area | non | Définit une zone dans une image |
| base | non | Définit l'url de base d'un document |
| br | non | saut de ligne |
| col | non | Définit une colonne |
| frame | non | Définit un cadre |
| hr | non | Trait horizontal |
| img | non | Définit une image |
| input | non | contrôle de formulaire |
| link | non | lien |
| meta | non | Description d'un document |
| param | non | Définit les paramètres |
Voici une liste des balises blocks les plus courantes.
| Nom | Fermeture | Fonction |
|---|---|---|
| blockquote | oui | Pour citer un texte |
| body | oui / non | Corps du document HTML |
| button | oui | Définit un bouton |
| center | oui | Centrer un élément |
| div | oui | Element de type bloc |
| form | oui | Définit un formulaire |
| html | oui | Type du document |
| iframe | oui | Cadre inline |
| object | oui | Définit un objet |
| table | oui | Définit un tableau |
| td | oui | Définit une cellule de données d'une tableau |
| tfoot | oui | Définit le pied de page d'un tableau |
| th | oui | Définit une cellule de titre d'un tableau |
| thead | oui | Définit la tête d'un tableau |
| tr | oui | Créer une ligne dans un tableau |
Voici une liste des balises inline les plus courantes.
| Nom | Fermeture | Fonction | Résultat |
|---|---|---|---|
| a | oui | Lien hypertexte | Résultat |
| b | oui | Texte en gras | Résultat |
| code | oui | Affiche un code | Résultat |
| font | oui | Change un texte | Résultat |
| h1 - h6 | oui | Elément de titre | Résultat |
| i | oui | Texte en italic | Résultat |
| p | oui | Paragraphe | Résultat |
| s | oui | Texte barré | |
| u | oui | Texte souligné | Résultat |
Pas besoin d'apprendre par coeur ces balises, cela viendra tout seul avec leurs utilisations.
Certains caractères sont proscrits dans les page HTML, comme les < et >, puisqu'ils servent à délimiter des balises, ce qui nous empèche de les faire apparaître tel quel dans le texte.
Pour résoudre ce problème, nous utilisons des entités. Il s'agit simplement d'un identificateur précédé par le symbole "&" et suivi par ";".
Par exemple, si vous voulez afficher dans votre page le texte suivant :
| >> Un texte << |
Il faudra remplacer les < et > par > et <, comme ceci :
| >> Un texte << |
Voici la liste des entités :
| Entité | Car. | Entité | Car. | Entité | Car. | Entité | Car. |
|---|---|---|---|---|---|---|---|
| < | < | « | « | À | À | Â | Â |
| > | > | » | » | à | à | â | â |
| & | & | ¶ | ¶ | É | É | Å | Å |
| £ | £ | ¦ | ¦ | é | é | å | å |
| ¥ | ¥ | ¢ | ¢ | È | È | Ã | Ã |
| § | § | ® | ® | è | è | ã | ã |
| ¨ | ¨ | © | © | Ê | Ê | Æ | Æ |
| ´ | ´ | ° | ° | ê | ê | æ | æ |
| ˜ | ˜ | ÷ | ÷ | Ï | Ï | Ç | Ç |
| ¹ | ¹ | ½ | ½ | ï | ï | ç | ç |
| ² | ² | ¼ | ¼ | Ë | Ë | Ñ | Ñ |
| ³ | ³ | ¾ | ¾ | ë | ë | ñ | ñ |
| ý | ý | ¡ | ¡ | Ö | Ö | ß | ß |
| ÿ | ÿ | ¿ | ¿ | ö | ö | µ | µ |
| ¤ | ¤ | ¬ | ¬ | Ù | Ù | Ø | Ø |
| | ± | ± | ù | ù | ø | ø |
3. Structure d'un document HTML
Normalement, tout document HTML devrait commencer par sa déclaration de type (DTD), précisant la version d'HTML utilisée. Je dis normalement, car il arrive quelques fois qu'un script php vienne s'incruster avant la DTD.
Voyons cette déclaration :
"http://www.w3.org/TR/html4/loose.dtd">
Aprés avoir déclaré le type du document, la démarche à suivre est la même qu'il soit en HTML ou xHTML. Voici ci-dessous le squelette d'un document correct en HTML 4.01. Ce document HTML est vide, il contient aucune donnée.
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
Voici maintenant le squelette d'un document correct en xHTML 1.0. Ce document xHTML est vide, il contient aucune donnée.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
Que se soit dans un document HTML ou xHTML, on y trouve toujours :
- Un en-tête, head, qui contient des informations sur la page non visible par l'internaute,
- Un corps, body, qui contient les données de la page.
Les balises <head> et <body> sont obligatoires. Pour chacune de ces deux balises correspond d'autres balises qui détermineront l'apparence et le contenu de la page parcouru.
Voici un schéma possible avec plusieurs balise :
<head>
<title>Titre</title>
<base href="http://www.jcordier.fr">
<meta name="author" content="J. Cordier" />
<style> p { color: red; } </style>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script>Super script en Java</script>
</head>
<body>
<p>Corp du document</p>
Image
Lien hypertext
</body>
</html>
4. Préparation de l'en-tête
Pour tester les exemples de la suite de ce tutorial, il faut :
1. Copier / coller ce code dans un document texte,
2. Renommer le document en index.html,
3. Ouvrir son navigateur internet, puis faire :
1. Fichier,
2. Ouvrir un document,
3. Ouvrir votre fichier index.html.
4. Visonner le résultat.
4.1 La balise <meta>
La balise <meta> est une balise qui contient diverses informations sur le document, comme le nom de l'auteur, une liste de mots clés, la description de la page, le jeu de caractères du document, la date, etc...
C'est une balise vide, c'est à dire qu'il n'y à pas besoin d'employer une balise fermante.
La balise <meta> fonctionne comme ceci :
ou
Pour préciser l'auteur du document :
Pour insérer des mots clés sur la page :
Pour préciser la description de la page :
Pour préciser le jeu de caractère du document :
4.2 La balise <title>
La balise <title> est utilisé pour donner un titre à notre page, qui sera visible dans la barre de titre du navigateur internet.
Cette balise s'utilise comme ceci :
Voici un code d'une page vide avec un titre :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Voici un titre</title>
</head>
<body>
</body>
</html>
4.3 La balise <base>
La balise <base> indique, par le biais de l'attribut href, un chemin absolu, qui sera utilisé comme référence par tous les autres liens du document.
Elle se situe généralement dans l'entête du document, cependant, il est possible de la redéfinir dans le corps du document. Le navigateur internet lit un document HTML de haut en bas, par conséquent la première balise <base> qu'il rencontrera sera utilisée comme référence.
Voici un code utilisant la balise <base> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.jcordier.fr" />
</head>
<body>
<a href="Projets-Tutoriaux-HTML.html#paragraphe4_3">La balise <base> (origine)</a>
</body>
</html>
La balise <base> rajoute automatiquement un slash ("/") entre le lien référence et le lien relatif. La balise <a> utilisé ici est un lien hyper-texte dirigeant le visiteur vers un autre document du site. Cliquer ici pour en voir la défénition.
Voici un code n'utilisant pas la balise <base> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<a href="Projets-Tutoriaux-HTML.html#paragraphe4_3">La balise <base> (origine)</a>
</body>
</html>
Comme montré dans l'exemple ci dessus, la balise <base> n'est pas indispensable.
4.4 La balise <style>
La balise <style> est utilisée pour définir les différentes CSS du document. Une CSS (Cascading StyleSheets -> Feuilles de style en cascade), redéfinit la mise en forme de chacun des éléments du document.
Par exemple, cette balise peut définir :
- La mise en forme d'un texte, titre(<h1>) ou paragraphe(<p>), notamment sa taille, sa couleur, sa police, ...,
- La mise en forme d'un tableau, notamment sa hauteur, sa largeur, la couleur de chaque ligne du tableau (<th> (Table Heading) pour les lignes de titres, et <tr> (Table Rox) pour les lignes d'un tableau),
- Le corps du document tout entier, en redéfinissant la balise <body>,
- Ainsi que chacun des éléments pouvant exister dans un document HTML.
Voici un code en intégrant le style dans la structure du document :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body bgcolor="#E6E6FA" text="black">
<h1>Ceci est un titre</h1>
<p>
<font color="red" size="4" face="Arial">
Voici le premier paragraphe du document
</font>
</p>
</body>
</html>
Voici le même code avec l'utilisation de la balise <style> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
background-color : #E6E6FA;
color : black;
}
p {
color : red;
font-size : 4;
font-family : "Arial";
font-weight: bold;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Voici le premier paragraphe du document</p>
</body>
</html>
4.5 La balise <link>
La balise <link> indique une relation entre une ressource quelconque, comme une feuille de style, et un document HTML.
Les différents attributs sont :
- href, indique l'emplacement de la ressource,
- rel, indique le type de relation directe entre la ressource et le document HTML,
- rev, indique le type de relation inverse entre la ressource et le document HTML,
- type, indique le type de la ressource lié au document HTML,
- media, indique le type de média qui sera utilisé pour lire la ressource lié.
Pour préciser l'indication de l'auteur avec renvoi de son adresse mèl :
Pour préciser le titre du document HTML :
Pour préciser les documents qui précèdent et suivent le document HTML :
<LINK rel="next" href="Projets-Tutoriaux-HTML.html#paragraphe4_6">
Pour préciser l'icone qui précède l'adresse du document HTML :
Pour préciser la feuille de style à utiliser dans le document HTML :
Je préconise d'externiser la feuille de style du document HTML, pour plus de clarté, plutot que d'utiliser la balise <style>.
4.6 La balise <script>
La balise <script> permet l'insertion dans le document HTML d'un morceau de code d'un langage informatique souhaité. Le langage par défaut est le javascript.
Les différents attributs sont :
- language, indique le nom du langage utilisé,
- type, indique le nom du langage utilisé dans le document externe,
- src, indique l'emplacement du document externe,
- refer, indique au serveur les modifications du coté client.
Voici un code intégrant un script javascript :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="Javascript" type="text/javascript">
function hello() {
alert("Bonjour !!");
}
</script>
</head>
<body onLoad="hello()">
</body>
</html>
Voici un code utilisant un document externe codé en javascript :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="../script/fonction.js">
</script>
</head>
<body onLoad="hello()">
</body>
</html>
Voici le code javascript :
alert("Bonjour !!");
}
Je préconise d'externiser également le document javascript pour plus de clarté dans votre document HTML.
5 Préparation du corps
Pour tester les exemples de la suite de ce tutorial, il faut :
1. Copier / coller ce code dans un document texte,
2. Renommer le document en index.html,
3. Ouvrir son navigateur internet, puis faire :
1. Fichier,
2. Ouvrir un document,
3. Ouvrir votre fichier index.html.
4. Visonner le résultat.
5.1 La balise <h1>
la balise <h1> définit des titres depuis le niveau le plus élevé (<h1>) jusqu'au niveau le plus faible (<h6>).
Le navigateur internet du client utilise une feuille de style par défaut pour afficher le niveau des titres souhaités.
voici un code utilisant chacun des 6 niveaux de titre :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h1>Ceci est un titre de niveau 1</h1>
<h2>Ceci est un titre de niveau 2</h2>
<h3>Ceci est un titre de niveau 3</h3>
<h4>Ceci est un titre de niveau 4</h4>
<h5>Ceci est un titre de niveau 5</h5>
<h6>Ceci est un titre de niveau 6</h6>
</body>
</html>
Bien entendu, les balises <h1> peut être redéfinit dans une feuille de style.
Voici un code utilisant chacun des 6 niveaux de titre redéfinit :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
h1 {
color : black;
}
h2 {
color: red;
}
h3 {
color: yellow;
}
h4 {
color: green;
}
h5 {
color: teal;
}
h6 {
color: purple;
}
</style>
</head>
<body>
<h1>Ceci est un titre de niveau 1 reféfinit</h1>
<h2>Ceci est un titre de niveau 2 reféfinit</h2>
<h3>Ceci est un titre de niveau 3 reféfinit</h3>
<h4>Ceci est un titre de niveau 4 reféfinit</h4>
<h5>Ceci est un titre de niveau 5 reféfinit</h5>
<h6>Ceci est un titre de niveau 6 reféfinit</h6>
</body>
</html>
5.2 La balise <p>
La balise <p> permet le découpage d'un texte en plusieurs paragraphes séparés par deux retour à la ligne (retour chariot).
Cette balise est assez courante en HTML, cependant, de nombreux sites n'utilisent pas cette balise pourtant bien pratique.
Voici un code avec des titres et des paragraphes :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Ceci est un titre</h4>
<p>Voici le premier paragraphe du document</p>
<p>Voici le deuxième paragraphe du document</p>
<h4>Ceci est un autre titre</h4>
<h5>Ceci est un sous titre</h5>
<p>Voici le premier paragraphe de mon sous titre</p>
<p>Voici le deuxième paragraphe de mon sous titre</p>
<p>Voici le troisième paragraphe de mon sous titre</p>
</body>
</html>
Beaucoup de webmaster utilise seulement la balise <p> pour marquer la fin d'un paragraphe. Personnelement, je n'utilise pas cette méthode, car je préfère toujours ouvrir et fermer une balise, pour une facilité de lecture de mon code HTML.
Voici un code avec seulement la balise <p> de fin :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Ceci est un titre</h4>
Voici le premier paragraphe du document<p>
Voici le deuxième paragraphe du document<p>
<h4>Ceci est un autre titre</h4>
<h5>Ceci est un sous titre</h5>
Voici le premier paragraphe de mon sous titre<p>
Voici le deuxième paragraphe de mon sous titre<p>
Voici le troisième paragraphe de mon sous titre<p>
</body>
</html>
Les deux méthodes redonne le même résultat, aprés, c'est une question de choix.
5.3 La balise <br/>
La balise <br/> indique un retour à la ligne (break) en HTML. Cette balise est équivalente à la touche entrée de votre clavier. L'utilisation se fait sans balise d'ouverture.
Voici un code avec la balise <br/> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Bonjour</h4>
<p>Bienvenue sur Jcordier.fr</p><br/>
<p>Le webmaster</p>
</body>
</html>
L'emploi de la balise <br/> à l'intérieur d'autre balise HTML, comme un tableau, et tout à fait possible, tout comme utiliser plusieurs fois de suite cette balise pour plusieurs retour à la ligne.
Voici un code avec plusieurs balises <br/> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Bonjour</h4>
<p>Bienvenue sur Jcordier.fr</p><br/><br/><br/><br/>
<p>Le webmaster</p>
</body>
</html>
5.4 La balise <hr/>
La balise <hr/> sert à tracer une ligne horizontale (Horizontal Row) dans un document HTML. Son utilisation est très simple et à la fois très pratique pour délimiter des éléments d'un document HTML.
Voici un code utilisant la balise <hr/> :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Bonjour</h4>
<p>Bienvenue sur Jcordier.fr</p>
<hr/>
<p>Le webmaster</p>
</body>
</html>
Cependant, il est tout à fait possible de redéfinir le style de cette balise, comme sa taille, sa couleur, ou sa position.
Voici un code utilisant la balise <hr/> redéfinit :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Bonjour</h4>
<hr width=25% align=left />
<p>Bienvenue sur Jcordier.fr</p>
<hr width=50% align=left />
<p align=right>Le webmaster</p>
<hr width=25% align=right color=red />
</body>
</html>
Pour plus de clarté dans votre document HTML, je préconise d'externiser toute forme de redéfinition de style, soit dans une balise adéquat, soit dans une feuille de style.
5.5 La balise <ul>, ...
Il existe deux types de structure de liste :
- Une, prenant en compte l'ordre des éléments de la liste,
- En utilisant une numérotation avec la balise <ol>,
- En utilisant des symboles avec la balise <ul>,
- Et une autre, prenant en compte la relation d'un éléments à un autre de la liste.
Les éléments des listes ordonnées sont encadrés par la balise <li> tandit que les éléments des listes groupées sont encadrés par la balise <dd> pour le nom du groupe, puis de la balise <dd> pour la description du groupe.
Voici un code utilisant une liste numérotée :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Liste numérotée</h4>
<ol>
<li>Premier élément,</li>
<li>Deuxième élément,</li>
<li>Troisième et dernier élément.</li>
</ol>
</body>
</html>
Voici un code utilisant une liste non numérotée :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Liste non numérotée</h4>
<ul>
<li>Premier élément,</li>
<li>Deuxième élément,</li>
<li>Troisième et dernier élément.</li>
</ul>
</body>
</html>
Voici un code utilisant une liste de description :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Liste de description</h4>
<dl>
<dt>HF</dt><dd>Hafe fun : avoir du plaisir à jouer,</dd>
<dt>GG</dt><dd>Good Game : belle partie,</dd>
<dt>GL</dt><dd>Good Luck : Bonne chance,</dd>
<dt>OMG</dt><dd>Oh My God : Oh mon dieu.</dd>
</dl>
</body>
</html>
Toutes ces listes peuvent être encadré les une dans les autres.
Voici un code utilisant une liste de description :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Liste de description ordonnée</h4>
<dl>
<ol>
<li><dt>HF</dt><dd>Hafe fun : avoir du plaisir à jouer,</dd></li>
<li><dt>GG</dt><dd>Good Game : belle partie,</dd></li>
<li><dt>GL</dt><dd>Good Luck : Bonne chance,</dd></li>
<li><dt>OMG</dt><dd>Oh My God : Oh mon dieu.</dd></li>
</ol>
</dl>
</body>
</html>
5.6 La balise <table>
Un tableau est composé de plusieurs lignes divisées en plusieurs cellules. En HTML, on ne parlera uniquement que de lignes et de cellules, mais pas de colonnes.
Quatre balises sont necessaire pour la création d'un tableau :
- <table> (Tableau), délimite le tableau avec le reste du document HTML,
- <tr> (Table Row), délimite chacune des lignes du tableau,
- <td> (Table Data), définit chacune des cellules d'une ligne,
- <th> (Table Head), définit chacune des cellules d'une ligne de titre.
Avant l'arrivée des feuilles de styles, beaucoup de webmaster utilisé les tableaux pour créer leurs documents HTML, avec une ligne pour le logo, une pour le menu, etc etc...
Voici un code d'un tableau de deux lignes divisés en deux cellules :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
</tr>
<tr>
<td>Contenu 1</td>
<td>Contenu 2</td>
</tr>
</table>
</body>
</html>
Pour fusionner les cellules d'une ligne entre elles, il faut utiliser l'attribut Colspan, pour fusionner horizontalement ou Rowspan, pour fusionner verticalement.
Voici un code d'un tableau avec une ligne de titre fusionnée :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Ligne fusionnée</th>
</tr>
<tr>
<td>Contenu 1</td>
<td>Contenu 2</td>
</tr>
</table>
</body>
</html>
Le chiffre indique le nombre de cellule que la fusion doit occuper.
5.7 La balise <a>
La balise <a> créer un chemin de votre document, autrement appelé lien hyper-texte, vers un autre document.
Pour créer ce type de lien, il faut entourer l'adresse absolue du document (connu par l'attribut href source de la balise <a> puis de la balise </a>.
Voici un code avec un lien vers Jcordier.fr :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<p>
Cliquer sur le lien ci-dessous :
</p>
<a href="http://www.jcordier.fr">Jcordier.fr</a>
</body>
</html>
Il est possible également de spécifier une adresse relative au document racine qu'une adresse absolue. Pour cela, il faudra indiquer exactement le chemin entier du repertoire ou se trouve le fichier ciblé.
Voici un code avec un lien vers le fichier Page-Accueil.html :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<p>
Cliquer sur le lien ci-dessous :
</p>
<a href="Page-Accueil.html">Page-Accueil.html</a>
</body>
</html>
Enfin, la balise <a> permet l'emploi de lien interne au document, autrement appelé ancres.
Voici un code avec une ancre sur le paragraphe 3 :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<h4>Menu</h4><br/>
<a href="#titre1">titre1</a><br/>
<a href="#paragraphe1">paragraphe1</a><br/>
<a href="#paragraphe2">paragraphe2</a><br/>
<a href="#titre2">titre2</a><br/>
<a href="#sous_titre1">sous_titre1</a><br/>
<a href="#paragraphe1">paragraphe1</a><br/>
<a href="#paragraphe2">paragraphe2</a><br/>
<a href="#paragraphe3">paragraphe3</a><br/>
<h4>Ceci est un titre</h4>
<a name="titre1" />
<p>Voici le premier paragraphe du document</p>
<a name="paragraphe1" />
<p>Voici le deuxième paragraphe du document</p>
<a name="paragraphe2" />
<h4>Ceci est un autre titre</h4>
<a name="titre2" />
<h5>Ceci est un sous titre</h5>
<a name="sous_titre1" />
<p>Voici le premier paragraphe de mon sous titre</p>
<a name="paragraphe1" />
<p>Voici le deuxième paragraphe de mon sous titre</p>
<a name="paragraphe2" />
<p>Voici le troisième paragraphe de mon sous titre</p>
<a name="paragraphe3" />
</body>
</html>
Pour créer cette ancre, on utilise la balise <a> mais sans lien et en ajoutant un attribut name, donnant ainsi un nom à cette ancre. Ensuite, on peut créer un lien précédé du caractère #.
5.8 La balise <img>
La balise image est une balise sans contenu et nous n'utiliserons donc pas de balise de fin (</img>). Deux attributs
sont obligatoires pour cette balise.
- la balise src, qui indique l'adresse, la source de l'image. Celle ci peut être une adresse relative ou absolue. Il est donc possible d'afficher dans son site personnel une image hébergée sur un autre site, cependant si celle-ci est supprimée, ou déplacée, nous n'aurons plus aucun affichage. Il est donc préférable de toujours héberger les images que l'ont affichent.
- la balise alt, qui affiche la description de l'image, quand celle-ci ne peut être affichée. Cette balise est trés utile pour les non-voyants, qui utiliseront uniquement cette description.
Voici un code utilisant une image :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Affiche une image</title>
<meta name="author" content="J. Cordier" />
</head>
<body>
<h4>Comment afficher une image</h4>
<p>
Présentation de la balise image :
<img src="http://www.jcordier.fr/Documents/Tutoriaux/Images/HTML/Capture_html1.jpg" alt="Capture HTML" />
ou
<img src="../Images/HTML/Capture_html1.jpg" alt="Capture HTML" />
à condition d'avoir préalablement sauvegardé l'image sur votre
ordinateur.
<a href="http://www.jcordier.fr/Documents/Tutoriaux/Images/HTML/Capture_html1.jpg">Télécharger l'image</a>.
</p>
</body>
</html>
On peut également mettre un lien sur une image, c'est-à-dire qu'on charge une page lorsqu'on clique sur l'image, comme le logo en tête de mon site web.
Voici un code utilisant un lien sur cette même image :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Affiche une image avec un lien</title>
<meta name="author" content="J. Cordier" />
</head>
<body>
<h4>Comment afficher une image avec un lien</h4>
<p>
Voici une image contenant un lien.<br/>
<a href="http://www.jcordier.fr">
<img src="http://www.jcordier.fr/Documents/Tutoriaux/Images/HTML/Capture_html1.jpg" alt="Capture HTML" border="0" />
</a>
</p>
</body>
</html>
5.9 La balise <div>
La balise <div> est un bloc rectangulaire dont le contenu est quelconque et positionnable n'importe où dans la page.
Cependant, l'utilisation des balises <div> necessite des connaissance sur l'emploi des feuilles de styles, pour le positionnement dans un document, les couleurs, etc etc...
Voici un code avec deux blocs dans une page :
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div style="
position:relative;
top:20px;
left:20px;
width:100px;
height:30px;
padding:10px;
background-color:red;
">
Balise <div> numéro 1
</div>
<div style="
position:relative;
top:50px;
left:30px;
width:40px;
height:80px;
padding:10px;
background-color:green;
">
Balise <div> numéro 2
</div>
</body>
</html>
Aujourd'hui, beaucoup de webmaster utilisent la balise <div> qu'un tableau pour coder leurs pages web.
Ici, le style des blocs est définit dans le document HTML. Cette méthode fonctionne, mais il est préférable d'externiser la feuille de style avec la balise <link>.
Note : Ce document n'est plus valide conformément à la recommandation XHTML, puisqu'on parle ici d'HTML.
6. Sondage
Laisser un commentaire pour ce test
| Auteur | Date | Commentaire | Vote |
|---|---|---|---|
| Jordan | 03/08/2006 à 18:56:27 | Tutorial sur le HTML... | Trés complet |
| Veloce | 31/08/2006 à 16:24:45 | Un très bon tutorial pour les débutants | Trés complet |
| mneo35 | 06/11/2006 à 11:34:31 | trés bon tutorial merci a toi ;) | Trés complet |
| hqIoQAjXfKZkIONlSAl | 15/01/2010 à 01:48:45 | y9XGbW <a href="http://ixbpcqwyscst.com/">ixbpcqwyscst</a>, [url=http://lmitlialhwbn.com/]lmitlialhwbn[/url], [link=http://gsmkxkzqbxvo.com/]gsmkxkzqbxvo[/link], http://kenhoshntvfd.com/ | Moyen |
| Vote | Pourcentage | Graphique |
|---|---|---|
| Trés complet | 75% |  |
| Complet | 0% | |
| Moyen | 25% | |
| Incomplet | 0% | |
Nombre total des votes : 4.
[ Copyright © Jcordier.fr |
Css |
Xhtml |
RSS |
14 requêtes SQL |
Page générée en 0.078 secondes |
Plan du site ]