SHARE
TWEET

Synthèse cours HTML/CSS

vincentperaud Feb 17th, 2020 (edited) 152 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Synthèse cours HTML/CSS</title>
  5.     <link href="https://fonts.googleapis.com/css?family=Handlee&display=swap" rel="stylesheet">
  6.     <meta charset="utf-8">
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .embedFooter {
  13.             display: none;
  14.         }
  15.         body {
  16.             background-color: #f1c40f;
  17.         }
  18.         #page {
  19.             max-width: 1024px;
  20.             margin: auto;
  21.             background-color: #ecf0f1;
  22.             background-color: white;
  23.             font-family: 'Handlee', cursive;
  24.             padding: 20px;
  25.         }
  26.         h1, h2, h3, h4 {
  27.             font-family: 'Handlee', cursive;
  28.         }
  29.         h1 {
  30.             color: #2c3e50;
  31.             margin-bottom: 20px;
  32.             padding-bottom: 5px;
  33.             border-bottom: 2px dashed #e74c3c;
  34.             text-align: center;
  35.         }
  36.         h2, h3, h4 {
  37.             margin-bottom: 10px;
  38.         }
  39.         h4 {
  40.             text-decoration: underline;
  41.         }
  42.         p {
  43.             margin-bottom: 10px;
  44.         }
  45.         .pastebin {
  46.             margin-bottom: 20px;
  47.         }
  48.         .info {
  49.             color: white;
  50.             padding: 20px;
  51.             background-color: #3498db;
  52.             margin-bottom: 20px;
  53.         }
  54.         hr {
  55.             margin: 40px;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.         <div id="page">
  61.         <h1>Synthèse cours HTML/CSS</h1>
  62.  
  63.         <h2>1. Le HTML</h2>
  64.  
  65.         <h3>Code de base d'une page HTML</h3>
  66.         <div class="pastebin">
  67.             <script src="https://pastebin.com/embed_js/rYYMFvYg"></script>
  68.         </div>
  69.  
  70.         <hr>
  71.  
  72.         <h3>Plusieurs façons d'utiliser les balises</h3>
  73.         <div class="pastebin">
  74.             <script src="https://pastebin.com/embed_js/ZdcKb5rP"></script>
  75.         </div>
  76.  
  77.         <div class="info">
  78.             Attention à ne pas oublier la balise fermante !
  79.         </div>
  80.  
  81.         <div class="info">
  82.             Certaines balises n'ont pas de balise fermante (img, br)
  83.         </div>
  84.  
  85.         <hr>
  86.  
  87.         <h3>Les balises HTML</h3>
  88.         <div class="pastebin">
  89.             <script src="https://pastebin.com/embed_js/9D1Gqf93"></script>
  90.         </div>
  91.  
  92.         <h2>2. Le CSS</h2>
  93.  
  94.         <h3>Différentes façons de donner du style à un élément</h3>
  95.         <div class="pastebin">
  96.             <script src="https://pastebin.com/embed_js/CZzHBEN4"></script>
  97.         </div>
  98.  
  99.         <hr>
  100.  
  101.         <h3>Les marges</h3>
  102.         <div class="pastebin">
  103.             <script src="https://pastebin.com/embed_js/d1njv0qk"></script>
  104.         </div>
  105.  
  106.         <hr>
  107.  
  108.         <h3>Les polices Google Font</h3>
  109.         <p>L'intégration d'une police <a href="https://fonts.google.com/" target="_blank">Google Font</a> se fait en deux étapes</p>
  110.         <h4>1. Déclaration de la police dans la balise <strong>head</strong> du code HTML</h4>
  111.         <div class="pastebin">
  112.             <script src="https://pastebin.com/embed_js/CU8VjHMS"></script>
  113.         </div>
  114.         <h4>2. Ajout de la propriété <strong>font-family</strong> là où on souhaite appliquer la police</h4>
  115.         <div class="pastebin">
  116.             <script src="https://pastebin.com/embed_js/sr8ykvMg"></script>
  117.         </div>
  118.  
  119.         <hr>
  120.  
  121.         <h3>Les floats</h3>
  122.         <p>Pour positionner des blocs HTML les uns à côtés de autres il faut utiliser la propriété CSS <strong>float</strong></p>
  123.         <div class="pastebin">
  124.             <script src="https://pastebin.com/embed_js/djdRMBkY"></script>
  125.         </div>
  126.         <div class="pastebin">
  127.             <script src="https://pastebin.com/embed_js/0bk3twMb"></script>
  128.         </div>
  129.         <div class="info">
  130.             Utilisez un <strong>div</strong> avec une classe <strong>clear</strong>
  131.             pour remettre le ou les blocs suivants les floats en dessous.
  132.         </div>
  133.  
  134.         <hr>
  135.  
  136.         <h3>Les erreurs fréquentes</h3>
  137.  
  138.         <div class="pastebin">
  139.             <script src="https://pastebin.com/embed_js/t9Fjqi3f"></script>
  140.         </div>
  141.         <div class="pastebin">
  142.             <script src="https://pastebin.com/embed_js/0uW65JQD"></script>
  143.         </div>
  144.  
  145.     </div>
  146. </body>
  147. </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