Using the Div element
!DOCTYPE HTML>
<HEAD>
<TITLE> DIV </TITLE>
</HEAD>
<BODY BGCOLOR="GREY">
<Div style="background-color: RED ; text-alig: center">
<p><b>HOME</B></P>
</DIV>
<DIV style="border; 2px solid black ">
<p><b> Navigation </b></p>
</div>
</body>
</html>
POSITING TEXT USING THE DIV ELEMENT
<!DOCTYPE HTML>
<HEAD>
<TITLE> Position </TITLE>
</HEAD>
<BODY>
<DIV id='abc' style="z-index:2; position relative ; right: opx; top:10px;
background-color:#cccc33; width: 180px; pandding: 10px; color: white: html page </DIV>
</body>
</html>
FORMATING TEXT USING TABLE
Using the TABLE element , you can display the content of a web page in the the tabular format , Let's create web page ,
<!DOCTYPE HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TH Colspan=2> <h1> PAN CARD DETAILS </H1> </TH>
</TR>
<TR>
<th><h2> Name</h2>
<t><h2>Number</h2>
</tr>
<Tr align=center>
<td>Anshu</td>
<td> 1</td>
</tr>
<tr align=center>
<td> Max</td>
<td>2</td>
</tr>
<tr align=center>
<td>Deepak</td>
<td> 3</td>
</tr>
<tr align=center>
<td> Parshant </td>
<td>4</td>
</tr>
<TR align=center>
<td> Shakshi </td>
<td>5</td>
</tr>
</table>
</boder>
</html>
Creating this RUBY (captioned) Text
Let's how to create Ruby web page
<!DOCTYPE html>
<html>
<body>
<CENTER>
<ruby>
HTML <RT> Hyper text markup language >/RT>
</ruby>
</CENTER>
</body>
</html>
Creating ORDERED LIST
UNDER THE LIST
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
WEB PAGE LISTS </TITLE>
</HEAD>
<BODY BGCOLOR="RED">
<P> Follow are the steps to save a file </p>
<UL> <li>1 press the ctrl+s</li>
<li> Enter the name of file dilog box </li>
<li>click the save button </li>
</Ul>
</body>
</html>
Nested list
<!DOCTYPE HTML>
<HTML>
<head>
<title> Nested list </title>
</head>
<body bgcolor="blue">
<ul>
<li> how to make Tea ;
<ol>
<li>Boil waterbtakes 3/4 cup to every cup yu want to make ;
<li>
now add tea powder according to number of cups , you can take one teaspon per cup;
<li> Now add suger as per your taste
<li> Bring the mixture to aboll ;
<li> sleve and pour in cup ;
<li> add warm milk for milk tea ;
</ol>
<li> How to make web page ;
<li> ope notepad type code web page ;
<li> save as file web pagage.html;
<li<run internet exploer ;;
</ol>
</ul>
</body>
</html>
!DOCTYPE HTML>
<HEAD>
<TITLE> DIV </TITLE>
</HEAD>
<BODY BGCOLOR="GREY">
<Div style="background-color: RED ; text-alig: center">
<p><b>HOME</B></P>
</DIV>
<DIV style="border; 2px solid black ">
<p><b> Navigation </b></p>
</div>
</body>
</html>
POSITING TEXT USING THE DIV ELEMENT
As already stated, the DIV element dividees a web page into different sections , HTML uses the style attribute of the DIV element for overlapping same text at a specifix locations in this divisition , you can also use the LAYER, element for attaining the same effect however; note that the LAYER element only work s in the Netscape Navigation browser , The DIV element work in both Netscape Navigation and internet exploer (IE),
<!DOCTYPE HTML>
<HEAD>
<TITLE> Position </TITLE>
</HEAD>
<BODY>
<DIV id='abc' style="z-index:2; position relative ; right: opx; top:10px;
background-color:#cccc33; width: 180px; pandding: 10px; color: white: html page </DIV>
</body>
</html>
Figure; displaying position to text using the style attribute
Let's now learn how to the SPAN element
Using the SPAN element
The span element is use to change the format of a specific part of the text , Let's create a web page name span.html
<!DOCTYPE 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>
FORMATING TEXT USING TABLE
Using the TABLE element , you can display the content of a web page in the the tabular format , Let's create web page ,
<!DOCTYPE HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TH Colspan=2> <h1> PAN CARD DETAILS </H1> </TH>
</TR>
<TR>
<th><h2> Name</h2>
<t><h2>Number</h2>
</tr>
<Tr align=center>
<td>Anshu</td>
<td> 1</td>
</tr>
<tr align=center>
<td> Max</td>
<td>2</td>
</tr>
<tr align=center>
<td>Deepak</td>
<td> 3</td>
</tr>
<tr align=center>
<td> Parshant </td>
<td>4</td>
</tr>
<TR align=center>
<td> Shakshi </td>
<td>5</td>
</tr>
</table>
</boder>
</html>
Creating this RUBY (captioned) Text
Let's how to create Ruby web page
<!DOCTYPE html>
<html>
<body>
<CENTER>
<ruby>
HTML <RT> Hyper text markup language >/RT>
</ruby>
</CENTER>
</body>
</html>
Creating ORDERED LIST
UNDER THE LIST
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
WEB PAGE LISTS </TITLE>
</HEAD>
<BODY BGCOLOR="RED">
<P> Follow are the steps to save a file </p>
<UL> <li>1 press the ctrl+s</li>
<li> Enter the name of file dilog box </li>
<li>click the save button </li>
</Ul>
</body>
</html>
Nested list
<!DOCTYPE HTML>
<HTML>
<head>
<title> Nested list </title>
</head>
<body bgcolor="blue">
<ul>
<li> how to make Tea ;
<ol>
<li>Boil waterbtakes 3/4 cup to every cup yu want to make ;
<li>
now add tea powder according to number of cups , you can take one teaspon per cup;
<li> Now add suger as per your taste
<li> Bring the mixture to aboll ;
<li> sleve and pour in cup ;
<li> add warm milk for milk tea ;
</ol>
<li> How to make web page ;
<li> ope notepad type code web page ;
<li> save as file web pagage.html;
<li<run internet exploer ;;
</ol>
</ul>
</body>
</html>
No comments:
Post a Comment