Advertisement
desislava_topuzakova

Lab: HTML and CSS Basics

Oct 4th, 2022
1,544
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.79 KB | None | 0 0
  1. 1.  Welcome to HTML
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Welcome</title>
  7. </head>
  8. <body>
  9.     <p>I am learning <strong>HTML</strong> and <strong>CSS!</strong></p>
  10. </body>
  11. </html>
  12.  
  13. 2. Fruits
  14. <!DOCTYPE html>
  15. <html lang="en">
  16.   <head>
  17.     <meta charset="UTF-8">
  18.     <title>Fruits</title>
  19.   </head>
  20.   <body>
  21.     <h1>Fruits</h1>
  22.     <p>
  23.       <img src="images/banana.png" alt="banana" height="75" width="75">
  24.       <img src="images/orange.png" alt="orange" height="75" width="75">
  25.       <img src="images/kiwi.png" alt="kiwi" height="75" width="75" >
  26.       <img src="images/kiwi.png" alt="kiwi" height="75" width="75">
  27.       <img src="images/apple.png" alt="apple" height="75" width="75">
  28.     </p>
  29.     <p>
  30.       <img src="images/apple.png" alt="apple" width="75" height="75">
  31.       <img src="images/apple.png" alt="apple" width="75" height="75">
  32.       <img src="images/banana.png" alt="banana" width="75" height="75">
  33.       <img src="images/kiwi.png" alt="kiwi" width="75" height="75">
  34.       <img src="images/orange.png" alt="orange" width="75" height="75">
  35.    
  36.     </p>
  37.     <p>
  38.       <img src="images/orange.png" alt="orange" width="75" height="75">
  39.       <img src="images/banana.png" alt="banana" width="75" height="75">
  40.       <img src="images/orange.png" alt="orange" width="75" height="75">
  41.       <img src="images/orange.png" alt="orange" width="75" height="75">
  42.       <img src="images/apple.png" alt="apple" width="75" height="75" >
  43.     </p>
  44.   </body>
  45. </html>
  46.  
  47. 3.  HTML Lists
  48. <!DOCTYPE html>
  49. <html lang="en">
  50. <head>
  51.   <meta charset="UTF-8" />
  52.   <title>HTML Lists</title>
  53. </head>
  54. <body>
  55. <ol>
  56.   <li> List item 1
  57.     <ol type="1">
  58.       <li>Nested item 1.1</li>
  59.       <li>Nested item 1.2</li>
  60.     </ol>
  61.   </li>
  62.  
  63.   <li>
  64.     List item 2
  65.     <ol type="1">
  66.       <li>Nested item 2.1</li>
  67.       <li>
  68.         Nested item 2.2
  69.         <ul type="square">
  70.           <li>Nested item 2.2.1</li>
  71.           <li>Nested item 2.2.2</li>
  72.           <li>Nested item 2.2.3</li>
  73.         </ul>
  74.       </li>
  75.  
  76.       <li>Nested item 2.3</li>
  77.     </ol>
  78.   </li>
  79.  
  80.   <li>
  81.     List item 3
  82.     <ul type="circle">
  83.       <li>Nested item 3.1</li>
  84.       <li>Nested item 3.2</li>
  85.       <li>Nested item 3.3</li>
  86.     </ul>
  87.   </li>
  88. </ol>
  89. </body>
  90. </html>
  91.  
  92. 4.  Wiki Page
  93. <!DOCTYPE html>
  94. <html lang="en">
  95. <head>
  96.   <meta charset="UTF-8">
  97.   <title>The Brown Bear</title>
  98. </head>
  99. <body>
  100.     <h1>The Brown Bear</h1>
  101.     <p>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.
  102.     </p>
  103.     <a href="https://en.wikipedia.org/wiki/Brown_bear">Learn More</a>
  104.     <p>Here are some bear species:</p>
  105.     <ul>
  106.       <li>Arctos</li>
  107.       <li>Collarus</li>
  108.       <li>Horribilis</li>
  109.       <li>Nelsoni (extinct)</li>
  110.     </ul>
  111.     <p>The following countries have the largest populations of brown bears:</p>
  112.     <ol>
  113.       <li>Russia</li>
  114.       <li>United States</li>
  115.       <li>Canada</li>
  116.     </ol>
  117.     <img src="images/bear.jpg" alt="bear">
  118. </body>
  119. </html>
  120.  
  121. 5. Color Blocks
  122. <!DOCTYPE html>
  123. <html lang="en">
  124. <head>
  125.     <meta charset="UTF-8">
  126.   <link rel="stylesheet" type="text/css" href="style.css">
  127.   <title>Title</title>
  128. </head>
  129. <body>
  130.     <div class="green" >green block</div>
  131.     <div class="blue">blue block</div>
  132.     <div class="red">red block</div>
  133.     <div class="purple">purple block</div>
  134.     <div class="orange">orange block</div>
  135. </body>
  136. </html>
  137.  
  138. div {display: inline-block;}
  139. .green {background-color: green;}
  140. .blue {background-color: blue;}
  141. .red {background-color: red;}
  142. .purple {background-color: purple;}
  143. .orange {background-color: orange;}
  144.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement