Syllene - Wiki

Outils pour utilisateurs

Outils du site

Piste:
public:asca:spip:xhtml-et-css

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
public:asca:spip:xhtml-et-css [2009/11/14 08:38]
pielo 		public:asca:spip:xhtml-et-css [2013/01/22 10:36] (Version actuelle)
pielo
Ligne 1: Ligne 1:
-====== Formation SPIP - xhtml et css ====== +~~ODT~~
-XHTML et CSS+
  
 +
 +====== Formation xhtml et css ======
  
 ===== Fichier xhtml ===== ===== Fichier xhtml =====
 +
 +
  
 ==== Une page minimale mais vide ==== ==== Une page minimale mais vide ====
Ligne 14: Ligne 17:
   <head>   <head>
     <title>Mon titre de page</title>     <title>Mon titre de page</title>
 +    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   </head>   </head>
  
Ligne 27: Ligne 31:
  
  
 +==== Une page avec un paragraphe et une feuille de style attachée ====
  
 <code html> <code html>
Ligne 40: Ligne 45:
 </head> </head>
  
-<body dir="ltr">+<body>
  
- <div id="page_accueil">+  <p>Voici mon premier paragraphe<br /> 
 +    ce texte est à la ligne dans mon premier paragraphe. 
 +  </p>
  
- </div> 
 </body> </body>
 </html> </html>
 </code> </code>
  
-===== Fichier CSS ===== 
  
-<code css> + 
-body { + 
- margin: 0;+ 
 + 
 +===== 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>
  
-.asca { +<code css> 
- font-variant:small-caps; +body { 
- font-style:italic; + background-color: black; 
- font-family:'Comic Sans MS','arial'; + color: white; 
- font-size:28px; + width: 1008px; 
- color:blue; + margin: 0 auto; 
- font-weight:bold; +}
- border:1px solid red; +
- text-align: center; +
- background:#32e125 url(claudia.jpg) no-repeat  top left; +
- height:100px; +
- padding:10px; +
- /*margin: 10px;*/ +
-}  +
- +
  
-#page_accueil { +div#navigation{ 
- width: 1004px; + width: 200px; 
- height: 758px; + padding:0 10px; 
- margin: 0 auto; + float: left;
- background-image: url(./page-accueil.jpg);+
 } }
  
 +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> </code>
public/asca/spip/xhtml-et-css.1258184298.txt.gz · Dernière modification: 2009/11/14 08:38 de pielo

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki