API tools faq
paste
Advertisement
YavorGrancharov

HTML5 AND CSS - EXERCISES

YavorGrancharov
Nov 8th, 2017
139
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.55 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.Headings
  14. <!DOCTYPE html>
  15. <html lang="en">
  16.    <head>
  17.       <meta charset="UTF-8"/>
  18.       <title>Headings</title>
  19.    </head>
  20.    <body>
  21.       <h1>Headings Exercise</h1>
  22.       <h2>First Heading(Bigger)</h2>
  23.       <h3>Second Heading(Smaller)</h3>
  24.       <h4>Third Heading(Even Smaller)</h4>
  25.       <h5>Fourth Heading(Smallest)</h5>
  26.    </body>
  27. </html>
  28.  
  29. 3.Paragraphs
  30. <!DOCTYPE html>
  31. <html lang="en">
  32.    <head>
  33.       <meta charset="UTF-8"/>
  34.       <title>Paragraphs</title>
  35.    </head>
  36.    <body>
  37.       <h1>Paragraphs</h1>
  38.       <p><em>First</em> paragraph</p>
  39.       <p><em>Second</em> paragraph</p>
  40.       <br>
  41.       <p><em>Third</em> paragraph</p>
  42.    </body>
  43. </html>
  44.  
  45. 4.My TODO List
  46. <!DOCTYPE html>
  47. <html lang="en">
  48.    <head>
  49.       <meta charset="UTF-8"/>
  50.       <title>TODO List</title>
  51.    </head>
  52.    <body>
  53.       <h1>My TODO List</h1>
  54.       <ul>
  55.          <li>HTML 5 course &#64; SoftUni</li>
  56.          <li>Homework HTML &amp; CSS</li>
  57.          <li>Teddy &#8211; birthday present</li>
  58.       </ul>
  59.       <p>back to <a href="home.html">home</a></p>
  60.    </body>
  61. </html>
  62.  
  63. 5.Hello HTML
  64. <!DOCTYPE html>
  65. <html lang="en">
  66.    <head>
  67.       <meta charset="UTF-8"/>
  68.       <title>Hello HTML</title>
  69.    </head>
  70.    <body>
  71.       <h1>Hello HTML!</h1>
  72.       <p>I am <strong>Yavor</strong>. I am from <a target="_blank" href="http://www.blagoevgrad.eu/">Blagoevgrad</a>.</p>
  73.       <p>I study <i>Software Technologies</i> at <a target="_blank" href="https://softuni.bg/">SoftUni</a>.</p>
  74.       <p>back to <a href="home.html">home</a></p>
  75.    </body>
  76. </html>
  77.  
  78. 6.Website
  79. <!DOCTYPE html>
  80. <html lang="en">
  81.    <head>
  82.       <meta charset="UTF-8"/>
  83.       <title>Hello HTML</title>
  84.    </head>
  85.    <body>
  86.       <h1>Home</h1>
  87.       <ul>
  88.       <li><a href="todo.html">My TODO List</a></li>
  89.       <li><a href="hello.html">Hello HTML!</a></li>
  90.       <ul>
  91.    </body>
  92. </html>
  93.  
  94. 7.Fruits
  95. <!DOCTYPE html>
  96. <html lang="en">
  97.    <head>
  98.       <meta charset="UTF-8"/>
  99.       <title>Fruits</title>
  100.    </head>
  101.    <body>
  102.       <h1>Fruits</h1>
  103.       <p><img src="C:\Users\Lalka\Desktop\images\banana.png">
  104.          <img src="C:\Users\Lalka\Desktop\images\orange.png">
  105.          <img src="C:\Users\Lalka\Desktop\images\kiwi.png">
  106.          <img src="C:\Users\Lalka\Desktop\images\kiwi.png">
  107.          <img src="C:\Users\Lalka\Desktop\images\apple.png">
  108.       </p>
  109.       <p><img src="C:\Users\Lalka\Desktop\images\apple.png">
  110.          <img src="C:\Users\Lalka\Desktop\images\apple.png">
  111.          <img src="C:\Users\Lalka\Desktop\images\banana.png">
  112.          <img src="C:\Users\Lalka\Desktop\images\kiwi.png">
  113.          <img src="C:\Users\Lalka\Desktop\images\orange.png">
  114.       </p>
  115.       <p><img src="C:\Users\Lalka\Desktop\images\orange.png">
  116.          <img src="C:\Users\Lalka\Desktop\images\banana.png">
  117.          <img src="C:\Users\Lalka\Desktop\images\orange.png">
  118.          <img src="C:\Users\Lalka\Desktop\images\orange.png">
  119.          <img src="C:\Users\Lalka\Desktop\images\apple.png">
  120.       </p>
  121.    </body>
  122. </html>
  123.  
  124. 8.Forms
  125. <!DOCTYPE html>
  126. <html lang="en">
  127.    <head>
  128.       <meta charset="UTF-8"/>
  129.       <title>Contact Us</title>
  130.    </head>
  131.    <body>
  132.       <h1>Contact Us</h1>
  133.       <form>
  134.          <p>First Name: <input type="text"></input></p>
  135.          <p>Second Name: <input type="text"></input></p>
  136.          <input type="submit" value="Submit"></input>
  137.       </form>
  138.    </body>
  139. </html>
  140.  
  141. 9.Colors
  142. <!DOCTYPE html>
  143. <html lang="en">
  144.    <head>
  145.       <meta charset="UTF-8"/>
  146.       <title>Contact Us</title>
  147.    </head>
  148.    <body>
  149.       <p>Once the <span style="color:blue">blue plum</span> met the
  150.          <span style="color:red">red tomato</span> playing with the
  151.          <span style="color:green">green cucumber</span>.
  152.       </p>
  153.    </body>
  154. </html>
  155.  
  156. 10.Borders
  157. <!DOCTYPE html>
  158. <html lang="en">
  159.    <head>
  160.       <meta charset="UTF-8"/>
  161.       <title>Borders</title>
  162.    </head>
  163.    <body>
  164.       <p style="border:2px solid red;border-radius:10px;background:lightgray;text-align:center;width:10%;"><span style="color:red">Red</span> Border</p>
  165.       <p style="border:2px solid green;border-radius:10px;background:lightgray;text-align:center;width:10%;"><span style="color:green">Green</span> Border</p>
  166.       <p style="border:2px solid blue;border-radius:10px;background:lightgray;text-align:center;width:10%;"><span style="color:blue">Blue</span> Border</p>
  167.    </body>
  168. </html>
  169.  
  170. 11.Rectangles
  171. <!DOCTYPE html>
  172. <html lang="en">
  173.    <head>
  174.       <meta charset="UTF-8"/>
  175.       <title>Rectangles</title>
  176.       <link rel="stylesheet" type="text/css" href="rectangles.css">
  177.    </head>
  178.    <body>
  179.       <div id="dotted">
  180.          <div id="dashed">
  181.             <div id="solid">
  182.                <p style="text-align:center">I am heavily packed &lt;DIV&gt;</p>
  183.             </div>
  184.          </div>
  185.       </div>
  186.    </body>
  187. </html>
  188.  
  189. 11.1.rectangles.css
  190. #dotted {
  191.     border: 2px blue dotted;
  192.     border-radius: 10px;
  193.     padding: 15px;
  194.     width: 18%;
  195. }
  196.  
  197. #dashed {
  198.     border: 1px red dashed;
  199.     border-radius: 10px;
  200.     padding: 15px;
  201. }
  202.  
  203. #solid {
  204.     border: 2px green solid;
  205.     border-radius: 5px;
  206.     padding: 15px;
  207. }
  208.  
  209. 12.Languages
  210. <!DOCTYPE html>
  211. <html lang="en">
  212.    <head>
  213.       <meta charset="UTF-8"/>
  214.       <title>Rectangles</title>
  215.       <link rel="stylesheet" type="text/css" href="langs.css">
  216.    </head>
  217.    <body>
  218.       <style>
  219.          body {
  220.          background:#EEE;
  221.          line-height:1.5em;
  222.          font-size:24pt;
  223.          }
  224.       </style>
  225.       <p>Programming languages like</p>
  226.       <p><span class="php">PHP</span>, <span class="js">JavaScript</span>, <span class="csharp">C#</span> and</p>
  227.       <p><span class="java">Java</span> are general-purpose.</p>
  228.    </body>
  229. </html>
  230.  
  231. 12.1.langs.css
  232. .php {
  233.     background:#CCC;
  234.     border-radius: 5px;
  235.     border:1px #AAA;
  236.     padding:5px;
  237. }
  238.  
  239. .js {
  240.     background:#CCC;
  241.     border-radius: 5px;
  242.     border:1px #AAA;
  243.     padding:5px;
  244. }
  245.  
  246. .csharp {
  247.     background:#CCC;
  248.     border-radius: 5px;
  249.     border:1px #AAA;
  250.     padding:5px;
  251. }
  252.  
  253. .java {
  254.     background:#CCC;
  255.     border-radius: 5px;
  256.     border:1px #AAA;
  257.     padding:5px;
  258. }
  259.  
  260. 13.Contact Us Form
  261. <!DOCTYPE html>
  262. <html lang="en">
  263.    <head>
  264.       <meta charset="UTF-8"/>
  265.       <title>Contact Form</title>
  266.       <link rel="stylesheet" type="text/css" href="contact-us-form.css">
  267.    </head>
  268.    <body>
  269.       <h1>Contact Us</h1>
  270.       <form>
  271.          <span>First Name: </span>
  272.          <input type="text" name="firstname">
  273.          <br>
  274.          <span>Last Name: </span>
  275.          <input type="text" name="lasttname">
  276.          <br>
  277.          <span>Email: </span>
  278.          <input type="text" name="email">
  279.          <br>
  280.          <span>Town: </span>
  281.          <select name="town">
  282.             <option value="1">Sofia</option>
  283.             <option value="2">Plovdiv</option>
  284.             <option value="3">Varna</option>
  285.             <option value="4">Burgas</option>
  286.          </select>
  287.          <input type="submit" value="Submit">
  288.       </form>
  289.    </body>
  290. </html>
  291.  
  292. 13.1.contact-us-form.css
  293. form {
  294.     background:#eee;
  295.     display:inline-block;
  296. }
  297.  
  298. form span {
  299.     display: inline-block;
  300.     width: 80px;
  301.     background: #eee;
  302.     margin: 10px 3px 3px 8px;
  303. }
  304.  
  305. form input, form select {
  306.     width; 150px;
  307.     height: 20px;
  308.     margin: 0px 5px;
  309.     box-sizing: border-box;
  310. }
  311.  
  312. form input[type="submit"] {
  313.     display: block;
  314.     margin: 10px 0px 12px 98px;
  315.     width: 80px;
  316.     height: 30px;
  317. }
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!