WT Unit 1 For Bcom Computers 5th Sem

HTML
UNIT 1
Introduction to HTML
HTML stands for Hyper Text Markup Language. It is a markup language to use in developing web
pages. In similar way the HTML programs having Tags. HTML creates web pages with help of a number of
built-in tags. Consider to create HTML page (web page) the following concepts listed below.
 Every HTML program should be start with <html> opening tag. And end with </html> close tag.
 Every HTML program saved with “filename.html”.
 HTML does not follow case sensitive. Hence writing HTML program in any case like lower case or
upper case letters.
 HTML program contains Tag. It Tags are two types. They are Opening Tags and close Tags. Here
Opening tag represent as “<tagname>”, and closing tag represent as “</tagname>”.
Structure of HTML Program
In HTML program structure is divided into following 3 major sections as follow below
1. HTML Section
2. HEAD Section
3. BODY Section
1. HTML Section: This section used to we can start the HTML program and end HTML Program.
This Section as follow <html>……</html>. After <html> tag immediately we can start Head
Section.
1
2. HEAD Section: This section is define as follow <head>--------</head>. This section usually contain
<title> tag.
<title> tag: this tag used to display title name of the web page. It tag always define within the
<head>……</head> tag.
3. BODY Section: this section begin after closing the HEAD Section. The BODY Section is define as
follow <body>…………</body>. This section is used to entire information about the web page.
Example Program:
<html>
<head>
<title> my first html program </title>
</head>
<body>
NIVEDITHA DEGREE COLLEGE
KKT
</body>
</html>
OUTPUT:
Features of HTML
 HTML is a static web page
 HTML is not case sensitive
 HTML is Error free language
 HTML is a simple and easy language.
 It provides to specially to add audio files, images, into a web pages.
 HTML is platform independence; it can run any platform like windows, Linux operating system.
 Every element (tags) of HTML should be enclosed between angular brackets (< >).
 HTML programs to run on web browser. (internet Explorer).
Advantages of HTML:
 It is widely used on WEB
 Every Bowser support HTML Language.
2
 Easy to learn and use it.
 It is by default in every windows operating system, so we need not any special software.
Dis-Advantages of HTML:
 We can create any static web pages, if we need dynamic web pages but it HTML is not useful.
 We can write HTML program, it having a lot code formatting a simple web page.
 Security features are not good in HTML.
Heading Tags:- (Padded tags)
i. Heading tags are used in html to display various types of headings such as, heading to a site,
heading to a page, heading to a paragraph etc.
ii. There are different heading tags to display headings.
iii. The size of headings tags goes on decreases from <h1> to <h6>.
iv. The various heading are as follows
<h1> -------------------------------------- </h1>
<h2> -------------------------------------- </h2>
<h3> -------------------------------------- </h3>
<h4> -------------------------------------- </h4>
<h5> -------------------------------------- </h5>
<h6> -------------------------------------- </h6>
 Write an HTML program to display various f=heading tags in HTML
<Html>
<head>
<title> Heading Demo </title>
</head>
<body>
<h1> Welcome </h1>
<h2> Welcome </h2>
<h3> Welcome </h3>
<h4> Welcome </h4>
<h5> Welcome </h5>
<h6> Welcome </h6>
</body>
</html>
Output: - Welcome
Welcome
Welcome
Welcome
Welcome
Welcome
3
Hyperlink:- (Anchor Tag)
i. Anchor tag <a> is used in html to create hyperlinks.

ii. A hyperlink is a link when it is accessed, transfers the control from one web page to another
webpage.
iii. Therefore hyperlinks are used to navigate from one webpage to another webpage.
 Write a program to create the hyperlinks as a text
<html>
<head>
<title> demo of the hyper links </title>
</head>
<body>
<h1> Welcom </h1>
<a href=”address of the page to open as hyperlink”> This is a Web World </a>
</body>
</html>
Attributes of Anchor Tag <a>:-
1. Href: - Specifies the address of the resource to be opened when the link is accesses.
Image tag: -
<img> is a tag defined in html which is used to create foreground images.
Attributes of Image Tag: -
i. Src: - Specifies the address of the image to be loaded.
ii. Width: - Specifies the width of the image.
iii. Height: - Specifies the height of the image.
 Write a program to displays images.
