HTML et CSS/feuille 3 (récapitulation)

Exercice 1

Soit le code HTML suivant :

<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="style.css"/>
<title>Page 1</title>
</head>
<body>
<h1>Le langage HTML </h1>
<p class="note">texte en travaux</p>
<div class="blabla"> <h2>Trop de blabla</h2> bla bla bla <strong> bli bli </strong> bla bla <br/>
2
tous avec moi...bla bla </div>
<h2>comptons</h2>
<ol> <li>nombres et positions
<ul> <li> un </li> <li> deux </li> <li> trois </li>
</ul> <ol>
<li>premier</li>
<li>second</li> </ol>
</li>
<li>etc.</li> </ol>
<h2>encore un</h2>
<p>...</p>
</body>
</html>

Question 1

Dessinez l'arbre de balises correspondant

Question 2

Écrivez les CSS pour obtenir le résultat suivant :

Exercice 2

<html> <head> <title>Page 1</title> </head> <body> <p>Un beau texte avec une <img src=”dessin.png”
alt=”une maison”/> image.</p>
<h1>Et du texte</h1> <p> pour faire du html il faut </p> <ul>
<li> Un e ́diteur de texte</li> <li> Apprendre le <em>Langage HTML</em>, et aussi les <em>CSS</em></li>
1
</ul>
<h1>Seconde	p a r t i e</h1>
<div class=”remarque”> <p> Ce paragraphe sera en rouge</p> <p> Ce paragraphe ne sera pas en rouge</p>
</div> </body>
</html>

Dessinez l'arbre
Donnez la feuille CSS pour obtenir les effets suivants :
1. Les titres sont écrits en rouge et en italique ;
2. le paragraphe qui dit " ce paragraphe est en rouge " sera en rouge ;
3. celui qui indique " ce paragraphe ne sera pas en rouge " n’est pas en rouge ;
4. le texte dans toutes les listes est en italique ;

Exercice 3

Quel est l'aspect de la page suivante, en tenant compte de la CSS :

<!DOCTYPE HTML>
<html> 
<head>
<meta charset="UTF-8"/>
<title>Demo CSS</title>
<style>
  ul:first-child {margin: 0em; padding 0em; background-color: yellow;
      text-align: left; border: solid red 1px; list-style-type: none; 
      list-style-image: none;}
  ul:first-child li {display: inline; background-color: #AAAAFF;
      margin: 0.25em; padding: 0.25em;}
  ul ul {list-style-type: roman;}
  p+ul {list-style-type: circle;}
  table { border-collapse: collapse;}
  th {border: 2pt solid;}
  td {border: 1pt solid;}
  .decore {background-color: red;}
  th.bleu {border: 4pt solid;}
  .decore th {border-top: none; border-left: none; border-right: none}
</style>
</head>
<body><ul><li>un</li><li>deux</li><li>trois</li></ul>
  <p>un exemple</p>
  <h1>Un texte</h1>
  <p> Un texte pour avoir une idée </p>
  <ul>
    <li>une liste</li>
    <li>et du texte 
      <ul>
	<li> avec une liste</li>
      </ul>
    </li>
  </ul>
  <table>
    <tr class="decore"><th>titre 1</th><th class="bleu">titre 2</th></tr>
    <tr><td>bla</td><td>bla</td></tr>
  </table>
</body> 
</html>

Exercice 4

Proposez des solutions pour réaliser la page suivante :

(on ne demande pas de faire exactement la même page, simplement de réfléchir à son organisation)