Allowing Word Breaks Using the WBR Element
WBR element is used to beak a word or line in a paragraph.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>WORD BREAKS</TITLE>
</HEAD>
<BODY>
The longest name of a place in the world is:<BR/>
Krung thep maha <WBR>nakorn amorn </WBR>ratana kosinmahintar <WBR>ayutthay amaha dilok phop </WBR>noppa ratrajathani burirom <WBR>udom rajaniwesmahasat </WBR>harn amorn phimarn avatarn <WBR>sathit sakkattiya </WBR>visanukamprasit.
</BODY>
</HTML>
Displaying the preformatted text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Preformat</TITLE>
</HEAD>
<BODY>
<PRE>
Preformat
Preformat Preformat
Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat Preformat
/\
/ \
/ \
/ \
--------
" "
" "
" "
</PRE>
</BODY>
</HTML>
Using the DIV element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>DIV</TITLE>
</HEAD>
<BODY>
<DIV style="background-color: RED; text-align: center">
<P><B>HOME</B></P>
</DIV>
<DIV style="border: 2px solid black">
<P><B>Navigation section</B></P>
</DIV>
</BODY>
</HTML>
Positioning Text Using the DIV Element
the div element divides a web page into different sections.
HTML uses the style attribute of the DIV element for overlapping some text at a specific location in these divisions.
you can also use the layer element for attaining the same effect;
note: the layer element only works in the Netscapr Navigator browser.
the div element will work in both Netscape Navigator and Internet Explorer(IE)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Position</TITLE>
</HEAD>
<BODY>
<DIV id='abc' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #ffffcc 2px dashed; "> HTML Black Book
</DIV>
</BODY>
</HTML>
Using the SPAN Element
The Span element is used to change the format of a specific part of the text.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Span</TITLE>
</HEAD>
<BODY>
<H1>
Use <SPAN style="color: orange"> the SPAN element</SPAN> for formatting <SPAN style="color: blue">Inline content</SPAN>
</H1>
</BODY>
</HTML>
Formatting Text Using Tables
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TH colspan=2><H1>PAN CARD DETAILS<H1>
</TR>
<TR>
<TH><H2>Name</H2>
<TH><H2>Number</H2>
</TR>
<TR align=center>
<TD>Maya</TD>
<TD>1<TD>
</TR>
<TR align=center>
<TD>Max</TD>
<TD>2<TD>
</TR>
<TR align=center>
<TD>Flash</TD>
<TD>3<TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating The Ruby(Captioned) Text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Ruby Text</TITLE>
</HEAD>
<BODY>
We are talking about the RUBY element of <RUBY><B>HTML</B><RP>(</RP><RT><B><SMALL>Hyper Text Markup Language</SMALL></B></RT><RP>)</RP></RUBY>
</BODY>
</HTML>
Creating Lists
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Ordered List
</TITLE>
<BODY>
<P>Following are the steps to save a file:</P>
<OL>
<LI>Press the CTRL+S keys
<LI>Enter the name of the file in Save dialog box
<LI>Click the save button
</OL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Unordered List
</TITLE>
</HEAD>
<BODY>
<P>Following are the type of lists in HTML:</P>
<UL>
<LI>Ordered lists
<LI>Unordered lists
<LI>Definition lists
</UL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Definition List
</TITLE>
</HEAD>
<BODY>
<DL>
<DT><STRONG>Ordered List</STRONG>
<DD>Provides information in an order or in steps.
<DT><STRONG>Unordered List</STRONG>
<DD>Provides information in an unordered manner or in bullets.
<DT><STRONG>Definition List</STRONG>
<DD>Provides information along with its definition.
</DL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Nested List
</TITLE>
</HEAD>
<BODY>
<UL>
<LI>How to make tea:
<OL>
<LI>Boil water. Take 3/4th cup for every cup you want to make.
<LI>Now add tea powder according to number of cups. You can take one teaspoon per cup.
<LI>Now add sugar as per your taste buds.
<LI>Bring the mixture to a boil.
<LI>Sieve and pour in cups.
<LI>Add warm milk for milk tea.
</OL>
<LI>How to make coffee:
<OL>
<LI>Heat up the water and get a mug and put in two tablespoons of sugar and a teaspoon of instant coffee.
<LI>When the water is ready, pour in as much to fill the cup, allowing for any liquid you plan to add.
<LI>Add creamer to the coffee and stir.
</OL>
</UL>
</BODY>
</HTML>
WBR element is used to beak a word or line in a paragraph.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>WORD BREAKS</TITLE>
</HEAD>
<BODY>
The longest name of a place in the world is:<BR/>
Krung thep maha <WBR>nakorn amorn </WBR>ratana kosinmahintar <WBR>ayutthay amaha dilok phop </WBR>noppa ratrajathani burirom <WBR>udom rajaniwesmahasat </WBR>harn amorn phimarn avatarn <WBR>sathit sakkattiya </WBR>visanukamprasit.
</BODY>
</HTML>
Displaying the preformatted text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Preformat</TITLE>
</HEAD>
<BODY>
<PRE>
Preformat
Preformat Preformat
Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat
Preformat Preformat Preformat Preformat Preformat Preformat
/\
/ \
/ \
/ \
--------
" "
" "
" "
</PRE>
</BODY>
</HTML>
Using the DIV element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>DIV</TITLE>
</HEAD>
<BODY>
<DIV style="background-color: RED; text-align: center">
<P><B>HOME</B></P>
</DIV>
<DIV style="border: 2px solid black">
<P><B>Navigation section</B></P>
</DIV>
</BODY>
</HTML>
Positioning Text Using the DIV Element
the div element divides a web page into different sections.
HTML uses the style attribute of the DIV element for overlapping some text at a specific location in these divisions.
you can also use the layer element for attaining the same effect;
note: the layer element only works in the Netscapr Navigator browser.
the div element will work in both Netscape Navigator and Internet Explorer(IE)
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Position</TITLE>
</HEAD>
<BODY>
<DIV id='abc' style="z-index: 2; position: relative; right: 0px; top: 10px; background-color: #cccc33; width: 180px; padding: 10px; color: white; border: #ffffcc 2px dashed; "> HTML Black Book
</DIV>
</BODY>
</HTML>
Using the SPAN Element
The Span element is used to change the format of a specific part of the text.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Span</TITLE>
</HEAD>
<BODY>
<H1>
Use <SPAN style="color: orange"> the SPAN element</SPAN> for formatting <SPAN style="color: blue">Inline content</SPAN>
</H1>
</BODY>
</HTML>
Formatting Text Using Tables
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TH colspan=2><H1>PAN CARD DETAILS<H1>
</TR>
<TR>
<TH><H2>Name</H2>
<TH><H2>Number</H2>
</TR>
<TR align=center>
<TD>Maya</TD>
<TD>1<TD>
</TR>
<TR align=center>
<TD>Max</TD>
<TD>2<TD>
</TR>
<TR align=center>
<TD>Flash</TD>
<TD>3<TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating The Ruby(Captioned) Text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Ruby Text</TITLE>
</HEAD>
<BODY>
We are talking about the RUBY element of <RUBY><B>HTML</B><RP>(</RP><RT><B><SMALL>Hyper Text Markup Language</SMALL></B></RT><RP>)</RP></RUBY>
</BODY>
</HTML>
Creating Lists
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Ordered List
</TITLE>
<BODY>
<P>Following are the steps to save a file:</P>
<OL>
<LI>Press the CTRL+S keys
<LI>Enter the name of the file in Save dialog box
<LI>Click the save button
</OL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Unordered List
</TITLE>
</HEAD>
<BODY>
<P>Following are the type of lists in HTML:</P>
<UL>
<LI>Ordered lists
<LI>Unordered lists
<LI>Definition lists
</UL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Definition List
</TITLE>
</HEAD>
<BODY>
<DL>
<DT><STRONG>Ordered List</STRONG>
<DD>Provides information in an order or in steps.
<DT><STRONG>Unordered List</STRONG>
<DD>Provides information in an unordered manner or in bullets.
<DT><STRONG>Definition List</STRONG>
<DD>Provides information along with its definition.
</DL>
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Nested List
</TITLE>
</HEAD>
<BODY>
<UL>
<LI>How to make tea:
<OL>
<LI>Boil water. Take 3/4th cup for every cup you want to make.
<LI>Now add tea powder according to number of cups. You can take one teaspoon per cup.
<LI>Now add sugar as per your taste buds.
<LI>Bring the mixture to a boil.
<LI>Sieve and pour in cups.
<LI>Add warm milk for milk tea.
</OL>
<LI>How to make coffee:
<OL>
<LI>Heat up the water and get a mug and put in two tablespoons of sugar and a teaspoon of instant coffee.
<LI>When the water is ready, pour in as much to fill the cup, allowing for any liquid you plan to add.
<LI>Add creamer to the coffee and stir.
</OL>
</UL>
</BODY>
</HTML>