diff --git a/1NSI/01_Web_HTML_CSS/1B_HTML.pdf b/1NSI/01_Web_HTML_CSS/1B_HTML.pdf new file mode 100644 index 0000000..e0c6353 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/1B_HTML.pdf differ diff --git a/1NSI/01_Web_HTML_CSS/1B_HTML.tex b/1NSI/01_Web_HTML_CSS/1B_HTML.tex new file mode 100755 index 0000000..b1e8217 --- /dev/null +++ b/1NSI/01_Web_HTML_CSS/1B_HTML.tex @@ -0,0 +1,92 @@ +\documentclass[a4paper,10pt]{article} +\usepackage{myXsim} + +\author{Benjamin Bertrand} +\title{Web HTML CSS - Cours} +\date{Septembre 2022} + +\pagestyle{empty} + +\begin{document} + +\maketitle + +\section{Le web} + +\begin{definition}[ Le web ] + Le World Wide Web (littéralement la « toile (d’araignée) mondiale », abrégé www ou le Web), la Toile mondiale ou la Toile, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites. L’image de la toile d’araignée vient des hyperliens qui lient les pages web entre elles. + + \flushright{Source: Wikipedia} +\end{definition} + +\subsection*{Les navigateurs web} + +\afaire{Lister 5 navigateurs web} + +\vspace{2cm} + +\subsection*{Les languages du web} + +On utilise classiquement 3 langages pour programmer des pages web. C'est 3 langages se complètent et ont un rôle distinct dans le rendu final. +\begin{center} + \begin{tabular}{ccc} + \includegraphics[scale=0.4]{./fig/CSS3_logo} + & + \includegraphics[scale=0.9]{./fig/HTML5_logo} + & + \includegraphics[scale=0.3]{./fig/JavaScript_logo} + \\ + Décoration & Contenu & Interaction + \end{tabular} +\end{center} + +\section{HTML} + +\begin{definition}[ Le HTML ] + Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web. + + \flushright{Source: Wikipedia} +\end{definition} + +\subsection*{Les balises} + +\begin{center} + \includegraphics[scale=2]{./fig/anatomie-element-html} +\end{center} + +Les balises doivent être bien imbriquée. C'est à dire qu'il faut fermer la dernière balise ouverte avant les autres. + +\begin{multicols}{2} + Balises bien imbriquées + \begin{lstlisting} +
+ Conversation +

+ Bonjour +

+
+ \end{lstlisting} + + + Balises mal imbriquées + \begin{lstlisting} +
+ Conversation +

+ Bonjour +

+

+ \end{lstlisting} +\end{multicols} + +\subsection*{Validation} + +Même si le rendu d'une page web peut sembler correcte, cela ne signifie pas que le code respecte les normes du HTML. En effet, les navigateurs sont en général très permissifs sur la qualité du code qui leur est fourni. + +Ces normes sont définis pas le W3C. Cet organisme propose un validateur: +\begin{center} + \url{https://validator.w3.org/#validate_by_upload} +\end{center} + + +\end{document} diff --git a/1NSI/01_Web_HTML_CSS/exercises.tex b/1NSI/01_Web_HTML_CSS/exercises.tex index 1c6a944..b0f08d6 100644 --- a/1NSI/01_Web_HTML_CSS/exercises.tex +++ b/1NSI/01_Web_HTML_CSS/exercises.tex @@ -1,11 +1,12 @@ -\begin{exercise}[subtitle={Modifier une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }] +% ---- HTML +\begin{exercise}[subtitle={Modifier une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, tags={ Web }] \begin{enumerate} \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. \end{enumerate} \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}, tags={ Web }] En vous basant sur les documents reproduire chacun des exemples ci-dessous en partant de la \texttt{page\_blanche.html}. \begin{multicols}{2} \begin{enumerate} @@ -17,7 +18,7 @@ \end{multicols} \end{exercise} -\begin{exercise}[subtitle={Valider son code HTML}, step={1}, origin={Ma tête}, topics={ Web HTML CSS }, tags={ Web }] +\begin{exercise}[subtitle={Valider son code HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, 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}. @@ -25,6 +26,8 @@ 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 }] +\begin{exercise}[subtitle={Corriger une page HTML}, step={1}, origin={Ma tête}, topics={ Web HTML}, 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} + +% ---- CSS diff --git a/1NSI/01_Web_HTML_CSS/fig/CSS3_logo.png b/1NSI/01_Web_HTML_CSS/fig/CSS3_logo.png new file mode 100644 index 0000000..da0d94b Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/fig/CSS3_logo.png differ diff --git a/1NSI/01_Web_HTML_CSS/fig/HTML5_logo.png b/1NSI/01_Web_HTML_CSS/fig/HTML5_logo.png new file mode 100644 index 0000000..fe74f60 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/fig/HTML5_logo.png differ diff --git a/1NSI/01_Web_HTML_CSS/fig/JavaScript_logo.png b/1NSI/01_Web_HTML_CSS/fig/JavaScript_logo.png new file mode 100644 index 0000000..f7beb53 Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/fig/JavaScript_logo.png differ diff --git a/1NSI/01_Web_HTML_CSS/fig/anatomie-element-html.png b/1NSI/01_Web_HTML_CSS/fig/anatomie-element-html.png new file mode 100644 index 0000000..291381e Binary files /dev/null and b/1NSI/01_Web_HTML_CSS/fig/anatomie-element-html.png differ diff --git a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf index 8b7b2de..2023ca3 100644 Binary files a/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf and b/1NSI/01_Web_HTML_CSS/plan_de_travail.pdf differ