<html>
<head>
<title> Demo of the Image tags </title>
</head>
<body>
<img src =”images.jpg” width=”100” height=”100”> </img>
</body>
</html>
Images as Hyperlinks:-
i. If we place an img tag with in an anchor tag then the imge become hyperlink.
4
 Write a program to displays images acting as Hyperlink.
<html>
<head>
<title> Demo of the Image Hyperlinks </title>
</head>
<body>
<a href=”flower.jpg”>
</a>
</body> </html>
Text formatting Tags

HTML having different types of formatting text tags. Formatting means to design text in our styles.
Formatting tags are used for display content of the body with different styles. These formatting tags
represented always within the body section. The following are the formatting text tag listed below.
1. Bold: To display the content of the data in Bold format. It is represented as <b>……</b>.
2. Italic: To display the content of the data in Italic format. It is represented as <i>……</i>.
3. Underline: To display the content of the data with Underline format. It is represented as <u>……</u>.
4. Big: To display the content of the data with Bold format. It is represented as <big>……</big>.
5. Small: To display the content of the data in Small size of the text. It is represented as
<small>……</small>.
6. Variable: To display the content of the data in Variable format with different programming languages. It
is represented as <var>……</var>.
7. Address: To display the content of the data in Address format. It is represented as
<address>……</address>.
8. Emphasis: To display the content of the data in Italic format. It is represented as <emp>……</emp>.
9. Superscript: To display the content of the data in Superscript format like as X 2, 32. It is represented as
<sup>……</sup>.
10. Subscript: To display the content of the data in Subscript format like as H 2O. It is represented as
<sub>……</sub>.
11. Strike: To display the content of the data with a line over the data. .
It is represented as
<strike>……</strike>.
Example Program:
<html>
<head>
<title> text format </title>
5
</head>
<body>
<em>good morning</em><br>
<cite>Niveditha</cite><br>
<big>Degree</big><br>
<small>College</small><br>
<address>h.no.1-4-75<br>
KKT<br>
</address><br>
<strong>welcome</strong><br>
<var>c=a+b</var><br>
<code>while(i<=4)<br>
i=i+1
</code><br>
<b>hai</b><br>
<i>rani</i><br>
<u>neha sri</u><br>
<tt>amma</tt><br>
x<sum>2</sub><br>
a<sup>4</sup><br>
<blink>hello</blink><br>
</body>
</html>
LISTS in HTML
A list is a collection of a items in particular manner. In HTML having 3 types of list, they are
i. Order List
ii. Un Order List
iii. Definition List.
i. Order List:
 Order list is also a collection of items with marks with numbers or alphabets or Roman numbers.
 It order list defined in HTML by using the tag <ol>……</ol>
 <li> is tag, it defined with in a <ol>….</ol> tag. <li> tag means list items.
Syntax:
<ol type=”value”>
<li>…….</li>
6
<li>…….</li>
<li>…….</li>
</ol>
 <ol> tag having one attribute name as “type”.
 Type attributes used in <ol> tag it define which type order to be display in list items.
<ol type=”1”> order list displayed with numerical order(numbers)
<ol type=”A”> order list displayed with Capital Alphabets order(A to Z)
<ol type=”a”> order list displayed with Small Alphabets order(a to z)
<ol type=”I”> order list displayed with Capital Roman Numbers order(I,II,III,IV,V…… etc)
<ol type=”i”> order list displayed with Small Roman Numbers order(i,ii,iii,iv,v…… etc)
Example Programs:
<html>
<head>
<title> order list </title>
</head>
<body>
<h1>Degree Cources<br/></h1>
<ol type="1">
<li> B.Sc </li>
<li> B.Com</li>
<li>B.Zc</li>
<li>BA</li>
</ol>
</body>
</html>
OUTOUT:
ii. Un Order List:

 Un Order list is also a collection of items with marks with Bullets, circle, square, disc symbols.
 It Un order list defined in HTML by using the tag <ul>……</ul>
 <li> is tag, it defined with in a <ul>….</ul> tag. <li> tag means list items.
7
Syntax:
<ul type=”value”>
<li>…….</li>
<li>…….</li>
<li>…….</li>
</ul>
 <ul> tag having one attribute name as “type”.
 Type attributes used in <ul> tag it define which Symbol to be display on before of the list items.
<ul type=”Bullets”> un order list displayed with Bullet symbol
<ul type=”disc”> un order list displayed with Disc symbol
<ul type=”Square”> un order list displayed with Square symbol
<ul type=”circle”> un order list displayed with circle symbol
Example Program
<html>
<head>
<title> Un order list </title>
</head>
<body>
<h1>Degree Cources<br/></h1>
<ul type="circle">
<li> B.Sc </li>
<li> B.Com</li>
<li>B.Zc</li>
<li>BA</li>
</ul>
</body>
</html>
OUTPUT:
iii. Definition List:

 Every definition item declaration having 2 parts. They are Definition Title and Definition data.
8
 <dl> is a tag to define in HTML to create definition list.
 <dt> tag means definition title. It tag is used in <dl> tag. <dt> tag is used for creating definition title.
 <dd> tag means definition data or definition description. It tag defined in <dl> tag. It is used for
creating definition data.
Syntax:
<dl>
<dt>……….</dt>
<dd>--------------------</dd>
<dl>
Example Program:
<html>
<head>
<title> definition list </title>
</head>
<body>
<dl>
<dt> Def1 </dt>
<dd> this is first program for definition code </dd>
<dt> Def2 </dt>
<dd> this code for practice perpouse </dd>
</dl>
</body>
</html>
OUTPUT:
Frames and Framesets in HTML

 Frames and framesets are used in HTML to open more than one web pages in a single browser at a
time.
 Framesets are divided into the window (web browser body) through Horizontally or vercically.
 Each part of the window is referred as frame.
 Framesets are divided the window in three types. They are
9
i. Horizontal frameset
ii. Vertical frameset
iii. Both combination of horizontal and vertical frameset.
i. Horizontal Frameset:
Attribute of the <frameset> tag we can use “rows” attribute. <frameset> tag always declared
within the <head>……</head> tag.
Frame 1
Frame 2
Frame 3
Frame 3
Syntax:
<frameset rows=”vau1, value2,….”>
<frame src=”url”>
</frameset>
Example Program:
<html>
<head>
<title>Horizontal frameset</title>
<frameset rows="50,25,25">
<frame src="www.google.com">
<frame src="www.facebook.com">
<frame src="www.gmail.com">
</frameset>
</head>
<body>
</body>
</html>
OUTPUT:
10
ii. Vertical Frameset:
Attribute of the <frameset> tag we can use “cols” attribute. <frameset> tag always declared
Frame1 Frame2 Frame3
Syntax:
<frameset cols=”vau1, value2,….”>
</frameset>
Example Program:
<html>
<head>
<title>Vertical frameset</title>
<frameset rows="50,25,25">
</frameset>
</head>
<body>
</body>
</html>
OUTPUT:
Google Facebook Gmail
11
iii. Both Combination of Horizontal and vertical Frameset:
Attribute of the <frameset> tag we can use “rows” and “cols” attribute. To create both combination of
horizontal and vertical frameset we can use nested <frameset> tag.<frameset> tag always declared
Frame 1
Frame3
Frame2
Syntax:
<frameset rows=”vau1, value2,….”>
<frameset cols=”vau1, value2,….”>
</frameset>
</frameset>
Example Program:
<html>
<head>
<title>Horizontal frameset</title>
<frameset rows="50,50">
<frameset cols="50,50">
</frameset>
</frameset>
</head>
<body>
</body>
</html>
OUTOUT:
Google
Facebook Gmail
12
Tables in HTML
In html data can be represented in a table format. This approach data is organized in terms of rows
and columns is called as table. An intersection of rows and columns is called as “cell”. In HTML table
having different types of tag. They are
i. <table>….<.table>: This is used for creating table format in html.
ii. <tr>……</tr>: <tr> means table row. It tag used for creating table row in a table. <tr> tag
always declared in <table>…..</table>tag.
iii. <td>…..</td>: <td> means table data or table description. It tag used to creating table data in a
table. It tag always declared in <tr>….</tr> tag.
iv. <th>….</th>: <th> means table heading. It tag used for creating table column heading in a table.
It tag always declared in <tr>….</tr> tag.
v. <caption>….</caption>: it tag used for giving a title of a table.
Syntax:
<table>
<tr>
<td>-------</td>
<td>-------</td>
<td>-------</td>
</tr>
<tr>
<td>-------</td>
<td>-------</td>
<td>-------</td>
</tr>
</table>
Example Program:
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table >
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
13
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Attributes of Table:
1. Border------------------------------ Pixels
2. Bordercolor------------------------ any color
3. Bgcolor------------------------------ any color
4. Background------------------------ image path
5. Height------------------------------- Pixels/percentage (%)
6. Width-------------------------------- Pixels/percentage (%)
7. Align--------------------------------- left, right and center
8. Valign-------------------------------- top, middle, and bottom
9. Rules--------------------------------- rows, cols, all, and none
10. Cellspacing-------------------------- Pixels
11. Cellpadding-------------------------- Pixels
12. colspan-------------------------------- Pixels
13. rowspan------------------------------- Pixels
Programs:
Eg: - Without border
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table >
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
<tr>
<td> 101</td>
14
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Eg2:- With Border attributes

<html>
<head>
<title>
Table tag demo
</title>
</head>
<body>
<table border=3>
<tr>
<td> Sno</td>
<td> Sname</td>
</tr>
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
Eg3:- Table tag with border, bordercolor, bgcolor and background. (first four attribute)
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" bgcolor="lightgreen" background="D:\bhanu\
rasooi123.jpg">
<tr>
<th> Sno</td>
15
<th> Sname</td>
</tr>
<tr>
<td> 101</td>
<td> ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Eg4:- Table level and Cell Level Attribute

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" >
<tr>
<th bgcolor="lightgreen"> Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td background="D:\bhanu\rasooi123.jpg"> ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
16
Height and Width:-
Specifying the width and height on your table can make your page much easier to control.
Difference Between Pixels and percentage:-
There are 2 ways of marking the width & Height of your table.
1. by specifying certain no.of pixels
2. marking using %
Pixels:-
Pixels are fixed size units that are used in screen media, pixels will make certain length & stay their,
one pixel is equal to one dot on your computer screen.
Percentage (%):-
It is scalable for all kinds of devices like pc’s, mobiles etc.
Eg5:- Table tag with Height, Width attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 background="D:\bhanu\rasooi123.jpg"
bgcolor="lightgreen">
<tr>
<th > Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td > ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
17
Eg6:- Table tag with Height, Width attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=30 height=30 background="D:\bhanu\rasooi123.jpg"
bgcolor="lightgreen">
<tr>
<th > Sno</th>
<th> Sname</th>
</tr>
<tr>
<td> 101</td>
<td > ABC</td>
</tr>
<tr>
<td> 102</td>
<td> CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Sno Sname
101 ABC
102 CBA
Eg7: - Table tag with rules attribute (Rules=none)
18
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=none >
<tr>
<th align="center" > Sno</th>
<th align="center" > Sname</th>
</tr>
<tr>
<td align="center" > 101</td>
<td align="center" > ABC</td>
</tr>
<tr>
<td align="center" > CBA</td>
</tr>
</table>
</body>
</html>
Output:-
Eg8: - Table tag with rules attribute (Rules=rows)

<html>
<head>
<title>
table tag demo
</title>
</head>
19
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=rows >
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
Eg9: - Table tag with rules attribute (Rules=cols)

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=cols >
<tr>
</tr>
<tr>
20
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
Eg10: - Table tag with rules attribute (Rules=cols)

