Hyper Text Markup Language (HTML) CLASS 4

In last class, you got some idea about attributes. Today we will discuss tags which are used for formatting.

Quiz class 3:

Define core attributes.

Define internationalization attributes.

Give example for defining name and value properties of an attribute.

CLICK HERE: FOR HTML CLASS 3

LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS

HTML Class 4

Formatting: is an important segment of HTML document and is helpful in making content more readable as well as user friendly.

Before moving ahead let's discuss how html treats white-space and consecutive empty lines. Multiple White-spaces are not recognized by HTML while displaying content on screen, HTML collapsess all whitespaces together and show only one white-space which is known as white space collapsing.On the same pattern, empty lines are ignored and treated as one space. To show multiple white-spaces or empty lines, you have to use special HTML tags.

Let's begin with formatting of a document

Every document should begin with a heading followed by a paragraph or multiple paragraphs.

Heading: Gives an idea about the content of paragraph to the reader.

Format <hn> where n=1,2,3,4,5,6

Once heading is declared, HTML adds one line above and below declared heading while displaying it on screen. 

Example:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

This will display following result:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Paragraph

Format <p>...</p>

<p>Here is a paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

This will produce following result:

Here is a paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Attribute:

Name Align, values: left, centre, right, justify

You can use align attribute to align your paragraphs.

<p align="left">This is left aligned.</p>

<p align="center">This is center aligned.</p>

<p align="right">This is right aligned.</p>

<p align="justify">This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines so that they can look more nice.</p>

This will produce following result:

This is left aligned.

This is center aligned.

This is right aligned.

This is justified. This works when you have multiple lines in your paragraph and you want to justify all the lines so that they can look more nice.

Line breaks or empty lines

Format: <br />

*Example of an empty element.

* always remember space between br and slash(/), if not given older browsers would have trouble in displaying line breaks or empty lines.

Create Line Breaks - The <br /> Element:

Whenever you use the <br /> element, anything following it starts on the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Example:

Hello<br />

World<br />

Thanks<br />

Mahnaz

This will produce following result:

Hello

world

Thanks

Mahnaz

Centering Content: for centering the content, in the page or table cells, center tag is used 

Format: <center>...</center>

Example:

<p>Not in the center.</p>

<center>

<p>In the center.</p>

</center>

This will produce following result:

Not in the center.

In the center.

Non breaking Spaces: are used when you do not want words to be splitted in two lines by browsers, as you do not want following phrase to get splitted "hello world" as

"hello

world"

Simply,use

<p> "hello&nbsp;world"</p>

&nbsp; is used to keep words together.

Soft Hyphens:  Sometimes you want a browser should hyphenate long words to make it easily readable.

Example:

<p style="text-align: justify;"> triskaidekaphobia</p>

This will produce following result:

triskaidekaphobia

<p style="text-align: justify;"> tri&shy;skai&shy;deka&shy;phobia</p>

This will produce following result:

tri­skai­deka­phobia

*&shy is used to make word hyphenated

*This may notwork with some web browsers.

Preserve Formatting: Used to make content appear on the screen as it is written in the HTML document.

Format <pre>...</pre>

<pre>

hello world

     I am a coder

}

</pre>

This will produce following result:

hello world

     I am a coder

Visual breaking of sections: Horizontal Rules are used to break pages in vertical segments

Format <hr />

* Empty element

* Inserts a line

Example:

<p>This is paragraph one and should be on top</p>

<hr />

<p>This is paragraph two and should be at bottom</p>

This will produce following result:

This is paragraph one and should be on top

 

This is paragraph two and should be at bottom

Note: The <hr /> element has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <hr> it is not valid XHTML

Presentational Tags:

Bold tag: Anything written between bold tags would appear bold on screen.

Format: <b>...</b>

Code:

<p>Hello <b>world</b></p>

Result:

Hello world

Italic tag: Anything written between italic tag would appear italicized on screen.

Format: <i>...</i>

Code:

<p>Hello<i>world</i></p>

Result:

Hello world

Underline tag: Anything written between underline tag would appear underlined on screen.

Format: <u>...</u>

Code:

<p>Hello <u>world</u></p>

Result:

Hello world

Strike tag:Anything written between strike tag would appear srikethrough on screen.

Format: <strike>...</strike> Element:

Code:

<p>Hello <strike>world</strike></p>

Result:

Hello world

Monospaced font: used for making width of every letter same, as in general, letter m is wider than i and if respective tag is used their width become same.

Format: <tt>...</tt>

Code:

<p>Hello <tt>world</tt></p>

Try yourself and see result.

Superscripting of Text: Anything written between sup tag would appear superscripted on screen.

Format: ^...

Code:

<p>Hello^world</p>

Try yourself and see result.

Subscripting of Text: Anything written between sub tag would appear subscirpted on screen.

Format: _...

Code:

<p>Hello_world</p>

Try yourself and see result.

Making Text Larger: Anything written between big tag would appear larger on screen.

Format: <big>...</big>

Code:

<p>Hello<big>world</big></p>

Try yourself and see result.

Making Text Smaller: Anything written between small tag would appear smaller on screen.

Format: <small>...</small>

Code:

<p>Hello<small>world</small></p>

Try yourself and see result.

Grouping of elements is done to create sections or subsections within a page like you may want to put all menu items within a block where change in properties would affect each item in similar way.

div tag:Block level grouping: is done by using div tag

Format: <div>...</div>

Code:

<div id="menu" align="middle" >

<a href="/index.htm">HOME</a> |

<a href="/about/contact_us.htm">CONTACT</a> |

<a href="/about/index.htm">ABOUT</a>

</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>

<p>Actual content goes here.....</p>

</div>

Result:

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

Span tag: Inline grouping: is done by using span tag.

The <span> element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence or paragraph you wanted to group together you could use the <span> element.

Code:

<div><p>Hello friends,<span style="color:green">I am sailendra kumar</span>, who is providing you <span style="color:purple">free tutorial on HTML</span> alongwith CSS</p></div>

Try yourself and see result.