Outils pour utilisateurs

Outils du site


public:asca:spip:xhtml-et-css

Ceci est une ancienne révision du document !


Formation SPIP - 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>
			<b>texte en gras</b>
			<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>
			<code>
			Ce texte est affiché tel quel
			avec une police monotype
 
		<cite>
		Ceci est une citation
		</cite>
		<a href="http://www.syllene.net" target="_blank" >Lien vers Syllene</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> </code>

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;
	}
public/asca/spip/xhtml-et-css.1258196547.txt.gz · Dernière modification: 2009/11/14 12:02 de pielo