API tools faq
paste
Advertisement
desislava_topuzakova

Lab: HTML and CSS Basics

desislava_topuzakova
Oct 4th, 2022
2,026
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.79 KB | None | 0 0
raw download clone embed print report
  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
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!