• JODI + GEO GOO

Retour sur le dernier cours

• World wide web, Serveur, client, IP, éditeurs, inspecteur web
• Structure d'un document HTML (head, body..) et premières balises
• Mise en ligne sur Netlify

La structure de documents HTML éestait également visible grâce aux différents outils proposés par les navigateurs web. Ici l'inspecteur web de firefox qui, il y a quelques temps encore, proposait une vue 3D de la structure de votre page (ci-dessous). Pour visualiser votre page en 3D, vous pouvez aujourd'hui ajouter Tilt à Firefox (extension, ou Add-on).

La vue 3D de l'inspecteur web de Firefox en 2013Titlt Add-on

Au programme

• Présences
• Retour sur vos premières pages HTML. Correctifs.
• Créer une page web sans VScode 😉
• Les commentaires et leur fonction
• h1, h2, h3, p, ul, li, a, img, strong, em, blockquote, hr, br
• Inline et block
• Attributs
• https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started
• https://learn.shayhowe.com/html-css/building-your-first-web-page/
• Articulation HTML/CSS/JS + Architecture d'un site >
• Liens, Chemins relatifs et absolus. Ancres à l'intérieur d'un document.
• Les liens hypertextes pour naviguer à travers tout ça.
• Feuilles de styles CSS
• Modifiez la couleur de fond de votre page + 1 autre élément html (h1, p, a ...)
• Images et pages web (RVB, résolution..)

Les élements que nous verrons aujourd'hui:

<a href="#mon_ancre">Aller à mon ancre</a>
    <div id="mon_ancre">
</div>

Au cours:

Sur une thématique choisie, construction de trois pages HTML (ou plus), liées entre elles (par un menu de navigation) et reprenant les différents éléments suivants:

1. Plusieurs paragraphes
2. Plusieurs titres (de différents niveaux)
3. Un menu de navigation (liste à puces avec liens hypertextes)
4. Au moins une image
5. Un lien sur à image, pointant vers une URL extérieure et 'ouvrant dans un nouvel onglet.

Et pourquoi pas (facultatif):

1. Insert d'une video Youtube/Vimeo/Facebook...