Saturday, March 9, 2013

Learn HTML in 7 Days | Day – 2 : Text formatting and its details | HTML Tutorial

Today I will discuss about text formatting, different tags in text formatting and color code. Text formatting is an important content of your website. It will denote that how beautiful your website is! There are several types of tags use in text formatting. Most common tags are –

Tags in Text formatting
Application
<p></p>
To indicate paragraph
<br / >
To give a line break
<hr/>
To provide a horizontal line
<abbr></abbr>
To abbreviate any text.
<b></b>
To make any text Bold
<i></i>
To make any text italic
<u></u>
To provide a underline
<strike></strike>
To make any text strike
<big></big>
To make any text size larger
<small></small>
To make any text size smaller
<pre></pre>
To make Pre formatted text
<strong></strong>
To make strong text
<sub></sub>
To indicate subscripted text
<sup></sup>
To indicate superscripted text
<samp></samp>
To make any sample text
<tt></tt>
To make teletype text
<var></var>
To make variable text
<code></code>
To make computer code text
<blockquote> </blockquote>
Indicate special quotation
<font></font>
To change color, size and font of text

Notice that, every tag is started by <> symbol and closed by </>. Only <br/> and <hr/> tags are different. Among all tags, <p> and <br/> are most common tags.
<p> tag: <p> tag indicate paragraph. To write any article or blog post, <p> tag is used.
<br/> tag: <br/> tag indicate line break, i.e. start new line.

For all tags and how to save file as HTML read my previous post here!

Details of Text Formatting:
Step – 1: Type the following code in notepad and save as html
Step – 2: Run the html file and check  .

<html>

<head>

<title>Text formatting | orinaas.blogspot.com</title>

</head>

 <body>

<p> Paragraph is starting from here. <br/>

<abbr> (U.S. = United States) </abbr> This is Abbreviation. <br/>

<b> (Bold) </b> This is an example of bold. <br />

<i> (Italic) </i> This is an example of Italic. <br/>

<u> (Underline) </u> This is an example of Underline. <br/>

<strike> (Strike) </strike> This is an example of Strike. <br/>

 <big> (Big text) </big>This is an example of Big. <br/>

<small> (Small text) </small>This is an example of Small. <br/>

<pre> (Pre text) </pre>This is an example of Pre formatted text. <br/>

<strong> (Strong text) </strong>This is an example of Strong. <br/>

(H<sub>2</sub>O) This is an example of Subscript. <br/>

(E=mc<sup>2</sup>) This is an example of Superscript. <br/>

<samp> (Sample text) </samp>This is an example of Sample. <br/>

<tt> (Teletype) </tt>This is an example of Teletype. <br/>

<var>p</var> is a variable. This is an example of Variable <br/>

<code> (Computer code text) </code> This is an example of Code. <br/>

<blockquote> Albert Einstein </blockquote> This is quotation. <br/>

<hr/>
This text below a horizontal line!

</p>
</body>
</html>

at mozilla


 
 
You have done it!

Font tag: It is the most important tag in text formatting. You can adjust the color, size and font of your text.

Color: By default text color is Black. To change the color use this code for “Red” color
<font color=red> This is red </font>                       or                  <font color=#FF0000>This is red</font>
Here “#FF0000” is a color code. You may adjust the color by color code or directly color name.

Size: To adjust the size use this code
<font size=6> This text size is 6 </font>
You may adjust the size of the text from 1 to 7. By default, text size is 3.

Font Type: You can choose any types of font by using this code, say for Arial
<font face=Arial>This Text is Arial </font>

You can use Font tags in one tag,
<font color=blue size=5 face=Arial Black> This text is blue, Size 5 & Arial black. </font>

Alignment: To adjust alignment use this tags
<center>This text is in Centre </center>

N.B.: check spelling “center” !

Color Code: There are many color code in HTML. They have many uses in text, background, table, forms and others.

Background: To change the background of your website use this code at <body> tag, one example is
<body bgcolor=#CC00FF></body>

This is the chart of colors use in HTML:


Now type this code on Notepad > save as html file > run it!

<html>
<head>
<title>Color Code | orinaas.blogspot.com</title>
</head>
<body bgcolor=#CC99FF>
<p>
We will practice on different color and formatting <br/>
<font color=red> This is red </font><br/>
<font size=4> This text size is 4 </font><br/>
<font face=arial>This Text is arial </font> <br/>
<font color=blue size=6 face=Arial Black> This text is blue, Size 5 & Arial black. </font><br/>
<center>This text is in Centre </center><br/>
Good Bye Today !
</p>
</body>
</html>

.



Hope that you have done it! Now see how it works!


Ok. This is only for today. Tomorrow I will write on another topic. Try your own self. If you face any problem, then comment below or mail orinaas.blogspot@gmail.com . Mention your name in comment, then Click “Comment as” & select “Anonymous”, then publish. Please comment me, you may share new ideas. This post is only for educational purposes, if anyone abuses this post, then http://orinaas.blogspot.com will not responsible. Thank You J.

2 comments:

  1. Nice post. Waiting for next.

    ReplyDelete
  2. NICE ONE...GIVE THE REST OF YOUR POST.IT IS VERY HELPFULL.

    ReplyDelete