HTML Layout
Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML columns.
HTML Layout – Using Tables
One very common practice with HTML is to use HTML tables to format the layout of an HTML page.
An HTML <table> is used to divide a part of Web page into two columns.
The trick is to use a table without borders, and may be a little extra cell- padding.
No matter how much text you add to page, it will stay inside its column borders.
Example: Creating Table
<HTML>
<HEAD><TITLE>Table Attributes </TITLE> </HEAD>
<BODY BGColor=LIGHTGREY>
<B>Specifying the BORDER and WIDTH of the Table! </B><BR><BR><BR><BR>
<CENTER><TABLE Borer=5 Width=50%>
<CAPTION Align=Bottom><B>Personal Information </B> </CAPTION>
<TR><TH>NAME</TH><TH>AGE</TH></TR>
<TR Align=CENTER><TD>Shilpa</TD><TD>21</TD> </TR>
<TR Align=CENTER><TD>Vaishali</TD><TD>22</TD> </TR>
</TABLE><.CENTER>
</BODY>
</HTML>
HTML Fonts
The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.
Even if a lot of people are using it, you should try to avoid it, and use styles instead.
The HTML <font> Tag
With HTML code like this, you can specify both the size and the type of the browser output
<p>
<font size=2”face=”Verdana”>
This is a paragraph.
</font>
</p>
<p>
<font size=”3”face=”Times”>
This is another paragraph.
</font>
<p>
Font Attributes
| Attribute | Example | Purpose |
| size=”number” | size=”2” | Defines the font size |
| size=”+number” | size=”=1” | Increases the font size |
| size=”-number” | size=”-1” | Decreases the font size |
| face=”face-name” | face=”Times” | Defines the font-name |
| color=”color-value” | color=”#eeff00” | Defines the font color |
| color=”color-name” | color=”red” | Defines the font color |
The <font> Tag Should NOT be Used
The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).
The World Wide Web Consortium (w3c) has removed the <font> tag from its recommend-dations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.
HTML Styles
With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.
How to Use Styles
When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
External Style Sheet:
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look to an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head>
<link rel=”stylesheet” type=”text/css”
Href=”mystyle.css”>
</head>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal style sheet in the head section with the <style> tag.
Inline Style
An internal style sheet should be used when a unique style is to applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<p style=”color: red; margin-left: 20px”>
This is a paragraph
</p>
Style Tags
| Tag | Description |
| <style> | Defines a style definition |
| <link> | Defines a resource reference |
| <div> | Defines a section in a document |
| <span> | Defines a section in a document |
| <font> | Deprecated. Use styles instead |
| <basefont> | Deprecated. Use styles instead |
| <center> | Deprecated. Use styles instead |