Unit - I Hypertext Markup Language

UNIT I
HYPERTEXT MARKUP LANGUAGE

INTRODUCTION
HTML (Hypertext Markup Language) is used to create document on the
World Wide Web. It is simply a collection of certain key words called Tags
that are helpful in writing the document to be displayed using a browser on
Internet.
Hypertext is text which contains links to other texts. Markup languages are
designed for the processing, definition and presentation of text. The
language specifies code for formatting, both the layout and style, within a
text file. The code used to specify the formatting is called tags.
It is a platform independent language that can be used on any platform
such as Windows, Linux, Macintosh, and so on. To display a document in
web it is essential to mark-up the different elements (headings, paragraphs,
tables, and so on) of the document with the HTML tags. To view a mark-up
document, user has to open the document in a browser.
A browser understands and interpret the HTML tags, identifies the structure
of the document (which part are which) and makes decision about
presentation (how the parts look) of the document.
HTML also provides tags to make the document look attractive using
graphics, font size and colors. User can make a link to the other document
or the different section of the same document by creating Hypertext Links
also known as Hyperlinks.
Points to be remembered for 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.
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 normally come in pairs like <b> and </b>.
They are not case sensitive i.e., <head>, <HEAD> and <Head> is
equivalent.
If a browser not understands a tag it will usually ignore it.
White spaces, tabs and newlines are ignored by the browser.
Basic HTML Tags:

1. HTML Tag: <HTML>
The <HTML> tag encloses all other HTML tags and associated text within the
document.
The format is:
<HTML> ---- other tags or text -------
</HTML>
Most HTML tags have two parts, an opening tag and closing tag. The closing
tag is the same as the opening tag, except for the slash. ( </HTML>).
2. HEAD Tag: <HEAD>
The HEAD tag comes after the HTML start tag. It contains TITLE tag to give
the document a title that displays on the browsers title bar at the top.
The <title> element:
Defines a title in the browser toolbar.

Provides a title for the page when it is added to favorites.
Displays a title for the page in search-engine results.
The Format is:

<HEAD>
<TITLE>
Name of the title
</TITLE>
</HEAD>
3. BODY Tag: <BODY>

The BODY tag contains all the text and graphics of the document with all
the HTML tags that are used for control and formatting of the page.
The Format is:
<BODY>
Web Document contents
</BODY>
Creating and executing html document:

1. An HTML document can be created using a text editor, Notepad or
WordPad.
2. All the HTML documents should have the extension .htm or .html.
3. It requires a web browser like Internet Explorer or Netscape
Navigator/Communicator to view the document.
Example:
Open text editor Notepad (click on Start->AllPrograms->Accessories>Notepad)
Write the code using HTML tags.
Filename.html
<HTML>
<HEAD>
<TITLE> html page </TITLE>
</HEAD>
<BODY>
WELCOME TO VIGNAN UNIVERSITY
</BODY>
</HTML>
Open the file with any web browser.
It shows following output.
3.1 Attributes of <BODY>:

BGCOLOR: Used to set the background color for the document using color
name or #hexadecimal number.
Example:
<BODY BGCOLOR="red"> ------- </BODY>
TEXT: Used to set the color of the text of the document.
Example:
<BODY TEXT="red"> ------- </BODY>
MARGINS:
LEFTMARGIN: Sets a left hand margin for your body element
Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left
hand side of the page.
</BODY>
TOPMARGIN: Sets a margin along the top of your body element.
Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of
the page.
</BODY>
BACKGROUND:
It is used to point to an image file (the files with an extension .gif, .jpeg) that
will be used as the background of the document. The image file will be tiled
across the document.
Example:
<BODY BACKGROUND="filename.gif"> ----------- </BODY>
Program: bodytsg.html
<HTML>
<HEAD>
<TITLE> body tag attributes </TITLE>
</HEAD>
<BODY BACKGROUND="D:\winter.jpg" text="red"
TOPMARGIN ="75" LEFTMARGIN="75">
Vignan University is an institute, which provides quality
education in a diverse and intellectually stimulating
environment. It imparts value addition training to students to
make them competent and inspired engineers. The Institute
celebrates the power of knowledge, cultivates vision and
encourages new ideas, besides aiming to inculcate human
values and build awareness about the self and society around.
</BODY>
</HTML>
Output:
COLOR:
Color can be used for background, elements and links. To change the color
of links or the page background hexadecimal values are placed in the
<body> tag.
<body bgcolor = #nnnnnn text = #nnnnnn link= #nnnnnn
vlink=#nnnnnn alink= #nnnnnn>
The vlink attribute sets the color of links visited recently, alink the color of a
currently active link. The six figure hexadecimal values must be enclosed in
double quotes and preceded by a hash(#).
Generally tags are divided into two types container tags and empty tags.
4. Container Tags: Tags which have both the opening and closing i.e.
<TAG> and </TAG> are called container tags. They hold the text and other
HTML tags in between the tags. The <HTML>, <HEAD>, <TITLE> and
<BODY> tags are all container tags.
Example:
<TAG>
This is a container tag. It holds both the text and
HTML tags.
</TAG>
5. Empty Tags: Tags, which have only opening and no ending, are called
empty tags. The <HR>, which is used to draw horizontal, rule across the
width of the document, and line break <BR> tags are empty tags.
6. Header Tags: <H1>.............<H6>
HTML has six header tags <H1>, <H2>...........<H6> used to specify section
headings. Text with header tags is displayed in larger and bolder fonts than
the normal body text by a web browser. Every header leaves a blank line
above and below it when displayed in browser.
Program:
<HTML>
<HEAD>
<TITLE> Headings </TITLE></HEAD>
<BODY>
<H1> VIGNAN UNIVERSITY </H1>
</BODY>
</HTML>
Output:
6.1 Attribute of Heading tags:

The ALIGN = left | center | right attribute has been added to the <H1>
through to <H6> elements.
Example:<H1 ALIGN=center>this is a heading</H1>
7. Paragraph tag: <P>
This tag <P> indicates a paragraph, used to separate two paragraphs with a
blank line.
Example:
<P> Welcome to the world of HTML </P>
8. Break Tag: <BR>
The empty tag <BR> is used, where the text needs to start from a new line
and not continue on the same line. To get every sentence on a new line, it is
necessary to use a line break.
Example:
<BODY>
VIGNAN UNIVERSITY<BR>GUNTUR
</BODY>
Output:
VIGNAN UNIVERSITY
GUNTUR
9. Preformatted Text Tag: <PRE>
<PRE> tag can be used, where it requires total control over spacing and line
breaks such as typing a poem. Browser preserves the space and line break
in the text written inside the tag.
Example:
<PRE>
VIGNAN UNIVERSITY
VIGNAN INSTITUTE OF INFORMATION TECHNOLOGY
VIGNAN INSTITUTE OF ENGINEERING FOR WOMENS
</PRE>
Output:
VIGNAN UNIVERSITY
VIGNAN INSTITUTE OF INFORMATION TECHNOLOGY
VIGNAN INSTITUTE OF ENGINEERING FOR WOMENS
10. Horizontal Rule Tag: <HR>
An empty tag <HR> basically used to draw lines and horizontal rules. It can
be used to separate two sections of text.
Example:
<BODY>
Horizontal rule. <HR>
The rest of the text
</BODY>
Output:
Horizontal rule.
__________________________________________________________________
The rest of the text
10.1 Attributes of HR:
SIZE: Determines the thickness of the horizontal rule. The value is given as
a pixel value.
WIDTH: Specifies an exact width of HR in pixels or percentages.
ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is
applicable if it is not equal to width of the page.
COLOR: Set the color of the Horizontal rule.
<HR ALIGN=''RIGHT'' WIDTH=''70%'' SIZE=''7" NOSHADE COLOR="BLUE">
11. Character Formatting Tags:
Boldface <B>
Italics <I>
Subscript <SUB>
Superscript <SUP>
Small <SMALL>
:
:
:
:
:
Displays text
Displays text
Displays text
Displays text
Displays text
normal font
in
in
in
in
in
BOLD
Italic
Subscript
Superscript
smaller font as compared to
Big <BIG>
Underline<U>
Center<center>
: Displays text in larger font as compared to normal

font.
: It displays underline on given text.
: Display text in center of the document.
12. FONT tag: <FONT>

By using <FONT> Tag we can specify the colors, size of the text.
12.1 Attributes of <FONT> :
COLOR: Sets the color of the text that will appear on the screen. It can be
set by giving the value as #rr0000 for red (in RGB hexadecimal format), or
by name.
SIZE: Sets the size of the text, takes value between 1 and 7, default is 3.
FACE: Sets the normal font type, provided it is installed on the users
machine.
Example: <FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>
Program:<HTML>
<HEAD>
<TITLE>Use
of
Character
Formatting
Text
Tags</TITLE>
</HEAD>
<BODY>
<H1> <I> Welcome to the world of Internet</I> </H1>
<FONT COLOR="BLUE" SIZE="4">
<U>Network of Networks</U>
</FONT>
</BODY>
</HTML>
Output:-
13. &amp
&lt
&gt
&nbsp
&quot
These are character escape sequence which are required if you want to
display characters that HTML uses as control sequences.
Example:
< can be represented as &lt.
2. LISTS
One of the most effective ways of structuring a web site is to use lists.
Lists provides straight forward index in the web site. HTML provides three
types of list i.e., bulleted list, numbered list and a definition list. Lists can
be easily embedded easily in another list to
provide
a
complex but
readable structures. The different tags used in lists are explained
below.
<li> ..</li>
The ordered(numbered) and unordered(bulleted) lists are
each made up of sets of list items. This tag is used to write
list items
HTML Supports several ways of arranging items in lists. The most commonly
used are:
i.
ii.
iii.
Ordered List (Numbered List)

Unordered List (Bulleted List)
Definition List (DL)
i. Ordered List <OL>:

Ordered list also called as Numbered list, is used to present a numbered list
of item in the order of importance or the item (paragraph) is marked with a
number.An ordered list must begin with the <OL> followed by an <LI> list
item tag.
<ol type=1 | a | I start=n>..</ol>
Attributes of <OL> tag:
TYPE: allows marking list items with different types. By default the list Item
markers are set to numbers 1, 2, 3 so on.
Other values of TYPE attribute are:
Type
Type
Type
Type
Type
=
=
=
=
=
A
a
I
i
1
Capital letter eg. A, B, C

Small letter eg. a, b, c,
Uppercase Roman Numbers eg. I, II, III
Lowercase Roman Numbers eg. i, ii, iii
eg. 1, 2, 3.
START: used for lists that need to start at values other than 1. START
always specified in default numbers, and is completed based on TYPE before
display, For example, If START =5 it would display either an E, e, V, v, or
5 based an TYPE attribute.
ii. Unordered List <UL>:
Unordered List also called as bulleted list, used to present list of items
marked with bullets. An unordered list starts with in <UL> followed by <LI>
(List Item) tag. Use of <UL> is very similar to <OL> (ordered list).
<ul type=disc | square | circle > ..</ul>
This tag is used for basic unordered list which uses a bullet in front of each
tag, everything between the tag is encapsulated within <li> tags.
Example:
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<body>
</html>
Output:
iii. Definition List:

A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list)
and <dd> (describes the item in the list):
<dl>.. </dl>
This tag is used for the third category i.e., definition list, where
numbers or bullet is not used in front of the list item, instead it uses
definition for the items.
<dt>..</dt>
This is a sub tag of the <dl> tag called as definition term, which is
used for marking the items whose definition is provided in the next
data definition.
<dd> .</dd>
This is a sub tag of the <dd> tag, definition of the terms are enclosed
within these tags. The definition may include any text or block.
Example:
<dl>
<dt>Coffee</dt>
<dd>-blackhotdrink</dd>
<dt>Milk</dt>
<dd>-whitecolddrink</dd>
</dl>
How the HTML code above looks in a browser:

Coffee
- black hot drink
Milk
- white cold drink
3. IMAGE
Image Tag <IMG>:
Images can be placed in a web page by using <IMG> tag.
<IMG SRC = image_URL>
SRC Source of the image file.
URL represents the image file with its location.
Other attributes used with <IMG> are: ALIGN: used to set the alignment of the text adjacent to the image. It takes
the following values:
LEFT - Displays image on left side and the subsequent text flows around the
right hand side of that image
RIGHT - Displays the image on the right side and the subsequent text flows
around the left hand side of that image
TOP - Aligns the text with the top of the image l ALIGN = MIDDLE - Aligns
the text with the middle of the image
BOTTOM - Aligns the text with the bottom of the image By default, the text
is aligned with the bottom of the image
HEIGHT and WIDTH:Height and Width of an image can be controlled by
using the HEIGHT and WIDTH attributes in the <IMG> tag .
HSPACE and VSPACE:White space around an image can be provided by
using HSPACE (Horizontal Space) and VSPACE (Vertical Space) attributes of
the <IMG> tag.
ALT (Alternative Text):This attribute is used to give alternative text that
can be displayed in place of the image.
BORDER:Border around the image can be controlled by using BORDER
attribute of <IMG> tag. By default image displays with a thin border. To
change the thickness or turn the border off, the value in pixels should set to
BORDER attribute.
ANCHOR TAG: <A>

