Outils pour utilisateurs

Outils du site


public:asca:spip:xhtml-et-css

Exporter la page au format Open Document

Formation xhtml et css

Fichier xhtml

Une page minimale mais vide

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
  <head>
    <title>Mon titre de page</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
 
  <body>
  </body>
</html>
  • La partie DOCTYPE sert à déclarer la version de html utilisée dans la page pour que tous les butineurs l'interprètent correctement.
  • La balise <title> définit le titre de la page (celui qui apparaît en titre de la fenêtre du butineur et en titre de résultat de recherche d'un moteur de recherche).
  • La partie <head> est l'entête de la page.
  • La partie <body> est le corps de la page. (Pour l'instant, il est vide :) ).

Une page avec un paragraphe et une feuille de style attachée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
 
 <title>Mon titre de page</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="all" />
 
</head>
 
<body>
 
  <p>Voici mon premier paragraphe<br />
    ce texte est à la ligne dans mon premier paragraphe.
  </p>
 
</body>
</html>

Un exemple complet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
	<head>
		<title>Mon titre de page</title>
		<link rel="stylesheet" href="style.css" type="text/css" media="all" />
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 	</head>
 
	<body>
		<div id="navigation">
			<h1>Premier titre</h1>
			<h2>Premier sous titre</h2>
			<p>Ceci est mon premier paragraphe<br />
			Je suis à la ligne
			Je suis à la suite
			</p>
			<p>Ceci est mon deuxième paragraphe.
			<i>texte en italique</i>
			<br />
			Ce bout de texte est <sup>en exposant</sup>
			<br />
			Ce qui suit est <sub>en indice</sub>
			Ce qui suit est <del>barré</del>
			</p>
		</div>
		<div id="contenu">
			<p style="color: #8B8A43;">
			Ce texte prend la couleur du paragraphe mais
			<span style="color: red;">ce texte est rouge</span>
			<span style="color: rgb(10,20,250);">Couleur rgb(10,20,250)</span>
			</p>
			<ul>
				<li>item 1</li>
				<li>item 2</li>
				<li>item 3
					<ul>
						<li>Sous item</li>
						<li>Sous item</li>
					</ul>
				</li>
				<li>item 4</li>
			</ul>
			<cite>
			Ceci est une citation
			</cite>
			<a href="http://www.free.fr" target="_blank" >Lien vers Free</a>
			<a href="../index.html">Lien vers ma page actuelle</a>
			<img src="./tux.png" alt="Manchot tux" />
		</div>
		<div id="actualite">
			<ul>
				<li>item 1</li>
				<li>item 2</li>
				<li>item 3
					<ul>
						<li>Sous item</li>
						<li>Sous item</li>
					</ul>
				</li>
				<li>item 4</li>
			</ul>
		</div>
	</body>
</html>
body {
	background-color: black;
	color: white;
	width: 1008px;
	margin: 0 auto;
}
 
div#navigation{
	width: 200px;
	padding:0 10px;
	float: left;
}
 
div#contenu{
	width: 548px;
	padding:0 10px;
	float: left;
}
div#actualite {
	width: 200px;
	padding:0 10px;
	float:right;
}
 
p {
	border: 2px dotted blue;
	padding: 5px 20px;
	margin: 0 10px;
}
 
h1, h2 {
	font-family: "Verdana","arial", sans-serif;
	}
 
h1 {
	font-size: 30px;
	font-variant: small-caps;
}
 
h2 {
	font-size: 25px;
	}

Une mise en page avec des flottants

Voici le code commenté xhtml et css :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>
    Formation xhtml et css
  </title>
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
</head>
<body>
	<div id="conteneur">
		<div id="bandeau">
			<div class="blockbandeau">
			</div>
			<div class="blockbandeau">
			</div>
			<div class="blockbandeau">
			</div>
			<p>Ce texte flotte à droite des blocs précédents</p>
			<hr />
			<p>Ce texte est placé sous les blocs précédents</p>
		</div>
		<div id="menu">
			<ul>
				<li>Item1</li>
				<li>Item2</li>
				<li>Item3</li>
			</ul>
		</div>
		<div id="contenu">
			<div class="blockcontenu">
			</div>
			<div class="blockcontenu">
			</div>
			<div class="blockcontenu">
			</div>
		</div>
		<div id="pied">
			<p>C'est le pied</p>
		</div>
	</div>
</body>
</html>

style.css

body {
	font-family: sans-serif;
	font-size: 80%;
	background-color: grey;
}
 
#conteneur {
	width: 1000px;
	margin: 0 auto;
	/*
	Ce bloc n'a pas la propriété float: left -> Il est dans le flux.
	La propriété suivante fait en sorte que la hauteur de ce block s'adapte aux flottants qui le constituent
	Sans cette propriété, ce bloc aurait une hauteur nulle.
	*/
	overflow: hidden; 
}
 
/*
	Tous les blocs qui suivent ont la propriété float: left
	Si bien que leur hauteur s'adapte automatiquement aux floats qu'ils contiennent
*/
 
#bandeau {
	float: left;
	width: 100%;
	background-color: yellow;
}
 
div.blockbandeau {
	float: left;
	width: 25%;
	height: 100px;
	background-color: blue;
}
 
#menu {
	float: left;
	width: 100%;
	background-color: fuchsia;
}
 
#contenu {
	float: left;
	width: 100%;
	background-color: red;
}
 
div.blockcontenu {
	float: left;
	width: 300px;
	margin-left: 10px;
	height: 150px;
	background-color: maroon;
}
 
#pied {
	float: left;
	width: 100%;
	background-color: navy;
}
 
/*
	La définition suivante pour la balise hr sert à supprimer le flottement du contenu qui suit directement cette balise
*/
 
hr {
	clear: both;
	margin: 0;
	padding: 0;
	height: 0;
	visibility: hidden;
}
public/asca/spip/xhtml-et-css.txt · Dernière modification: 2013/01/22 10:36 par pielo