Divers‎ > ‎Atelier <coding>‎ > ‎

HTML

html.png


Le  HTML est destiné uniquement à représenter la structure d’une page : titres, sous-titres, paragraphes, images, formulaires de saisie, liens hypertextes, etc.

C’est la base d’une page Web. On qualifie de « statiques » les pages dont le code HTML n’est modifié ni par JavaScript, ni par PHP avant ou après l’affichage dans le navigateur





1. La structure de la page HTML





Tutorial  HTML


code

Résultat

<html><head><title>Ma page</title>

</head>  <body>

<font color=#0000ff><h1>Test</h1></font>Voici le contenu de ma page Web !

</body>

</html>

Test


Voici le contenu de ma page Web !

Copier puis coller  les code html suivants dans l'éditeur de texte situé dans la 2e colonne de cette page

D'autres codes:

code

Résultat

<div><p>Paragraphe 1</p><p>Paragraphe 2</p></div>

Paragraphe 1

Paragraphe 2

<strong>Toto</strong> et <em>moi</em>

Toto et moi


<html><head></head><body>Voici ma page Web</body></html>

Voici ma page Web




code :

<hr align="left" style="text-align:left;color:#f00;background-color:#00ccff;height:5px;width:85%">


Résultat:




Des exemples de sites crées par les élèves du collège NDP:

Site d'Aymeric :  http://myprogrammingskills.olympe.in/





2. Métadonnées du document

Les métadonnées pour les styles et les scripts peuvent être définies dans la page ou via un lien pontant vers un autre fichier possédant l'information.

<html> L'élément HTML (<html>) représente la racine d'un document HTML ou XHTML. Tout autre élément doit être descendant de cet élément.


Élément

Description


<base>

L'élément HTML (<base>) définit l'URL de base à utiliser pour toutes les URLs relatives contenues dans un document.


<head>

L'élément HTML Head Element (<head>) fournit des informations générales (metadata) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.




<link>

L'élément HTML lien (<link>) spécifie les relations entre le document courant et d'autres documents. Parmi les utilisations de cet élément, on peut citer la définition de relations pour la navigation et le lien du document avec une feuille de style.


<meta>

L'élément HTML <meta> représente toute information de méta-données ne pouvant être représentée par l'un des éléments consacrés aux méta-données (<base>, <link>,<script>, <style> ou <title>). Selon les attributs qui sont renseignés, la méta-donnée peut être de différentes sortes :


<style>

L'élément HTML <style> contient les informations de style pour un document ou une partie de ce document. Il faut mettre les informations de style à l'intérieur de cet élément, normalement en utilisant le langage CSS (voir CSS).


<title>

L'élément HTML <title> définit le titre du document, tel qu'il est montré dans la barre de titre du navigateur ou sur l'onglet de la page. Il ne peut contenir que du texte et les balises contenues ne sont pas interprétées.


code

Résultat


<head>

 <title>Ma page</title>

</head><body><font color=#0000ff><h1>Test</h1></font>Voici le contenu de ma page Web !

</body>



Test

Voici le contenu de ma page Web !






3. Division du contenu

Les éléments d'organisation du contenu permettent d'organiser le contenu du document en fragments logiques. Ces éléments sont utilisés afin de dresser une structure logique pour y placer le contenu de la page : l'en-tête, le bas de page, les différents niveaux de titre, etc.

Élément

Description

<address>

L'élément HTML <address> peut être utilisé par les auteurs pour fournir une information de contact pour l'élément HTML ancêtre <article> ou <body> le plus proche ; dans ce dernier cas, cela s'applique au document entier.

<article>

L'élément HTML <article>  représente du contenu autonome dans un document, une page, une application, ou un site, qui est prévu pour être distribué ou réutiliser indépendamment,

<body>

L'élément HTML <body> représente le contenu principal du document HTML, la partie affichée aux internautes. Il n'y a qu'un élément <body> par document.


code

Résultat

<head>

</head>

<body>Voici ma page Web</body>


Voici ma page Web



<footer>

L'élément HTML <footer> représente le pied de page, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td> le plus proche). Un pied de page ou de section contient habituellement des informations sur l'auteur de la section, les données relatives au copyright ou les liens vers d'autres documents en relation.

<header>

L'élément HTML <header> représente un groupe d'introduction ou une aide à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.

<h1>,<h2>,<h3>,<h4>,<h5>, <h6>

