ITM 353 - Lecture-3

8/3/2019 ITM 353 - Lecture-3

1/18

9/29/20

ITM 353; WEB TECHNOLOGIES

LECTURE 3:

Web Technologies Lecture Slides by

Maxwell Dorgbefu Jnr.

OUTLINE OF INSTRUCTION

In this lecture the following are discussed:

Creating Links

Adding Multimedia to web pages

Lists

Tables

Forms



8/3/2019 ITM 353 - Lecture-3

2/18

9/29/20

Creating Links - 1

A static web page contains no links within thedocument or to other documents.

In order to give users some interactivity and

control over our web pages, we need to

incorporate links to files or other pages of

interest.

Linking is an important step in web site

development because it adds the hyper to the

term hypertext.



Creating Links - 2 A hypertext document is one that contains

elements called LINKS that allow users to

activate a particular part of the screen and

perform some action.

The actions include:

1. Moving to another part of the document.

2. Opening another document on the same web site.3. Opening a document on a web site somewhere else

in the world.



8/3/2019 ITM 353 - Lecture-3

3/18

9/29/20

Types of Links

There are three main types of links namely:1. Intra-page links

These are links to items located within a single

document.

2. Intra-system links

These are links to other pages of the same web site.

3. Inter-system links

These are links to pages or documents located onother web sites or servers.



How to create Links To create links in your HTML documents, we make

use of the anchor container(anchor).

The anchor container provides data to link to

images, sounds, or to another Internet page.

The special attribute of the anchor container is href,

which stands for Hypertext REFerence.

The href attribute identifies the pointer, or pathway

to the target of the link.

The target of a link is a URL.

Google

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

8/3/2019 ITM 353 - Lecture-3

4/18

9/29/20

Adding Images and Multimedia

Without images and multimedia, a web page

is just a collection of text.

Multimedia is the use of images, sound, video

and other special effects.



IMAGE FORMAT DESCRIPTION FILE EXTENSION

GIF Graphics Interchange Format .gif

JPEG Joint Photographers Experts Group .jpg/.jpeg

PNG Portable Network Graphics .png

PDF Portable Document Format .pdf

TIFF Tagged Image File Format .tif/.tiff

BMP Bit Mapped Picture .bmp

Common Image Formats



8/3/2019 ITM 353 - Lecture-3

5/18

9/29/20

The Tag

Images are inserted into documents using the the tag.

The src(Source) attribute is the only required attribute

of the tag.

This attribute tells the browser where to find the image

that is to be inserted into your page.

The altattribute provides a text-based description of

the image.

Other attributes of the tag include longdesc,height, width and align


My Pictures

Here is a picture of a lovely reggae icon:

Actually , this is Joseph Hill(Culture) from Jamaica.

Example



8/3/2019 ITM 353 - Lecture-3

6/18

9/29/20

A sound is a continuous series of different

tones and noises.

Sounds are analog data.

Audio files can be found in several different

formats.

Usually, each format requires a different plug-

in.

Adding Sound



AUDIO FORMAT DESCRIPTION FILE EXTENSION

-law mu-law .au

RIFF WAVE Resource Interchange File Format

Waveform

.wav

AIFF Audio Interchange File Format .aiff

MPEG Moving Picture Experts Group .mp2/.mp3

MIDI Musical Instrument Digital Interface .mid/.midi

Common Audio Formats



8/3/2019 ITM 353 - Lecture-3

7/18

9/29/20

Video files are a collection of images usuallywith a related sound file.

Some common video formats are:

MPEG (.mpeg/.mpg)

AVI for Audio/Video Interleave (.avi)

QuickTime(.qt/.mov)

N.B. Sounds and videos are added t o web

pages just as links by using the href attribute

of the anchor container.

Adding Video


Lists are one of the ways used to organize

information for easy access.

The following kinds of lists will be

discussed:

Ordered lists

Unordered lists

Definition lists and Menu lists

Lists



8/3/2019 ITM 353 - Lecture-3

8/18

9/29/20

A simple ordered list() presents items in anumbered manner.

Two HTML tags used to produce ordered lists are:

Ordered List: which encloses the list

List Item: use to start each new list item.

Example:

The following are my favorite reggae icons:

Joseph Hill

Buju Banton

Bob Marley

Ordered Lists - 1


Commonly used attributes with the tag

are: start, type, title, value and style.

type and style attributes

TYPE STYLE DESCRIPTION EXAMPLES

A upper-alpha Uppercase letters A. B. C. D.

a lower-alpha Lowercase letters a. b. c. d.

I upper-roman Uppercase Roman numerals I. II. II. IV

i Lower-roman Lowercase Roman numerals i. ii. Iii. iv

1 decimal Arabic numerals(default) 1. 2. 3. 4.

Ordered Lists - 2


8/3/2019 ITM 353 - Lecture-3

9/18

9/29/20

The unordered list() is used when you

want to make a list of items that have no

necessary order.

It is also called a bulleted list.

A bullet is a decorative label assigned to each

item in a list.

The syntax for the unordered list is similar to

that of ordered list with the type attribute set

to square or circle.

Unordered Lists



Unordered List Example

Unordered List

The following are my favorite reggae icons:

Joseph Hill

Buju Banton

Bob Marley



8/3/2019 ITM 353 - Lecture-3

10/18

9/29/20

This is used to present a term and its definitionformatted like a glossary or a dictionary.

It is the ideal format to present lists of words or

phrases with their meanings.

The tags used are

Definition Term

Definition Definition

Definition Lists



The element was designed to present

single-column menu lists.

List Item 1

List Item 2

List Item 3

Menu Lists



8/3/2019 ITM 353 - Lecture-3

11/18

9/29/20

Tables

Tables are composed of row data running acrossthe screen and columns that run up and down.

The intersection of a row and a column is called aCELL.

The border is the line around the table andbetween each cell.

Frame: This is the line that surrounds a single cellor the whole table.

Padding: This is the space between the cellscontent and the border and it is set using thecellpadding attribute



The following tags are used to produce a tabular

display in HTML:

: Encloses the table.

: Defines the table headers.

: Defines the table rows.

: Surrounds the actual table data.

: Allows you to

place a caption either below or above the table.

Tables - 2



8/3/2019 ITM 353 - Lecture-3

12/18

9/29/20

Some of the attributes used to enhance tabular

display in HTML include:

border, fram e,cellpadding, cellspacing,

bgcolor, align, width etc.

Tables - 3



Table Example

HTML Tables:

MY FAVORITE COLLECTIONS

Title of Music

Artist



8/3/2019 ITM 353 - Lecture-3

13/18

9/29/20

Forward to Africa

Joseph Hill

China Roses

Enya

Floral Street

Enya

Humble Africa

Joseph Hill



Nah Stay Inna Babylon

Joseph Hill

Miss Independent

Neyo

Storm in Africa

Enya

Cool Your Temper

J. Martins



8/3/2019 ITM 353 - Lecture-3

14/18

9/29/20

Time for

CoffeeBreak

7Minutes



Forms - 1 Forms are used by web weavers to collect

information from users.

Information submitted by users via HTML

forms are processed by servers that host the

page by using scripts.

Scripts are programs that process the data from

the form and sends a response to the user viathe browser.



8/3/2019 ITM 353 - Lecture-3

15/18

9/29/20

The container holds the contents of theform.

The ending tag of is never omitted.

The action and methodare required attributesof the tag.

The action attribute points to the applicationthat will process the data captured by the form.

The methodattribute tells the browser how to

send the data to the server. There are two ways to do this: GETand POST

Forms - 2


The tag The tag is the tool used to create the

actual user-manipulated areas of a form.

Each type of input area is called an input control

in the HTML 4.0 specifications.

Using controls allow the web weaver to

create text-input fields, radio buttons, submit and

reset buttons.


8/3/2019 ITM 353 - Lecture-3

16/18

9/29/20

Form Controls and their required Attributes

CONTROL REQUIRED ATTRIBUTE(S)

Text name

File name

Hidden name, value

Checkbox name, value

Radio name, value

Submit none

Reset none

Password name, value

Image src

Button name, value



HTML Forms Example

HTML Forms:

8/3/2019 ITM 353 - Lecture-3

17/18

9/29/20

Please enter your name here:

Please enter your email here:

Please enter your password here:



Please browse and upload your comments file:



8/3/2019 ITM 353 - Lecture-3

18/18

9/29/20

The Container

The container setsthe user free from the single-line restriction bycreating an area in the browser pane foe textualinput.

Documents

ITM 353 - Lecture-3