<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 bordercolor="red" width=300 height=300 bgcolor="lightgreen" rules=all >
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:-
21
CellSpacing:-
This attribute is used to change the spacing between the cells.
Cellpadding:-
This attribute is used to change the space between the content to the inner adjust of a
cell.
Systax :- <table cellpadding=”x”>
Here x means pixels values like 1, 2, 3,…. (numeric values).
Eg11:- Table with cellpadding attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<table border=3 cellpadding=15>
<tr>
<th align="center" > Emp Id</th>
<th align="center" > Emp Name</th>
<th align="center" > Location</th>
</tr>
<tr>
<td align="center" > Hyd</td>
</tr>
<tr>
<td align="center" > Mumbai</td>
</tr>
22
<tr>
<td align="center" >abc </td>
<td align="center" > Chennai</td>
</tr>
<tr>
<td align="center" > XYZ</td>
<td align="center" >Bangalore</td>
</tr>
</table>
</body>
</html>
Output:-
Output for Without cellpadding attribute above the example
Cellspacing:-
By using this attribute you can control the distance between cells with the help of
pixels.
Systax :- <table cellspacing=”x”>

Here x means pixels values like 1, 2, 3,…. (numeric values).
Eg12:- Table with cellspacing attribute

<html>
<head>
<title>
table tag demo
</title>
</head>
23
<body>
<table border=3 cellspacing=15>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center" >Bangalore</td>
</tr>
</table>
</body>
</html>
Output:-
Output for Without cellspacing attribute above the example
24
Eg13:- Table with CAPTION Tag
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<caption align="bottom"> Employee Table </caption>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td align="center" >Bangloor</td>
</tr>
</table>
</body>
</html>
Output:-
25
Colspan and Rowspan:-
These 2 features allow you to extend columns and rows across multiple other
columns and rows.
1. Colspan:-
It is extends cell in a horizontal (left and right) row.
Syntax: - <td colspan=”x”>
Here x means numbers.
Eg14:- Table with colspan attribute
<html>
<head>
<title>
table tag demo
</title>
</head>
<body>
<caption align="bottom"> Employee Table </caption>
<tr>
</tr>
<tr>
<td align="center" colspan=2> ABC</td>
</tr>
<tr>
</tr>
<tr>
</tr>
26
<tr>
</tr>
</table>
</body>
</html>
Output:-
2. Rowspan:-
It is extends cell in a vertically (up and down) row.
Syntax: - <td rowspan=”x”>
Here x means numbers.
Forms in HTML
 HTML forms are used to carry the data from client to server. These forms perform as interface
between the client and server.
 <form>is tag is used to create HTML form.
 Form contains different types of controls which accepts information to the client.
 The various controls or form elements supported by HTML Forms. They are listed below
1. Text Field
a. Textbox
b. Password Box
2. Text Area
3. Button
a. Normal Button
b. Submit Button
c. Reset Button
4. Check Box
5. Radio Button
27
6. Select Menu
7. File Upload
1. Text Field:
The text field is most commonly used input form control for user giving a data. It Text field in HTML
divided into two types. They are
i. Textbox: The textbox is most common input tag and to make HTML form. <input> tag
means the input element is useful, it reoffered input data in out HTML form. The textbox is
used in HTML form; it allows only single line of data.
Syntax:
<input type=”text”>
ii. Password Box: The Password field look among invisible text field. The user type the
character into the password box, then the characters will be displays in the form of “****” or
“. . . . . “.
Syntax:
<input type=”password”>
Example Program:
<html>
<head>
<title> form program</title>
</head>
<body>
<form>
UserName: <input type="text"><br/>
Password: <input type="password"><br/>
<input type="button" value="Login">
<input type="button" value="Cancel">
</form>
</body>
</html>
OUTPUT:
28
2. Text Area or Multi Line Input Control:
The <textarea> is a tag to create Multi line text input field in HTML Form. It allows users to type unlimited
lines of data. When the form is submitted then these multi lines of data will be sent to the server.
Syntax:
<textarea>
-----------
----------
</textarea>
3. Buttons:
There are ways in html to create the buttons by using the <input> tag.
Syntax:
<input type=”button” valu=”buttonname”> to create normal button
<input type=”submit”> to create submit button submit button means in HTML forms, user fill all
the form input controls, then submit the form data then we can the button “submit button”.
<input type=”reset”> to create reset button.
<input type=”cancel”> to create cancel button.
Example program:
<html>
<head>
<title>Form program</title>
</head>
<body>
<h1> Student Form</h1>
<form>
Name: <input type="text"><br/>
Father Name: <input type="text"><br/>
Address:<textarea> </textarea><br/>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT:
29
4. Radio Button:
It refers one of many combinations. Radio buttons grouping all same attributes but it values will be different.
Syntax:
<input type=”radio” value=”text”>
5. Check box:
The check box control, we can give list of items to selects from list more than one items. We can select more
than one item by using Yes/No option.
Syntax:
<input type=”checkbox” value=”text”>
Example Program:
<html>
<head>
</head>
<body>
<form>
<input type="radio" value="Male"> Male
<input type="radio" value="FeMale"> FeMale <br/>
To Know Language: <br/>
<input type="checkbox" value="Telugu"> Telugu <br/>
<input type="checkbox" value="English"> English <br/>
<input type="checkbox" value="Hindi"> Hindi<br/>
30
</form>
</body>
</html>
OUTPUT:
6. Select Menu:
<select> and <option> tags are implements select menu in HTML forms. The <select> tag to define
select menu structure without any options.
<option> tag to define list of items (options) in the select menu. <option> tag is define within a
<select> tag.
Syntax:
<select>
<option> value </option>
</select>
Example Program:
<html>
<head>
</head>
<body>
<form>
31
<input type="radio" value="Male"> Male
<input type="radio" value="FeMale"> FeMale <br/>
To Know Language: <br/>
<input type="checkbox" value="Telugu"> Telugu <br/>
<input type="checkbox" value="English"> English <br/>
<input type="checkbox" value="Hindi"> Hindi<br/>
District: <select>
<option> select</option>
<option> Wanaparthy</option>
<option> Maabubnagr</option>
<option> Gadwal</option>
<option> Narayanpeta</option>
<option> Nagarkurnool</option>
</select> <br/>
</form>
</body>
</html>
OUTPUT:
Web Design Principles

1. Web publishing is a process through which can publish websites on WWW
2. Before beginning to create websites we should follow below
a. Identifying our target audience.
b. Have a statement of purpose.
c. Know our main objectives.
3. A good interface design as follow below
a. Should simple, consistent, stable, free-standing web pages with clear navigation.
32
b. Should not have dead end pages.
c. Should have a means of collecting feedbacks.
4. While designing a site the following points should be kept in mind.
a. Hierarchy
b. Relationships
c. Sequence
d. Home page design
e. Support for FAQ
5. A good web page design should be include the following features.
a. Graphics balance and organization
b. Page header and footers.
c. Tables to content text layout.
d. Page size appropriate to the type of document.
e. Text shat should appear the same irrespective of type of software used to browser the page.
f. Video and audio files should be used when they are absolutely necessary.
g. Image map can be used to create multiple links in one graphics image.
h. Various files formats can used for graphics are GIF, PNG, JPEG and BITMAP.
33

WT Unit 1 For Bcom Computers 5th Sem

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WT Unit 1 For Bcom Computers 5th Sem

Uploaded by

Copyright:

Available Formats

HTML

i. Anchor tag <a> is used in html to create hyperlinks.

Text formatting Tags

ii. Un Order List:

iii. Definition List:

Frames and Framesets in HTML

Frame1 Frame2 Frame3

Google Facebook Gmail

Eg2:- With Border attributes

Eg4:- Table level and Cell Level Attribute

Eg8: - Table tag with rules attribute (Rules=rows)

Eg9: - Table tag with rules attribute (Rules=cols)

Eg10: - Table tag with rules attribute (Rules=cols)

Output for Without cellpadding attribute above the example

Systax :- <table cellspacing=”x”>

Eg12:- Table with cellspacing attribute

Output for Without cellspacing attribute above the example

Web Design Principles

You might also like