Web pages are linked to one another through Hypertext Links.Section of text
or image in the HTML document can be linked to an external document or to
a specific place within the same document. The text or image that provides
such linkage is known as Hypertext or Hotspot.
<A HREF ="URL"> displaying text </A>
HREF (Hyper Link Reference) is a mandatory attribute used to refer the URL
of the resource. URL (Uniform Resource Locator) is an address tells the
browser about the file to link to. It identifies file locations (Addresses) on the
web or on the local hard drive. These addresses can be those of HTML
documents or elements such as images, scripts, applets and other files. It is
always enclosed in quotes.
The NAME Attribute:
The name attribute is used to create a named anchor. When using named
anchors we can create links that can jump directly into a specific section on
a page, instead of letting the user scroll around to find what he/she is
looking for.
Syntax :<a name="label">Text to be displayed</a>
The Target Attribute:
Browser windows can now have names associated with them. Links in any
window can refer to another window by name. With the target attribute, we
can define where the linked document will be opened.
Syntax :<A HREF="url.html" TARGET="window_name">Link text</A>
<STRIKE> ... </STRIKE>
Tag:
The <STRIKE> ... </STRIKE> element states that the enclosed text should
be displayed with a horizontal line striking through the text.
4. FRAMES:
The browser screen divides into a number of parts, which might be
completely independent. Each part of the screen is called frame and each
rectangle can hold a different document.
To implement frames, it needs more than one document. The MASTER
document contains the frame layout that determines just what users see
when they access the frame. There is not any content within the master
document instead, it contain one or more FRAMESET element that define
the frame layout, and FRAME element that specify just which document are
supposed to be loaded into which frame. The actual documents are separate
individual pages.
Frames documents are generated by:
FRAMESET Tag
FRAME Tag
4.1 <FRAMESET> Tag:
Frameset tag defines the number of columns and rows in a frameset.
Example:
<FRAMESET rows="20%, 70%, 10%">:The screen divide into three rows 20%
row is on top, 70% row is in the middle, and 10% row is on the bottom.
<FRAMESET cols="20%, 80%">:The screen divides into two columns one
20% on left and other 80% on right.
Percentage: - percentage of an available window space.
Pixels: - Absolute number of screen pixels.
Number and Asterisk: - Adjust the size of the specified column (1,2, 3 and
so on) to take the remaining space.
Example:
<FRAMESET COLS="290, 2*">
This says, "It gives the first column a width of 290 pixels and the second
column what ever is left".
4.2 <FRAME> Tag:

