Feat: ajoute les premiers exercices sur le HTML
This commit is contained in:
parent
0006d81130
commit
8ed0ac5d83
@ -1,18 +1,30 @@
|
|||||||
\begin{exercise}[subtitle={Modifier une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
\begin{exercise}[subtitle={Modifier une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
||||||
\begin{enumerate}
|
\begin{enumerate}
|
||||||
\item Copier puis modifier le code de \texttt{page\_balises.html} pour qu'elle à ça:
|
\item Copier puis modifier le code de \texttt{page\_balises.html} pour qu'elle ressemble au document pdf à coté.
|
||||||
\item Faire les listes des balises rencontrées et expliquer ce qu'elles permettent de faire.
|
\item Faire les listes des balises rencontrées et expliquer ce qu'elles permettent de faire.
|
||||||
\end{enumerate}
|
\end{enumerate}
|
||||||
|
|
||||||
\includegraphics[scale=0.4]{./fig/page_balises_modifiee}
|
|
||||||
\end{exercise}
|
\end{exercise}
|
||||||
|
|
||||||
\begin{exercise}[subtitle={Écrire des pages HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
\begin{exercise}[subtitle={Écrire des pages HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
||||||
Reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}.
|
En vous basant sur les documents reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}.
|
||||||
\begin{enumerate}
|
\begin{multicols}{2}
|
||||||
\item
|
\begin{enumerate}
|
||||||
\item
|
\item header et paragraphes
|
||||||
\item
|
\item liens 1 et 2
|
||||||
\item
|
\item listes
|
||||||
\end{enumerate}
|
\item images
|
||||||
|
\end{enumerate}
|
||||||
|
\end{multicols}
|
||||||
|
\end{exercise}
|
||||||
|
|
||||||
|
\begin{exercise}[subtitle={Valider son code HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
||||||
|
Le code que vous avez écrit ou modifié dans les exercices précédents donne peut être le bon résultat mais cela ne veut pas qu'il ait été rédigé en respectant les règles du HTML.
|
||||||
|
|
||||||
|
Pour valider votre page, il faut la télé verser sur le site de la W3C \url{https://validator.w3.org/#validate_by_upload}.
|
||||||
|
|
||||||
|
Valider les pages que vous avez produites.
|
||||||
|
\end{exercise}
|
||||||
|
|
||||||
|
\begin{exercise}[subtitle={Corriger une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }]
|
||||||
|
La page \texttt{page\_non\_valide.html} ne passe pas la validation W3C. À vous de la corriger pour que le rendu reste identique et qu'elle passe le test de validation.
|
||||||
\end{exercise}
|
\end{exercise}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 217 KiB |
@ -8,8 +8,11 @@ Web HTML CSS
|
|||||||
:category: 1NSI
|
:category: 1NSI
|
||||||
:summary: Prise en main des technologies web. Découverte du HTML et du CSS.
|
:summary: Prise en main des technologies web. Découverte du HTML et du CSS.
|
||||||
|
|
||||||
|
Déroulement
|
||||||
|
===========
|
||||||
|
|
||||||
Étape 1: HTML
|
Étape 1: HTML
|
||||||
=============
|
-------------
|
||||||
|
|
||||||
- Prise en main des outils de programmation.
|
- Prise en main des outils de programmation.
|
||||||
- Analyse d'une page exemple pour extraire les balises
|
- Analyse d'une page exemple pour extraire les balises
|
||||||
@ -32,7 +35,7 @@ Balises à travailler:
|
|||||||
- Tableaux (?)
|
- Tableaux (?)
|
||||||
|
|
||||||
Étape 2: CSS
|
Étape 2: CSS
|
||||||
============
|
------------
|
||||||
|
|
||||||
- Integration de règles CSS dans la page exemple
|
- Integration de règles CSS dans la page exemple
|
||||||
- Application de règles CSS sur les balises (voir codingame pour cela)
|
- Application de règles CSS sur les balises (voir codingame pour cela)
|
||||||
@ -45,7 +48,7 @@ Bilan:
|
|||||||
- Quelques propriétés
|
- Quelques propriétés
|
||||||
|
|
||||||
Étape 3: hébergement, URL, protocole http(s)
|
Étape 3: hébergement, URL, protocole http(s)
|
||||||
============================================
|
--------------------------------------------
|
||||||
|
|
||||||
- Depot d'une page sur le serveur
|
- Depot d'une page sur le serveur
|
||||||
- Accès à la page depuis le navigateur
|
- Accès à la page depuis le navigateur
|
||||||
@ -55,3 +58,14 @@ Bilan:
|
|||||||
|
|
||||||
- Depot sur serveur
|
- Depot sur serveur
|
||||||
- URL et chemin de fichier
|
- URL et chemin de fichier
|
||||||
|
|
||||||
|
Pense bête
|
||||||
|
==========
|
||||||
|
|
||||||
|
- Créer les fichiers pdf d'exemple pour la reproduction de pages
|
||||||
|
|
||||||
|
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/>`_
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
BIN
1NSI/01_Web_HTML_CSS/page_balises/page_balises_mod.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/page_balises/page_balises_mod.pdf
Normal file
Binary file not shown.
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang=fr>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="Author" content="">
|
<meta name="Author" content="">
|
||||||
|
|||||||
Binary file not shown.
@ -24,7 +24,7 @@ Savoir-faire de la séquence
|
|||||||
\begin{itemize}
|
\begin{itemize}
|
||||||
\item Lire et comprendre le code d'une page HTML et d'une fiche de style CSS.
|
\item Lire et comprendre le code d'une page HTML et d'une fiche de style CSS.
|
||||||
\item Éditer et écrire le code d'une page HTML et d'une fiche de style CSS.
|
\item Éditer et écrire le code d'une page HTML et d'une fiche de style CSS.
|
||||||
\item Valider le code d'une page HTML
|
\item Valider le code d'une page HTML et d'une fiche de style CSS.
|
||||||
\item Mettre en ligne et consulter une page HTML avec une fiche de style CSS
|
\item Mettre en ligne et consulter une page HTML avec une fiche de style CSS
|
||||||
\item Identifier les éléments d'une URL
|
\item Identifier les éléments d'une URL
|
||||||
\end{itemize}
|
\end{itemize}
|
||||||
@ -34,7 +34,7 @@ Savoir-faire de la séquence
|
|||||||
Ordre des étapes à respecter
|
Ordre des étapes à respecter
|
||||||
|
|
||||||
|
|
||||||
\section{}
|
\section{HTML}
|
||||||
|
|
||||||
\listsectionexercises
|
\listsectionexercises
|
||||||
|
|
||||||
|
|||||||
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/header_paragraph.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/header_paragraph.pdf
Normal file
Binary file not shown.
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/images.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/images.pdf
Normal file
Binary file not shown.
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/liens1.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/liens1.pdf
Normal file
Binary file not shown.
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/liens2.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/liens2.pdf
Normal file
Binary file not shown.
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/listes.pdf
Normal file
BIN
1NSI/01_Web_HTML_CSS/reproductions_html/listes.pdf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 111 KiB |
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang=fr>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<!-- en-tête -->
|
<!-- en-tête -->
|
||||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue
Block a user