To create an html file, we need an editor such as the notepad. In the notepad, we need to type in the html code, or the source code for html file. The basic building of html code is
<html>
<body>
</body>
</html>
Those are the codes that is needed to be typed first into the editor. In between the <body> and </body> tags, we could have our content. To make a header, we type words between the <h1> and </h1> tags, there are also h2, h3 and h4 each with different sizes, try and explore yourselves. To have a simple paragraph, we write between the tags <p> and </p>.
<html>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph</p>
</body>
</html>
Preview
=================================
My First Heading
My First Paragraph=================================
Now you have a complete html file, you could save it as .html file by renaming the file with .html at the end of its name before saving. e.g. 1.html
Now, is there any other things besides heading and paragraph? Of course, in fact, there are plenty of things to do with HTML, but we will go basic by basic. We will start with what is important in a note, or perhaps, in a story.
The List
For now, I'll introduce to you three types of list, bullet list, ordered list, and nested list (list in which there is/are another list/s)Bullet List
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Preview
==================================
- Apples
- Bananas
- Lemons
- Oranges
Ordered List
An ordered list is used as a replacement for the bullet list to show a more ordered manner, such as if you are going to list things by using a until z instead of only having a black round bullet. <ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
===================================
- Apples
- Bananas
- Lemons
- Oranges
So you don't have to write A until Z by yourselves, it will happen automatically as you add more lists. Besides having an A to Z list, it also support numbered list, you just need to change the type from "A" to "1". Notice the different between the bullet list and ordered list, the tag for bullet list is <ul>, while the tag for ordered list is <ol>.
Nested List
Then, what about nested list, nested list is a list where we have another list inside the list.<ul> <li>Coffee</li> <li>Tea<ul> <li>Black Tea</li> <li>Green Tea</li> </ul></li> <li>Milk</li> </ul>
Basically, if you find another sets of <ul> </ul> or <ol> </ol> tags inside the list's source code, it means that there is another list inside the list. Notice the red text? That is another sets of <ul> </ul> tags inside the list's source code that is written in black.
Preview
=====================================
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
Next, after you have your note and list, for easy navigation; perhaps you need to hyperlink some of the words in your note to a certain site. So how should we do it? Here comes the part which we call as link. What is a link? A link is more like and address that is when we click on it, we will be directed into the page with the same address as the link. Normally, we will have our link behind word.
Link
<a href="type website address">Type the word to represent the link</a>
The basic tag or code for link is <a href=" "> </a>
Example
<a href="http://www.google.com/">Go to google</a>
Preview
==================================
Go to google
==================================
You can have your Link's code anywhere in the page, may it be in a list or not, under a condition that it is always inside the tag <body> and </body>
Image
Another important thing for a note is image, everyone like it visually. Instead of having only a journal full of words, why not we try to put pictures or images inside our page.Basic code for picture are
<img src="your image link">With description<img src="your image link" alt="description">With description and size<img src="your image link" alt="description" width="width size" height"height size"/>
It is your choice to have a description or not, or to have a fixed size or not. Sometime, you don't need a fixed designated size for picture, while sometime you don't, it depends on how you want the picture to be resized. If you want it in its original size, perhaps you don't have to resize it, but there is a time when the size of the picture is way too large that you need to resize it in any way, you are free to resize it by editing the width and height. By using the same code, you could have both passive or moving picture.
example
An Image:
<img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" alt="Nature" width="32" height"32"/>
A moving image:
<img src="http://heathersanimations.com/links/animal2link.gif" alt="Now a moving image" width="48" height="48"/>
Preview
=================================
An Image:
A moving image:
==================================
I think that's enough for today, why don't we summarised what we have learned today.
| Type | Code |
| Bullet List | <ul type="disc"> <li>item 1</li> <li>item 2</li> </ul> or <ul type="square"> <li>item 1</li> <li>item 2</li> </ul> |
| Ordered List | <ol type="A"> <li>item 1</li> <li>item 2</li> </ol> or <ol type="1"> <li>item 1</li> <li>item 2</li> </ol> |
| Link | <a href="link">any word</a> |
| Image | <img src="image link"/> or <img src="image link" alt="description"> or <img src="image link" alt="description" width="width size" height"height size"/> |