By using <FRAMESET>, used to define rows and columns all , but, nothing
shows up in them without the <FRAME>tag. The <FRAME> tag enables to
specify just what appears in row or column .
Example: <FRAME SRC="contents.html">
SRC (Source): Specifies the Web page that you want to display in the frame.
NAME: It enables you to name a frame, so that, it can function as the target
for a link.
FRAMEBORDER: Specifies whether or not the frames has a border. Choose
1(yes) or 0 (no). The default is 1.
MARGINWIDTH: Add a left and right margin to the frame. specify this in
pixels. The value must be greater than 1. The default is 1.
Example: <FRAME MARGINWIDTH="10">
MARGINHEIGHT: Add a top and bottom margin to the frame.
Example: <FRAME MARGINHEIGHT="10">
NORESIZE: Fixes the frame so that it cannot be resized.
SCROLLING: Select scrolling option. It can take the values auto (the default
setting) - displays scroll bars only when the window is not large enough to
accommodate the frame yes - always display scroll bars, no - never displays
scrollbars.
Example: <FRAME SCROLLING="no">
NESTING FRAMES:
The FRAMESET tag can be nested inside other FRAMESET tag.Nesting
enables you to create complex screen designs, with frames positioned within
frames.
Example:
<FRAMESET COLS="150,2*">
<FRAME SRC="frame1.html">
<FRAMESET ROWS="150,2*">
<FRAME="frame2.html">
<FRAME="frame3.html">
</FRAMESET>
</FRAMESET>
The first FRAMESET element defines a document with two columns. The
first column is 150 pixels wide; the second column takes up the remaining
space. In first frame the frame1.html page will be displayed. The second
FRAME holds another FRAMESET. It divides this frame into two rows, one
150 pixels high and another sized with whatever is left the window space.
Example:<html>
<frameset rows="50%,50%">
<frame src="D:\11.jpg" />
<frameset cols="25%,75%">
< /frameset>
</frameset>
</html>
Output:-
5. FORMS: <FORMS>. </FORMS>

Forms are used in HTML for getting inputs from the user. It can be a
registration form, feedback form, order form and so on. To help the user in
data entry, form has components; text fields,radio buttons, check boxes, list
boxes and so on. When data entry is complete the user submit the form by
clicking the submit button on the page. On submit, the data send to server
for processing.
After the user fills the form and click the submit button the data passes
either through method POST (used to pass large amount of data) or GET
(used to pass small amount of data, passed along with the URL) to the
server side script that then handles data and perform appropriate action.
The Syntax of the form tag is:
<FORM></FORM>
5.1 Attributes of <FORM>:ACTION: Specify the location to which the content of the form are
submitted. Its generally a URL of the CGI scripts.
METHOD: It specifies the format in which the data send to the script. It can
take two values:
GET: The data submitted to CGI script is displayed in browser address bar
for transfer.
POST: Important data are submitted through post where data not display in
browser address bar, during transfer.
Syntax:
<FORM METHOD="VALUE" ACTION="URL"> -----</FORM>
5.2 Form Components:<INPUT> Tag:This is an empty tag, no end tag. It is used to add graphical
user components such as text fields, password fields, check boxes,radio
buttons, reset buttons and submit buttons in the form.
<input type = text | password | checkbox | radio |
submit name=string value=string size=n>
In the above tag, the attribute type is used to implement text, password,
checkbox, radio and submit button.
5.2.1 Attributes of <INPUT>:
NAME: It defines name for the form components. This field is required for all
the types of input except submit and clear.
SIZE: Specifies the size of the input field in number of characters, used with
text or password field.
MAXLENGTH: Specifies maximum number of characters that can be
entered into a text or password field.
VALUE: For a text or password field, it defines the default text displayed.
For a check boxes or radio button, it specified the value that is returned to
the server if the box or button is selected. For submit and reset buttons, it
defines the label of the button.
CHECKED: Sets a checkbox or radio button to on.
5.2.2 TYPE: Set the type of input field.
It can take following values:
TEXT: used for single line text field.
PASSWORD: Same as TEXT, but entered text appear as "*" characters
TEXT AREA -: It is used for multiple lines text field
RADIO: It is used for attributes that accepts a single value from a set of
alternatives.
(If the name of the radio buttons are equal it act as a group)
SUBMIT: This creates a button that submits the form. Performance is base
On submit,etc..events
specified with the ACTION attribute of the <FORM> Tag.
RESET - This creates a button, when selected, resets the value of all the
fields in the form to their initial values
HIDDEN: This creates an invisible field, but the content of the field are sent
with the submitted form.
5.3 The <SELECT> Tag:

