Skip to main content

HTML BASICS : CLASS 102

Hello and welcome back.
This is the second class in a series of tutorials for beginners in web development.
You can access the first one here.
By this point you should have a file named my_site.html with the following code in it:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h4>NASA | JPL</h4>
    <h1>ON A MISSION</h1>
    <h2>PODCAST</h2>
</body>
</html>


Great!
It is a bit weird having a couple of headings with no further details, isn't it?
Let us add some more text that explains what this whole 'NASA ON A MISSION PODCAST' stuff is about.
For this we will use a different tag, the paragraph tag which opens with '<p>' and closes with a '</p>' . 
After the bottom heading, type the following : 

 <p>A new podcast from NASA</p>
  • Click 'File' then 'Save' ( OR hold Ctrl & S together if your are on a windows PC , CMD & S  together if you are on a mac ).
  • Go to the folder where this file is saved, double click on it to view in your browser.
Cool. Now your website has a paragraph in addition to the headings.
Lets add something more interesting. A list tag.
A list tag in html is used to display lists (pretty obvious huh!).
There are 2 kinds of lists, namely ordered list and unordered list.
An ordered list is simply a numbered list, i.e. a list of things that have a specific order. For example, here is a list of the first 4 months in a year;
  1. January
  2. February
  3. March
  4. April 
On the other hand an unordered list is simply a list that is not numbered, i.e. there is no order to them. For example, here is a list of fruits;
  • Mangoes
  • Oranges
  • Carrots (I refuse to call them vegetables, sue me!)
  • Bananas
Got it? Awesome! Now lets add 2 lists to our site.
Open my_site.html in Sublime text (Or whichever text editor you decided to go with) and type the following after the paragraph.

 <ul>
        <li>Arrival</li>
        <li>We Are the World</li>
        <li>Worlds of Wonder</li>
</ul>
This is an unordered list, containing items [ Arrival , We Are the World and Worlds of Wonder ].
It starts with an opening tag <ul> (the ul stands for unordered list),
followed by the the items(things) in the list. 
Each item(thing) is written inside <li></li> (where li stands for list item).
A list can have as many items as you wish, just remember that each item must be enclosed with the <li></li> tags.
When you are done listing your items, close the unordered list with the closing unordered list tag </ul>.

 Below this list, lets add an ordered list.
Type the following after closing the unordered list, in a new line.
<ol>
        <li>NASA is cool</li>
        <li>Coding comes second, arguably.</li>
        <li>What is third place?!</li>
</ol>

This is an ordered list, containing items [ NASA is cool, Coding comes second, arguably and What is third place?! ].
It starts with an opening tag <ol> (the ol stands for ordered list),
followed by the the items(things) in the list. 
Each item(thing) is written inside <li></li> (again, li stands for list item).
A list can have as many items as you wish, just remember that each item must be enclosed with the <li></li> tags.
When you are done listing your items, close the ordered list with the closing unordered list tag </ol>.

 As you can see, the only difference in how you add an ordered list vs how you add an unordered list is the use of enclosing tags <ol></ol> and <ul></ul> respectively. 

 Save the file and open it in your browser (you should know how to do this by now).
Notice the difference in how the ordered list is displayed compared to the unordered list below it.

 That is it for today, congrats! Play around with the lists by adding your own items (a list of vegetables with carrots in it maybe).
As always, leave a question in the comments section if you have any.
And here is a video you can use to follow up.
Bye for now.

Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
Post a Comment
Read more

HTML BASICS : CLASS 105

Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall; modify the size of the image we inserted in the previous lesson learn how to add links in our website. At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h2>NASA | JPL</h2>     <h1>ON A MISSION</h1>     <h4>PODCAST</h4>     <p>A new podcast from NASA</p>     <ul>         <li>Arrival</li>         <li>We Are the World</li>         <li>Worlds of Wonder</li>     </ul>      <ol>    ...
Post a Comment
Read more

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
Post a Comment
Read more