\documentclass[12pt,xcolor=table]{classPres}
\usepackage{booktabs}

\author{}
\title{WEB: Séance 1 \\ Les langages du WEB}
\date{Septembre 2020}

\begin{document}

\frame{\titlepage}

\begin{frame}{Langages du WEB}
    \pause
    \begin{columns}
        \begin{column}{0.3\textwidth}
            \begin{center}
                \includegraphics[scale=0.4]{./fig/CSS3_logo}
                \uncover<3>{Décoration}
            \end{center}
        \end{column}
        \begin{column}{0.3\textwidth}
            \begin{center}
                \includegraphics[scale=0.9]{./fig/HTML5_logo}
                \uncover<3>{Contenu}
            \end{center}
        \end{column}
        \begin{column}{0.3\textwidth}
            \begin{center}
                \textbf{Javascript}
                \includegraphics[scale=0.3]{./fig/JavaScript_logo}
                \uncover<3>{Interaction}
            \end{center}
        \end{column}
    \end{columns}
\end{frame}

\begin{frame}{Aller sur le web}
    \vfill
    \begin{center}
        \colorbox{highlightbg}{
            Le navigateur web
            }
    \end{center}
    \vfill
    Exemples de navigateurs:
    \begin{itemize}
        \item 
        \item 
        \item 
        \item 
    \end{itemize}
    \vfill
\end{frame}

\begin{frame}{Code source d'une page}
    \vfill
    \begin{center}
        \colorbox{highlightbg}{
            Développement Web > Code source de la page
            }
    \end{center}
    \vfill
    \begin{itemize}
        \item Lire le code source de \colorbox{highlightbg}{\url{fr.wikipedia.org}}
            \begin{itemize}
                \item Nombre total de lignes?
                \item Contenu de la ligne 3?
            \end{itemize}
        \item Lire le code source de \colorbox{highlightbg}{\url{http://verreccj.free.fr/}}
            \begin{itemize}
                \item Nombre total de lignes?
                \item Contenu de la ligne 37?
            \end{itemize}
    \end{itemize}
    \vfill
    \pause
    \begin{center}
        Pas de modifictions possibles
    \end{center}
\end{frame}

\begin{frame}{Outils du développeur}
    \framesubtitle{Défacer google}
    
    \vfill
    \begin{center}
        \colorbox{highlightbg}{
        Développement Web > Inspecteur
        }
    \end{center}
    \vfill

    Modifier la page d'accueil de google.

    \vfill
    \pause
    \begin{center}
        Pas d'enregistrement possible 
    \end{center}
\end{frame}

\begin{frame}{Personnalisation de Zozor}
    \begin{itemize}
        \item Copier coller le répertoire \texttt{01\_WEB > Zozor} dans votre dossier personnel.
        \item \textbf{Ouvrir avec} un navigateur index.html
        \item \textbf{Ouvrir avec} un éditeur de texte (Notepad++) index.html
        \item \textbf{Modifier} dans l'éditeur, \textbf{sauver}, \textbf{recharger} la page sur le navigateur
    \end{itemize}
\end{frame}

\end{document}