jwd_unit 3_web page development with html_ppt

7/27/2019 JWD_Unit 3_Web Page Development With HTML_PPT

http://slidepdf.com/reader/full/jwdunit-3web-page-development-with-htmlppt 1/15

C o n f i d e n t i a l

1

Program : MBA

Semester : IV

Subject Code : MI0041

Subject Name : Java and Web Design

Unit number : 3

Unit Title : Web Page Development with HTML

Lecture Number : 3

Lecture Title : Web Page Development with HTML

HOME NEXT




2

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.

HOME NEXTPREVIOUS

Unit-3 Web Page Development with HTML




3

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

HOME NEXTPREVIOUS





4

Introduction

HOME NEXTPREVIOUS

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.





5

HTML Table Structure

HOME NEXTPREVIOUS

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





6

Basic HTML Table Tags

HOME NEXTPREVIOUS


<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 </td> </tr>

</table>

Code:

Output:

First Second

Good Better

Better Best

Table Two Cross Two


http://slidepdf.com/reader/full/jwdunit-3web-page-development-with-htmlppt 7/15C o n f i d e n t i a l

7

Attributes to Format Tables

HOME NEXTPREVIOUS


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>



8

Multimedia Files on a Web Page

HOME NEXTPREVIOUS


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>



9

Using a Form

HOME NEXTPREVIOUS


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>



10

Contd…

HOME NEXTPREVIOUS


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>



11

Creating Formatted Lists

HOME NEXTPREVIOUS


LISTS

Ordered List Unordered List

<ol>

<li>Text line first.<li>Text line second.

<li>Text line third.

<li>Text line fourth.

</ol>

<ul>

<li>Text line first.<li>Text line second.

<li>Text line third.

<li>Text line fourth.

</ul>

Output:

1. Text line first.2. Text line second.

3. Text line third.

4. Text line fourth.

Output:

• Text line first.• Text line second.

• Text line third.

• Text line fourth.



12

Using Frames in a Web Page

HOME NEXTPREVIOUS


<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>

<frame> tag: used to divide the browser window to sub-windows or frames.

Output:

Top.html Height = 30% Right.html

Width=30%

Left.html

Width=70%

Bottom.html

Height=70%



13

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 sub-

windows.

HOME NEXTPREVIOUS




14

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">

HOME NEXTPREVIOUS




15

Activity

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

extensions.

HOMEPREVIOUS


jwd_unit 3_web page development with html_ppt

Documents