L'élément titre implémente six niveaux de titres dans un document, <h1> est le plus important et <h6> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit. L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.

<hgroup>

L'élément HTML <hgroup> (pour Headings Group) représente le titre d'une section.

<nav>

L'élément HTML <nav> (pour navigation) représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. C'est une section qui permet de naviguer dans un document avec diverses liens.

<section>

L'élement HTML <section> (pour Section) représente une section générique d'un document, c'est à dire un groupement thématique de contenu, généralement avec un en-tête.



Prenez les bonnes habitudes

Pas bon :

<SECTION>

 <p>This is a paragraph.</p>

</SECTION>

Pa bon du tout :

<Section>

 <p>This is a paragraph.</p>

</SECTION>

Bon:

<section>

 <p>This is a paragraph.</p>

</secon>



4. Contenu textuel

Ces éléments permettent d'organiser des blocs ou des sections de contenu pour les éléments placés entre les balises <body> et </body>.

Élément

Description


<blockquote>

L'élément HTML <blockquote> (Bloc de citation) indique que le texte visé est une citation longue.


<dd>

L'élément HTML <dd> (pour Definition Description) indique la définition d'un terme au sein d'une liste de définitions (élément (<dl>) . Cet élément ne peut apparaître qu'en tant qu'élément appartenant à une liste de définitions et doit être précédé d'un élément <dt>.


<div>

L'élément HTML <div> (signifiant division du document) est un conteneur générique permettant d'organiser le contenu mais qui ne réprésente rien de particulier. Il peut être utilisé pour grouper d'autres éléments afin de leur appliquer un style (en utilisant les attributs class ou id), ou parce qu'ils partagent des attributs aux valeurs communes, tel que lang. Il doit être utilisé uniquement lorsqu'aucun autre élément sémantique (comme <article> ou <nav>) n'est approprié.


<dl>

L'élément HTML <dl> (pour Definition List) regroupe une liste de paires associant des termes et leurs descriptions. Implémenter un glossaire représente une utilisation classique de cet élément.


<dt>

L'élément HTML <dt> (pour Definition Term) identifie un terme dans une liste de définition. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément <dl>. Il est généralement suivi d'un élément <dd>. Cependant plusieurs éléments <dt> à la suite indiquent que plusieurs termes seront définis par le même élément  <dd>qui suivra.


<figcaption>

L'élément HTML <figcaption> permet d'indiquer un sous-titre, ou encore une légende, associé à une figure, ou à une illustration, repésentée par l'élément<figure> qui est son premier parent. Ceci implique que <figcaption> peut être le premier ou le dernier des éléments inclus dans un block <figure>. L'élément<figcaption> est optionnel ; si non présent, alors, l'élément parent n'aura pas de sous-titre.


<figure>

L'élément HTML <figure> représente un contenu indépendant, habituellement accompagné d'une légende grâce à l'élément <figcaption>. Il est normalement référencé de manière unique. Bien qu'il soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma dont il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.


<hr>

L'élément HTML <hr> représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'un section). Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et non plus une mise en forme.


<li>

