HTML

Web

• 1969 : ARPANET (ancêtre d'Internet).

  • Courriel (SMTP), transfert de fichiers (FTP), messagerie instantanée (IRC), …

• 1989 : Conception (sur papier) du Web.

  • Pour simplifier l'utilisation d'Internet avec une seule interface.

• 1991 : Première page Web au CERN.

  • Web = URL + HTTP + HTML

  • URL : Adresse unique d'une page (Où ?)

  • HTTP : Protocole de transfert de pages (Comment ?)

  • HTML : Langage de description de pages (Quoi ?)

• 1995 : JavaScript pour rendre les pages Web interactives.

• 1996 : CSS pour le style des pages Web.

Langages du navigateur Web

• Le moteur de rendu web interprète trois langages :

  • HTML (Hypertext Markup Language) : Structure de la page.

  • CSS (Cascading Style Sheets) : Mise en forme de la page.

  • JS (JavaScript) : Interactivité de la page.

https://scrimba.com/articles/html-css-javascript/

HTML

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Web</title>
  </head>
  <body>
    <h1>Titre de la page</h1>
    <p>Contenu de la page</p>
  </body>
</html>

HTML

• Langage de balisage : décrit une structure hiérarchique de données.

• Extension des fichiers en .html ou .htm.

• Page d'accueil : index.html

  • Lorsque l'URL est un dossier, le serveur Web affiche le fichier index.html de ce dossier.

  • Le lien https://www.example.com/ affiche https://www.example.com/index.html.

Élément HTML

https://developer.mozilla.org/fr/docs/Glossary/HTML

• Un élément HTML est délimité par une balise ouvrante <p> et une balise fermante </p> (avec un /).

• Le contenu de l'élément est placé entre les deux balises.

• La balise ouvrante peut contenir des attributs.

  • Attribut clé-valeur (entre guillemets) : <input type="text">

  • Attribut booléen : <input disabled> (= <input disabled="">).

Élément HTML

https://developer.mozilla.org/fr/docs/Glossary/HTML

• Balise auto-fermante sans contenu : <img />.

  • <img /> est équivalent à <img></img>.

• Les balises orphelines ne se ferment pas : <br>, <hr>, <input>, …

• Commentaire (pour les autres et futur soi) : <!-- Texte non interprété -->.

Balises courantes

• Titre : <h1> à <h6>

• Paragraphe : <p>

• Lien : <a href="lien.html">

• Image : <img src="image.jpg" alt="description">

• Liste (non ordonnée, ordonnée, élément) : <ul>, <ol>, <li>

• Conteneur générique (bloc et ligne) : <div> et <span>

• Démonstration

Structure d'un page HTML

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061261-creez-votre-premiere-page-web-en-html

Structure d'un page HTML

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061261-creez-votre-premiere-page-web-en-html

• Déclaration du type de document :

  • HTML 5 : <!DOCTYPE html>

  • HTML 4.01 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  • XHTML 1.1 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Structure d'un page HTML

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061261-creez-votre-premiere-page-web-en-html

• Élément racine : <html>

  • Attribut lang pour la langue de la page : <html lang="fr">

  • Contient les éléments <head> et <body>.

Structure d'un page HTML

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061261-creez-votre-premiere-page-web-en-html

• Métadonnées : <head>

  • Informations sur la page (non affichées) : encodage, titre, icône, …

  • Peut contenir des éléments de style et de script.

Structure d'un page HTML

https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061261-creez-votre-premiere-page-web-en-html

• Données : <body>

  • Contenu visible de la page : textes, images, liens, …

Head commun

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Titre de la page</title>
</head>

• Encodage des caractères de la page : UTF-8

• Affichage responsive sur mobile.

• Titre de la page affiché dans l'onglet du navigateur.

Problème d'encodage

https://stackoverflow.com/questions/47499302/utf-encoding-error-on-web-page-with-french-language

Viewport

https://www.w3schools.com/css/css_rwd_viewport.asp

https://www.w3schools.com/css/css_rwd_viewport.asp

DOM

<html lang="en">
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Header</h1>
    <p>Paragraph</p>
  </body>
</html>

https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model

DOM

https://allophysique.com/docs/nsi/html/page3/

Outils de développement

https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools

Outils de développement

• Pour ouvrir les outils de développement sur le navigateur :

  • Clavier : F12

  • Souris : clic droit sur un élément > Inspecter

• Naviguer dans le DOM.

• Modifier la page HTML sur notre navigateur.

Outils de développement

https://developer.mozilla.org/fr/docs/Learn_web_development/Howto/Tools_and_setup/What_are_browser_developer_tools