Welcome to my SITE - www.bhmadhukar.cjb.net

HTML

HTML Tutorial - [ Beginners ]

Simple code to explain about TABLE, CSS, FRAMESET

» Simple HTML document - [View Content] - beginner
» Building a basic table using HTML - [View Content] - beginner
» Simple HTML document that demonstrates the usage of FRAMESET element - [View Content] - beginner
» Know about various methods of using CSS with HTML document - [View Content] - beginner
» Simple example of CSS to make the text in different colors - [View Content] - beginner

Simple HTML Document

HTML Stands for Hypertext Markup Language. Basically, a HTML document consists of two parts; namely, a header and a body. A header is used to specify the title of the document, the document's owner, and other information dealing with the document. The body portion of the document is where all the displayable content goes on.

To begin a HTML document, open NOTEPAD

START--->Programs--->Accessories--->Notepad

After that type the given listing,

<HTML>
<HEAD>
<TITLE>The title goes here</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P>This is SAMPLE Document that demonstrates how to create
a small HTML Document.</P>
</BODY>
</HTML>

Save the file by choosing File--->Save As (if you are first time saving). Give the file name as 'test.htm' or 'test.html'; in the Save As Type, choose 'All Files'. And click on Save to save the file.

Open 'Internet Explorer' and open it. You will find the result.

Top

HTML Tables

Tables provide an efficient way to handle and organize data and Web pages, which formerly would have been accomplished by images and pre-formatted text tags. See the given below listing

<html>
<head>
<title>Basic Table</title>
</head>
<body>
<table border=1 bgcolor="LIME">
<tr><th>Name of the Candidate</th>
<th>Age of the Candidate</th>
<th>Class Studied</th></tr>
<tr><td>Priya</td>
<td> 25</td>
<td>Graduate</td></tr>
</table>
<body>
</html>

Table has several attributes

ALIGN:- Specifies the alignment of the table or text in the table. Values of "left" and "right" are supported.
BGCOLOR:- Specifies the background color of the table, which uses either Internet Explorer colors or colors given by hexadecimal RBG.
BACKGROUND:- Specifies an image to use as a background of table cells. The image is tiled.
BORDERCOLOR:- Specifies the color of the border of the table. Works similarly to BGCOLOR.
VALIGN:- Specifies where the text is to be vertically aligned in each cell. Values for this attribute are "top", "bottom", "middle" and "baseline".
COLSPAN:- Specifies how many columns a particular cell should span across (used with <TD> and <TH> only).
ROWSPAN:- Specifies how many rows a particular cell should span across (used with <TD> and <TH> only).
WIDTH:- Similar to COLSPAN, except that pixels or a percentage of the screen are used for the span value.
HEIGHT:- Similar to ROWSPAN, except that pixels or a percentage of the screen are used for the span value.

Top

HTML Frame Sets

Frame sets are an efficient, neat, and effective way to organize and present information in an HTML document. A frame set is relatively simple to understand. Frame sets are used within the <BODY> tag and replace any content which would otherwise exist inside the body of a document. There are two parts to a frame set.

Let us see an example;

Listing 1.1: Main.htm

<HTML><HEAD>
<TITLE>This Document Demonstrates Frames</TITLE></HEAD>
<FRAMESET COLS="30%,*">
<FRAME SRC="frmfile1.htm" SCROLLING="no" NAME="frame1" FRAMEBORDER="1">
<FRAME SRC="frmfile2.htm" SCROLLING="yes" NAME="frame2" FRAMEBORDER="1" >
</FRAMESET>
</HTML>

Listing 1.2 FRMFILE1.HTM First File Used with Frames

My File</FONT></CENTER>

<pre>
This is sample <i>HTML</i> Document that demonstrates how to
create frames using FRAMESET And FRAME Tags.
</pre>
</BODY>

Listing 1.3 FRMFILE2.HTM Second File Used with Frames

<BODY BGCOLOR="BLUE" TEXT="LIME">
This is Marvalous!!! Learning HTML is So Easy!!!!
</BODY>

Top

How to Use Style Sheets

This section covers the syntax of style sheets, how and when to use them. The syntax for style sheets is a little different from the syntax of HTML but it is almost as simple. There are three major ways to use style sheets with an HTML document and they are in the following list.

Pre-defined styles in a separate file: You can predefine styles in a file to use on a page. This is most efficient when there are several pages that need to comply to the same style.

Inline-defined styles: You can define styles for different tags within the document as well. With the current implementation of Internet Explorer, however, if there is a file-specified style format, it will override any inline styles.

Tag-specified styles: There are a series of HTML tags for style sheets that you can use in the body of your document to change the style of text and other entities. These tags allow you to change the style the same way as inline styles and styles stored in a separate file.

Syntax:-

This section covers the general syntax for defining styles for different elements in HTML. When specifying a series of styles that are located in a file you have to use the <LINK> tag in this format:

The <LINK> tag is used to specify files that are related to the document with that link tag.

Attribute Function

REL Specifies a relationship for the <LINK> tag. In this case, the file specified in the <LINK> tag has the relationship "style" which, of course, indicates that the corresponding file is a style sheet.

TYPE Specifies a MIME type which states that the text in the file specified is a style sheet. The value "text/css" is used to indicate that the file is a style sheet.

SRC Specifies the name of the file to use. This can either be the name of the file (i.e., ex.css) or the URL to that file (http://www.xyz.org/styles/ex.css).

Top

Simple example to demonstrate how to create a Style Sheet

<html>
<heaD>
<style type="text/css">
h1.tcolor {color: red}
h2.t1color {color: blue}
</style>
</head>
<body>
           <h1 class="tcolor">This is test</h1>
           <h2 class="t1color">This is another example</h2>
</body>
</html>

                                                                                                                                                                           Top

"Fundamentals are the Route to the Destination" - BHMK

Go Home