What Is An HTML: Language Markup Tags How To Display The Page

What is an HTML
HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
HTML Tags
HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>This is an example of <b>bold</b> text
HTML PAGE STRUCTURE

All normal webpages consist of a head and a body.
The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page.
Finally, all web pages have an <html> tag at the beginning and the end, telling the browser where the document starts and where it stops.
HTML PAGE STRUCTURE contd..

The most basic code - the code you will use for any page you make, is shown below: <html> <head>  <Title>This is a Title </Title> </head> <body>  This is a Body </body> </html>
HTML PAGE STRUCTURE contd..

Basic Web pages output is like shown below:
HEAD SECTION
The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines. Quite often the head section contains JavaScript which is a programming language for more complex HTML pages. Finally, more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the layout of major websites.
BODY SECTION
The body of the document contains all that can be seen when the user loads the page. In the rest of this tutorial you can learn in detail about all the different aspects of HTML, including: Text

Formatting Resizing Layout Listing To local pages To pages at other sites To bookmarks
Links

BODY SECTION
Images Inserting images (GIF and jpg)
Adding a link to an image
Backgrounds
Colors Images Fixed Image

Tables Frames Forms Metatags
o Hexadecimal Colors o The last page in this introduction will give you an
overview of how to proceed with the HTML tutorial (and beyond)
Example1.htm <HTML>
<HEAD> <TITLE>First Page</TITLE> </HEAD> <BODY> <H1>Computer vs. Calculator</H1> The main difference between computer and calculator is that a Computer can take logical decisions but calculator can't. </BODY> </HTML> In the above Example, you have seen many tags like <HTML>,<HEAD>,<TITLE>,<BODY> and <H1>.
Output of Example1.htm
Text Formatting
Some HTML tags allow you to specify a Varity of option or attribute along with the basic tag itself. For example when we begin a paragraph with the <P> tag we can specify whether the text in that paragraph should be aligned to the left margin, right margin or center of the page. Lets see some more tags, which will solve our problems related to alignment and formatting: <DIV>...</DIV> - region of text to be formatted its attribute is:
ALIGN="..." align text to center, left or right.
<B>...</B> - to make text bold <I>...</I> - italicised text <S>...</S> strikethrough text <U>...</U> underlined text <BIG>...</BIG> large text
Text Formatting contd

<FONT>...</FONT> changes the font size and color its attributes are
SIZE="..." to change font size (1 through 7 or relative) COLOR="..." to change the color of font FACE="..." the font type
<TT>...</TT> teletype (or mono spaced) text
Example2.htm
<HTML> <HEAD><TITLE> EXAMPLE 2</TITLE></HEAD> <BODY> <B> This line is BOLD</B><BR> <U> This line is UNDERLINED</U><BR> <I> This line is ITALICS</I><BR> <S> Text is STRIKED</S><BR> This line is normal<BR> <BIG>The font of this line is BIG</BIG><BR> <SMALL>The font of this line is small</SMALL><BR>
Example2.htm
<DIV ALIGN="LEFT"> This line is aligned <B>left</B> </DIV> <DIV ALIGN="RIGHT"> This line is aligned <B>right</B> </DIV> <FONT SIZE="+5" COLOR="RED" FACE="NEW TIMES ROMAN"> Doeacc <U>Centre</U> Chandigarh </FONT> <FONT SIZE="+3" COLOR="BLUE" FACE="ARIAL"> <BR> Doeacc<I>Centre</I> Chandigarh </FONT> </BODY> </HTML>
Tags Continued
<HR> Horizontal ruler to separate sections of web page its attributes are

ALIGN="..." deprecated control alignment (LEFT,CENTER,RIGHT,JUSTIFIED). NOSHADE="..." displays a ruler as a solid color. SIZE="..." size of the ruler. WIDTH="..." width of the ruler.
<BR> Line break <P>...</P> defines a paragraph
ALIGN="..." controls alignment (LEFT,CENTER,RIGHT,JUSTIFY). WIDTH="..." width of the formatted text
<PRE>...</PRE> displays preformatted text
<SUB>...</SUB> creates subscript <SUP>...</SUP> creates superscript
Example5.htm
<HTML> <HEAD><TITLE>Example 5</TITLE></HEAD> <BODY> <H3 ALIGN="CENTER"> Test of different HTML tags</H3> <HR ALIGN="CENTER"> Quadratic equation : <B>A<SUP>2</SUP>+B<SUP>2</SUP>=A<SUP>2</SUP> +B<SUP>2</SUP>+2AB</B> <P> Chemical Equation : <B>H<SUB>2</SUB>+O=H<SUB>2</SUB>O <P> Quadratic equation tells us the formula of algebra. Chemical equation shows one chemical reaction <P> <PRE> Quadratic equation tells us the formula of algebra. Chemical equation shows one chemical reaction </PRE> </BODY> </HTML>
Hyperlink
An element in an electronic document that links to another place in the same document or to an entirely different document. When, you click on the hyperlink to follow the link. Hyperlinks are the most essential ingredient of all hypertext systems, including the World Wide Web. The tags used to produce hyperlinks are the <a> and </a>. The <a> tells where the link should start and the </a> indicates where the link ends.
Types of Hyperlinks
Linking to other Web pages Links within a page Links to a specific part of another page E-mail links
Linking to other pages

