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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
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.
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
My Pictures
Here is a picture of a lovely reggae icon:
Actually , this is Joseph Hill(Culture) from Jamaica.
Example
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
Unordered List Example
Unordered List
The following are my favorite reggae icons:
Joseph Hill
Buju Banton
Bob Marley
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
The element was designed to present
single-column menu lists.
List Item 1
List Item 2
List Item 3
Menu Lists
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
Table Example
HTML Tables:
MY FAVORITE COLLECTIONS
Title of Music
Artist
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
Nah Stay Inna Babylon
Joseph Hill
Miss Independent
Neyo
Storm in Africa
Enya
Cool Your Temper
J. Martins
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
8/3/2019 ITM 353 - Lecture-3
14/18
9/29/20
Time for
CoffeeBreak
7Minutes
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
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.
Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.
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
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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:
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
Please browse and upload your comments file:
Web Technologies Lecture Slides by
Maxwell Dorgbefu Jnr.
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.
Top Related