2022-07-26 16:33:21 +00:00
|
|
|
Web HTML CSS
|
|
|
|
|
############
|
|
|
|
|
|
2022-08-21 06:45:27 +00:00
|
|
|
:date: 2022-08-21
|
|
|
|
|
:modified: 2022-08-21
|
2022-07-26 16:33:21 +00:00
|
|
|
:authors: Benjamin Bertrand
|
|
|
|
|
:tags: Web
|
|
|
|
|
:category: 1NSI
|
|
|
|
|
:summary: Prise en main des technologies web. Découverte du HTML et du CSS.
|
|
|
|
|
|
2022-07-30 12:35:10 +00:00
|
|
|
Déroulement
|
|
|
|
|
===========
|
|
|
|
|
|
2022-07-26 16:33:21 +00:00
|
|
|
Étape 1: HTML
|
2022-07-30 12:35:10 +00:00
|
|
|
-------------
|
2022-07-26 16:33:21 +00:00
|
|
|
|
|
|
|
|
- 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:
|
|
|
|
|
|
2022-07-30 16:46:05 +00:00
|
|
|
.. image:: ./1B_HTML.pdf
|
|
|
|
|
:height: 200px
|
|
|
|
|
:alt: Bilan sur le web et le HTML
|
|
|
|
|
|
|
|
|
|
|
2022-07-26 16:33:21 +00:00
|
|
|
- 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
|
2022-07-30 12:35:10 +00:00
|
|
|
------------
|
2022-07-26 16:33:21 +00:00
|
|
|
|
|
|
|
|
- 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:
|
|
|
|
|
|
2022-07-30 16:46:05 +00:00
|
|
|
.. image:: ./2B_CSS.pdf
|
|
|
|
|
:height: 200px
|
|
|
|
|
:alt: Bilan sur le CSS
|
|
|
|
|
|
2022-07-26 16:33:21 +00:00
|
|
|
- Différentes façon d'appliquer des règles CSS
|
2022-07-30 16:46:05 +00:00
|
|
|
- Sélecteurs
|
2022-07-26 16:33:21 +00:00
|
|
|
|
|
|
|
|
Étape 3: hébergement, URL, protocole http(s)
|
2022-07-30 12:35:10 +00:00
|
|
|
--------------------------------------------
|
2022-07-26 16:33:21 +00:00
|
|
|
|
|
|
|
|
- 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
|
2022-07-30 12:35:10 +00:00
|
|
|
|
|
|
|
|
Pense bête
|
|
|
|
|
==========
|
|
|
|
|
|
|
|
|
|
- Créer les fichiers pdf d'exemple pour la reproduction de pages
|
|
|
|
|
|
2022-08-21 07:13:21 +00:00
|
|
|
.. code-block:: bash
|
2022-08-21 06:52:55 +00:00
|
|
|
|
2022-07-30 12:35:10 +00:00
|
|
|
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/>`_
|
