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;
}
Upplagd av kl. Inga kommentarer:

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>
Upplagd av kl. Inga kommentarer:

Tabell bgfärg

http://www.web-source.net/html_colored_tables.htm
Upplagd av kl. Inga kommentarer:

Färger

http://www.computerhope.com/htmcolor.htm
Upplagd av kl. Inga kommentarer:

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>
Upplagd av kl. Inga kommentarer:

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>
Upplagd av kl. Inga kommentarer:

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;
}
Upplagd av kl. Inga kommentarer:

Carnet corr html

<?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="style.css" />
  <title>Mon carnet d'adresses</title>
 </head>
 <body>
 
  <div id="titre">
   <div id="surTitre">
    Carnet d'adresses
   </div>
   <div id="sousTitre">
    Mes contacts, par ordre alphabétique
   </div>
  </div>
 
  <div id="tableau">
 
   <div id="menuTableau">
    Accéder aux noms commençant par: <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> ...
   </div>
 
   <table>
    <tr>
     <th><a name="A" id="A" />Nom</th>
     <th>Prénom</th>
     <th>Téléphone</th>
     <th>Photo</th>
    </tr>
   
    <tr>
     <td class="nom">Alto</td>
     <td class="prenom">Jean</td>
     <td class="telephone">02.31.XX.XX.XX</td>
     <td class="cellulePhoto"><img class="photo" src="photo-alto.png" alt="La photo de J. Alto" /></td>
    </tr>
   
    <tr>
     <td class="nom">Arpège</td>
     <td class="prenom">Jacques</td>
     <td class="telephone">02.31.XX.XX.XX</td>
     <td class="cellulePhoto"><img class="photo" src="photo-arpege.png" alt="La photo de J. Arpège" /></td>
    </tr>
   
    <tr>
     <th><a name="B" id="B" />Nom</th>
     <th>Prénom</th>
     <th>Téléphone</th>
     <th>Photo</th>
    </tr>
   
    <tr>
     <td class="nom">Basse</td>
     <td class="prenom">Pierre</td>
     <td class="telephone">02.31.XX.XX.XX</td>
     <td class="cellulePhoto"><img class="photo" src="photo-basse.png" alt="La photo de P. Basse" /></td>
    </tr>
   
    <tr class="ami">
     <td class="nom">Bémol</td>
     <td class="prenom">Albert</td>
     <td class="telephone">02.31.XX.XX.XX</td>
     <td class="cellulePhoto"><img class="photo" src="photo-bemol.png" alt="La photo de A. Bémol" /></td>
    </tr>
   
    <tr>
     <th><a name="C" id="C" />Nom</th>
     <th>Prénom</th>
     <th>Téléphone</th>
     <th>Photo</th>
    </tr>
   
    <tr>
     <td class="nom">Chorus</td>
     <td class="prenom">Robert</td>
     <td class="telephone">02.31.XX.XX.XX</td>
     <td class="cellulePhoto"><img class="photo" src="photo-chorus.png" alt="La photo de R. Chorus" /></td>
    </tr>
   </table>
 
  </div>

 </body>
</html>
Upplagd av kl. Inga kommentarer:

Carnet css MIN

body {background-color:#339966; font-family:sans-serif;}
th, td {border:1px solid black; width:20%}
th {background-color:grey; text-color:white}
Upplagd av kl. Inga kommentarer:

Carnet html MIN

<?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> Carnet d'adresses </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>
    <th><a name="NomA" />Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo</th>
   </tr>
  
   <tr>
    <td>Alto</td>
    <td>Jean</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="C:\Users\21008059\Downloads\photo-alto.png" alt="Alto" /></td>
   </tr>

   <tr>
    <td>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>
    <th><a name="NomB" />Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo></th>
   </tr>
  
   <tr>
    <td>Basse</td>
    <td>Pierre</td>
    <td>02.31.XX.XX.XX</td>
    <td><img src="C:\Users\21008059\Downloads\photo-basse.png" alt="Basse" /></td>
   </tr>
  
   <tr>
    <td>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>
    <th><a name="NomC"/>Nom</th>
    <th>Prénom</th>
    <th>Téléphone</th>
    <th>Photo</th>
   </tr>
  
   <tr>
    <td>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>
Upplagd av kl. Inga kommentarer:
Prenumerera på: Kommentarer (Atom)