93 lines
2.5 KiB
TeX
Executable File
93 lines
2.5 KiB
TeX
Executable File
\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}
|
||
<div>
|
||
Conversation
|
||
<p>
|
||
Bonjour
|
||
</p>
|
||
</div>
|
||
\end{lstlisting}
|
||
|
||
|
||
Balises mal imbriquées
|
||
\begin{lstlisting}
|
||
<div>
|
||
Conversation
|
||
<p>
|
||
Bonjour
|
||
</div>
|
||
</p>
|
||
\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}
|