Hypertext Markup Language

--- title: Hypertext Markup Language tags: support, intégration, html robots: noindex, nofollow author: Julien Noyer --- # Hypertext Markup Language *Afficher des informations sur le Web* ![](https://i.imgur.com/g1aR2K3.png) ## Présentation du HTML Le [HTML](https://fr.wikipedia.org/wiki/Hypertext_Markup_Languag) est le langage de balisage conçu pour représenter les pages web. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS). HTML est initialement dérivé du Standard Generalized Markup Language (SGML). <br><br> ## Document de base HTML Le squelette d’une page HTML est la structure qui permet de créer et d’organiser du contenu, il est constitué de balises obligatoire pour définir le fichier HTML puis une suite de balises sémantiques qui identifies des zones spécifiques. ```htmlmixed=  <!DOCTYPE html>  <html lang="fr">  <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Hello World</title> </head>  <body>  <header>  <nav></nav> </header>  <main> <section> <article></article> <aside></aside> </section> </main>  <footer></footer> </body> </html> ``` ### Définition des éléments - `lang=“fr”` : attribut pour définir langue - `<section>` : balise pour créer des zones dans la page - `<article>` : balise pour créer des zones dans les sections - `<aside>` : balise pour ajouter du contenu annexe <br><br> ## Structure de la balise head Quand nous le regardons de haut en bas, un squelette commence par la tête, l’analogie avec le HTML ne s’arrête pas là car c’est dans la balise `<head>` que se trouvent les informations nécessaires au fonctionnement du corps de la page. La balise `<head>` contient des éléments *obligatoires et d’autres optionnelles. ```htmlmixed= <head> <meta charset="utf-8" /> <meta name="keywords" content="exercice, html, css"> <meta name="viewport" content="initial-scale=1"> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> ``` ### Définition des éléments - `charset=“…”` : attribut pour définir le jeu de caractères - `keywords=“…”` : attribut pour ajouter des mots clefs - `viewport=“…”` : attribut pour configurer le Responsive Design - `<link>` : balise pour ajouter une feuille de style CSS --- <br><br><br><br><br><br> # Les balises HTML *Définition et structure* ![](https://i.imgur.com/rW0ftw2.png) <br><br> ## Structure des balises HTML Les balises HTML peuvent être de type block ou in-line. Leurs comportements sont différents mais leurs structures restent la même : il faut toujours ouvrir et fermer une balise HTML, lui ajouter un contenu et en option un attribut. ![](https://i.imgur.com/tQWryWb.png) ### Définition des éléments - `<p>` : Ouverture de la balise - `</p>` : Fermeture de la balise - `class=“…”` : Attribut de la balise - `“Hello World”` : Contenu de la balise <br><br> Les types de balise HTML ont chacune une fonction particulière : le type block permet de créer des sections et le type inline permet de créer des sous-sections. Les balises de types blocks englobent des balises de type in-line. <br><br> ## Les balises de type block Elles occupent toute la largeur disponible. Lorsque deux éléments blocs se suivent dans une page, ils sont positionnés (par défaut) l’un sous l’autre. ```htmlmixed= <header> <nav></nav> </header> <main> <section> <h1>Duis aute irure dolor in reprehenderit</h1> <article> <h2>Ullamco laboris nisi ut aliquip ex ea commodo</h2> <p>Nemo enim ipsam voluptatem qui ...</p> </article> </section> </main> <footer> <p>Lorem ipsum sit amet...</p> </footer> ``` ### Définition des éléments - `<header>`: balise pour créer l’ouverture de la page - `<nav>`: balise pour créer la navigation principale - `<main>`: balise pour créer le contenu de la page - `<section>`: balise pour créer des zones dans la page - `<article>`: balise pour créer des zones dans les sections - `<footer>`: Balise sectionnante HTML5 - `<h1>`: balise pour créer des titres (1 à 6) - `<p>`: balise pour créer des paragraphes <br><br> ## Les balises de type inline Elles n’occupent que la largeur indispensable à l’affichage du contenu et ne provoque pas de retour à la ligne. ```htmlmixed= <p><strong>2010-2015 :</strong>Lorem ipsum sit amet, dolor <i>Consectetur</i></p> <img src=”http://...” alt=”Le logo”> ``` ### Définition des éléments - `<strong>`: balise pour créer un texte gras - `<b>`: variante non sémantique de `<strong>` - `<i>`: balise pour créer un texte italique - `<em>`: variante sémantique de `<i>` indidant une importantce - `<img>`: balise pour ajouter une image <br><br> ## Les listes HTML Il existe deux sortes de liste, soit numérotée, soit non. Toutes deux sont constituées de balises `<li>` dans un parent soit `<ol>` soit `<ul>`. ```htmlmixed= <ol> <li>Lorem ipsum dolor</li> <li>Duis aute irure dolor in</li> <li>Excepteur sint occaecat</li> </ol> <ul> <li>Sed ut perspiciatis unde</li> <li>Neque porro quisquam est</li> <li>Ut enim ad minima veniam</li> </ul> ``` ### Définition des éléments - `<ol>`: balise pour numéroter chaque `<li>` - `<ul>`: balise sans numérooter de chaque `<li>` - `<li>`: balise correspondant à un item de la liste <br><br> ## Les liens HTML Les liens HTML peuvent être de deux types : interne ou externe. Les liens internes servent à gérer la navigation sur plusieurs pages d’un même site alors que les externes affichent des pages qui ne font pas partie du site, les liens externes doivent être spécifiés à l’utilisateur. ![](https://i.imgur.com/hyI1MPw.png) ### Définition des éléments - `<a>…</a>`: balise pour créer un lien `<li>` - `href=“…”`: attribut pour définir la page à lier - `target=“…”`: attribut pour définir le type de lien <br><br> ## Les tableaux HTML Les tableaux ont un fonctionnement proche des listes mais sont composés de plus de balises. Il est possible d’afficher un tableau avec différentes options comme un titre ou un index mais également un header et un footer. ```htmlmixed= <table> <caption>Duis aute irure dolor in</caption> <tr> <th>Lorem</th> <th>Ipsum</th> </tr> <tr> <td>Sed ut perspiciatis unde</td> <td>Neque porro quisquam est</td> </tr> <tr> <td colspan=”2”>Ut enim ad minima veniam</td> </tr> </table> ``` ### Définition des éléments - `<table>…</table>`: balise pour créer un tableau - `<caption>…</caption>`: balise pour créer un titre - `<tr>…</tr>`: balise pour créer une ligne - `<th>…</th>`: balise pour créer un header - `<td>…</td>`: balise pour créer une colonne - `colspan=”…”`: attribut pour fusionner des celulle <br><br> ## Les Formulaires HTML Pour réaliser un formulaire, il faut utiliser une suite de balises HTML pour permettre à l’utilisateur de renseigner des informations. Comme pour une liste ou un tableau, un formulaire est englobé dans un conteneur dans lequel sont associées des balises `<label>` et `<input>`. ```htmlmixed= <form method="post" action="connexion.php"> <fieldset> <legend>Vos informations</legend> <label for="lePseudo">Votre pseudo</label> : <input type="text" name="pseudo"> <label for="lePass">Votre mot de passe :</label> <input type="password" name="pass"> </fieldset> <button type="submit">Envoyer</button> </form> ``` ### Définition des éléments - `<form>…</form>`: balise pour créer un formulaire - `method=“…”`: attribut pour définir le type de communication - `action=“…”`: attribut pour définir le fichier de traitement - `<fieldset>…</fieldset>`: balise pour créer un groupe de champs - `<legend>…</legend>`: balise pour créer une légende au groupe de champs - `<label>…</label>`: balise associé à un input - `for=“…”`: attribut associer un `<input>` - `<input … />`: balise permant à l’utilisateur de renseigner des informations - `name=“…”`: attribut pour identifier un `<input>` - `<button>…</button>`: balise captant un click - `type=“…”`: attribut de définir le type de `<input>` et `<button>` --- <br><br><br><br><br><br> # Ressources ![](https://i.imgur.com/iFcSll4.jpg) ## Liens utiles La liste ci-dessous contient les liens utiles vers des supprots de cours : - [HTML Tags](https://fr.wikipedia.org/wiki/Hypertext_Markup_Language) _Liste des balises HTML_ - [Attribut lang](https://www.w3schools.com/tags/att_global_lang.asp) _Définir la langue d'un document_ - [Balise Head](https://www.w3schools.com/tags/tag_head.asp) _Configurer une page HTML_ - [Attribut Charset](https://www.w3schools.com/html/html_charset.asp) _Choisir un jeu de caractères_ - [Attribut Meta](https://www.w3schools.com/tags/tag_meta.asp) _Ajouter des données dans le HEAD_ - [Attribut Viewport](https://www.w3schools.com/Css/css_rwd_viewport.asp) _Configurer le Responsive Design_ - [Balise Link](https://www.w3schools.com/html/html_links.asp) _Ajouter une feuille de style_ - [balise header](https://www.w3schools.com/tags/tag_header.asp) _Définir l'ouverture de page_ - [balise Nav](https://www.w3schools.com/tags/tag_nav.asp) _Définir la navigation principale_ - [balise Main](https://www.w3schools.com/tags/tag_main.asp) _Définir le contenu principal_ - [Balise Section](https://www.w3schools.com/tags/tag_section.asp) _Définir une zone_ - [Balise article](https://www.w3schools.com/tags/tag_article.asp) _Découper une zone_ - [Balise aside](https://www.w3schools.com/tags/tag_aside.asp) _Ajouter un contenu annexe_ - [Balise footer](https://www.w3schools.com/tags/tag_footer.asp) _Définir le pied de page_ - [Balise H](https://www.w3schools.com/tags/tag_hn.asp) _Les titres_ - [Balise P](https://www.w3schools.com/tags/tag_p.asp) _Les paragraphes_ - [Balise Strong](https://www.w3schools.com/tags/tag_strong.asp) _Le texte gras_ - [Balise B](https://www.w3schools.com/tags/tag_b.asp) _Le texte gras (variante)_ - [Balise I](https://www.w3schools.com/tags/tag_p.asp) _Le texte italique_ - [Balise Em](https://www.w3schools.com/tags/tag_em.asp) _Le texte italique (sémantique)_ - [Balise Img](https://www.w3schools.com/tags/tag_img.asp) _Les images_ - [Balise Ol](https://www.w3schools.com/tags/tag_ol.asp) _Les listes numérotées_ - [Balise Ul](https://www.w3schools.com/tags/tag_ul.asp) _Les listes non-numérotées_ - [Balise Li](https://www.w3schools.com/tags/tag_li.asp) _Les items d'une liste_ - [Balise A](https://www.w3schools.com/tags/tag_a.asp) _Les liens_ - [Attribut Href](https://www.w3schools.com/tags/att_a_href.asp) _La cible d'un lien_ - [Attribut Target](https://www.w3schools.com/tags/att_a_target.asp) _Le type de lien_ - [Balise Table](https://www.w3schools.com/tags/tag_table.asp) _Les tableaux_ - [Balise Caption](https://www.w3schools.com/tags/tag_caption.asp) _Titre d'un tableau_ - [Balise Tr](https://www.w3schools.com/tags/tag_table.asp) _Ligne d'un tableau_ - [Balise Td](https://www.w3schools.com/tags/tag_td.asp) _Cellule d'un tableau_ - [Attribut Colspan](https://www.w3schools.com/tags/att_td_colspan.asp) _Fusionner des cellule d'un tableau_ - [Balise Form](https://www.w3schools.com/html/html_forms.asp) _Les formulaires_ - [Attribut Method](https://www.w3schools.com/tags/att_form_method.asp) _Les méthodes des formulaires_ - [Attribut Action](https://www.w3schools.com/tags/att_form_action.asp) _L'action d'un formulaire_ - [Balise Fieldset](https://www.w3schools.com/tags/tag_fieldset.asp) _Les groupes de champs d'un formulaire_ - [Balise Legend](https://www.w3schools.com/tags/tag_legend.asp) _Le titre des groupes de champs d'un formulaire_ - [Balise Label](https://www.w3schools.com/tags/tag_label.asp) _Les labels d'un formulaire_ - [Attribut For](https://www.w3schools.com/tags/att_form_for.asp) _La configuration des labels d'un formulaire_ - [Balise Input](https://www.w3schools.com/tags/tag_input.asp) _Les inputs d'un formulaire_ - [Attribut Name](https://www.w3schools.com/tags/att_input_name.asp) _La configuration des inputs d'un formulaire_ - [Balise Button](https://www.w3schools.com/tags/tag_button.asp) _Les boutons_ - [Attribut Type](https://www.w3schools.com/html/html_form_input_types.asp) _La configuration des boutons_

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.