Introduction to HTML-Part 2
Preface
Welcome to my second post on HTML! If you're new here, make sure to check out our previous blog - "Introduction to HTML - Part 1."
Previously, we explored the history of HTML and actually coded our first website. However, our page only consisted of texts. In this post, we will go deeper into the capabilities of HTML in using images,...
Attachments
Images
In the last post, we already learned how to use simple tags like <h1></h1> or <p></p>,... for text formats. Let me introduce you to <img></img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is my first HTML web!<h1>
<h2>The reasons why I should learn HTML</h2>
<p>It is the frontend backbone of website development</p>
<p>It is easy!</p>
<img src="imgs/programmerbear.png">
<h2>Why it is so fun to learn HTML</h2>
<p>Because this blog is so detailed!</p>
<p>Just kidding!</p>
</body>
</html>
Above is our code from the previous post, but this time, I have added an image.
By adding
<img src="imgs/programmerbear.png">
Within the <body></body> tags, I was able to attach an image to our page. Now to scale the image to make it looks better, we just need to add the "width" and "height" attribute:
<img src="imgs/programmerbear.png" width="50%" height="50%">
Buttons
To give our website some more functions, we can add buttons using the <button></button> tags
Code:
<button>Click me</button>
Output:
Of course, the button doesn't really have any value to it because we haven't assigned any particular functions. But hey, we will explore how to do so as we explore the functionalities of CSS and Javascript in the future!
Input
Hypothetically, our webpage needs a feedback section where visitors will type in their thoughts. Now, we will need to create a place for them to type in their text, and to do so, we will use the <input></input> tag!
Code:
<input type="text" placeholder="Share us your thoughts!">
Output:
The <input> tag seems different because it has some attributes!
Formatting
With the attachments, you have given your website a lot of functions. But to make the text itself prettier, you will need to use different types of tags.
Line Break
If your text is too long and your website looks a bit too neat, you can use the <br /> tags:
Code:
<p>Bears are cute</p>
<br />
<p>I am not lying</p>
Output:
Bolding
To put more emphasis on a specific piece of text, you can use the <b></b> tags:
Code:
<p><b>Bears</b> are cute</p>
<br />
<p>I am not lying</p>
Output:
Italic
Sometimes when writing names, you need to put it in italic. To do so, you can use the <i></i> tags:
Code:
<p><b><i>Bears</i></b> are cute</p>
<br />
<p>I am not lying</p>
Output:
Underlining
To heavily emphasize your text, you can underline your text with the <u></u> tags:
Code:
<p><b><i><u>Bears</u></i></b> are cute</p>
<br />
<p>I am not lying</p>
Output:
The next 2 subsections show you how to change the size of your text:
Enlarge
Code:
<p><b><i><u><big>Bears</big></u></i></b> are cute</p>
<br />
<p>I am not lying</p>
Output:
Diminish
Code:
<p><b><i><u><small>Bears</small></u></i></b> are cute</p>
<br />
<p>I am not lying</p>
Output:
Divider
In my blogs, you will see me use a long line to separate different sections. To do so with HTML, you can use the <hr /> tag:
Code:
<p><b><i><u><big>Bears</big></u></i></b> are cute</p>
<br />
<hr />
<p>I am not lying</p>
Output:
Subscript
Hypothetically, you want to write a documentary on the bears, but you need to write a certain Chemistry formula. The <sub></sub> tags work the best:
Code:
<p><b><i><u>Bears</u></i></b> need O<sub>2</sub> to live.</p>
Output:
Superscript
Now imagine you are writing a bear-themed Math blog and you need to write an exponential equation problem, you can easily do so with <sup></sup> :
Code:
<p><b><i><u>Bear </u></i></b>needs to solve the roots of x<sup>2</sup>+2x+5</p>
Output:
The End
This is the last part of our series on HTML. At this point, you have gotten a grasp of what HTML is and have enough tools to create your basic website. You can brush up on your HTML skills by coding a simple blog website on any topic you are interested in or perhaps a product introduction website.
Later on, I will try to touch on the subject of Javascript or CSS (I don't really know what to talk about CSS since there's not much to it, and I used to learn CSS by doing my own research while creating mini websites for myself). Or maybe create a new series on algorithms with my friend!
Thank you for spending the time to read this. If you have any questions or feedback, feel free to put a comment down below. Here is a cute photo of capybara that reminds me of a special friend:
