ITM 353 - Lecture-3

9/29/2011
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
9/29/2011
Creating Links - 1
A static web page contains no links within the document 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.
9/29/2011
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 on other web sites or servers.
How to create Links

To create links in your HTML documents, we make use of the anchor container(<A>anchor</A>). 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. <A href=http://www.google.com>Google</A>
9/29/2011
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.
Common Image Formats

IMAGE FORMAT GIF JPEG PNG PDF TIFF BMP DESCRIPTION Graphics Interchange Format Joint Photographers Experts Group Portable Network Graphics Portable Document Format Tagged Image File Format Bit Mapped Picture
FILE EXTENSION .gif .jpg/.jpeg .png .pdf .tif/.tiff .bmp
9/29/2011
The <IMG> Tag

Images are inserted into documents using the the <IMG> tag. The src(Source) attribute is the only required attribute of the <IMG> tag. This attribute tells the browser where to find the image that is to be inserted into your page. The alt attribute provides a text-based description of the image. Other attributes of the <IMG> tag include longdesc, height, width and align
Example
<HTML>
<HEAD>
<TITLE>My Pictures</TITLE>
</HEAD> <BODY bgcolor=#FFFFFF>  Here is a picture of a lovely reggae icon: <BR> <IMG src=Joseph Hill.jpg alt=Joseph Hill> <BR> Actually , this is Joseph Hill(Culture) from Jamaica. <BR> </BODY>
</HTML>
9/29/2011
Adding Sound
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 plugin.
Common Audio Formats

AUDIO FORMAT
-law RIFF WAVE AIFF mu-law Resource Interchange File Format Waveform Audio Interchange File Format
DESCRIPTION
FILE EXTENSION
.au .wav .aiff
MPEG
Moving Picture Experts Group
.mp2/.mp3
MIDI
Musical Instrument Digital Interface
.mid/.midi
9/29/2011
Adding Video
Video files are a collection of images usually with 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 to web pages just as links by using the href attribute of the anchor container.
Lists
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
9/29/2011
Ordered Lists - 1
A simple ordered list(<OL>) presents items in a numbered manner. Two HTML tags used to produce ordered lists are:
Ordered List: <OL></OL> which encloses the list List Item: <LI></LI> use to start each new list item.
Example: The following are my favorite reggae icons:

<OL >
<LI> Joseph Hill </LI> <LI> Buju Banton </LI> <LI> Bob Marley </LI>
</OL>
Ordered Lists - 2
Commonly used attributes with the <OL> tag are: start, type, title, value and style. type and style attributes
TYPE A a I i 1 STYLE upper-alpha lower-alpha upper-roman Lower-roman decimal DESCRIPTION Uppercase letters Lowercase letters Uppercase Roman numerals Lowercase Roman numerals Arabic numerals(default) EXAMPLES A. B. C. D. a. b. c. d. I. II. II. IV i. ii. Iii. iv 1. 2. 3. 4.
9/29/2011
Unordered Lists
The unordered list(<UL>) 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 List Example

