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
div tag: Block level grouping: is done by using div tag
Span tag: Inline grouping: is done by using span tag.
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 world"</p>
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­skai­deka­phobia</p>
This will produce following result:
triskaidekaphobia
*­ 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: <sup>...</sup>
Code:
<p>Hello<sup>world</sup></p>
Try yourself and see result.
Subscripting of Text: Anything written between sub
tag would appear subscirpted on screen.
Format: <sub>...</sub>
Code:
<p>Hello<sub>world</sub></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.
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.....
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.