These Hypertext links are those underlined words that take you from one Web page to another when you click them with your mouse. If your website has several pages, you need to provide links from one to the other, the tag to create link is called <A>, which stands for "anchor" it also defines links <A>...</A> defines links and anchors its attributes are

NAME="..." defines an anchor HREF="..." the URL of the linked resource TARGET="..." determines where the resource will be displayed
Example6.htm
<HTML> <HEAD><TITLE>RCC - Example 6</TITLE></HEAD> <BODY> <H2 ALIGN="CENTER">Doeacc Centre Chandigarh</H2> <HR ALING="CENTER" width="300"> <DIV ALIGN="CENTER"> Doeacc Centre Chandigarh a setup of National Informatics Centre, Planning Commission, govt. of India was set up in 1978 to promote use of computers. It is one of the pioneer computer centre of this country. </DIV> <P> <A HREF="HEAD.HTML">Head Office</A><BR> <A HREF="BRANCH.HTML">Branch Office</A><BR> <A HREF="ACHIEVE.HTML">ACHIEVEMENTS</A> </BODY> </HTML>
Links within a page

These hyperlinks use the <A>...</A> tag to create links between HTML pages This will show you how to use the same tag to allow readers to jump between different parts of a single page. For Example- you put a table of contents at the top of page or put a link at the bottom of a page that returns you to the top. <A NAME="TOP"></A> It is a different way to use the <A>...</A> anchor tag it gives a name to specific point on the page where the tag occurs
<A HREF="#TOP">Go Top </A>

The # symbol means that the word "Top" refers to a named anchor point within the current document, rather than a separate page, so when the reader clicks the Web browser will display the part of the page starting with the <A NAME="#Top"> tag
Example7.htm <HTML>
<HEAD><TITLE>DOEACC CENTREExample 7</TITLE></HEAD> <BODY> <H1 ALIGN="CENTER">DOEACC Centre</H1> <HR WIDTH="400" align="CENTER"> <A NAME="TOP"></A> DOEACC Centre, Chandigarh offers many short term, long term and Corporate courses. Click the links given below if you want to know more about courses. <BR> <A HREF="#Short">Short term courses</A> || <A HREF="#Long">Long term courses</A> || <A HREF="#Cor">Corporate courses</A> <HR> <A NAME="Short"></A>
Contd..term courses</U><BR> <U>Short

DOEACC CENTRE Chandigarh offers short-term courses <OL> <LI> Use of Personal Computer <LI>'C' Language <LI>'C++" Language <LI>Visual Basic <LI>Oracle/Dev. 2000 <LI> AutoCAD <LI> Internet and Web Designing </OL> <A HREF="#Top">Back</A><P> <A NAME="Long"></A>
<U>Long term courses</U><BR> DOEACC CENTRE Chandigarh offers courses following
following
long-term
Contd
<OL> <LI> P.G.D.C.A <LI> O Level <LI> A Level <LI> B Level <LI> C Level </OL> <A HREF="#Top">Back</A><P> <A NAME="Cor"></A> <U>Corporate courses</U><BR> DOEACC CENTRE Chandigarh offers following corporate courses <OL> <LI>Use of Personal Computer <LI>Courses according to their requirement </OL> <A HREF="#Top">Back</A><P> </BODY>
Links to a specific part of another page

If you want to link your current web page to the other part of another web page this facility is also provided by HTML For the same you should include the address or name of that web page followed by # and the anchor name. For Example: <A HREF="SEVEN.HTM#Short">Short term courses</A> when you click on the "Short term courses" it opens the web page named "SEVEN.HTM" and moves directly to the point where <A NAME="Short"></A>
Example8.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 8</TITLE></HEAD> <BODY> This example shows you how to make link to the other web page.<BR> <A HREF="SEVEN.HTM#Short">Short term courses</A><BR> <A HREF="SEVEN.HTM#Long">Long term courses</A><BR> <A HREF="SEVEN.HTM#Edu">Corporate courses</A>
E-mail links
In addition to linking between pages and between parts of single page the <A>...</A> tag allows you to link your email address. This is the simplest way to enable readers of your Web pages to talk back to you.
<A HREF = mailto:buddhiman@hotmail.com > buddhiman@hotmail.com </A>

The above line links to bookseller's e-mail address. When any user clicks on "buddhiman@hotmail.com" then a window appears on screen in which user types a message or places his order that will be immediately sent to bookseller.
Example9.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 9 </TITLE></HEAD> <BODY> <H1 ALIGN="CENTER"><FONT COLOR="BLUE">Computer Books Store</FONT></H1> <HR ALIGN="CENTER" WIDTH="300"> The Computer Books Store has now come to your city a large variety of books available on different topics. Just step in and find yourself in the new world of books. You can contact me at e-mail: <A HREF=mailto:buddhiman@hotmail.com > buddhiman@hotmail.com</A> <BR> place your orders on internet and the delivery will be in 24 hours. <BR> <H1 ALIGN="CENTER"><FONT
Graphics-Background and text colors
To make pages with background and text colors of your choice. To specify the background color for a page and text colors you have to do the following things
<BODY>...</BODY> encloses the body (text and tags) of the HTML document its attributes are
BACKGROUND="..." name or the address of the image to tile on the page background BGCOLOR="..." the color of the page background TEXT="..." the color of the page's text ALINK="..." the color of activated link VLINK="..." the color of followed link LINK="..." the color of unfollowed links
Example10.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 10</TITLE></HEAD> <BODY BGCOLOR="lightyellow" TEXT="maroon" LINK="navy" VLINK="red" ALINK="green"> <H1 ALIGN="CENTER">DOEACC Centre</H1> <HR WIDTH="400" align="CENTER"> <P> DOEACC Centre, Chandigarh offers many short term, long term And educational courses. Click the links given below if you want to know moreabout courses. <BR><P> <A HREF="#Short">Short term courses</A><P> <A HREF="#Long">Long term courses</A><P> <A HREF="#Cor">Corporate courses</A><P> <HR>
Clickable Images
We know that the <A>...</A> tag makes the text links, the same tag can make any image into a clickable link to another page. But first I will show you how to include an image in the web page, we will do it with the help of <IMG>...</IMG> tag <IMG>...</IMG> includes an image in the document its attributes are

SRC="..." the address of the image ALT="..." alternative text to display ALIGN="..." deprecated control alignment (LEFT, CENTER, RIGHT, JUSTIFY) HEIGHT="..." height of the image WIDTH="..." width of the image BORDER="..." border width HSPACE="..." the horizontal space separating the image from other content VSPACE="..." the vertical space separating the image from other content USEMAP="..." name of the image map specification used with <MAP> &
Example 11.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE Example 11</TITLE></HEAD> <BODY BGCOLOR="YELLOW"> <H2 ALIGN="CENTER"><FONT COLOR="BLUE">Computer Books Store</FONT></H2> <HR ALIGN="CENTER" WIDTH="300"> <PRE> The Computer Books Store has now come to your city a large variety of books available on different topics. Just step in and find yourself in the new world of books. You can contact me at e-mail:<A HREF="mailto:buddhiman@hotmail.com"> buddhiman@hotmail.com</A> </PRE> click the button for the listing of books available. <A HREF="BOOKLIST.HTML"> <IMG SRC="BOOK.BMP" BORDER="NONE" ALT="CLICK ME" ALIGN="CENTER"></A> <BR> place your orders on internet and the delivery will be in 24 hours. <H2 ALIGN="CENTER"><FONT COLOR="BLUE">Thanks</FONT></H2> </BODY> </HTML>
Example12.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 12</TITLE></HEAD> <BODY BGCOLOR="YELLOW"> <H2 ALIGN="CENTER">Pictures</H2> <IMG SRC="ONE.BMP" ALIGN="LEFT" BORDER=1 HSPACE=20 VSPACE=5><BR> <DIV ALIGN="LEFT">This is picture 1</DIV><BR> <BR> <BR> <IMG SRC="TWO.BMP" ALIGN="RIGHT" BORDER=1 HSPACE=20 VSPACE=0> <DIV ALIGN="LEFT">This is picture 2</DIV> </BODY> </HTML>
Tables
One of the most powerful tools for creating web page designs the table, which allows us to arrange text and graphics into multiple columns and rows. Here we will learn how to build HTML tables and how to control the spacing, layout and appearance of the table you create. To make tables you have to start with <TABLE>...</TABLE> tag.
Table Elements
Element <TABLE> ... </TABLE> <CAPTION> ... </CAPTION> Description defines a table in HTML. If the BORDER attribute is present, your browser displays the table with a border. defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table. NOTE: Any kind of markup tag can be used in the caption. specifies a table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information. defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TR> ... </TR>
<TH> ... </TH>
<TD> ... </TD>
defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes at the end of this table for more information.
Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in a <TR> ... </TR>.
Attribute ALIGN (LEFT, CENTER, RIGHT) VALIGN (TOP, MIDDLE, BOTTOM) COLSPAN=n Description Horizontal alignment of a cell. Vertical alignment of a cell. The number (n) of columns a cell spans. The number (n) of rows a cell spans. Turn off word wrapping within a cell.
ROWSPAN=n
NOWRAP
Tables example
Code <TH> cell contents </TH> <TH> cell contents </TH> Meaning first cell in row 1 (a head) last cell in row 1 (a head)
</TR>
<TR> <TD> cell contents </TD> <TD> cell contents </TD> </TR> <TR> <TD> cell contents </TD> <TD> cell contents </TD>
end of first row definition

