HTML - Text Structures

Headings
Example:
<HTML>
<HEAD>
<TITLE>Headings Example</TITLE>
</HEAD>
<BODY>
<H1 align="right">This is a H1</H1>
<H2 align="center">This is a H2</H2>
<H3 align="justify">This is a H3</H3>
<H4 align="left">This is a H4</H4>
<H5>This is a H5</H5>
<H6>This is a H6</H6>
</BODY>
</HTML>
 
Headings are used to separate the document and the section titles. There are 6 levels of heading tags from Heading 1 to Heading 2. They are <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. <H1> gives the biggest font size while <H6> gives the smallest font size. They are non empty tags
 
Alignment of Headings is done using align attribute. Possible values are right, center, justify and left.
 
Working with Text (Special Effects and Formatting Characters)
 
Example:
<HTML>
<HEAD>
<TITLE>Special Effects and Formatting Characters</TITLE>
</HEAD>
<BODY>
<B>Bold Text</B>
<I>Italics Text</I>
<U>Underlined Text</U>
<TT>Teletype Text</TT>
<STRIKE>Strikethrough on Text</STRIKE>
H<SUB>2</SUB>O
X<SUP>2</SUP>
<BIG>Big Font></BIG>
<SMALL>Small Font</SMALL>
<EM>Emphasized/Italics Format</EM>
<STRONG>Strong/Bold Format</STRONG>
 
<FONT size=5 color=”#0000ff” face=”Comic Sans MS” weight=200>
Hello World
</FONT>
 
<BASEFONT size=4>
Here’s some <FONT size=”+2”>bigger</FONT> text.
</BODY>
</HTML>
 
Physical Style
The physical style format tags inform the browser how the characters must be shown. 
 
Bold
<B> and </B> tags are used to display characters in bold format. It is a non-empty tag.
 
Italics
<I> and </I> tags are used to display characters in italics format. It is a non-empty tag.
 
Underline
<U> and </U> tags are used to display characters with underline. It is a non-empty tag.
 
Typewriter
<TT> and </TT> tags are used for displaying teletype or typewriter style format. It is a non-empty tag.
 
Strikethrough
<STRIKE> and </STRIKE> tags are used to display text with a strike. It is a non-empty tag.
 
Subscript
<SUB> and </SUB> tags are used to display text in subscript form. It is a non-empty tag.
 
Superscript
<SUP> and </SUP> tags are used to display text in superscript form. It is a non-empty tag.
 
Big Font
<BIG> and </BIG> tags are used to display text in bigger font compared to rest of the text.
 
Small Font
<SMALL> and </ SMALL> tags are used to display text in smaller font compared to rest of the text.
 
 
Logical Style
The logical style tags inform the browsers what kind of text to present. The browser takes care of how to present it.
 
Emphasis
<EM> and </EM> tags are used to display text in typically italics format.
 
Strong
<STRONG> and </STRONG> tags are used to display text in bold format.
 
Font
Font tag lets you to select text size, color and type of font for the text. <FONT> and </FONT> tags are used. It is a non-empty tag. Various attributes are as follows:
 
color: This attribute specifies the color of the text. Set it to a color value or predefined color.
 
face: It specifies the comma separated list of font type. The browser will select the first font face from the list it can find it in the system it’s running on.
 
size: It specifies the size of the text. The size ranges from 1 to 7. You can also specify the relative size i.e. relative with the current font size.
 
weight: It indicates the weight or boldness of the font. The value is from 200 to 900. 
 
Basefont
The <BASEFONT> tag is used to set the font for default text in the document, replacing the default font used by the browser. The text remains same unless changed by <FONT> tag. Possible value range from 1 to 7. It is an empty tag.
 
Various attributes are:
face: This attribute specifies the type of font to be used.
 
size: This attribute specifies the size of the font. It is an integer value.
 
color: This attribute specifies the color of the font.
 
 
Displaying Special Characters: Character Entities
 
There are lot many characters which do not appear on the keyboard which you want to display such Greek letters and many more. You can use the name of the entity or the number of the entity. &name or &#number can be used for displaying character entities.
 
Example:
<HTML>
<HEAD>
<TITLE>Use of Special Characters</TITLE>
</HEAD>
<BODY>
&Copy From Indian Organization
<BR>
&Pound is currency of UK
<BR>
#174 is a Trade Mark
</BODY>
</HTML>
 
Presenting and Arranging Text
 
Example:
<HTML>
<HEAD>
<TITLE>Presentation of Text</TITLE>
</HEAD>
<BODY>
March&nbsp1788
<HR>
<HR size=10>
<HR width=70%>
<HR align=”center”>
<HR noshade>
<HR color=”blue”>
<HR src=”abc.jpg”>
 
Hello
<BR>
World
 
<P align=”right”>
This is the demo for Paragraph tag.
</P>
 
<PRE>
Name Email
ABC abc@abc.com
DEF def@def.com
GHI ghi@ghi.com
</PRE>
 
<DIV align=”right”>
<H1>Aligning a Block of Content to the Right</H1>
<P>You can use a DIV tag to align a block of content to the right. </P>
<P align=right>The content can include anything you like, including tables, images, lists, and so on.</P>
</DIV>
 
<P>
This is a paragraph 
<SPAN style="color:#0000FF;">
This is a paragraph
</SPAN>
This is a paragraph
</P> 
<P>
<SPAN style="color:#00DD45;">
This is another paragraph
</SPAN>
</P>
</BODY>
</HTML>