Text-related tags

This time, let's learn the tag that applies simple style to the writing.
Firstly, it is time for look at italic effect. Very simple. Italic tag is like this. 

<i>your word</i>

Let's create the following source and test it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>italic</title>
</head>
<body>
    <i>Hello world</i>
</body>
</html>

RESULT

i_tag

Then, let’s learn the bold effect.

<b>your word</b>

Let's create the following source and test it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bold</title>
</head>
<body>
    <b>Hello world</b>
</body>
</html>

RESULT

b_tag

This is an underline effect.

<u>your word</u>

Let's create the following source and test it.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>underline</title>
</head>
<body>
    <u>Hello world</u>
</body>
</html>

Result

u_tag

There are also other tags such as sub-tag, sup tag, strike tag. I'll test it all at once.

<sub>sub-tag</sub>
<sup>sub-taag</sup>
<strike>strike</strike>

Using the tag as above, Let's test it with the following sources.

sub-tag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sub-tag</title>
</head>
<body>
    <sub>Hello world</sub>
    <b>Hello world</b>
</body>
</html>

RESULT


sub_tag

sup tag

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sup-tag</title>
</head>
<body>
    <sup>Hello world</sup>
    <b>Hello world</b>
</body>
</html>

Result

sup_tag

strike tag


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>strike tag</title>
</head>
<body>
    <strike>Hello world</strike>
</body>
</html>

Result


strike_tag

I tried to go over to the next lecture, but somehow I feel like teach you more tags.

In addition, there is a line break tag and strip tag.

<br />

This is the break tag, which we could use when make a newline.
As you see, this is a single tag, so before you close it, write / before you type > so as to close the tag. ^^

Hello,<br />
I Like ASIMO

<hr /> This is a strip tag. 

<hr />

It seems like it is not used lately and I also have never used it nowadays, but it would be good when creating simple web pages.
You are going to understand what I mean, when you learn CSS later on.^^
By the way, it doesn’t matter if you do not attach / to the single tag. The line-feed function is driven only by the <br, but the single tag is promised to attach / to it. If you go to the web standard inspection (validator.kldp.org) and you do web standard inspection, you will see an error or warning that you did not attach / to the single tag. So it is good to habit these things from the beginning.

You can use it in the same way as above. ^^

So let's write our own and test it.
Please do not have hasty mind while studying web coding.
Being impatient, everything will go harder and harder.
As I experienced, being impatient when learning coding only causes waste of time.
Make yourself just satisfied that you are studying now.
It is always better to understand each stages step by step and thoroughly.

There is an important thing which is called footnote.
It means that you write annotations about sources,
in case you do not remember what this source does or so that other people also use sources you created.
The footnote also functions for annotations not to have any effect on programing source
For example, if you wrote <h1>hello world</h1> and you want to explain why you wrote it in the <h1> tag 

<h1>hello world</h1> <!-- h1 tag blah blah blah blah -->

Do as above.
Beginning is like this , that is


Let's practice footnote, line-breaking, and line-drawing functions in the following sources.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>change line</title>
</head>
<body>
    Hello world<br />
    I Like ASIMO
    <hr /><!--  It is hr tag -->
</body>
</html>

The result.


br_hr_tag

Line breaking after 안녕하세요 is done, and the underline is also drawn. Perfect! It is time for going over to next lesson!