In this Article I will show you How to make Bold, Italic and Underlined Fonts in HTML. I will also show you How to change to new line and How to create Table in HTML.
But if you don’t know how to create a webpage then first read my previous article
Now we should concentrate on the current article.
How To Make Fonts Bold, Italic, Underlined In HTML :
In a article sometimes it’s important to make some words or sentences in a another Font style so that the viewers can easily notice those important portions of an article, thus we use Bold, Italic and Underlined Fonts. Like I have given the above Heading in Bold and Underlined style. As we already know there are several Tags available in HTML and those are used for different purposes. So it’s obvious that is also Tags for getting Bold, Italic, Underlined Fonts. I’m going show them to you one by one.
Bold Fonts ====> To get Bold Fonts we use the Tag <b> , and after this Tag all the written text will be in Bold. To close the Bold Font style we use the Tag with / sign thus the Tag is </b>. The all Textual part written in between <b> and </b> will be in Bold Font style.
Example : – <b>Hi I’m a Newbie to HTML and this is My first created Webpage</b>
Thus If we use the last coding from our previous article and if want to make the Textual part of that webpage only Bold then the whole Coding will look like this :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Red” Size=”4″>
<b>Hi I’m a Newbie to HTML and this is My first created Webpage</b>
</font>
</body>
</html>
Italic Fonts ====> To Get Italic Fonts the Tag used is <i> and as the before one here also all the written Textual things after the Italic Tag will be in Italic style. The closing Tag for Italic style is </i> and all the written Textual part between <i> and </i> will be in Italic style.
Example :- <i>Hi I’m a Newbie to HTML and this is My first created Webpage</i>
Thus if we want to make the textual part of our created webpage only in Italic style then the whole coding will be :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Red” Size=”4″>
<i>Hi I’m a Newbie to HTML and this is My first created Webpage</i>
</font>
</body>
</html>
Underlined Fonts ====> The Tag used for creating Underlined Fonts is <u> and all the texual part written after this Tag will be Underlined. The closing tag for the Underline Tag is </u> and all the Texual content between <u> and </u> will be underlined
Example :- <u>Hi I’m a Newbie to HTML and this is My first created Webpage</u>
Now if we want to make the textual part of our previously created webpage only Underlined the whole coding of the webpage will be like the given one :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Red” Size=”4″>
<u>Hi I’m a Newbie to HTML and this is My first created Webpage</u>
</font>
</body>
</html>
We can also use all 3 Font styles altogether or in any combination of them. To make the Textual part of our previously created webpage Bold, Italic and also Underlined, then we have to use the Tags for those different styles together.
Example :- <b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b>
Now if we want to make the Texual part of our previously created webpage altogether then the whole Coding will look like the below one :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Red” Size=”4″>
<b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b>
</font>
</body>
</html>
Creating Headings and Going To Next Line In HTML :
Creating Headings ====> Sometimes we also need to create a Heading to keep one topic separate from the others. So we need to give Headings to different Topics. In HTML we can also give Headings by using <h1> Tag. Here in the Tag the 1 declares the Heading number, it can be 2,3,4,5……… etc. according to the counting of the Heading number starting from the first Heading of the page (e.g. For the first Heading use <h1> , For the Second Heading <h2> , For the Third Heading <h3> and so on……..)
To close the Heading Tag we should place the <h1> Tag right after the end of the Texual part of the Heading. So the Textual Part in between <h1> and </h1> will be treated as Heading.
Example :- <h1>HTML Power</h1>
Now suppose you want to add the above heading just before the Textual part in the webpage we have created previously. And let us also provide another different Font Scheme for this Heading, like Colours and Size. To do so let us first add a Complete Font Tag just before the previously created Font Tag :
Example :- <font color=”Green” size=”6″>
</font>
Now insert the Heading Text with Proper Heading Tags in between this newly created Font Tag.
Now the code will be : <font color=”Green” size=”6″>
<h1>HTML Power</h1>
</font>
Now insert this whole Code just before the previously created Font Tag in the our Webpage Coding, so the whole Coding will be like as below :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Green” size=”6″>
<h1>HTML Power</h1>
</font>
<font color=”Red” Size=”4″>
<b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b>
</font>
</body>
</html>
Going To Next Line ====> There is a problem in HTML that is even you will type the Textual Content of the webpage Designed with HTML in a new line from the previous one then it also the Textual part will show in the same line after compilation of the Codings into HTML Page. For example :
</font>
<font color=”Red” Size=”4″>
<b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b>
<i>I Like Using HTML to create my Own Webpage</i>
</font>
Here we have added a new line of textual content in our previous Coding, so if we compile it along with all other required codes and run the I Like Using HTML to create my Own Webpage line should appear in a new line after the Hi I’m a Newbie to HTML and this is My first created Webpage line, but in real it will not. so it means there needs to be done something to put both text in different line. There is a Tag which is used for ending a line, thus after that tag the next textual content will be displayed on a new line not in the previous same line. The Tag for ending a line is <br> . To end the line the Tag must be used at the end of the line or where you want to end a line and go to the next one after that Tag. For example :
</font>
<font color=”Red” Size=”4″>
<b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b><br>
<i>I Like Using HTML to create my Own Webpage</i>
</font>
Now if we compile the above code with other required codes and run it the we will see that the line Hi I’m a Newbie to HTML and this is My first created Webpage and I Like Using HTML to create my Own Webpage are displayed in two separate lines.
Now if we want to modify our previous Webpage code to add some more textual part in a new line then the whole Coding will be :
<html>
<head>
<title>
Test Page
</title>
</head>
<body bgcolor=”Blue”>
<font color=”Green” size=”6″>
<h1>HTML Power</h1>
</font>
<font color=”Red” Size=”4″>
<b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b><br>
<i>I Like Using HTML to create my Own Webpage</i>
</font>
</body>
</html>
Now You I Hope at the end of this Tutorial you can now give your Font different styles and Formats. In the Next Article I discuss about Adding Images, Music and Linking another webpages to a Webpage.
- How To Add Image, Music And Hyperlink In HTML
- How To Create Table In HTML And Add Bullets , Numbers In HTML
Please feel free to leave any suggestions, Comment(s) or any Questions. Your Comment(s) is/are very important for me. Have Good Day.
Wonderful site! Glad I come across here it carries good data all in favor of readers actually, I was searching online articles that I can benefit.
http://www.n8fan.net
Thank You For You Appreciation. Keep Visiting Techno Genome.