Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 24, 2021 12:20 pm GMT

Learn web development 02 - HTML Font tags

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about font tags in HTML. Earlier, We discussed about HTML, and programming languages. So, if you want, you can to checkout that article first.

Font tags

So till now we learnt about basic HTML structure. But, what you think how can we add texts to our web page? Well, we have lots of tags which allow us to add text to our page. So, let's check some.

h1 to h6 tag

<h1></h1> stands for heading tag 1. This tag is used to add heading on the page. we have some more tags for headings.

<h1>heading</h1><h2>heading</h2><h3>heading</h3><h4>heading</h4><h5>heading</h5><h6>heading</h6>
Output

Capture

So, that was about headings but what about links ?

Anchor tag

<a></a> anchor tag. This is used to add links in the web page. yes, those blue color underlined text.

<a href="www.google.com">link</a>
Output

Capture-2

If you notice. We have href="www.google.com" inside <a>. Now what is that ? href="" is know as attributes in HTML. Anything that you type inside a tag with quotes <tag attribute=""></tag> is knows as attributes. href stands for header reference. This attribute is used to add link url. Means in this case, we set our url to www.google.com. If we don't set any href attribute. Anchor tag will not re-direct you to anywhere.

If you have to redirect to other HTML file give files name in href. Example href="index.html"

P tag

hmm! Now we know about headings, links, but about paragraphs or normal texts. Well, for that we have <p></p> paragraph tags.
This do exactly what it's name says. Paragraphhhhhhh.

<p>this is a very long long paragraphhhhhhhhhhhhh.</p>

output

para

Remember all these property should be inside <body> tag.

Font styling relating tags

Now, we have very basic font styling tags. So let's see them with example.

<!-- for bold text --><b>bold text</b> <br><!-- for italic font --><i>italic font</i><br><!-- for underlined text --><u>underlined text</u><br><!-- for strike through text --><s>stike through text</s><br><!-- you can use more the one tags at a time --><b><i><u>this is bold, italic and underlined :) </u></i></b><br><!-- By default if you give more that 1 space it trims down to 1 space    but if you want to add text with lots of space. use pre tag --><pre>     h      e        l        l         o</pre>

<br>This tag is know as break line. This tag is used to a line break. And Notice we are not close it. Because, In HTML we have some tags which do not close.

Most of these tags use you'll never use. Because now days, we use CSS to achieve this same result.
If you have any doubt. Ask me in comments.

Remember to close all tags, and also close them in order. For example

wrong.<b><i><u>This is wrong</b></i></u>

right.

<b><i><u>This is right</u></i></b>
Output

Capture-3

So, that's it about Font tags in HTML. I hope you understood each and everything. In the next article we'll learn about lists in HTML. So make sure you follow me.

Homework

I appreciate, If you do homework as well for you better practice. Today's home is.

<!--You have to make two pages. you can give any name to them. But make sure you give these things.both page should contain1. at least one heading tag.2. at least two paragraphs, and you should make at least one paragraph bold, italic or underline.3. link to the other page.->

For example

home.html

page1

about.html

page 2

If you want, you can tag your homework to my Instagram. I'll be glad to see you developing web pages.

So, that's sit, if I missed something or you have any doubt feel free to ask me in discussion.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Gradient Infinity loading animation

Thanks For reading.


Original Link: https://dev.to/kunaal438/learn-web-development-02-html-font-tags-1egj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To