This is a container tag, allows user to select one of the sets of alternatives
described by textual labels. Every alternatives is represented by <OPTION>,
an empty tag.
Attributes of <SELECT>:
MULTIPLE: Allows selecting more than item from the list.
NAME: Specifies the name that will be submitted as a name-value pair.
SIZE: Specifies the number of usable items. By default size=1 the SELECT
element treated as pull down menu. For size more than one, SELECT
element treated as a list.
5.4 The <OPTION> Tag:
An Empty tag <OPTION> can only be used within <SELECT>. Each item in
<SELECT> is represented by <OPTION>.
Attributes of <OPTION>:
SELECTED: This attribute indicates that option is initially selected.
VALUES: This attribute indicates the value of the option selected.
Example:
<html>
<head>
<title> Use of Form </title>
</head>
<body>
<form action=" " method="post" name="form1">
<p>Please fill out the following information</p>
NAME : <input type="text" name="textfield1"> <br>
City: <select name="select" size=5>

<option>New Delhi</option>
<option selected>Bombay</option>
<option>Culcutta</option>
<option>Madras</option>
<option>Banglore</option>
<option>Hyderabad</option>
</select>
<br>
State: <select name="select">

<option>AP</option>
<option>MP</option>
<option>Karnatak</option>
<option>Tamilnadu</option>
<option selected>Maharashtra</option>
</select>
<br>
Address: <textarea name="textarea"></textarea> <br>

Mail ID: <input type="text" name="textfield4"><br>
<H4>Which feed back u want to enter <h4><br>
<input type="checkbox" name="checkbox" value="checkbox"> Internet<br>
<input
type="checkbox"
name="checkbox"
value="checkbox">Designing
HTML<br>
<input type="checkbox" name="checkbox" value="checkbox> web site<br>
<input type="checkbox" name="checkbox" value="checkbox">Development
Tools<br>
<h4> give feedback <h4>

<input name="radiobutton" type="radio" value="radiobutton">Excellent
<input name="radiobutton" type="radio" value="radiobutton">Good
<input name="radiobutton" type="radio" value="radiobutton"> Satisfactory
<br>
<input type="reset" name="Reset" value="Reset">
<input type="submit" name="Submit" value="Submit">

</form>
</body></html>
Output:-
6. TABLES TAG
Table is one of the most useful HTML constructs. Tables are find all over
the web application. The main use of table is that they are used to
structure the pieces of information and to structure the whole web page.
Below are some of the tags used in table.
<table align=center | left | right
border=n
cellpadding=n cellspacing=n></table>
width=n%
Everything that we write between these two tags will be within a table. The
attributes of the table will control in formatting of the table. Cell padding
determines how much space there is between the contents of a cell and its
border, cell spacing sets the amount of white space between cells. Width
attribute sets the amount of screen that table will use.
Tables are used to display data in Tabular format, containing rows and
columns, on the screen.
<TABLE> tag is used to define tables.
The table element can contain the following:
<CAPTION>: It is used to specify the caption (Label) for the table. The
CAPTION element, by default is center-aligned at the top of the Table. Its
ALIGN attribute that takes value left, right, center can be used to align the
caption.
<TR>: Table row, is to specify the row in the table..it holds TH/TD
<TH>: Table Heading and <TD> Table Data.
<TH>: Table Header, is used for giving Heading to Table. By default header
elements contents are in bold font and center-aligned.
<TD>: Table Data, within the row you create columns by <TD> tag.
The Table data can consist of lists, images, forms and other element. The TD
is a true container that can hold other HTML elements, even more tables.
Example:
<HTML>
<HEAD>
<TITLE> A SIMPLE TABLE IN HTML </TITLE>
</HEAD>
<BODY>
<TABLE >
<CAPTION> TEST TABLE </CAPTION>
<TR>
<TH> HEADING 1</TH>
<TH> HEADING 2</TH>
<TH> HEADING 3</TH>
</TR>
<TR>
<TD> CELL 1 </TD>
<TD> CELL 2 </TD>
<TD> CELL 3 </TD>
</TR>
<TR>
<TD> CELL 4 </TD>
<TD> CELL 5 </TD>
<TD> CELL 6 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:-
6.1 Attributes of <TABLE>:

BORDER: used to draw borders around all the Table cells.By default, tables
are shown without borders i.e.BORDER=0. The size of border can set by
assigning an integer value.
For example BORDER=3, gives table a three pixel border.
ALIGN: used to align a table relative to windows border. It can set to left,
right or center.
CELLSPACING: used to set the space between the cells in a table. It takes
value in pixel.
CELLPADDING: used to set the space between the celldata and cell wall in a
table. It takes value in pixel.
WIDTH: used to set the width of the table, as either an absolute width in
pixels, or a percentage of the document width. For example: WIDTH=<width
in pixel or percent>
BGCOLOR: set the background color of the table.
For example: BGCOLOR=red
BORDERCOLOR: sets the color of the border of the table.
Example:<HTML>
<HEAD>
<TITLE> A SIMPLE TABLE IN HTML </TITLE>
</HEAD>
<BODY>
<TABLE
BORDER=3
BGCOLOR=gray
BORDERCOLOR=YELLOW
CELLPADDING=5 CELLSPACING=5 ALIGN=CENTRE>
<CAPTION> TEST TABLE </CAPTION>
<TR>
<TH> HEADING 1</TH>
<TH> HEADING 2</TH>
<TH> HEADING 3</TH>
</TR>
<TR>
<TD> CELL 1 </TD>
<TD> CELL 2 </TD>
<TD> CELL 3 </TD>
</TR>
<TR>
<TD> CELL 4 </TD>
<TD> CELL 5 </TD>
<TD> CELL 6 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:-
Attributes of <TR>:
ALIGN: Align the text inside the table cells to the left, right or center.
VALIGN: Align the text within the cell(s) to top, bottom or centered vertically
to the cell.
The values used are top, middle and bottom.
BGCOLOR: Sets the background color of the row.
BORDERCOLOR: Sets the border color of the row.
Attribute of <TD>:
All the attributes of <TR> - ALIGN, VALIGN, BGCOLOR, BORDERCOLOR
can also be used
WIDTH: It is used to describe the desired width of the cell.
For Example: - <TD width=5%> Cell 1 </TD>
HEIGHT: Specifies the height of the cell.
NOWRAP: Prevent the browser from wrapping the content of the cell.
COLSPAN: - Specifies the number of columns the cell can span. The default
COLSPAN for any cell is 1.
Example for column span:<HTML>
<HEAD><TITLE>Use of Table Attributes</TITLE></HEAD>
<BODY>
<TABLE BORDER=3 BGCOLOR=GRAY BORDERCOLOR=RED
ALIGN=CENTER>
<TR>
<TD>CELL 1 </TD>
<TD COLSPAN=2>Cell Spans 2 Columns</TD>
</TR>
<TR>
<TD>CELL 2 </TD>
<TD>CELL 3</TD>
<TD>CELL 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:-
ROWSPAN: Specifies the number of rows the cell can span. The
Default ROWSPAN for any cell is 1.
Example for row span:
<HTML>
<HEAD><TITLE>Use of Table Attributes</TITLE></HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD ROWSPAN=2>Cell Span 2 rows </TD>
<TD >Cell 2</TD><TD>Cell 3</TD>
</TR>
<TR>
<TD>Cell 4 </TD>
<TD>Cell 5</TD>
</TR>
</TABLE></BODY></HTML>
Creating different layouts using table tag using row span and column span
tags.
Example:
<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body >
<table width="100%" style="height: 100%;" >
<tr>
<td colspan="2" style="height: 100px;" gcolor="#777d6a"><h1>Website
Logo</h1></td></tr>
<tr>
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>
<td width="80%" valign="top" bgcolor="#d2d8c7">
<h2>Page heading</h2>
</body>
<html>
Here's a two column layout with a header section that spans the width of
both columns. The first table row creates the header and contains a single
table cell which uses the colspan="2" attribute-value pair. The website logo
typically goes in the header section.<br>
The second table row contains two table cells which create the menu column
(left) and the content column (right). The colspan attribute is not set in
either so they default to colspan="1".</td></tr></table>
Output:-
7. XHTML
XHTML stands for EXtensible HyperText Markup Language.
XHTML is the next generation of HTML, but it will take some time
before
browsers and other software products are ready for it.
The following 10 changes will make your current HTML 4.01 documents,
XHTML compliant:
1. Documents must conform to XML rules.
a. Elements must be properly nested.
<b><i>This text is bold and italic</i></b>
b. Documents must be well-formed.
All XHTML elements must be nested within the <html> root