start of second row definition first cell in row 2 last cell in row 2 end of second row definition start of last row definition first cell in last row ... last cell in last row
</TR>
</TABLE>
end of last row definition

end of table definition
<TABLE>...</TABLE>
Creates a table that can contain any number of rows its attributes are: BORDER="..." indicates the width in pixels of the table borders. CELLSPACING="..." the amount of space between the cells in the table. CELLPADDING="..." the amount of space between the edges of the cell and its contents. WIDTH="..." the width of the table on the page, in either exact pixel values or as a percentage of page width. GCOLOR="..." background color of all cells in the table that do not contain their own background and bgcolor attributes. BACKGROUND="..." background image to tile within all cells in the table that do not contain their own background and bgcolor attributes.
<TR>...</TR>
defines a table row
Defines a table row, containing one or more cells its attributes are ALIGN="..." the horizontal alignment of the contents of the cells within this row. Possible values are LEFT, RIGHT, CENTER VALIGN="..." the vertical alignment of the contents of the cell within this row. Possible values are TOP, MIDDLE and BOTTOM BGCOLOR="..." background color of all cells in the table that do not contain their own background and bgcolor attributes. BACKGROUND="..." background image to tile within all cells in the table that do not contain their own background
<TD>...</TD>
data cell
defines a table
ALIGN="..." the horizontal alignment of the contents of the cells. Possible values are LEFT, RIGHT, CENTER. VALIGN="..." the vertical alignment of the contents of the cells. Possible values are TOP, MIDDLE and BOTTOM. ROWSPAN="..." the number of rows this cell will span. COLSPAN="..." the number of columns this cell will span. WIDTH="..." the width of the column of cells in either exact pixel values or as a percentage of
<TH>...</TH>
attributes are
defines a table heading cell its
ALIGN="..." the horizontal alignment of the contents of the cells. Possible values are LEFT, RIGHT, CENTER. VALIGN="..." the vertical alignment of the contents of the cells. Possible values are TOP, MIDDLE and BOTTOM. ROWSPAN="..." the number of rows this cell will span. COLSPAN="..." the number of columns this cell will span. WIDTH="..." the width of the column of cells in either exact pixel values or as a percentage of page width. BGCOLOR="..." background color of the cell. BACKGROUND="..." background image to tile with the cell.
Example14.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 14</TITLE></HEAD> <BODY> <DIV ALIGN="CENTER"> <B>Time Table</B> <P> <TABLE BORDER=2 CELLPADDING=5 CELLSPACING=5> <TR><TH>City<TH>Distance<TH>Fair <TR><TD>Bhopal<TD>500 k.m.<TD>Rs/- 200.00 <TR><TD>Delhi<TD>450 k.m.<TD>Rs/- 175.00 <TR><TD>Chandigarh<TD>750 k.m.<TD>Rs/- 300.00 <TR><TD>Kanpur<TD>75 k.m.<TD>Rs/- 25.00 </TABLE> </DIV> </BODY> </HTML>
Example15.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 15</TITLE></HEAD> <BODY> <DIV ALIGN="CENTER"> <B>Formula Table</B> <P> <TABLE BORDER=2 CELLPADDING=5> <TR><TH> Shapes <TH> Name<TH>Formula <TR ALIGN="CENTER"> <TD> <IMG SRC="TRIANGLE.BMP"> <TD> Triangle <TD>(Height * Base)/2 <TR ALIGN="CENTER"> <TD> <IMG SRC="CIRCLE.BMP"> <TD> Circle <TD>Pi * r<SUP>2</SUP> <TR ALIGN="CENTER"> <TD> <IMG SRC="SQUARE.BMP"> <TD>Square<TD>Side<SUP>2</SUP> </TABLE> </BODY> </HTML>
Using tags in tables Example

<html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr><td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body></html>
Output -
Using tags in tables Example
Forms
Forms are used to collect information from the people who read our web pages. A web form allows us to receive feedback, orders or other information from the readers of our web page. Every form begin with the <FORM>...</FORM> tag We will also use some other useful tags like:
<INPUT> <SELECT>...</SELECT> <OPTION> and <TEXTAREA>...</TEXTAREA> as controls in the HTML Forms.
<FORM>...</FORM>
<FORM>...</FORM> indicates an input form its attributes are: ACTION="..." address of the script to process the form input
METHOD="..." how the form input will be sent to the server normally set to POST rather than GET
<INPUT>...</INPUT>
<INPUT>...</INPUT> and input element for a form its attributes are: TYPE="..." the type for this input widget. Possible values are CHECKBOX, RADIO, RESET, SUBMIT,HIDDEN, FILE and TEXT NAME="..." the name of this item as passed to the script VALUE="..." for a text item, the default value; for a checkbox or radio button, the value to be submitted with the form; for reset or submit buttons, the label for the button itself SRC="..." the source file for an image (checked) for checkboxes and radio buttons, indicates that this item is checked SIZE="..." the width, in characters, of a text input region MAXLENGTH="..." the maximum number of characters that can be entered into a text region ALIGN="..." how the text or image will align
<SELECT>...</SELECT>
<SELECT>...</SELECT> creates a menu or scrolling list of possible items its attributes are NAME="..." the name that is passed to the script SIZE="..." the number of elements to display. If SIZE is indicated, the selection becomes a scrolling list. If no SIZE is given, the selection is popup menu MULTIPLE"..." allows multiple selections from a list
<OPTION>
<OPTION> indicates a possible item within a <SELECT> element
(SELECTED) with this attribute included, the <OPTION> will be selected by default in the list VALUE="..." the value to submit if this <OPTION> is selected when the form is submitted
<TEXTAREA>...</TEXTAREA>
<TEXTAREA>...</TEXTAREA> indicates a multi line text entry from element. Default text can be included its attributes are NAME="..." the name to be passed to the script ROWS="..." the number of rows this text area displays COLS="..." the number of columns (characters) this text area displays
Example16.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE - Example 16</TITLE></HEAD> <BODY> <B><DIV ALIGN="CENTER"> Employment Exchange</DIV></B> <PRE> <FORM METHOD="POST" ACTION="mailto:employmentexchaNge@Chandigarh.com"> First Name : <INPUT NAME="NAM1" TYPE="TEXT" SIZE="25"> Second Name : <INPUT NAME="NAM2" TYPE="TEXT" SIZE="25"> Father's Name : <INPUT NAME="FNAM" TYPE="TEXT" SIZE="50"> Date of Birth : <INPUT NAME="DOB" TYPE="TEXT" SIZE="10"> Sex Code : <INPUT NAME="SC1" TYPE="CHECKBOX"> M <INPUT NAME="SC2" TYPE="CHECKBOX"> F Qualification : <SELECT NAME="QUALI"> <OPTION> High School <OPTION> Intermediate <OPTION> Graduate <OPTION> Post Graduate <OPTION> Engineer <OPTION> PhD </SELECT>
Example16.htm
Stream <SELECT NAME="STR"> <OPTION> Science <OPTION> Arts <OPTION> Commerce <OPTION> Computers </SELECT> Percentage Marks : <INPUT NAME="PM" TYPE="TEXT" SIZE="5"> Nationality : <INPUT NAME="NAT" TYPE="TEXT" SIZE="15"> Religion : <INPUT NAME="REG" TYPE="TEXT" SIZE="15"> Category : <SELECT NAME="CAT"> <OPTION> SC <OPTION> ST <OPTION> General <OPTION> OTHERS </SELECT> Mailing Address : <INPUT NAME="ADR1.1" TYPE="TEXT" SIZE="50"> <INPUT NAME="ADR1.2" TYPE="TEXT" SIZE="50"> Permanent Address : <INPUT NAME="ADR2.1" TYPE="TEXT" SIZE="50"> <INPUT NAME="ADR2.2" TYPE="TEXT" SIZE="50"> <INPUT TYPE="SUBMIT" VALUE="OK"> <INPUT TYPE="RESET" VALUE="CLEAR"> </PRE> </FORM> </BODY> </HTML>
contd
Frames
Frames overcome this limitation by dividing the browser windows into multiple HTML documents. Frames are like tables in that they allow you to change text and graphics into rows and columns. But unlike a table cell, any frame can contain links that change the contents of other frames(or itself). For example one frame could display an unchanging index page while other frame could change based on which links the reader clicks. Frames are basically a way of arranging and presenting several web pages at once.
Creating a Frameset document