L'élément HTML <li> (List Item) est utilisé pour représenter un élément d'une liste. Il doit appartenir à une liste ordonnée (<ol>), à une liste non-ordonnée (<ul>) ou à un menu (<menu>), dans lesquels il désigne un élément unique de cette liste. Au sein des menus ou des listes non-ordonnées, les éléments d'une liste sont généralement affichés avec des puces rondes. Dans les listes ordonées, la puce d'un élément est le plus souvent un nombre ou une lettre affiché(e) à gauche (respectant l'ordre décroissant de la liste).


<main>

L’élément HTML <main> représente le contenu principal du <body> du document ou de l'application. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application. Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations de copyright, logo du site, et champs de recherche ( sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche. )


<ol>

L'élément HTML <ol> (pour Ordered List) représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un nombre cardinal associé pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.


<p>

L'élement HTML <p> (pour Paragraph) représente un paragraphe de texte.


code

Résultat

     <div>

<p>Paragraphe 1</p>

<p>Paragraphe 2</p>

</div>

Paragraphe 1

Paragraphe 2



<pre>

L'élément HTML <pre> (pour Preformatted Text) représente du texte pré-formaté. Le texte contenu dans cet élément est généralement affiché dans une police qui n'est pas proportionnelle, tel qu'affiché dans le fichier. Les blancs contenus dans cet élément sont affichés tels qu'ils sont contenus dans le texte original.


<ul>

L'élément HTML <ul> représente une liste d'éléments non ordonnés. C'est une collection d'éléments qui n'ont pas d'ordre numérique et dont leur position dans la liste n'a pas d'importance. En règle générale une liste d'élements non ordonnée est affichée avec une puce qui peut prendre plusieurs formes : un simple point, un cercle ou un carré. Le style de la puce n'est pas défini dans le code HTML de la page, mais dans le code CSS associé utilisant la propriété list-style-type.

5. Sémantique du texte

Ces éléments peuvent être utilisés afin définir la sémantique (le but, le sens) ou mettre en forme un mot, une ligne ou un fragment de texte.

Élément

Description




<a>

L'élément HTML <a> (pour anchor) définit un hyperlien, une cible de destination nommée pour un hyperlien, ou les deux à la fois.

<a href="http://www.hgndp.com"> Mon site</a>





<abbr>

L'élément HTML Abréviation (<abbr>) représente une abréviation et permet de façon optionnelle d'en fournir une description complète. S'il est présent, l'attribut title doit contenir cette même description complète et rien d'autre.




<b>

L'élément HTML <b> (pour bold) représente une partie d'un texte stylistiquement différente par rapport à du texte normal, sans lui apporter une importance particulière. Il est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests, ou tout morceau de texte réprésenté habituellement par du texte en gras. Un autre exemple de son usage, est d'indiquer la première phrase de chaque paragraphe d'un article.




<bdi>

L'élément HTML <bdi> (ou élément d'isolation de texte bi-directionnel) isole une portée (span) de texte pouvant être formaté dans une direction différente de celle du texte qui l'entoure.




<bdo>

L'élément HTML <bdo> (pour bidirectional override) est utilisé afin d'outrepasser la direction du texte en question. Cela change la direction du texte en la direction spécifiée par l'élément.




<br>

L'élément HTML <br> (Line Break, ou Retour à la ligne) produit un retour à la ligne dans le texte. C'est utile dans le cas de poèmes ou d'adresses, où les séparations de lignes sont importantes.




<cite>

L'élément HTML <cite> (ou élément de citation) contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture...

Il devrait inclure le titre du travail, le nom de son auteur ou une URL de référence, qui peut-être abrégé en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.




<code>

L'élément HTML <code> représente un morceau de code machine. Habituellement le navigateur utilise une police monospace.




<data>

L'élément HTML <data> relie un contenu donné à une version de ce contenu interprétable par un ordinateur. Si le contenu a une composante temporelle l'élément<time> doit être utiisé.




<dfn>

L'élément HTML <dfn> (pour Definition Element) représente la définition d'un terme.




<em>

En italique :

Style HTML  balise EM  comme  Emphasis : <em>   </em>

Style CSS :  < style="font-style: italic; " />




<i>

L'élément HTML <i> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.




<kbd>

L'élément HTML <kbd> (pour Keyboard Input) représente les entrées effectuées par l'utilisateur et produit un élément affiché par le navigateur avec la police monotype par défaut.




<mark>

L'élément HTML <mark> représente du texte surligné, c'est à dire du texte marqué afin d'être utilisé en tant que source étant donné sa pertinence dans un contexte en particulier. Il peut, par exemple, être utilisé dans une page pour montrer tous les mots correspondants au résultat d'une recherche.




<q>

L'élément HTML <q> (pour Quote) indique que le contenu textuel de l'élément est une citation courte. Cet élément est conçu pour contenir des citations courtes ne nécessitant pas différents paragraphes. L'élément <blockquote> doit être utilisée pour les citations plus longues.




<rp>

L'élément HTML <rp> est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui n'offrent pas le support des annotations Ruby. Les annotations Ruby permettent d'afficher la prononciation des caractères Est Asiatiques, notamment lors de l'usage de caractères furigana Japonais ou bopomofo Taïwanais. L'élément <rp> est utilisé en l'absence de support de l'élément <ruby>. Son contenu est ce qui devrait être affiché afin d'indiquer la présence d'une annotation Ruby, soit généralement des parenthèses.




<rt>

L'élément HTML <rt> entoure la prononciation d'un caractère présenté dans les annotations ruby, ces dernières affichant la prononciation des caractères Est Asiatiques. L'élément <rt> est utilisé à l'intérieur d'un élément <ruby>.




<ruby>

L'élément HTML <ruby> représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères Est Asiatiques.




<s>

L'élément HTML <s> (pour Strikethrough) permet d'afficher du texte barré au sens où celui-ci n'est plus d'actualité ou n'est plus pertinent. L'élément <s> ne doit pas être utilisé pour indiquer des suppressions de texte dans un document : l'élément <del> (et parfois l'élément <ins>) doit être utilisé pour traduire l'édition d'un texte.




<samp>

L'élément HTML <samp> (pour Sample Text) produit un élément en bloc affiché avec la police monotype par défaut du navigateur (Lucida Console). Cet élément a été conçu pour représenter des informations produites par un programme informatique.




<small>

L'élément HTML <small> représente du texte avec une police dont la taille est plus petite que celle utilisée pour le texte environnant (jusqu'à atteindre la taille de police minimale du navigateur). En HTML5, cet élément a pour but de représenter des annotations et des petits caractères comme les informations légales ou liées au copyright, indépendamment de la mise en forme utilisée.




<span>

L'élément HTML <span> est un containeur générique de ligne pour les contenus phrasés, qui ne réprésente rien par lui-même. Il peut être utilisé pour grouper des éléments afin de les styler (en utilisant les attributs class ou id), ou parce qu'ils partagent certaines valeurs d'attribut, comme pour lang. Il doit être utilisé seulement lorsqu'aucun autre élément sémantique n'est approprié. <span> est très proche de l'élément <div>, mais l'élément <div> est un élément de bloc, alors que <span> est en un élément de ligne.




<strong>

L'élément HTML <strong> est utilisé pour donner de l'importance à un texte, cela se traduit généralement par un affichage en gras.

code

Résultat

<strong>Toto</strong> et moi

Toto et moi






<sub>

L'élément HTML <sub> (pour Subscript) est utilisé, pour des raisons typographiques, pour afficher du texte en indice (plus bas et généralement plus petit) par rapport au bloc de texte environnant.




<sup>

L'élément HTML <sup> (pour Superscript) représente un morceau de texte qui devrait être, pour des raisons typographiques, sur une ligne plus haute et souvent plus petit que le texte principal.




<time>

L'élément HTML<time> représente soit une heure sur une horloge  fonctionnant sur 24 heures ou une date précise du calendrier grégorien (des informations facultatives sur l'heure ou le fuseau-horaire). Cet élément est conçu pour permettre l'utilisation d'informations temporelles dans un format interprétable par un ordinateur. Cela peut par exemple être utile aux différents agents installés sur le poste de l'utilisateur pour gérer un emploi du temps.




<u>

L'élément HTML <u> (pour Underline) permet d'afficher un texte souligné. En HTML5, cet élément représente un fragment de texte avec une annotation non-textuelle, dont le sens n'est pas précisé mais qui est tout de même affichée. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.




<var>

L'élément HTML <var> (pour Variable) représente une variable dans une expression mathématique ou du texte lié à la programmation. La mise en forme par défaut sera la mise en italique du contenu de cet élément.




<wbr>

L'élément HTML <wbr> (pour Word Break Opportunity) représente une position dans le texte où le navigateur peut éventuellement revenir à la ligne, même si les règles de sauts de ligne ne sont pas définies.





6. Contenu tabulaire


Élément

Description

<caption>

L'élément HTML <caption> représente le titre d'un tableau. Bien qu'il figure en première place parmi les descendants de l'élément <table>, la mise en forme de la feuille de style CSS peut placer cet élément à un autre endroit par rapport au tableau.

<col>

L'élément HTML <col> définit une colonne appartenant à un tableau et est utilisé pour définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <colgroup>.

<colgroup>

L'élément HTML <colgroup> définit un groupe de colonnes au sein d'un tableau.

<table>

L'élément HTML <table> représente des données en deux dimensions ou plus.

<tbody>

L’élément HTML <tbody> (pour Table Body) définit un ensemble de lignes représentant le corps au sein d’un tableau (<table>) les lignes du tableau <tr>doivent alors être placé entre l’élément <tbody> mais elles ne sont pas obligatoires. Avec les éléments HTMLElement("tfoot") }} et <thead>, <tbody> apporte aux périphériques (imprimantes, écrans) des informations sémantiques supplémentaires. L’élément <tbody> va représenter le contenu de l’élément parent <table>, s’il est plus grand qu’une page, il va sûrement être différent pour chaque pages imprimée. Pour les écrans, <tbody> va permettre un défilement différent des éléments <tfoot>,<thead> et <caption> du tableau (<table>) parent.