element.
All other elements can have sub elements (children).
Sub elements must be in pairs and correctly nested within their

parent element.
The basic document structure is:

<html>
<head> . . . </head>
<body> . . . </body>
</html>
2. Tag names must be in lowercase.
<body>
<p>This is a paragraph.</p>
</body>
3. All XHTML elements must be closed.

Non-empty elements must have an end tag.
<p>This is a paragraph.</p>
<li>This is a list item.</li>
4. Empty elements must also be closed.
This is a line break <br> or </br>, horizontal rule:<hr />, image!
<img src=filename.gif />
5. Attribute names must be in lowercase.
<table width=100%>
<div align=center>
6. Attribute values must be in quotes.
<table width=100%>
<img height=200 width=250 />
7. Attribute minimization is forbidden.
This is wrong: <input checked>,<option selected>
This is correct:<input checked=checked />,
<option selected=selected />
8. The id attribute replaces the name attribute.
This is wrong:
<img src=filename.gif name=picture1 />
<a name=namedanchor></a>
This is correct:
<img src=filename.gif id=picture1 />
<a id=namedanchor></a>
9. The XHTML DTD defines mandatory elements.
.
This is a minimum XHTML document template:
<!DOCTYPE Doctype goes here>
<html>
<head>
<title>Title goes here</title>

</head>
<body>
Body text goes here
</body>
</html>
Note: the DOCTYPE declaration is not a part of the XHTML document itself.
It is not an XHTML element, and it should not have a closing tag.
10. The <!DOCTYPE> is mandatory.
The DOCTYPE declaration should always be the first line in an
XHTMLdocument.
Document Type Definition (DTD):A DTD specifies the syntax of a web
page in SGML (Standard Generalized Markup Language).
A DTD is used by SGML applications, such as HTML, to specify rules that
apply to the markup of documents of a particular type, including a set of
element and entity declarations.
An XHTML DTD describes in precise, computer-readable language, the
allowed syntax and grammar of XHTML markup. Validating XHTML.
DHTML: (Dynamic HTML)

DHTML is NOT a Language it is similar to html document based on the
combination of JavaScript, DOM and CSS. (Refer css & java script chapters)

Unit - I Hypertext Markup Language

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Unit - I Hypertext Markup Language

Caricato da

Copyright:

Formati disponibili

UNIT I

HYPERTEXT MARKUP LANGUAGE

Points to be remembered for HTML Tags:

Basic HTML Tags:

Defines a title in the browser toolbar.

The Format is:

3. BODY Tag: <BODY>

Creating and executing html document:

3.1 Attributes of <BODY>:

6.1 Attribute of Heading tags:

: Displays text in larger font as compared to normal

12. FONT tag: <FONT>

Ordered List (Numbered List)

i. Ordered List <OL>:

Capital letter eg. A, B, C

iii. Definition List:

How the HTML code above looks in a browser:

ANCHOR TAG: <A>

4.2 <FRAME> Tag:

5. FORMS: <FORMS>. </FORMS>

5.3 The <SELECT> Tag:

NAME : <input type="text" name="textfield1"> <br>

City: <select name="select" size=5>

State: <select name="select">

Address: <textarea name="textarea"></textarea> <br>

<h4> give feedback <h4>

<input type="submit" name="Submit" value="Submit">

6.1 Attributes of <TABLE>:

All XHTML elements must be nested within the <html> root

All other elements can have sub elements (children).

Sub elements must be in pairs and correctly nested within their

The basic document structure is:

3. All XHTML elements must be closed.

<title>Title goes here</title>

DHTML: (Dynamic HTML)

Potrebbero piacerti anche