It seems like everyone do blogging nowadays. It is quite a good platform to express ourselves. Plus we could have our voice heard to anyone using the internet, therefore expanding our circle of influence. Blogging could be about our mundane daily activities, our interests and hobbies or any cause that we want to promote.
To blog, we need to create a webpage. So it is important that we learn about HTML. As an introduction, the term HTML stands for:
Hyper
Text
MarkUp
Language
It is actually the main markup language to create a webpage. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets e.g. <html>, within the web page content. I can tell you that these tags seemed confusing when I first encountered them. It could be similarly daunting for any other beginner. What is up with all these symbols and notations? Fret not, I assure you it is not impossible to learn.
It is actually the main markup language to create a webpage. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets e.g. <html>, within the web page content. I can tell you that these tags seemed confusing when I first encountered them. It could be similarly daunting for any other beginner. What is up with all these symbols and notations? Fret not, I assure you it is not impossible to learn.
Therefore, in this post I would describe some of the basic HTML tags used to construct a webpage. On a text editor (you can use Notepad), we should always begin with <html> tag followed by <body> tag. Similarly, we should always end with tag of the same element, but with additional slash before the element i.e. </body> and </html>. Therefore, now we have a webpage. But of course we would need content for it. Other objects like heading, paragraph, list, image and link can be included in the webpage using the tags that are going to be described next.
Heading and paragraph
Heading and paragraph are two important basic parts in constructing a webpage. Constructing a heading and a paragraph in a webpage is easy, you just put the syntax and then followed by your text. There are two syntax which is used; < h1></h1>/ <h2></h2>/ <h3></h3>/ < h4></h4>/ <h5></h5>/ <h6></h6> for heading and <p></p> for paragraph. Heading has 6 level of font size. The bigger the number the smaller its font size will be.
Heading and paragraph are two important basic parts in constructing a webpage. Constructing a heading and a paragraph in a webpage is easy, you just put the syntax and then followed by your text. There are two syntax which is used; < h1></h1>/ <h2></h2>/ <h3></h3>/ < h4></h4>/ <h5></h5>/ <h6></h6> for heading and <p></p> for paragraph. Heading has 6 level of font size. The bigger the number the smaller its font size will be.
The following text is the html text to make a heading in webpage.
<html>
<body>
<h1>Heading With Font Size 1</h1>
<h2>Heading With Font Size 2</h2>
<h3>Heading With Font Size 3</h3>
<h4>Heading With Font Size 4</h4>
<h5>Heading With Font Size 5</h5>
</body>
</body>
</html>
And this is the display in webpage:
Heading With Font Size 1
Heading With Font Size 2
Heading With Font Size 3
Heading With Font Size 4
Heading With Font Size 5
Furthermore, the following text will show you how to construct heading and paragraph in webpage.
Heading With Font Size 1
Heading With Font Size 2
Heading With Font Size 3
Heading With Font Size 4
Heading With Font Size 5
Furthermore, the following text will show you how to construct heading and paragraph in webpage.
<html>
<body>
<body>
<h3>Malin Kundang</h3>
<p>Once upon a time, in a small island there lived a widow and her son named Malin Kundang. She had to live a hard life with his son because his husband had passed away.</p>
</body>
List
Step 1 - Select a desired image/gif.
Step 2 - Save image/gif in the same folder as your notepad .txt and .html.
Step 3 - Add the following code into the Notepad.
<p>
An image:
<img src="smiley.gif" alt="Smiley face"
width="32" height="32" />
< /p>
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man"
width="48" height="48" />
</p>
How the HTML code above looks in a browser:
#Note: The syntax of inserting a moving image is no different from a non-moving image.
Links
The HTML code for links are as follows:
<p>
<a href="#C4">See also Chapter 4.</a>
< /p>
How the HTML code above looks in a browser:
See also Chapter 4.
#Tip: Change the "#C4" with your desired website and "See also Chapter 4." with you desired link title.
I hope that this blog post would help you to understand at least a little bit about HTML. Should you want more reference, this website would give you more understanding in the subject. Plus it contains tutorial to do more sophisticated code than the ones I include in this post.
</html>
And this is the result in a webpage:
Malin Kundang
Once upon a time, in a small island there lived a widow and her son named Malin Kundang. She had to live a hard life with his son because his husband had passed away.
Malin Kundang
Once upon a time, in a small island there lived a widow and her son named Malin Kundang. She had to live a hard life with his son because his husband had passed away.
List
The following are the different types of lists:
1. UL (Unordered List)
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
Example:
<ul type="disc">
<li>Milk</li>
<li>Cookies</li>
</ul>
How the HTML code above looks in a browser:
- Milk
- Cookies
2. OL (Ordered List)
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers or alphabets.
Example:
<ol type="1">
<li>Milk</li>
<li>Cookies</li>
</ol>
<li>Milk</li>
<li>Cookies</li>
</ol>
How the HTML code above looks in a browser:
- Milk
- Cookies
#Tip: Change the "1" with "A" for alphabets.
3. NL (Nested List)
A description list is a list of terms/names, with a description of each term/name.
Example:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
- Coffee
- Tea
- Black tea
- Green tea
- Milk
This section will teach you how to add moving and non-moving images on your webpage.
Step 1 - Select a desired image/gif.
Step 2 - Save image/gif in the same folder as your notepad .txt and .html.
Step 3 - Add the following code into the Notepad.
<p>
An image:
<img src="smiley.gif" alt="Smiley face"
width="32" height="32" />
< /p>
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man"
width="48" height="48" />
</p>
How the HTML code above looks in a browser:
An image:
A moving image: 
#Note: The syntax of inserting a moving image is no different from a non-moving image.
Links
The HTML code for links are as follows:
<p>
<a href="#C4">See also Chapter 4.</a>
< /p>
How the HTML code above looks in a browser:
See also Chapter 4.
#Tip: Change the "#C4" with your desired website and "See also Chapter 4." with you desired link title.
Conclusion
To sum it up, the following table is just listing all the basic tags used to build a webpage using HTML.
To sum it up, the following table is just listing all the basic tags used to build a webpage using HTML.
| HTML tag | Purpose |
|---|---|
| <html> | Telling web browser that it is a HTML document |
| <body> | Defining the document body |
| <h> | Defining heading |
| <p> | Defining paragraph |
| <li> | Defining list |
| <ol> | Defining ordered list |
| <ul> | Defining unordered list |
| <a> | Defining a hyperlink - used with HTML attribute href to specify the link's destination |
I hope that this blog post would help you to understand at least a little bit about HTML. Should you want more reference, this website would give you more understanding in the subject. Plus it contains tutorial to do more sophisticated code than the ones I include in this post.
This is just a video of a song that I like. Begin your HTML-ing with Bismillah!
0 comments:
Post a Comment