API tools faq
paste
Advertisement
Patrikrizek

lesson-4-index

Patrikrizek
Jun 23rd, 2022
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Float, Margin, Padding, etc.</title>
  5.     <!-- Internal CSS -->
  6.     <style>
  7.         /* Globals */
  8.         body {
  9.             background-color: burlywood;
  10.         }
  11.  
  12.         table, th, td {
  13.             /* Margin is the space around the table. */
  14.             /* Center the table horizontally. */
  15.             margin-left: auto;
  16.             margin-right: auto;
  17.  
  18.             /* Cell padding is the space between the cell edges and the cell content. Default padding is set to 0.*/
  19.             padding: 20px;
  20.  
  21.             /* Cell spacing is the space between each cell. Default space is set to 2px. */
  22.             border-spacing: 30px;
  23.  
  24.             border: 3px solid black;
  25.             border-radius: 10px;
  26.         }
  27.    
  28.         /* Classes */
  29.         .myDiv {
  30.             background-color: lightgray;
  31.             height: 300px;
  32.         }
  33.  
  34.         .fl-left {
  35.             float: left;
  36.         }
  37.  
  38.         .m-p-b {
  39.             background-color:goldenrod;
  40.             font-size: 20px;
  41.             margin: 100px;
  42.             padding: 50px;
  43.             border: 5px solid black;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <!-- Float -->
  49.     <!-- Used for positioning and formatting content. -->
  50.     <!-- Let an image float left to the text in a container. -->
  51.     <!-- Can by used to wrap text around images. -->
  52.     <div class="myDiv">
  53.         <img src="/lesson-4/elephant.jpeg" alt="elephant" height="300px" class="fl-left">
  54.         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus cupiditate optio quasi deleniti quod. Nam commodi totam repudiandae sequi blanditiis rem illum architecto cupiditate repellat facilis atque unde pariatur consequuntur sunt possimus assumenda soluta quaerat a modi doloremque, molestias dolores? Numquam, minus earum quam nulla quae quod expedita porro odio.</p>
  55.     </div>
  56.  
  57.     <div class="m-p-b">
  58.         <h3>Margin</h3>
  59.         <p>Space outside the border. Separated a elements from other elements. Is also transparent, but margin does not include background images or background colors applied ot the element.</p>
  60.  
  61.         <h3>Padding</h3>
  62.         <p>Space kept between the content and the border. Separates the content of a block from its edge. Is transparent and includes the background image or background color of the element, as well. </p>
  63.  
  64.         <h3>Border</h3>
  65.         <p>Sets the style of the border on all four sides of an element using the values specified.</p>
  66.     </div>
  67.  
  68.     <!-- Tables -->
  69.     <!-- Allow web developers to arrange data into rows and columns. -->
  70.     <!-- Consist of table cells inside rows and columns. -->
  71.     <table>
  72.         <!-- Table row is defined by "tr". -->
  73.         <tr>
  74.             <!-- Table headers use "th" tag. -->
  75.             <th>Person 1</th>
  76.             <th>Person 2</th>
  77.             <th>Person 3</th>
  78.         </tr>
  79.        
  80.         <tr>
  81.             <!-- Table cell is defined by "td" (table data). -->
  82.             <td>John</td>
  83.             <td>Anne</td>
  84.             <td>Peter</td>
  85.         </tr>
  86.  
  87.         <tr>
  88.             <td>16</td>
  89.             <td>14</td>
  90.             <td>20</td>
  91.         </tr>
  92.     </table>
  93.  
  94.     <!-- Lists -->
  95.     <!-- Unordered list -->
  96.     <ul>
  97.         <li>Coffee</li>
  98.         <li>Tea</li>
  99.         <li>Milk</li>
  100.     </ul>
  101.  
  102.     <!-- Unordered list with type attribute. -->
  103.     <ul type="square">
  104.         <li>T-shirt</li>
  105.         <li>Socks</li>
  106.         <li>Jacket</li>
  107.     </ul>
  108.    
  109.     <!-- Ordered list. -->
  110.     <ol>
  111.         <li>Breakfast</li>
  112.         <li>Main</li>
  113.         <li>Drink</li>
  114.     </ol>
  115.  
  116.     <!-- Order list with type attribute. -->
  117.     <ol type="A">
  118.         <li>Car</li>
  119.         <li>Plain</li>
  120.         <li>Train</li>
  121.     </ol>
  122.  
  123.     <!-- Embedding video -->
  124.     <!-- Go to Youtube.com select your video, click on share and select embed. -->
  125.     <iframe width="560" height="315" src="https://www.youtube.com/embed/Aw6GkiCvcWs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  126. </body>
  127. </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!