API tools faq
paste
Advertisement
vincentperaud

Synthèse cours HTML/CSS

vincentperaud
Feb 17th, 2020
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.26 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!