Syllene - Wiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
~~ODT~~


====== Formation xhtml et css ======

===== Fichier xhtml =====



==== Une page minimale mais vide ====

<code html>
<!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>
</code>

  * 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 ====

<code html>
<!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>
</code>






===== Un exemple complet =====
<code html>
<!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>
</code>

<code css>
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;
	}
</code>



===== Une mise en page avec des flottants =====

Voici le code commenté xhtml et css :

<code html>
<!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>

</code>


**style.css**

<code 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;
}
</code>
Syllene - Wiki

Outils pour utilisateurs

Outils du site

Outils de la page
