% =========================================================
% Classe de document
% =========================================================
\documentclass[a4paper,12pt]{article}

% =========================================================
% Encodage, langue
% =========================================================
\usepackage[utf8]{inputenc} 
%\usepackage[T1]{fontenc}
\usepackage[french]{babel}
\frenchbsetup{StandardLists=true}
\usepackage{eurosym}

% =========================================================
% Mathématiques
% =========================================================
\usepackage{amsmath,amssymb}
\usepackage{dsfont}
\usepackage{mathrsfs}

% =========================================================
% Mise en page générale
% =========================================================
\usepackage[left=1cm,right=1cm,top=2.5cm,bottom=2.5cm]{geometry}

\setlength{\parindent}{0pt}  % pas d'indentation
\hyphenpenalty=10000         % empêche la coupure de mots

% =========================================================
% En-têtes et pieds de page
% =========================================================
\usepackage{fancyhdr}
\usepackage{lastpage}
\pagestyle{fancy}
\fancyhf{}
\setlength{\headheight}{26pt}
\setlength{\footskip}{18pt}
\renewcommand{\headrulewidth}{0pt}
\renewcommand{\footrulewidth}{0pt}

% =========================================================
% Tableaux
% =========================================================
\usepackage{array}
\usepackage{tabularx}
\renewcommand*{\tabularxcolumn}[1]{m{#1}} % centrage vertical
\newcolumntype{C}[1]{>{\centering\arraybackslash}m{#1}}
\newcolumntype{Y}{>{\centering\arraybackslash}X}
% centrage horizontal et vertical dans une case de xx cm
% =========================================================
% Colonnes, listes, divers
% =========================================================
\usepackage{multicol}
\setlength{\columnseprule}{0.5pt}
\setlength{\columnsep}{30pt}

\usepackage{enumerate}
\usepackage{setspace}
\usepackage[np]{numprint}
\DecimalMathComma

% =========================================================
% Graphiques (PSTricks)
% =========================================================
% Pour PDFLaTeX direct, utiliser auto-pst-pdf
% \usepackage{auto-pst-pdf}
\usepackage{pstricks-add,pst-tree}
\usepackage{tikz,pgfplots,tkz-tab}

% =========================================================
% Macros utilitaires
% =========================================================
\def\tvi{\vrule height 20pt depth 20pt width 0pt}

% =========================================================
% Paramètres document
% =========================================================
\def\moisEnCours{\ifcase\month
	\or Janvier\or F\'evrier\or Mars\or Avril\or Mai\or Juin\or
	Juillet\or Ao\^ut\or Septembre\or Octobre\or Novembre\or
	D\'ecembre\fi \relax}

% =========================================================
\def\madate{\moisEnCours~ \the\year}   %=======================
%\def\madate{Janvier 2026}             %=======================
\def\monSujet{Guide page web}           %=======================
\def\maClasse{SNT 2\textsuperscript{nde}} %=======================
% =========================================================

% =========================================================
% En-tête / pied de page
% =========================================================
\lhead{\footnotesize\textsf{Lycée Schuman Perret\\ \madate}}
\chead{\textsf{\textcolor{red}{\textbf{\textsc{\monSujet}}}}}
\rhead{\footnotesize\textsf{\maClasse}}

\lfoot{\scriptsize\textsf{\textsc{Stéphane Le Méteil}}}
\rfoot{\scriptsize\textsf{Page~\thepage{}~sur~\pageref{LastPage}}}

% =========================================================
% Environnements Exercices
% =========================================================
\newcounter{nexo}
\setcounter{nexo}{0}

\newcommand{\exo}{%
	\bigskip
	\stepcounter{nexo}
	\vskip 0.3cm
	\par\textsf{\textbf{\textcolor{blue}{\small EXERCICE~\arabic{nexo}}}}\quad
}

% =========================================================
% Styles modernes pour titres et sections
% =========================================================
\usepackage{titlesec}
\titleformat{\section}{\Large\bfseries\color{blue}}{\thesection}{1em}{}
\titleformat{\subsection}{\large\bfseries\color{cyan!70!black}}{\thesubsection}{0.8em}{}
\titleformat{\subsubsection}{\normalsize\bfseries\color{gray!70!black}}{\thesubsubsection}{0.5em}{}

% =========================================================
% Commandes utiles pour mise en page moderne
% =========================================================
\newcommand{\cadre}[1]{%
	\fbox{\parbox{\linewidth}{#1}}%
}

\newcommand{\important}[1]{%
	\textbf{\textcolor{red}{#1}}%
}

% =========================================================
% Utilitaires mathématiques
% =========================================================
\newcommand{\R}{\mathds{R}}
\newcommand{\N}{\mathds{N}}
\newcommand{\C}{\mathds{C}}
\def\ds{\displaystyle}

\usepackage{graphicx}

\begin{document}\doublespacing

Tout le code est entre \verb|<html>| et \verb|</html>|

La {\bf 1ère partie est entre \verb|<head| et \verb|</head>|}, elle concerne les \fbox{réglages}.

à l'intérieur, entre \verb|<style>| et \verb|/<style>| on trouve les réglages des couleurs, tailles, positions,...

Ce style est écrit au format CSS:~~  \verb|nom{ propriete : valeurs; }|

Certains noms sont prédéfinis : \verb|body, header, main, nav, menu, aside, footer, h2, img, a|

D'autres sont choisis par l'utilisateur : pas d'espace, pas d'accent, pas de caractères spéciaux.

$\rightarrow$ si c'est un objet unique sur la page on place un \# devant le nom. Exemple :~\verb|\#image1{....}|

$\rightarrow$ si l'objet est utilisé plusieurs fois on place un point devant. Exemple : ~\verb|.mesimages{....}|

\vskip 1cm

La {\bf seconde partie est entre \verb|<body> et </body>|} on trouve le contenu de la page, \fbox{l'histoire}.

chaque partie est entourée de couples de balises. Exmple : \verb|<header>.....</header>|

un style unique est un id. 

\hfil Exemple : \verb|<img src="snt.jpg" alt="le texte alternatif" id="image1">|

un style répété est une  classe. 

\hfil Exemple : \verb|<img src="snt.jpg" alt="le texte alternatif" class="mesimages">|

\vskip 1cm

{\large Pour ajouter du contenu dans la partie BODY}\vskip-0.1cm

\hskip 4cm là où on va\hskip 2cm le bouton\vskip-0.5cm
$\bullet$ un lien \verb|<a href="............"> ................</a>|

$\bullet$ un gros titre \verb|<h1> mon gros titre </h1>|, un titre plus petit \verb|<h2> mon titre  moyen</h2>|

$\bullet$ une image (voir ci-dessus)

$\bullet$ un paragraphe \verb|<p>| le paragraphe \verb|</p>|

$\bullet$ un saut de ligne \verb|<br>|

$\bullet$ une liste \vskip -1.5cm ~

\begin{verbatim}
<ul>
<li> 1er item</li>
<li> 2ème item</li>
<li> 3ème item</li>
</ul>
\end{verbatim}

\vskip -7cm

\hfill\includegraphics[width=10cm]{partiesweb.jpg}

\eject\singlespacing
\hskip 5cm\begin{minipage}{15cm}\small
\begin{verbatim}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de l'onglet</title>

<style>
body { background: url("test.jpg") ; background-size: cover; }

header, nav, main, section, aside, footer {
	padding: 1em;
	margin: 0.5em;
	border: 1px solid #ccc;
}

main { display: flex; background:#124578; color: blue;}

section {flex: 3; color:yellow;}

aside {	flex: 1; background:lightgreen;}

#maplage{width:200px; border-radius:20px;box-shadow:5px 5px 5px black;}
</style>
</head>

<body>
<header>
<h1>Mon super site de ma page WEB</h1>
</header>

<nav>
Menu de navigation
</nav>

<main>
<section>
<h2>Contenu principal</h2>
<p>Voici le contenu principal.</p>
<img src="plage.png" alt="une plage de rêve" id="maplage">
</section>
<aside>
Contenu secondaire
</aside>
</main>

<footer>
Pied de page
</footer>

</body>

</html>
\end{verbatim}
\end{minipage}

\end{document} 