In this lesson we will learn about list in HTML.There are 3 type of list that we can use in HTML but only 2 are relevant for our beginner tutorial. The 2 type of list are ordered list and unordered list which are basically a numbered list and a bullet list respectively. The tag
<ol> and <ul> are used to create the list and as always, a closing tag is required to use the tag. These 2 tag are used in pair with <li> tag which is used to specify the list item. Modify your HTML file as below,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<h1>I'm a beginner web developer</h1>
<h2>This is my first website</h2>
<p>I'm sooo excited</p>
<p>I'm going to keeps on following the <a href="https://amirruddin-razak.blogspot.com/">tutorial</a> and make my own super cool website
</p>
<ol>
<p>Follow the tutorial here</p>
<li>On Blogger</li>
<li>On Google+</li>
</ol>
</body>
</html>
What the <ul> tag do is simply tells the browser to create a bullet list for every single list item, <li> tag enclosed by it. The <ol> tag did pretty much the same thing but with a numbered list instead of a bullet list. Any texts or items enclosed by a <li> tag will be listed in your browser. Notice how I put a <p> tag in between the <ol> tag. What this gonna do is that the browser will display "Follow the tutorial here" normally without being numbered. This is because the text is not enclosed in <li> tag. Therefore the browser won't treat it as a list. But because the <p> tag is in between the <ol> tag, the displayed paragraph are indented as if it is a part of the list. Try to save the HTML file and you should see something like this,
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<h1>I'm a beginner web developer</h1>
<h2>This is my first website</h2>
<p>I'm sooo excited</p>
<p>I'm going to keeps on following the <a href="https://amirruddin-razak.blogspot.com/">tutorial</a> and make my own super cool website </p>
<ol>
<p>Follow the tutorial here</p>
<li> <a href="https://amirruddin-razak.blogspot.com">On Blogger</a> </li>
<li> <a href="https://plus.google.com/105989137850183491401">On Google+</a> </li>
</ol>
</body>
</html>
Now save your file and all the link should be working now except for About and Contact since you don't have an About page and Contact page yet. But you should be able to create the 2 pages easily by using what we've learnt before. Just make sure the name of your HTML file match the name you put in your link else the link won't works. Also notice that I put a '#' instead of a url or a file name in the link to home. Basically the '#' is used to do nothing, you will stay on the same page even if you click the link. Since you're already on the home page anyway, its only natural that you won't be sent anywhere if you click the link to home.
your website now looks like this,
That's all for this lesson, in the next lesson we will be learning how to use CSS to make our website looks like a real and beautiful website.
If you have a question about HTML, feel free to ask me in the comment below. see ya
Thanks for revealing, I found this particular article while looking for infomation regarding my term paper, interesting comments and excellent points made.
ReplyDeleteThe Characteristics and Benefits of a CMS Based Website Development Dubai
Web designs that focus on conversions make you more money, it's that simple. web developer
ReplyDeleteOutstanding work author. Knowledgeable enough. We will surely share your work. Anyway, If you are interested and looking for
ReplyDeletewebsite developeryou may visit our website. You can also check our available services to offer. Thank you and More power!!