<td>

L'élément HTML <td> (pour Table Cell) définit une cellule d'un tableau contenant des données. Il fait partie du modèle du tableau.

<tfoot>

L'élément HTML <tfoot> (pour Table Foot) définit un ensemble de lignes résumant les colonnes d'un tableau.

<th>

L'élément HTML <th> (pour Table Header Cell) définit une cellule qui est un en-tête pour un groupe de cellules du tableau. Le groupe de cellules concernées est identifiés par les attributs scope et headers.

<thead>

L'élément HTML <thead> (pour Table Head) définit un ensemble de lignes définissant les lignes d'en-tête des colonnes du tableau

<tr>

L'élément HTML <tr> (pour Table Row) définit une ligne de cellules au sein d'un tableau. Ces lignes peuvent mélanger des éléments <td> et des éléments <th>.



<table>




<tr>




<td> ... </td> <td> ... </td>


</tr>


</table>





Marqueur de tableau

Marqueur de ligne ("r"=row=rangée=ligne)

Marqueur de cellule et fin de cellule.

Chaque <td> ... </td> réalise une colonne."d"=data=donnée

Fin de ligne

Fin du tableau


Les cellules titres utilisent le marqueur <th> à la place de <td>

Pour obtenir un cadre, il suffit d'ajouter l'attribut border : <table border>



code

résultat

<table border="1">

 <tr>

<td>Cellule 1</td>

<td>Cellule 2</td>

 </tr>

 <tr>

<td>Cellule 3</td>

<td>Cellule 4</td>

 </tr>

</table>

Cellule 1

Cellule 2

Cellule 3

Cellule 4








7. HTML et  les ressources multimédia

<area>

L'élément HTML <area> définit une zone particulière d'une image et peut lui associer un lien hypertexte. Cet élément n'est utilisé qu'au sein d'un élément <map>.

<audio>

L'élément HTML <audio> est utilisé pour rajouter un contenu sonore dans un document. Il peut contenir plusieurs sources audio introduites avec l'attribut src ou l'élément<source>. Le navigateur décidera lequel utiliser. Du contenu alternatif peut aussi être ajouté pour les navigateurs ne supportant pas cette fonctionnalité.

<img>

L'élément <img> HTML (ou HTML Image Element en anglais) représente une image du document.

<img src="https://www.dropbox.com/s/7iu08f5a9jn8iyt/frise2.jpg" alt="note" width="104" height="142">

alt= c'est le titre de l'image

<map>

L'élément HTML <map> est utilisé en association avec des éléments <area> afin de définir une carte d'image (image map).

<track>

L'élément HTML <track> est utilisé en tant qu'élément appartenant aux éléments  media qui sont <audio> et <video>. Cet élément isolé ne représente rien. Il permet de définir des données dépendant du temps et liées aux médias.

<video>

L'élément HTML <video> est utilisé pour intégrer des vidéo dans un document HTML ou XHTML.




8. Contenu embarqué

En plus du contenu multimédia, HTML peut inclure de nombreux autres éléments :

Élément

Description






<embed>

L'élément HTML <embed> représente un point d'intégration pour une application externe ou du contenu interactif (autrement dit un plug-in)






<iframe>

L'élément HTML <iframe> (pour inline frame) représente un contexte de navigation imbriqué, ce qui se traduit par l'intégration d'une page HTML dans la page actuelle.

<p>

<iframe src="http://www.hgndp.com" width="800" height="200"></iframe>

</p>






<object>

L'élément HTML <object> (pour Embedded Object) représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un plug-in.






<param>

L'élément HTML <param> (pour Parameter) définit les paramètres d'un élément<object>.






<source>

L'élément HTML <source> est utilisé pour définir différentes ressources multi-média pour les éléments <picture>, <audio> et <video>. C'est un élément vide. Il est généralement utilisé pour servir le même média dans les différents formats supportés par les navigateurs.







mailto

Formater un lien sur un email

<a href="mailto:jojo@voila.fr"> définit un lien sur un email et nécessite un marqueur de fin.

Règle : <a href="mailto:jojo@voila.fr">.....</a>

Exemple :  <a href="mailto:.............@......">Email de nom.prenom </a>













Indexe des tags HTML

HTML