<HTML>
<HEAD> <BODY>
<TITLE>Unordered List </TITLE>
</HTML>
</BODY>
The following are my favorite reggae icons: <UL type=square > <LI> Joseph Hill </LI> <LI> Buju Banton </LI> <LI> Bob Marley </LI> </UL>
9/29/2011
Definition Lists
This is used to present a term and its definition formatted 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
<DL> <DT> Definition Term </DT> <DD> Definition Definition </DD> </DL>
Menu Lists
The <MENU> element was designed to present single-column menu lists. <MENU>
<LI> List Item 1 </LI> <LI> List Item 2 </LI> <LI> List Item 3 </LI>
</MENU>
10
9/29/2011
Tables
Tables are composed of row data running across the screen and columns that run up and down. The intersection of a row and a column is called a CELL. The border is the line around the table and between each cell. Frame: This is the line that surrounds a single cell or the whole table. Padding: This is the space between the cells content and the border and it is set using the cellpadding attribute
Tables - 2
The following tags are used to produce a tabular display in HTML: <TABLE> </TABLE> : Encloses the table. <TH> </TH> : Defines the table headers. <TR> </TR> : Defines the table rows. <TD> </TD> : Surrounds the actual table data. <CAPTION> </CAPTION> : Allows you to place a caption either below or above the table.
11
9/29/2011
Tables - 3
Some of the attributes used to enhance tabular display in HTML include: border, frame,cellpadding, cellspacing, bgcolor, align, width etc.
Table Example
<HTML> <HEAD>
<TITLE> HTML Tables: </TITLE>
</HEAD> <BODY>
<TABLE width="75%" border="5" cellpadding="2" align="CENTER"> <CAPTION> <H1>MY FAVORITE COLLECTIONS</H1> </CAPTION> <TR> <TH>Title of Music </TH> <TH> Artist </TH> </TR>
12
9/29/2011
<TR> <TD> Forward to Africa </TD> <TD> Joseph Hill </TD> </TR> <TR> <TD> China Roses </TD> <TD> Enya </TD> </TR> <TR> <TD> Floral Street </TD> <TD> Enya </TD> </TR> <TR> <TD> Humble Africa </TD> <TD> Joseph Hill </TD> </TR>
<TR> <TD> Nah Stay Inna Babylon</TD> <TD> Joseph Hill </TD> </TR> <TR> <TD> Miss Independent </TD> <TD> Neyo </TD> </TR> <TR> <TD> Storm in Africa</TD> <TD> Enya </TD> </TR> <TR> <TD> Cool Your Temper</TD> <TD> J. Martins </TD> </TR> </TABLE>
</BODY>
</HTML>
13
9/29/2011
Time for
7 Minutes
Coffee Break
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 via the browser.
14
9/29/2011
Forms - 2
The <FORM> container holds the contents of the form. The ending tag of </FORM > is never omitted. The action and method are required attributes of the <FORM> tag. The action attribute points to the application that will process the data captured by the form. The method attribute tells the browser how to send the data to the server. There are two ways to do this: GET and POST
The <INPUT> tag

The <INPUT> 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 <INPUT> controls allow the web weaver to create text-input fields, radio buttons, submit and reset buttons.
15
9/29/2011
Form Controls and their required Attributes

CONTROL Text File Hidden Checkbox Radio Submit Reset Password Image Button REQUIRED ATTRIBUTE(S) name name name, value name, value name, value none none name, value src name, value
HTML Forms Example <HTML>

<HEAD>
<TITLE> HTML Forms: </TITLE>
</HEAD> <BODY>
<FORM action="mailto:admin@somewhere.com" method="POST" enctype="multipart/form-data>
16
9/29/2011
Please enter your name here: <INPUT type="TEXT name="namesize ="30"> <BR> Please enter your email here: <INPUT type="TEXT name="email size="30"> <BR> Please enter your password here: <INPUT type = "PASSWORD" size = "20"> <BR>
Please browse and upload your comments file:

<INPUT type="FILE size="45"> <BR> <BR> <INPUT type="SUBMITvalue="Send"> </FORM>
</BODY>
</HTML>
17
9/29/2011
The <TEXTAREA> Container

The <TEXTAREA> </TEXTAREA> container sets the user free from the single-line restriction by creating an area in the browser pane foe textual input.
<FORM action="mailto:admin@kznet.com" method="POST Please produce your story here: <TEXTAREA name=story rows=8 cols=60 > </TEXTAREA> <INPUT type=Submit name=Upload value=Upload Story> </FORM>
EXERCISE 1. Write HTML codes that produce a tabular display of 10 favorite music collections of yours in this format:
Title Forward to Africa Artist Joseph Hill Genre Reggae
2. Write HTML codes that accepts First name, last name , sex, age, email password and comment from a user via HTML form.
18

ITM 353 - Lecture-3

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ITM 353 - Lecture-3

Transféré par

Droits d'auteur :

Formats disponibles

9/29/2011

ITM 353; WEB TECHNOLOGIES

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

How to create Links

Adding Images and Multimedia

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Common Image Formats

FILE EXTENSION .gif .jpg/.jpeg .png .pdf .tif/.tiff .bmp

The <IMG> Tag

Common Audio Formats

Moving Picture Experts Group

Musical Instrument Digital Interface

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Example: The following are my favorite reggae icons:

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Unordered List Example

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

The <INPUT> tag

Form Controls and their required Attributes

HTML Forms Example <HTML>

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

Please browse and upload your comments file:

Web Technologies Lecture Slides by Maxwell Dorgbefu Jnr.

The <TEXTAREA> Container

Vous aimerez peut-être aussi