lördag 1 januari 2011

css med ândringar

body
{
background-color:#7FC87F;
 font-family:sans-serif;
}
th, td
{
border:1px solid black;
 width:20%
}
th
{
background-color:grey;
}
tr.bemol
{
background-color:yellow;
}
td.nom
{
font-variant:small-caps;
font-size: 16pt;
}
tr.header
{
color:#FFFFFF;
}
table
{
width: 60%;
margin-left:20%;
margin-top: 20px;
}

Min igen med ändringar

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <link rel="stylesheet" type="text/css" href="carnet.css" />
  <title> Mon carnet d'adresses Ebba </title>
 </head>
 <body>
  <h1>CARNET D'ADRESSES</h1>
   <h2>Mes contacts, par ordre alphabétic</h2>
 
   <div> Accéder aux noms commençant par :
     <a href="#NomA">A</a>
     <a href="#NomB">B</a>
     <a href="#NomC">C</a>
   </div>
 
  <table>
 
   <tr class="header">
    <th><a name="NomA" />Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo</th>
   </tr>
  
   
   <tr>
    <td class="nom">Alto</td>
    <td>Jean</td>
    <td>02.31.XX.XX.XX</td>
    <td><img class="photo" src="photo-alto.png" alt="La photo de J. Alto" /></td>
   </tr>
   <tr>
    <td class="nom">Arpège</td>
    <td>Jacques</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="C:\Users\21008059\Downloads\photo-arpege.png" alt="Arpege" /></td>
   </tr>
  
   <tr class="header">
    <th><a name="NomB" />Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo</th>
   </tr>
  
  
   <tr>
    <td class="nom">Basse</td>
    <td>Pierre</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="D:\Mes documents\Yerri\Ebba\lea-m1-examen-2010-correction\photo-basse.png" alt="Basse" /></td>
   </tr>
  
   <tr class="bemol">
    <td class="nom">Bémol</td>
    <td>Albert</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="C:\Users\21008059\Downloads\photo-bemol.png" alt="Bemol" /></td>
   </tr>
   <tr class="header">
    <th><a name="NomC"/>Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo</th>
   </tr>
  
  
   <tr>
    <td class="nom">Choros</td>
    <td>Robert</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="C:\Users\21008059\Downloads\photo-chorus.png" alt="Choros" /></td>
   </tr>
  </table>
 </body>
</html>

Tabell bgfärg

http://www.web-source.net/html_colored_tables.htm

Färger

http://www.computerhope.com/htmcolor.htm

tabeller

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Tableaux</title>
 </head>
 <body>

  <table>
 
   <tr>
    <th>&nbsp;</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
   </tr>
  
   <tr>
    <th>1</th>
    <td>A1</td>
    <td>B1</td>
    <td>C1</td>
    <td>D1</td>
   </tr>
  
   <tr>
    <th>2</th>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
    <td>D2</td>
   </tr> 
  
  </table>

 </body>
</html>

listor

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Listes</title>
 </head>
 <body>

  <p>Une liste numérotée:</p>
 
  <ol>
   <li>un item;</li>
   <li>un autre item</li>
  </ol>
 
 
  <p>Une liste à puces, non numérotée:</p>
 
  <ul>
   <li>un item;</li>
   <li>un autre item</li>
  </ul>
 
 
  <p>Une liste de définitions:</p>
 
  <dl>
   <dt>Terme 1</dt>
   <dd>Définition du terme 1</dd>
  
   <dt>Terme 2</dt>
   <dd>Définition du terme 2</dd>
  </dl>
 </body>
</html>

carnet css corr

body
{
 background-color: #7FC87F;
 font-family:sans-serif;
}

div#titre
{
 margin-top:32px;
 margin-bottom:50px;
 width:50%;
 margin-left:25%;
 border-top-style:dashed;
 border-bottom-style:dashed;
 border-top-width:2px;
 border-bottom-width:2px;
 padding:20px;
}

div#surTitre
{
 text-align:center;
 font-size:24pt;
 font-weight:bold;
 font-variant:small-caps;
 padding-bottom:10px;
 color:#009999;
}

div#sousTitre
{
 text-align:center;
 font-size:16pt;
 font-weight:bold;
 font-style:italic;
}
div#menuTableau
{
 text-align:center;
}
div#tableau table
{
 width: 60%;
 margin-left:20%;
 margin-top: 20px;
}
div#tableau td, div#tableau th
{
 padding: 10px;
 border-style:solid;
 border-width:1px;
}

div#tableau th
{
 background-color:#4F4F4F;
 color:#FFFFFF;
 border-style:none;
}
div#tableau tr.ami
{
 background-color:#FFFF00;
}
div#tableau td.cellulePhoto
{
 text-align:center;
}
div#tableau td.nom
{
 font-variant:small-caps;
 font-size: 16pt;
}

img.photo
{
 width:70px;
}