Alright, let's take a quick break and put what we've learned into practice. Time to flex those brain muscles and practice what we've learned so far. Remember, practice makes perfect, so let's make the most of this moment to sharpen our skills. Ready? Let's do this!
Let's open our online, free HTML editor in the playground.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom. We only need the HTML editor, so feel free to minimize the other two if you want.
Our goal
Display the list of days in a week in an ordered format.
As we learned previously, let's start by adding the basic structure of HTML first. Below, is the basic html structure.
<!-- copy this in editor -->
<html>
<head>
</head>
<body>
</body>
</html>
Note: The output will be empty because we haven't added anything to the body.
Understanding the problem
We can divide this problem into three smaller parts.
- Display "Days of the week", as a heading tag.
- Display a horizontal line below it.
- Display a list, with all the names of days of the week
For the first part we can use a h1 tag to display the text as heading. Lets add that inside the <body> tag.
.....
<body>
<h1> Days of Week </h1>
</body>
....
Now, you should be able to see the heading ("Days of Week") in the output section.
To add a horizontal line, you can use the <hr> tag. Add that below <h1> tag.
...
<body>
<h1> Days of Week </h1>
<hr>
</body>
...
Points to remember: It is important to note that empty elements do not require an end tag. Since <hr> does not contain any data the end tag is not required here.
We learned about lists previously. We can use the <ol> and <li> tags to create a list. Add <ol></ol> then add <li></li> in between the <ol></ol> tags.
<ol>
<li>Monday </li>
<li>Tuesday </li>
<li>Wednesday </li>
<li>Thursday </li>
<li>Friday </li>
<li>Saturday </li>
<li>Sunday </li>
</ol>
Complete Solution
<html>
<head>
<title>The title</title>
</head>
<body>
<h1> Days of Week </h1>
<hr>
<ol>
<li>Monday </li>
<li>Tuesday </li>
<li>Wednesday </li>
<li>Thursday </li>
<li>Friday </li>
<li>Saturday </li>
<li>Sunday </li>
</ol>
</body>
</html>
Want to practice more? Click here for more hands-on exercise.
References: