HTML Font & Link Tags With Example - HTML Tutorials Online - Part 4

Learn HTML Tutorials in Hindi – HTML Font Tag, HTML Text Tag, HTML Link Tag - To Learn HTML Video Tutorial in Hind Scroll Down Below - Part 4

Learn HTML Font Tags:
In my previous post I hope you understand how to use html text tags now I am going to teach you how to use HTML Font tags and make stylish website texts. 
HTML Font Tag:
When we create a website, we want to make our website stylish and for providing styling to the website there are so many options. And using font tag in HTML is also a part of making a stylish website with HTML. In website most of the time we have seen different – different text style and the style we provide using font tag. 
 Font tag provides a feature to change the style of text, size of text, and colour of the text as per requirement in different – different places. For using font tag we use opening and closing tag and between the tags we write text, whose style we want to change the style.

Text style change tags in HTML:
Change font size in HTML:  size = “5”.

Change text style in HTML: face = “Times New Roman”.
Here I used times new roman, If you want to change text style then just replace the Times New Roman with your desired font style. For getting font styles you can open Microsoft Office Word, Excell, Wordpad or Notepad, and then go to font properties and open font face or font style properties then you will see a list of font styles. Select any one and whatever you like just copy the name and use.

Change text colour in HTML: color=”red”.
Here I used red colour for my text, So It’s up to you which colour you want just replace with red. You can also use HTML colour code option, just place code with # instead of red.

Below I have created a sample example of html font tag use:
-----------------------------------------------------------------------------------------------------
<html>
<head><title> HTML Text & Font Related Tags</title> </head>
<body bgcolor="pink">
<h2 align="center"> HTML Text Tags: </h2>
<p> <font face="Cambria (Headings) "> after writing this code in notepad you have to save this file with any name but extension should be .htm or .html. Like you can save test.html – Here test is file name and .html is extension.
When you check to your destination, where you saved your file it will look like a browser with the name test. </font></p>
<strong>Welcome To My Site </strong>
<small>Welcome To My Site </small>
<b>Welcome To My Site </b>
<i>Welcome To My Site </i>
<center>Welcome To My Site </center>
<h3 align="center"> Font Tags: </h3>
<font size="5" color="red" face="Harlow Solid"> How to save html file - You have to save this file with any name but extension should be .htm or .html </font> 
</body>
</html>
----------------------------------------------------------------------------------------------------
Output:



HTML  UL Tag:

To create underline in text we use this tag.
Example of ul tag: 
<ul> Hello Friends!!!!... Learn HTML Tutorials in Hindi with Video </ul>
The output of the above line will create an underline in the text.

HTML Superscript tag: .
The sup tag is used to display half text character above the normal line and is sometimes in a smaller font.  
Example of superscript tag: 
Sup Tag<sup>Hello, How are you.... </sup>
Output: Sup TagHello, How are you....

HTML Subscript tag:
The sub tag is used to display half text character below the normal line and is sometimes in a smaller font.  
Example of subscript tag:
Sub Tag<sub>Hello, How are you.... </sub>
Output: Sub TagHello, How are you....

HTML Deleted Tag:
Delete tag is used to display the users to old or deleted text, When we use del tag browser will normally strike a line through deleted text.
Example of delete tag:
del>Hello, How are you.... </del>
Output: Hello, How are you....

Below I have created an example on the above tags, Please check.

HTML Link Tag: <a href=”#”>
When we want to create a link in the website, we use link tag. Most of the sites used two types of links. 

First: When you click on the link it will display on same pages. Example:
<a href=”www.google.com”> Open Google </a> 
Output: Open Google
When you save and run this code in the browser it will display as a link with name “Open Google” and when you click on the link it will open Google site in the same page as I have already given the link www.google.com inside “ ”.  

Second: When you click on the link it will open in new tab. Example:
<a href=”www.google.com” target=”blank”> Open Google </a>
Output: Open Google
Now when you run this code and click on “Open Google” it will open in new tab.

HTML Link Title Tag:
Sometimes when we open some sites and take the cursor to link it will show some text, which is called link title. It is widely used because of SEO optimization is one of the major things. And when someone open your site with slow internet connection, it displays only link. 
Example of HTML link title tag:
<a href=”www.google.com” target=”blank” title=”google”> Open Google </a>
Output: Open Google
When you run this code and take the cursor to “Open Google” link, it will display “google” as a title.
Example of html link tag:
----------------------------------------------------------------------------------------------------------------
<html>
<head> <title> HTML text & url Tag </title>
</head>
<body>
Hello Friends, Welcome to Technical Programming. <br>
<h2> Text Tag: </h2>
<u>Hello, How are you.... </u> <br>
Sup Tag<sup>Hello, How are you.... </sup> <br>
Sub Tag<sub>Hello, How are you.... </sub> <br>
<del>Hello, How are you.... </del>
<h2> URL/ Link Tag: </h2>
<a href="http://www.google.com"> Home </a>
<a href="mysite.html"> My Site </a>
<a href="test.html" title ="test" target=""> Test </a>
<a href="C:\Users\lenovo\Desktop\desk.html" title = "Desk" target="blank"> Desk </a>
</body>
</html>
----------------------------------------------------------------------------------------------------------------
Output:













Learn All Above Code in Hindi - Video Tutorials:


I hope my html tutorials will help you to learn html and now you are able to create a website using html. I have also added above tags in hindi with video tutorials, Learn and start creating our own website in html.

Labels: