Program Semester Subject Code Subject Name Unit number

: MBA : IV : MI0041 : Java and Web Design :3

Unit Title
Lecture Number Lecture Title

: Web Page Development with HTML

:3 : Web Page Development with HTML

HOME

C onfidential NEXT

Unit-3 Web Page Development with HTML

Basic Web Page Development

Objectives :
To structure a Web page with help of HTML table element.

To use multimedia files to create a more attractive Web page.

To create a form for submitting queries and content. To create formatted lists on a Web page. To use frames to display multiple Web pages on same window.

2
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Lecture Outline
Introduction HTML Table Structure Basic HTML Table Tags Attributes to Format Tables Multimedia Files on a Web Page Using a Form Creating Formatted Lists Using Frames in a Web Page Summary Check Your Learning Activity

3
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Introduction

HTML is used for various purposes, such as: Organising content on Web page. Creating forms. Creating numbered or bulleted list.

Creating HTML frames.

In this session, we will learn various HTML codes to perform the above tasks.

4
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

HTML Table Structure

Three elements of HTML tables are: Rows Columns Cells

Functions of HTML tables: Display text and numeric information in rows and columns Organise or structure Web content

5
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Basic HTML Table Tags

Code: <table border="1"> <caption> Table Two Cross Two </caption> <tr> <th> First </th> <th> Second </th> </tr> <tr> <td> Good </td> <td> Better </td> </tr>

<tr> <td> Better </td> <td> Best

</table> Output: Table Two Cross Two

</td> </tr>

First Good Better

Second Better Best

6
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Attributes to Format Tables

Table Attributes

Width

Height

Cell Width

Text Alignment

<table border="1" width=200>

<table border="1" width=200 height=75>

<td width = 75%>Good</td> <td width = 25%>Better</td>

valign

align

<td align=right valign=bottom> Good</td>

7
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Multimedia Files on a Web Page

Multimedia refers to media files such as audio, video, text, graphics, or animation. Multimedia files can be inserted on Web page by using: <a> tag: <a href="audio.mp3">Play the audio file</a>

<embed> tag: <embed src="video.avi"></embed> <object> tag: <object data="audio.mid" type="audio/midi"></object>

8
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Using a Form
Inputs elements of form

Text Field

Password Field

Radio Buttons

First name: <input type="text" name="Name1"/>

Last name: <input type="text" name="Name1"/>

Password: <input type="password" name="PassWord">

<form> <p>Tiger - National animal of India. <input type="radio" name="answer" value="true"/>Yes <input type="radio" name="answer" value="false"/>No </form>

9
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Contd
Inputs elements of form

Checkboxes

Submit Button

<form> <p>Select the vehicles that you have.</p> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>

10
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Creating Formatted Lists

LISTS

Ordered List <ol> <li>Text line first. <li>Text line second. <li>Text line third. <li>Text line fourth. </ol> Output: 1. Text line first. 2. Text line second. 3. Text line third. 4. Text line fourth.

Unordered List <ul> <li>Text line first. <li>Text line second. <li>Text line third. <li>Text line fourth. </ul> Output:

Text line first. Text line second. Text line third. Text line fourth.

11
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Using Frames in a Web Page

<frame> tag: used to divide the browser window to sub-windows or frames. <frameset rows=30%,* cols=30%,*>

<frame src="top_left.html" name="Top">

<frame src="top_right.htm" name="Right"> <frame src="bottom_left.html" name="Left"> <frame src="bottom_right.html" name="Bottom"> </frameset> Output:
Top.html Height = 30% Right.html Width=70% Bottom.html Height=70%

Width=30% Left.html

12
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Summary

The three elements of tables are rows, columns,

and cells.
Multimedia files can be inserted using <a> tag, <embed> tag, and <object> tag. Input elements of forms include text and password field, radio button, checkbox, and submit button.

<Frame> tag is used to divide the browser window into subwindows.

13
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Check Your Learning

1. Which are the three elements of HTML tables?

Ans. The three elements of HTML tables are: rows, columns,

and cells. 2. What is multimedia?

Ans. Multimedia refer to media files such as audio, video, text, graphics,
or animation. 3. What is the code to create a password field in HTML?

Ans. <input type="password" name="PassWord">

14
PREVIOUS HOME
CNEXT onfidential

Unit-3 Web Page Development with HTML

Activity

1.

Search on Web, and enlist and analyse the various multimedia file extensions.

15
PREVIOUS HOME
Confidential