Layout
Depending on how good a webpage is, the page layout will depend entirely on the page layout. Previously all web site layouts were made using HTML only. Currently CSS is used with HTML. Rows and columns of <table> are used to create layouts using HTML only.
Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Table width = "400" border = "0">
<Tr>
<Td colspan = "3" style = "background-color: # 93C;">
<H1> Web Page Header </ h1>
</ Td>
</ Tr>
<Tr valign = "top">
<Td style = "background-color: # C99; width: 100px; text-align: top;">
<P> <b> Side bar </ b> <br />
<a href="#"> PHP </a>
<br />
<a href="#"> HTML </a>
<br />
<a href="#"> CSS </a>
<a href="#"> Wordpress </a>
</ P> </ td>
<Td style = "background-color: #EEEEEE; height: 200px; width: 400px; text-align: top;"> <h2 style = "color: # 900"> This is heading. </ H2>
<P style = "color: # 006"> This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. </ P> </ td>
</ Tr>
<Tr>
<Td colspan = "2" style = "background-color: # 999; text-align: center;">
Copyright © 2012tutohost.com </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.
Depending on how good a webpage is, the page layout will depend entirely on the page layout. Previously all web site layouts were made using HTML only. Currently CSS is used with HTML. Rows and columns of <table> are used to create layouts using HTML only.
Example Programs
<Html>
<Head>
<Title> www.tutohost.com </ title>
</ Head>
<Body bgcolor = "green">
<Table width = "400" border = "0">
<Tr>
<Td colspan = "3" style = "background-color: # 93C;">
<H1> Web Page Header </ h1>
</ Td>
</ Tr>
<Tr valign = "top">
<Td style = "background-color: # C99; width: 100px; text-align: top;">
<P> <b> Side bar </ b> <br />
<a href="#"> PHP </a>
<br />
<a href="#"> HTML </a>
<br />
<a href="#"> CSS </a>
<a href="#"> Wordpress </a>
</ P> </ td>
<Td style = "background-color: #EEEEEE; height: 200px; width: 400px; text-align: top;"> <h2 style = "color: # 900"> This is heading. </ H2>
<P style = "color: # 006"> This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph. This is a paragraph. This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. <br />
This is a paragraph.This is a paragraph.This is a paragraph. </ P> </ td>
</ Tr>
<Tr>
<Td colspan = "2" style = "background-color: # 999; text-align: center;">
Copyright © 2012tutohost.com </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
Open a Notepad and by typing the code above and clicking Save as from the file menu, save as file name: index.html, Save as type: All files, open the index.html file with Mozilla Firefox and look like the image shown below.
No comments:
Post a Comment