Aller au contenu principal

Cours

Objectifs​

Comment structurer une page Web ?

  • Connaître la syntaxe du langage HTML.
  • Connaître les éléments HTML de base.
  • Comprendre le DOM.

Présentation​

HTML

Programmation Web et bases de données

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.

    • 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/content/images/2022/11/image-1.png

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/anatomy-element-html.png

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/anatomy-element-html.png

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>

Structure d'un page HTML

https://user.oc-static.com/upload/2022/11/25/16693917384741_FR_1603881_HTML-CSS_Static-Graphics_p1c3-3.jpg

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://user.oc-static.com/upload/2022/11/25/16693917384741_FR_1603881_HTML-CSS_Static-Graphics_p1c3-3.jpg

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://user.oc-static.com/upload/2022/11/25/16693917384741_FR_1603881_HTML-CSS_Static-Graphics_p1c3-3.jpg

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://user.oc-static.com/upload/2022/11/25/16693917384741_FR_1603881_HTML-CSS_Static-Graphics_p1c3-3.jpg

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://user.oc-static.com/upload/2022/11/25/16693917384741_FR_1603881_HTML-CSS_Static-Graphics_p1c3-3.jpg

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://i.sstatic.net/B6f7u.png

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

Viewport

DOM


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

DOM

https://allophysique.com/docs/nsi/html/images/DOM.png

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/devtools_63_inspector.png

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/dom_inspector.png

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

F pour passer en plein écran ou O pour afficher la vue d'ensemble.
Versions sans animation, plein écran, imprimable.

Références​

Dernière mise à jour le