Submodule 5.3: More elements

Exercise

For more information about div and span elements: https://www.w3schools.com/html/html_blocks.asp

Exercise

  1. Open your editor, create a new file and save it as exersice05.3.01.html in the folder "Exercises".
  2. Use code from this book paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

Solution:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .myol { margin:0px; padding-right:10px}
      .floatLeft{float:left}
      .cl1 {background:yellow; font-size:1em; font-family:courier; width:20%}
      .myspan{color:red; font-size:1.2em}
    </style>
  </head>
  <body>
    <ol class="myol floatLeft " > <li>First item</li> <li>Second <span class="myspan">item</span></li> </ol>
    <div class="cl1 floatLeft">This is a div with a yellow background </div>
  </body>
</html>