2022-2023/1NSI/01_Web_HTML_CSS/index.rst

Web HTML CSS
############

:date: 2022-08-21
:modified: 2022-09-04
:authors: Benjamin Bertrand
:tags: Web
:category: 1NSI
:summary: Prise en main des technologies web. Découverte du HTML et du CSS.

Déroulement
===========

Plan de travail

.. image:: ./plan_de_travail.pdf
    :height: 200px
    :alt: Plan de travail de la séquence


Étape 1: HTML
-------------

- Prise en main des outils de programmation.
- Analyse d'une page exemple pour extraire les balises
- Reproduction d'exemples à partir d'une page blanche
- Vérification de la validité du code avec W3C
- Rendre une page valide

Bilan:

.. image:: ./1B_HTML.pdf
    :height: 200px
    :alt: Bilan sur le web et le HTML


- Le web, son origine, la principe de client serveur et le partage des responsabilités dans les techno web (HTML, CSS, JS)
- HTML: notion de balise (avec attributs), page blanche de base et zoologie des balises

Balises à travailler:

- Header
- paragraphes
- Listes
- Liens
- Images
- Tableaux (?)

Étape 2: CSS
------------

- Integration de règles CSS dans la page exemple
- Application de règles CSS sur les balises (voir codingame pour cela)
- Sélecteurs balise/identifiant/class (`jeu autour de la sélection <https://flukeout.github.io/>`_)

Bilan:

.. image:: ./2B_CSS.pdf
    :height: 200px
    :alt: Bilan sur le CSS

- Différentes façon d'appliquer des règles CSS
- Sélecteurs

Étape 3: hébergement, URL, protocole http(s)
--------------------------------------------

- Depot d'une page sur le serveur
- Accès à la page depuis le navigateur
- Reconnaître les parties d'une URL

Bilan:

- Depot sur serveur
- URL et chemin de fichier

.. image:: ./3B_http.pdf
    :height: 200px
    :alt: Bilan sur l'hébergement


Pense bête
==========

- Créer les fichiers pdf d'exemple pour la reproduction de pages

.. code-block:: bash

    for i in solutions/reproductions_html/*.html; do
        wkhtmltopdf --enable-local-file-access $i reproductions_html/${${i:t}%.html}.pdf;
    done

- `Liste des balises HTML et leur utilité <https://jaetheme.com/balises-html5/>`_