Mon titre de page

~~ODT~~ ====== Formation xhtml et css ====== ===== Fichier xhtml ===== ==== Une page minimale mais vide ====






  
    Mon titre de page

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

Voici mon premier paragraphe
ce texte est à la ligne dans mon premier paragraphe.

===== Un exemple complet =====



 

 
	
		Mon titre de page
		
		
 	
 
	
		
			Premier titre
			Premier sous titre
			Ceci est mon premier paragraphe

			Je suis à la ligne
			Je suis à la suite
			
			Ceci est mon deuxième paragraphe.
			texte en italique
			

			Ce bout de texte est ^{en exposant}
			

			Ce qui suit est _{en indice}
			Ce qui suit est barré
			
		
		
			
			Ce texte prend la couleur du paragraphe mais
			ce texte est rouge
			Couleur rgb(10,20,250)
			
			
				item 1
				item 2
				item 3
					
						Sous item
						Sous item
					
				
				item 4
			
			
			Ceci est une citation
			
			Lien vers Free
			Lien vers ma page actuelle
			
		
		
			
				item 1
				item 2
				item 3
					
						Sous item
						Sous item
					
				
				item 4


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 :





  
  
    Formation xhtml et css
  
	


	
		
			
			
			
			
			
			
			Ce texte flotte à droite des blocs précédents
			
			Ce texte est placé sous les blocs précédents
		
		
			
				Item1
				Item2
				Item3
			
		
		
			
			
			
			
			
			
		
		
			C'est le pied

**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;
}