A frameset document is an HTML page that instructs the web browser to split its window into multiple frames, and specifies which web page should be displayed in each frame. <FRAMESET>...</FRAMESET> divides the main window into a set of frames that can each display a separate document its attributes are
<FRAMESET>...</FRAMESET>
ROWS="..." split the window or frameset vertically into number of rows specified by a number (such as 7), a percentage of the total window width (such as 25%), or an asterisk (*) indicating that a frame should take up all the remaining space. COLS="..." works similar to rows, except that the window or frameset is split horizontally into columns FRAMESPACING="..." space between frames in pixels FRAMEBORDER="..."specifies whether to display the border for the frames. Options are yes or no. BORDER="..." size of the frame border in pixels
<FRAME>...</FRAME>
Within the <FRAMESET>...</FRAMESET> tags, you should have a <FRAME> tag indicating which HTML document to display in each frame. You don't need to specify </FRAME> tag. <FRAME> defines a single frame within a FRAMESET>, its attributes are: SRC="..." the URL of the document to be displayed in this frame NAME="..." a name to be used for targeting this frame with the target attribute in <A HREF> links
Example17.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE Example 17</TITLE></HEAD> <FRAMESET COLS="20%,75%"> <FRAME SRC="INDEX.HTM"> <FRAME SRC="BLANK.HTM" NAME="MAIN"> </FRAMESET> </HTML>
Nested Frames
By nesting one frameset within another you can create rather complex frame layouts. Next Example 18 tells you how to nest frames.
Example18.htm
<HTML> <HEAD><TITLE>DOEACC CENTRE Example 18</TITLE></HEAD> <FRAMESET COLS="20%,80%"> <FRAME SRC="INDEX.HTM"> <FRAMESET ROWS="30%,70%"> <FRAME SRC="LOGO.HTM" NAME="LOGO"> <FRAME SRC="BLANK.HTM" NAME="MAIN"> </FRAMESET> </FRAMESET>
Output of the example18.htm

What Is An HTML: Language Markup Tags How To Display The Page

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

What Is An HTML: Language Markup Tags How To Display The Page

Diunggah oleh

Hak Cipta:

Format Tersedia

What is an HTML

HTML PAGE STRUCTURE

HTML PAGE STRUCTURE contd..

HTML PAGE STRUCTURE contd..

Tables Frames Forms Metatags

ALIGN="..." align text to center, left or right.

Text Formatting contd

<TT>...</TT> teletype (or mono spaced) text

<BR> Line break <P>...</P> defines a paragraph

ALIGN="..." controls alignment (LEFT,CENTER,RIGHT,JUSTIFY). WIDTH="..." width of the formatted text

<PRE>...</PRE> displays preformatted text

<SUB>...</SUB> creates subscript <SUP>...</SUP> creates superscript

Linking to other pages

Links within a page

<A HREF="#TOP">Go Top </A>

Contd..term courses</U><BR> <U>Short

Links to a specific part of another page

<A HREF = mailto:buddhiman@hotmail.com > buddhiman@hotmail.com </A>

Graphics-Background and text colors

<TR> ... </TR>

<TH> ... </TH>

<TD> ... </TD>

end of first row definition

end of last row definition

defines a table row

defines a table heading cell its

Using tags in tables Example

Using tags in tables Example

Creating a Frameset document

Output of the example18.htm

Anda mungkin juga menyukai