Old stuff/ecole_etude_fac_de_pau/licence_2/tic/document.tex~
(Deskargatu)
\documentclass[12pts, a4paper] {article}
\usepackage{graphicx}
\usepackage[T1]{fontenc}
\usepackage[latin1]{inputenc}
\usepackage[french]{babel}
\author{Sergio Muriel}
\date{Ann\'ee 2004/2005}
\title{Bases de HTML et css}
\begin{document}
\maketitle
\tableofcontents
\section{Introduction}
Ce document ne vise pas \`a pr\'esenter l'ensemble des possibilit\'es du HTML/XHTML et css, mais plut\^ot \`a pr\'esenter des bases, sur le foncionnement
de ces elements qui structurent les pages webs actuelles.
\subsection{Notion de balise}
Le format html est structur\'e en balises, de type <balises>, obligatoirement ouvertes, puis ferm\'ees. Par exemple, la balise Title, suivie du titre, se pr\'esente sous la forme: <title>Notre titre</title>.\\
On ne peut pas faire chevaucher des balises ouvrantes et fermantes comme on le veut, il faut respecter une certaine r\`egle. Ne jamais fermer une balise si une autre balise \`a l'interieur n'a pas \'et\'e ferm\'ee.\\
En Xhtml, les balises fermantes peuvent etre int\'egr\'ees \`a la balise ouvrante, en int\'egrant un "/" en fin de balise. Par exemple la balise <img> , que nous pouvons ouvrir/fermer avec un <img />.\\
\subsection{Page de base}
Une page vide contient un certains nombres de balises essentielles pour la compr\'ehension du navigateur. Elles sont au nombres de trois:
\begin{itemize}
\item{html}
\item{head}
\item{body}
\end{itemize}
Voir le tableau annexe \ref{pagebase}, pour leurs utilisation. Une page blanche html se pr\'esente donc sous cette forme:
\begin{verbatim}<html>
<head></head>
<body></body>
</html>
\end{verbatim}
\begin{table}[h]
\begin{center}
\begin{tabular}{|l|r|}
\hline
html & D\'ebut de toute page html \\
\hline{}
head & Ent\^ete pour renseigner le titre et les m\'etas donn\'ees\\
\hline
body & Corps du document, contenant tout ce que l'utilisateur voit \`a l'\'ecran\\\hline
\end{tabular}
\caption{\label{pagebase}Page de base}
\end{center}
\end{table}
\section{HTML}
Il existe de nombreuses sp\'ecifications sur le html. Ce document ne pr\'etend pas faire la liste de toutes les possibilit\'ees: on ne
vera donc que certaines balises "classiques" d\'efinies par la normes HTML 4.01 (voir ref \cite{html401}).\\
Pour utiliser une norme sp\'eciale, il faut avant tout la sp\'ecifier dans le doctype (voir ref \cite{doctype}).
\subsection{Structure du document}
\subsubsection{Division}
Une page internet est souvent divis\'ee en divisions, du type ent\^ete, menu, contenu de la page, pied de page, etc\ldots\\
Pour cela, on peut utiliser la balise <div>, afin de structurer le document clairement.
\begin{verbatim}<body>
<div>Mon entete</div>
<div>Mon menu</div>
<div>Mon pied de page</div>
</body>
\end{verbatim}
Au d\'epart cela peut para\^itre d\'ecevant comme pr\'esentation, mais avec les feuilles de style (Chap \ref{css}), vous pouvez facilement
arranger la mise en page g\'en\'erale.
\subsubsection{Paragraphe}
La balise \emph{<p>} est une des bases des pages HTML. En effet l'ensemble du contenu de la page se trouve g\'en\'eralement entre
ce genre de balise. Pour l'ensemble du texte d'un article ou autre par exemple, on utilisera : \\
\begin{verbatim}<p>Paragraphe 1<p>
<p>Paragraphe 2</p>
\end{verbatim}
\subsubsection{L'erreur des sites webs actuels (tables)}
Beaucoup de webmasters actuels structurent l'ensemble de leur site via des <tables> imbriqu\'ees (ref \cite{pbtable}).
Ce style de pr\'esentation est une relique de l'ancien style de page, lorsque les feuilles de style (Chap \ref{css}) n'\'existaient pas encore. Plusieurs raisons de ne pas utiliser
des tableaux imbriqu\'ees existent:
\begin{itemize}
\item{Le poids du code: En effet un code fait d' une multitude de balises est souvent beaucoup plus lourd qu'un code fait avec des feuilles de style, et ce
pour une pr\'esentation equivalente.}
\item{La lisibilit\'e du code: lorsque l'on affiche les sources d'une page web fait de tables, on se perd souvent dans les differents lignes et colonnes. }
\item{Le temps d'affichage: un code css (respectant les normes) s'affiche de mani\`ere bien plus rapide que des tables imbriqu\'ees. }
\item{La mise a jour des sites web est rendue bien plus difficile, vu la lisibilit\'e du code.}
\end{itemize}
\subsection{Tableaux}
Bien que les tableaux ne soient pas recommand\'es pour la mise en forme des documents, il sont souvent tr\`es utils pour trier des donn\'ees, de mani\`ere colonne/ligne. Un exemple classique de tableaux est celui des notes d'\'el\`eves d'un ecole, tri\'ees par mati\`eres (colonnes) et lignes (\'el\`eves).\\
Les tableaux en html sont structur\'es de mani\`ere tres pr\'ecise:
\begin{itemize}
\item{Debut de tableau : \emph{<table>}}
\item{Debut de ligne : \emph{<tr>}}
\item{Elements de la ligne : \emph{<td> contenu </td>}}
\item{Fin de ligne : \emph{</tr>}}
\item{Fin de tableau : \emph{</table>}}
\end{itemize}
\subsubsection{Tableau Simple}
Comme expliqu\'e ci-dessus, un tableau de 2 lignes et 3 colonnes se pr\'esente donc sous cette forme:
\begin{verbatim}<table>
<tr>
<td>Element 1</td> <td>Element 2> <td>Element 3</td>
</tr>
<tr>
<td>Element 1</td> <td>Element 2> <td>Element 3</td>
</tr>
</table>
\end{verbatim}
Ce qui nous donne un affichage identique au tableuau \ref{tsimple}.
\begin{table}[h]
\begin{center}
\begin{tabular}{|l|l|l|}
\hline
Element 1 & Element 2 & Element 3\\
\hline
Element 1 & Element 2 & Element 3\\
\hline
\end{tabular}
\end{center}
\caption{\label{tsimple}Tableau simple}
\end{table}
\subsubsection{Fusion de cellules}
Lors de la formation des tableaux, nous devont souvent regrouper plusieurs cellules li\'ees entre elles par leur th\`eme ou autres. Pour l'exemple pris pr\'ecedemment, on aurait pu cr\'eer une premi\`ere colonne regroupant les elev\`es par classe. Il existe pour cela des attributs pour la balise <td>.
\begin{itemize}
\item{rowspan : permet de regrouper un contenu sur 2 lignes.}
\item{colspan : permet de regrouper un contenu sur 2 colonnes. }
Ainsi vous pouvez imaginer toute forme de tableaux, jouant aussi avec les differents attributs possibles de la balise <table>.
\end{itemize}
\subsubsection{Attributs possibles pour les tables}
La liste des attributs pr\'esent\'es ici n'est pas compl\`ete. Il s'agit d'une liste des recommandations du W3C (ref \cite{wtrois}).
\begin{enumerate}
\item{\emph{summary} : Explique le contenu du tableau}
\item{\emph{width} : Sp\'ecifie la longueur du tableau. Peut se donner en pixels,ou en em\footnote{unit\'ee de mesure bas\'ee sur la longueur du "m" classique}.
\item{\emph{border}: Sert \`a sp\'ecifier la taille de bordure. 0 pour l'absence de bordures.}
\item{\emph{frame}: Possibilit\'ees void, above, below, hsides, vsides, lhs, rhs, box, border. (voir le site ref \cite{wtrois} pour plus d'informations)}
\item{\emph{rules}: Possibilit\'ees none, groups, rows, cols, all. (voir le site ref \cite{wtrois} pour plus d'informations)}
\item{\emph{cellspacing}: Taille en pixels, \emph{em} ou pourcentage entre chaque bordures.
(voir image \ref{cellspad})}
\item{\emph{cellspadding}: Taille en pixels, \emph{em} ou pourcentage entre chaque element et bordures des cases.
(voir image \ref{cellspad})}
}
\end{enumerate}
\begin{figure}[h]
\begin{center}
\includegraphics{images/cellspad.ps}
\end{center}
\caption{\label{cellspad}Attributs de la balise <table> (ref \cite{wtrois})}
\end{figure}
\subsection{Listes}
Nous somme souvent ammen\'e \`a enum\'erer une serie d' \'el\'ements de facons ordonn\'ees ou pas. Il existe en html des balises perm\'etant de faire cela:
\begin{itemize}
\item{<ol> Pour les listes ordonn\'ees.}
\item{<ul> Pour les listes non ordonn\'ees. }
\end{itemize}
Pour cr\'eer une liste ordonn\'ee, il suffit donc d' ouvrir la balise <ol>, suivie de chaque element de la liste entre <li></li>, puis refermer </ol>. Les listes ordonn\'ees
donnent \`a l'affichage une liste enum\'eree, avec l'indice de chaque \'el\'ement au d\'ebut.\\
Pour les listes non-ordonn\'ees, on proc\`ede de la m\^eme facon, mise \`a part que l'on utilse la balise <ul> au lieu de la balise <ol>. Cela donne comme r\'esultat une liste
dite "\`a puces".\\
On peut \'evidemment imbriquer plusieurs listes de facon transparente, par exemple:
\begin{verbatim}<ul>
<li>Element 1</li>
<li>Element 2</li>
<ol>
<li>numero 1</li>
<li>numero 2</li>
</ol>
</ul>
\end{verbatim}
\subsection{D\'efinitions}
Voila des balises trop peu utilis\'ees: <dd><dl> et <dt>. En effet, seules les personnes s'int\'eressant r\'eellement aux possibilit\'ees du html les connaissent. Elles sont souvent pas utilis\'ees ou mal dans la plupart des cas.
Elles permettent de d\'efinir une liste de d\'efinitions.\\
\begin{verbatim}<dl>
<dt>Mot 1</dt> <dd> Definition du mot 1</dd>
<dt>Mot 2</dt> <dd> Definition du mot 2</dd>
</dl>
\end{verbatim}
En pratique cela donne pour affichage, un l\'eger d\'ecalage de la d\'efinition par rapport au mot, mais cela est modifiable via les feuilles de style (Chap \ref{css}).
\section{CSS}
\label{css}
Une des raisons d'utiliser les feuilles de style est de notemment s\'eparer le contenu de la page de sa pr\'esentation externe. Ainsi
vous pouvez utiliser ce m\^eme contenu pour d'autres applications, ou pour imprimer de mani\`ere diff\'erente.
\subsection{Utilisation des css}
De facon g\'en\'erale, vous pouvez int\'egrer du code css \`a l'int\'erieur du code html, mais cela n'est pas conseill\'e. Il est plus raisonnable
d'int\'egrer les feuilles de style dans le header, ou mieux encore dans un fichier exterieur.\\\par
Vous pouvez donc, soit d\'eclarer <style type="text/css"> </style> dans le header, ou alors <link rel="stylesheet" type="text/css" href="style.css">.
Dans ce second cas, votre fichier style.css doit se trouver dans le m\^eme r\'ep\`ertoire que la page html. Vous pouvez cependant sp\'ecifier l'emplacement
exact.\par
En generale, pour attribuer un style a une balise, on nomme cette balise, et on sp\'ecifie les atttributs voulus entre accolades, par exemple:
\begin{verbatim}<html>
<head>
<title>Page test</title>
<style type="text/css">
div { border:1px solid #000; }
</style>
</head>
<body>
<div><p>Test de style</p></div>
</body>
</html>
\end{verbatim}
Cela va cr\'eer une bordure noire solide de 1 pixel, sur toute les <div> pr\'esentes dans le document html.\\
On peut cependant sp\'ecifier des attributs pour une balise sp\'ecifique de la page, en donnant \`a cette balise un nom de classe. Par example, <div class="premier">test</div>, aura pour style
ce qu l'on aura entr\'e dans la feuille pour div.premier:
\begin{verbatim}<html>
<head>
<title>Page test</title>
<style type="text/css">
div.premier { border:1px solid #000; }
</style>
</head>
<body>
<div class="premier"><p>Test de style</p></div>
<div><p>Autre division</p></div>
</body>
</html>
\end{verbatim}
Vous pouvez \'egalement regrouper des attributs pour plusieurs balises. On utilise alors les virgules, pour les s\'eparer:
\begin{verbatim}
H1,H2,DIV { color:red; }
\end{verbatim}
\subsection{Mise en page du texte}
Il existe de multiples mani\`eres de modifier la police et pr\'esentation. Vous pouvez notemment modifier la police utilis\'ee, sa taille,
sa couleur, le fond de celle-ci, la s\'eparation etre chaque lettre, la s\'eparation entre chaque mot, etc\ldots (voir tableau \ref{texte} annexe)
Attention cependant \`a ne pas surcharger la page de couleurs trop flash, nuisant \`a la lisibilit\'e du site.
\begin{table}[h]
\begin{center}
\begin{tabular}{|p{2cm}|p{4cm}|p{4cm}|}
\hline
Balise & Contenu & Explications\\
\hline
color & couleur predefinie (ref \cite{colors}) ou \#rgb\footnote{Codes hexadecimal codant pour les valeures du rouge, vert et bleu} & D\'efinie la couleur d'un texte\\
\hline
background-color & idem que pour color & D\'efinir la couleur de fond \`a utiliser.\\
\hline
font-size & taille en pixel, em, ou relative\footnote{Il s'agit de la taille relative \`a la police en cours d'utilisation: -2 -1 +1 +2 \ldots} & Fixe la taille de la police de caract\`eres.\\
\hline
font-family & Une famille de Police & Fixe la police \`a utiliser.\\
\hline
font-weight & normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ou 900& Sp\'ecifie la grosseur de la police\\
\hline
font-style & normal, italic ou oblique & Fixe le style de la police\\
\hline
font-variant & normal ou small-caps & small-caps fixe les lettres non majuscules comme de petites majuscules\\
\hline
text-decoration & none, underline, overline, line-trough, blink ou inherit & Sp\'ecifie une decoration \`a un ensemble de texte.\\
\hline
letter-spacing & Taille en pixel ou em & Fixe la taille entre chaque lettre \\
\hline
word-spacing & Taille en pixel ou en & Fixe la taille entre chaque mot\\
\hline
line-height & Taille en pixel ou em & Fixe la taille entre deux lignes\\
\hline
text-transform & capitalize, uppercase, lowercase ou none & Transforme le texte\\
\hline
text-align & left, right, center, justify & Aligne le texte\\
\hline
\end{tabular}
\end{center}
\caption{\label{texte}Modification de texte avec les feuilles de style (Source \cite{css1})}
\end{table}
\subsection{Mise en page des divisions}
De la m\^eme facon, vous pouvez tr\`es bien utiliser les feuilles de style pour modifier la pr\'esentation de votre document
html. Une m\'ethode fr\'equemment utilis\'ee consiste \`a coller certaines divisions \`a gauche ou \`a droite de mani\`ere \`a se
retrouver avec plusieurs divisions sur un m\^eme plan horizontal:
\begin{verbatim}
Texte avec float:left | Autre texte
\end{verbatim}
Il existe de multiples autres possibilit\'ees, permettant de donner la taille des bordures, sa couleur, son style, ainsi que la taille
de la division, sa longueur, sa hauteur (voir tableau \ref{div} annexe).
\begin{table}[H]
\begin{center}
\begin{tabular}{|p{2cm}|p{4cm}|p{4cm}|}
\hline
Balise & Contenu & Explications\\
\hline
border-top-width & thin, medium, thick, ou taille & Donne la taille de la bordure du haut\\
\hline
border-right-width & thin, medium, thick, ou taille & Donne la taille de la bordure de droite\\
\hline
border-bottom-width & thin, medium, thick, ou taille & Donne la taille de la bordure du bas\\
\hline
border-left-width & thin, medium, thick, ou taille & Donne la taille de la bordure de gauche\\
\hline
border-width & thin, medium, thick, ou taille & M\'elance de border-top-width, border-right-width, border-bottom-width et border-left-width. nombre d'attributs variable (voir section \ref{attributs})\\
\hline
border-color & couleur \#rgb ou pr\'ed\'efinie & Couleur de la bordure\\
\hline
border-style & none, dotted, dashed, solid, double, groove, ridge, inset ou outset & Style de la bordure\\
\hline
border-top & border-top-width suivie du border-style suivie de la couleur (example: thick solid red) & Sp\'ecifie plusieurs attributs de la bordure en une fois\\
\hline
border-right & border-right-width suivie du border-style suivie de la couleur (example: thick solid red) & Sp\'ecifie plusieurs attributs de la bordure en une fois\\
\hline
border-bottom & border-bottom-width suivie du border-style suivie de la couleur (example: thick solid red) & Sp\'ecifie plusieurs attributs de la bordure en une fois\\
\hline
border-left & border-left-width suivie du border-style suivie de la couleur (example: thick solid red) & Sp\'ecifie plusieurs attributs de la bordure en une fois\\
\hline
border & border-width suivie du border-style et de la couleur & Sp\'ecifie plusieurs attribts en une fois\\
\hline
width & taille en pixel, em ou pourcentage & Longueur de la division\\
\hline
height & taille en pixel, em ou pourcentage & Largeur de la division\\
\hline
float & left, right ou none & La division sera coll\'ee selon l'attribut que vous lui donnait.\\
\hline
clear & none, left , right, both & Annule l'effet du float\\
\hline
\end{tabular}
\end{center}
\caption{\label{div}Modification des div avec les feuilles de style (Source \cite{css1})}
\end{table}
\subsection{Listes}
Les listes ordonn\'ees et non-ordonn\'ees peuvent elles aussi \^etre modifi\'ees via des feuilles de style. Parmis les possibilit\'ees il y a le choix du type d'affichage devant chaque \'el\'ement de la liste.\\
\begin{itemize}
\item{list-style-type: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none\\
Sp\'ecifie le type d'affichage devant chaque \'el\'ement de la liste}
\item{list-style-image: url , ou none\\
Appliqu\'e aux listes lorsque l' attrbut display \`a pour valeur "list-item". }
\item{list-style-position: inside ou outside\\
De m\^eme, il s'agit de la place ou le list-style-type est plac\'e par rapport \`a la bordure de la liste.}
\item{list-style: list-style-type suivie de sa position et/ou de l'url de l'image
Combin\'e de tout les pr\'ec\'edents }
\end{itemize}
\subsection{Margin et Padding}
Les diff\'erents \'el\'ements de la page html peuvent \^etre s\'epar\`es entre eux via les attributs margin et padding. Voir le tableau \ref{margin}.\\
La principale diff\'erence entre ces deux balises se situe sur la position vis-\`a-vis de la bordure. En effet margin nous donne la taille entre la page et la bordure, tandis que
padding nous donne la taille entre cette m\^eme bordre et le texte \`a l'interieur.
\begin{figure}
\begin{center}
\includegraphics{images/margin.ps}
\end{center}
\caption{\label{margin}Margin et Padding}
\end{figure}
\subsection{Pseudo \'el\'ements et s\'el\'ecteurs}
Bien que fort suffisants, vous ne pouvez pas tout faire avec les balises classiques. Vous ne pouvez pas par exemple
modifier la taille d'une premi\`ere lettre de paragraphe, ou des premi\`eres lignes.
Les pseudos \'el\'ements et s\'electeurs les plus connus sont \emph{hover}, \emph{first-letter} et \emph{first-line}. Comme leurs
noms l'indique, ils servent \`a modifier une partie de la balise et/ou certains \'el\'ements dans la balise.
\begin{itemize}
\item{\emph{first-letter}: Modifie la pr\'esentation de la premi\`ere lettre de cette balise. \\
Example: \begin{verbatim}p:first-letter { font-size: 200%; }\end{verbatim}
}
\item{\emph{first-line}: Modifie la pr\'sentation de la premi\`ere ligne de cette balise. \\
Example: \begin{verbatim}div:first-line { color: grey; }\end{verbatim}
}
\item{\emph{hover}: Modifie la pr\'sentation lorsque la souris passe sur cette balise \\
Example: \begin{verbatim}a:hover { background-color: black; }\end{verbatim}
}
\end{itemize}
\subsection{Attributs}
\label{attributs}
Certains attributs ont un nombre d'arguments variables, comme margin et padding.\\
La balise r\'eagit alors en fonction du nombre d'arguments qu'elle a recue:
\begin{itemize}
\item{Avec un \'el\'ement: tout les attributs de la balise prennent cette valeur.}
\item{Avec deux \'el\'ements: le premier attribut est utilis\'e pour le haut et le bas, le second pour la gauche et la droite. }
\item{Avec trois \'el\'ements: le premier attribut donne le haut, le second la droite, le troisieme le bas. La gauche reprends le second argument. }
\item{Avec quates \'el\'ements: les diff\'erents arguments sont dans l'ordre: haut, droite, bas puis gauche. }
\end{itemize}
\bibliography{biblio}
\bibliographystyle{plain}
% Forcer a creer une nvelle page a partir d ici ?
\end{document}
Tfe