SHARE
TWEET

Exercice TP8

vincentperaud Feb 17th, 2020 116 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Ma première page HTML</title>
  5.         <meta charset="utf8">
  6.         <style type="text/css">
  7.             body {
  8.                 font-family: Arial;
  9.             }
  10.             #aide {
  11.                 background-color: #E6DFDE;
  12.                 padding: 20px;
  13.             }
  14.             h1 {
  15.                 width: 100%;
  16.                 padding: 5px;
  17.                 background-color: #F1BBAF;
  18.                 text-align: center;
  19.             }
  20.             .titreVert {
  21.                 color: green;
  22.             }
  23.             table {
  24.                 border-collapse: collapse;
  25.             }
  26.             td, th {
  27.                 border: 1px solid black;
  28.                 padding: 10px;
  29.             }
  30.             th {
  31.                 background-color: #F1BBAF;
  32.             }
  33.             h2 {
  34.                 margin-top: 70px;
  35.             }
  36.             li {
  37.                 margin-bottom: 20px;
  38.             }
  39.             img {
  40.                 width: 50px;
  41.             }
  42.         </style>
  43.     </head>
  44.     <body>
  45.  
  46.         <div id="aide">
  47.             Avant de commencer, voici quelques indications :
  48.             <ul>
  49.                 <li>La police de toute la page est Arial</li>
  50.                 <li>La couleur d'arrière plan du titre principal et des en-tête du tableau est #F1BBAF</li>
  51.                 <li>La couleur d'arrière plan de de ce bloc est #E6DFDE</li>
  52.                 <li>La largeur de l'image est de 50 pixels</li>
  53.                 <li>Chaque élément li a une marge extérieure inférieure de 20px</li>
  54.                 <li>Les titres h2 ont une marge inférieure de 70px</li>
  55.                 <li>L'utilisation de CSS dans les balises HTML est interdites, je veux que vous utilisiez des sélecteurs, des id et des classes (au moins un de chaque)</li>
  56.             </ul>
  57.         </div>
  58.  
  59.         <h1>TP 7 - Le langage HTML</h1>
  60.  
  61.         <img src="https://www.scribness.fr/wp-content/uploads/sites/41/2014/08/1456851427_Html.png" alt="HTML">
  62.  
  63.         <h2 class="titreVert">De quoi est composée une page Web ?</h2>
  64.  
  65.         <ul>
  66.             <li>HTML : le fond</li>
  67.             <li>CSS : la forme</li>
  68.         </ul>
  69.  
  70.         <h2>HTML : Le fond</h2>
  71.  
  72.         <ul>
  73.             <li>Langage créé en 1991</li>
  74.             <li>HyperText Markup Language <strong>(Langage de balisage hypertexte)</strong></li>
  75.             <li>Sert à placer des éléments sur une page web (images, titres, paragraphes, ...)</li>
  76.         </ul>
  77.  
  78.         <h2 class="titreVert">CSS : La forme</h2>
  79.  
  80.         <ol>
  81.             <li>Langage créé en 1996 (5 ans après le HTML)</li>
  82.             <li>Cascading StyleSheets (Feuilles de style en cascade)</li>
  83.             <li>Permet de définir le style des éléments HTML placés sur la page (couleur de texte, arrière plan, dimensions, police)</li>
  84.         </ol>
  85.  
  86.         <h2>Quelques balises HTML</h2>
  87.  
  88.         <table>
  89.             <tr>
  90.                 <th>Balise</th>
  91.                 <th>Description</th>
  92.             </tr>
  93.             <tr>
  94.                 <td>p</td>
  95.                 <td>Paragraphe</td>
  96.             </tr>
  97.             <tr>
  98.                 <td>a</td>
  99.                 <td>Lien</td>
  100.             </tr>
  101.             <tr>
  102.                 <td>img</td>
  103.                 <td>Image</td>
  104.             </tr>
  105.             <tr>
  106.                 <td>br</td>
  107.                 <td>Saut de ligne</td>
  108.             </tr>
  109.             <tr>
  110.                 <td>ul, li</td>
  111.                 <td>Liste à puce</td>
  112.             </tr>
  113.             <tr>
  114.                 <td>ol, li</td>
  115.                 <td>Liste ordonnée</td>
  116.             </tr>
  117.             <tr>
  118.                 <td>strong</td>
  119.                 <td>gras</td>
  120.             </tr>
  121.         </table>
  122.  
  123.     </body>
  124. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top