Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
331 views

Lab WorkBook and Activity HTML CSS JavaS PDF

1. Tables can be used to display information in a grid format, with columns and rows, and advantages include adjustable column widths and enhanced readability with borders and colors. 2. Lists in HTML include ordered lists (<ol>) and unordered lists (<ul>) and are used to present series of related items in a visual hierarchy. 3. On mobile screens, tables have disadvantages like requiring horizontal scrolling for many columns, decreased text readability in narrow columns, and increased page load times. Formatting tables appropriately can help address these issues.

Uploaded by

Shehab Mohamed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
331 views

Lab WorkBook and Activity HTML CSS JavaS PDF

1. Tables can be used to display information in a grid format, with columns and rows, and advantages include adjustable column widths and enhanced readability with borders and colors. 2. Lists in HTML include ordered lists (<ol>) and unordered lists (<ul>) and are used to present series of related items in a visual hierarchy. 3. On mobile screens, tables have disadvantages like requiring horizontal scrolling for many columns, decreased text readability in narrow columns, and increased page load times. Formatting tables appropriately can help address these issues.

Uploaded by

Shehab Mohamed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

DFT3013

WEB DESIGN
LAB TECHNOLOGIES
WORKBOOK
WEB DESIGN TECHNOLOGIES DFT3013

LAB WORKBOOK CONTENTS

LAB 1 – Basic Understanding about HTML (Text)………………………….…..…..3

LAB 2 – HTML Table and List………………………………………………..…….…7

LAB 3 – How to make a link……………………………………….………………….19

LAB 4 – HTML Frame……………………………………………….………….........23

LAB 5 – HTML Form………………………………………………….…………..…..29

LAB 6 – Advanced HTML Form, Audio and Video…………………………..….....37

LAB 7 – Cascading Style Sheets (CSS)…………………………………………....47

LAB 8 – Introduction to JavaScript…………………………………………………..51

2
WEB DESIGN TECHNOLOGIES DFT3013

LAB 1: BASIC UNDERSTANDING ABOUT HTML (TEXT)

LEARNING OUTCOMES:
1. Learn the fundamentals of implementing and distributing a HTML
application.
2. Learn to use the HTML tags.

THEORY AND CONCEPTS:

 HTML stands for Hyper Text Markup Language


 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an .htm or .html file extension
 An HTML file can be created using a simple text editor

HTML Tags

 HTML tags are used to mark-up HTML elements


 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

3
WEB DESIGN TECHNOLOGIES DFT3013

Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
What is an HTML File?

 HTML stands for Hyper Text Markup Language


 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor

ACTIVITY : 1A
Procedure :

1. In Windows, start Notepad and type in the following text:


<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

4
WEB DESIGN TECHNOLOGIES DFT3013

2. Save the file as "mypage.html".


3. Start your Internet browser. Select "Open" (or "Open Page") in the File
menu of your browser. A dialog box will appear. Select "Browse" (or
"Choose File") and locate the HTML file you just created - "mypage.html" -
select it and click "Open". Now you should see an address in the dialog
box, for example "C:\MyDocuments\mypage.html". Click OK, and the
browser will display the page.

ACTIVITY : 1B
Procedure :
1. Use the HTML example from activity 1A
2. Now we are going to learn is how to change background colors.
<BODY BGCOLOR="#CCFFCC">
This is my first homepage. <b>This text is bold</b>
</BODY>

3. CCFFCC is computerizing for light green. You can try for another color
4. You also can specify a background image instead. (Note, the image
should be in the same folder as your HTML file. More on this below.)
<BODY BACKGROUND="swirlies.gif">
This is my first homepage. <b>This text is bold</b>
</BODY>

5. In order for the image to show up, the browser has to be able to find it. For
now, we want the image to be in the same folder as your HTML document
(mypage1.html). The easiest way to do this is to right click on the swirlies
image above and choose Save Image As (or some variant thereof).
Browse to wherever you put mypage1.html and save the image there.

5
WEB DESIGN TECHNOLOGIES DFT3013

ACTIVITY : 1C
Combine all that you have learnt into one web page and send in as your Lab
Work.

NOTES:

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

6
WEB DESIGN TECHNOLOGIES DFT3013

LAB 2 : HTML TABLE & LIST

LEARNING OUTCOMES:
3. Learn to use the HTML Tables.
4. Learn to use the HTML Lists.

THEORY AND CONCEPTS:

Tables are used for information as well as for layout. You can stretch tables to fill
the margins, specify a fixed width or leave it to the browser to automatically size
the table to match the contents.

Using tables judiciously

Big tables are a nightmare for users trying to view them on the small screens of
mobile device screen. But if you are careful, you can use tables to good effect in
some situations.

Advantages of tables

Tables in HTML have several advantages that you are probably used to taking
advantage of in desktop web design:

 Columns can resize automatically so the table always fills different screen
widths.
 Cell borders and background colors can enhance readability.
 With AvantGo Client 5.x you have the option of using JavaScript to do
powerful things like sort a table in order by a column when the user clicks
the column header.

7
WEB DESIGN TECHNOLOGIES DFT3013

Disadvantages of tables

Tables also have distinct disadvantages on mobile devices:

 You can only squeeze in a small number of columns before the table width
causes horizontal scrolling on smaller screens.
 Making columns narrow to prevent horizontal scrolling will decrease
readability of text in cells, as a paragraph is "stacked" into one or two
words per line.
 Page size is increased vs. the same content displayed without a table.
 Page rendering is slowed.

ACTIVITY 1A
Procedure :

Year Sales

2000 $18M

2001 $25M

2002 $36M

The markup for this is:


<table border="1">
<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

The table element acts as the container for the table. The border attribute
specifies the border width in pixels. The tr element acts as a container for each

8
WEB DESIGN TECHNOLOGIES DFT3013

table row. The th and td elements act as containers for heading and data cells
respectively.

ACTIVITY 1B
Procedure : Cell Padding

You can increase the amount of padding for all cells using the cellpadding
attribute on the table element. For instance, to set the padding to 10 pixels:

<table border="1" cellpadding="10">


this has the effect:

Year Sales

2000 $18M

2001 $25M

2002 $36M

ACTIVITY 1C
Procedure : Cell Spacing

By contrast the cellspacing attribute sets the space between the cells. Setting the
cell spacing to 10: which has the effect:
<table border="1" cellpadding="10" cellspacing="10">

Year Sales

2000 $18M

2001 $25M

9
WEB DESIGN TECHNOLOGIES DFT3013

2002 $36M

ACTIVITY 1D
Procedure : Table Width

You can set the width of the table using the width attribute. The value is either
the width in pixels or a percentage value representing the percentage of the
space available between the left and right margins. For instance to set the width
to<table
80% of the margins:
border="1" cellpadding="10" width="80%"> which has the
effect:

Year Sales

2000 $18M

2001 $25M

ACTIVITY 1E
Procedure : Text Alignment within Cells

By default browsers center heading cells (th), and left align data cells (td). You
can change alignment using the align attribute, which can be added to each cell
or to the row (tr element). It is used with the values "left", "center" or "right":
<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

10
WEB DESIGN TECHNOLOGIES DFT3013

Year Sales

2000 $18M

2001 $25M

2002 $36M

with the following result:


The valign attribute plays a similar role for the vertical alignment of cell content. It
is used with the values "top", "middle" or "bottom", and can be added to each cell
or row. By default, heading cells (th) position their content in the middle of the
cells while data cells align their content at the top of each cell.

ACTIVITY 1F
Procedure : Empty Cells

One quirk is the way browsers deal with empty cells, compare:

Year Sales

2000 $18M

2001 $25M

2002 $36M

11
WEB DESIGN TECHNOLOGIES DFT3013

2003

with

Year Sales

2000 $18M

2001 $25M

2002

The former occurs when a cell is empty:

<td></td>
To prevent this, include a non-breaking space:
<td>&nbsp;</td>

ACTIVITY 1G
Procedure : ROWSPAN and COLSPAN

Cells that span more than one row or column

Let's extend the above example to break out sales by north and south sales
regions:

Sales
Year
North South Total

2000 $10M $8M $18M

12
WEB DESIGN TECHNOLOGIES DFT3013

2001 $14M $11M $25M

The heading "Year" now spans two rows, while the heading "Sales" spans three
columns. This is done by setting the rowspan and colspan attributes respectively.
The markup for the above is:

<table border="1" cellpadding="10" width="80%">


<tr align="center"><th rowspan="2">Year</th><th colspan="3">Sales</th></tr>
<tr align="center"><th>North</th><th>South</th><th>Total</th></tr>
<tr
align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr
align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

You can simplify this by taking advantage of the fact that browsers don't need the
end tags for table cells and rows:

<table border="1" cellpadding="10" width="80%">


<tr align="center"><th rowspan="2">Year<th colspan="3">Sales
<tr align="center"><th>North<th>South<th>Total
<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M
<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M
</table>

Notice that as the heading "Year" spans two rows, the first th element on the
second row appears on the second rather than the first column.

ACTIVITY 1H
Procedure : Borderless tables

13
WEB DESIGN TECHNOLOGIES DFT3013

These are commonly used for laying out pages in a gridded fashion. All you need
to do is to add border="0" and cellspacing="0" to the table element:

Year Sales

2000 $18M

2001 $25M

2002 $36M

This was produced using the following markup:

<table border="0" cellspacing="0" cellpadding="10">


<tr><th>Year</th><th>Sales</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>
If you leave out the cellspacing attribute you will get a thin gap between the cells,
as shown below:

Year Sales

2000 $18M

2001 $25M

14
WEB DESIGN TECHNOLOGIES DFT3013

2002 $36M

Below is an example of a complete table. However the table below has a


mistake. Identify what the mistake is and reproduce this table.

Monday Tuesday Wednesday Thursday Friday

9 BIS 3050 Lec BIS 4226 lab

Office
10 BIS 3050 Lec BIS 4226 Lab
Hours

Office
11 BIS 2040 Lab BIS 4226 lab
Hours

12 BIS 3050 Lab BIS 4226 lab

1 BIS 3050 Lab


research
PGCHE Research
2 BIS 4226 lab
Course Meeting

PGCHE Research
3 BIS 4226 lab
Course Meeting

PGCHE
4
Course

THEORY AND CONCEPTS:

Three kinds of lists


HTML supports three kinds of lists.
 Unordered list

15
WEB DESIGN TECHNOLOGIES DFT3013

 Ordered list
 Definition list

ACTIVITY 2A
Procedure : Unordered list

 The first kind is a bulletted list, often called an unordered list.


 It uses the <ul> and <li> tags, for instance:

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>Note that you always need to end the list with the </ul> end tag, but that the
</li> is optional and can be left off..

ACTIVITY 2B
Procedure : Borderless tables

 The second kind of list is a numbered list, often called an ordered list
 It uses the <ol> and <li> tags. For instance:

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>Like bulletted lists, you always need to end the list with the </ol> end tag, but
the </li> end tag is optional and can be left off. 16
WEB DESIGN TECHNOLOGIES DFT3013

ACTIVITY 2C
Procedure : Definition list

 The third and final kind of list is the definition list.


 This allows you to list terms and their definitions.
 This kind of list starts with a <dl> tag and ends with </dl> Each term starts
with a <dt> tag and each definition starts with a <dd>. For instance:

<dl>
<dt>the first term</dt>
<dd>its definition</dd>
<dt>the second term</dt>
<dd>its definition</dd>
<dt>the third term</dt>
<dd>its definition</dd>
</dl>The end tags </dt> and </dd> are optional and can be left off.

ACTIVITY 2D
Procedure : Borderless tables

 Note that lists can be nested, one within another. For instance:
<ol>
<li>the first list item</li>
<li>
17
the second list item
<ul>
<li>first nested item</li>
WEB DESIGN TECHNOLOGIES DFT3013

EXERCISE:

1. How would you create the following list?


1. Good Day
2. How Are You
 Fine
 Bad
3. Poor Thing

NOTES

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

18
WEB DESIGN TECHNOLOGIES DFT3013

________________________________________________________________
________________________________________________________________

LAB 3 : HOW TO MAKE A LINK

LEARNING OUTCOMES :
1. Learn the fundamentals of implementing and distributing a HTML
applications
2. Learn how to make links to other files or documents.

THEORY AND CONCEPTS :

 HTML uses the <a> (anchor) tag to create a link to another document.
 An anchor can point to any resource on the Web: an HTML page, an
image, a sound file, a movie, etc.
 The syntax of creating an anchor:
<a href="url">Text to be displayed</a>

 The <a> tag is used to create an anchor to link from.


 The href attribute is used to address the document to link to.
 The words between the open and close of the anchor tag will be displayed
as a hyperlink.
 This anchor defines a link to Yahoo:
<a href="http://www.yahoo.com/">Visit Yahoo!</a>

19
WEB DESIGN TECHNOLOGIES DFT3013

 The line above will look like this in a browser:


Visit Yahoo!

ACTIVITY : 1A
Procedure :

1. Edit the text above, and see the result at Internet browser .
<html><body>
<p><a href="lastpage.htm">This text</a> is a link to a page
on this Web site.</p>
<p><a href="http://www.microsoft.com/">
This text</a> is a link to a page on the World Wide Web.</p>
</body></html>

2. Save the file as "mypage.html".


3. Start your Internet browser. Select "Open" (or "Open Page") in the File
menu of your browser. A dialog box will appear. Select "Browser" (or
"Choose File") and locate the HTML file you just created - "mypage.html" -
select it and click "Open".

ACTIVITY : 1B
Procedure :

1. This example demonstrates how to use an image as a link.


2. Edit the text above, and see the result at Internet browser .
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm"> 20
<img border="0" src="buttonnext.gif" width="65"
height="38"> </a>
</p>
WEB DESIGN TECHNOLOGIES DFT3013

3. Save the file.

4. Start your Internet browser. Select "Open" (or "Open Page") in the File
menu of your browser. A dialog box will appear. Select "Browser" (or
"Choose File") and locate the HTML file you just created

ACTIVITY : 1C

Linking into the middle of Web pages

Procedure
 Imagine you have written a long Web page with a table of contents near
the start.
 How do you make the entries in the table contents into hypertext links to
the corresponding sections?
 Imagine you have written a long Web page with a table of contents near
the start
 How do you make the entries in the table contents into hypertext links to
the corresponding sections?
 Let's assume that each section starts with a heading, for instance:
<h2>Local Night Spots</h2>

 You make the heading into a potential target for a hypertext link by
enclosing its contents with <a name=identifier> .... </a>

<h2><a name="night-spots">Local Night Spots</a></h2>

21
WEB DESIGN TECHNOLOGIES DFT3013

 The name attribute specifies the name you will use to identify the link
target, in this case: "night-spots".
 The table of contents can now include a hypertext link using this name, for
instance:

...
<a href="#night-spots">Local Night Spots</a>
...

ACTIVITY : 1D

Linking (to scroll up the web page document).

Procedure
1. This example demonstrates how to scroll up the web page document.
2. Type the codes below at a notepad, and see the result at Internet browser
.
<html>
<a id="a">aaa</a>
<p>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</p>
<a href="#a">ke atas</a>
</body>
</html>

3. Save the file as activity1D.html and start your Internet browser.


4. Scroll until the last output and click the hyperlink ke atas to scroll up.

NOTES:

22
WEB DESIGN TECHNOLOGIES DFT3013

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

LAB 4: HTML FRAME

LEARNING OUTCOMES:
1. Learn the fundamentals of implementing and distributing a HTML
applications.
2. Learn to use the HTML frames.

YOUR FIRST FRAMESET

A frameset file starts off as any HTML file does with a HEAD section.
After that you would normally put your BODY tag, then all your page content.
This is where the frameset starts to look a little different. Instead of BODY tags,
you need to put FRAMESET tags. To tell the browser how to display your
frames, you need to put an attribute in the FRAMESET tag. For this first
example, let's imagine that you want to split the browser window horizontally,
with the top frame being 100 pixels and the lower frame taking the remaining
space:

<FRAMESET ROWS="100,*">

23
WEB DESIGN TECHNOLOGIES DFT3013

You list the number of pixels you want each frame to be, starting at the top, and
put them all into an attribute called ROWS. The * in the second frame is telling
the browser to let that frame take up all the remaining space. If you'd wanted
three frames, you'd have listed 3 numbers (or 2 and a *).

To split a page vertically, replace ROWS with COLS. Again just list the frame
sizes starting from the left. By the way, you could use percentage sizes in your
FRAMESET. Personally I always use absolute sizing, as that way you can be
fairly sure how your page will look at most screen resolutions.

FRAMES? WHAT FRAMES?

Now that you've told the browser how to layout the frames, you've got to tell it
what to put in them. That's the job of the FRAME tag - you'll have one frame tag
within your FRAMESET tags for each frame on the page, in this case 2.

The most important attributes of the FRAME tag are NAME and SRC. The
NAME tag let's you (surprise, surprise) give the frame a name which you can use
to refer to it when linking (we'll come to that later). SRC gives the path
(addressing as normal) to the file you want to appear within the frame. A
completed (very basic) frameset could therefore look like this:

<FRAMESET ROWS="100,*">
<FRAME NAME="navbar" SRC="navbar.html">
<FRAME NAME="main" SRC="main.html">
</FRAMESET>

After this you just put your closing </HTML> tag and the frameset page is done.
In the next section we'll learn how to get those frames behaving just how we want
them to.

24
WEB DESIGN TECHNOLOGIES DFT3013

NESTED FRAMES

Now you know how to do frames horizontally. You also know how to do them
vertically. But what if you wanted to do both at the same time? For example, one
banner going across the whole of the top of the window, then two vertical frames
below it (see right). Now how do you do that?

There are actually two ways. Firstly, you could use multiple frameset documents.
In your main frameset you set up two horizontal frames - one for your banner and
one for the rest of the window. As the source (SRC) of the second frame, you
give the path to another frameset file which splits the space into the two vertical
frames. You therefore have five separate files - the three frames and the two
framesets. This will work perfectly well, as long as you’re careful with your frame
naming and don't duplicate.

The other (and I think more elegant) way of doing it is to nest the framesets in a
single file. You main frameset will contain the ROWS attribute, and this will be
followed by the FRAME tag for the top frame.

After that, where you'd normally put the next FRAME tag, you put another
FRAMSET tag with the COLS attribute for the two lower frames. Then you have
its two FRAME tags, just as normal.

<FRAMESET ROWS="100,*">
<FRAME NAME="navbar" SRC="navbar.html">
<FRAMESET COLS="100,*">
<FRAME NAME="left" SRC="left.html">
<FRAME NAME="right" SRC="right.html">
</FRAMESET>
</FRAMESET>

25
WEB DESIGN TECHNOLOGIES DFT3013

Now that you've mastered framesets, all you need to do is create the frames
pages themselves.

These pages are just normal HTML pages - so normal that they could be opened
independently of the frameset and would display perfectly well (although they
might seem out of context depending on your site design. Having said that, there
are just a few more things you need to know...

LINK TARGETING

Normally creating links is a easy. It isn't? Well, you'd better do some revision
then!
In frames, the same principles apply. The addressing system works in exactly the
same way, but remembers that paths should use the frame document as their
base or origin and NOT the frameset (this will only make a difference if they're in
different directories).

What you must also consider is where (in which of your frames) you want the
new page to be displayed. This is where the frame names and the TARGET
attribute of the A tag become very important. Let's imagine you've got a frameset
like the one on the right, where the top frame is called BANNER and the bottom
one MAIN. Say you've got a link in the banner frame and you want the document
it points to to be opened in the main frame. The A tag would therefore look like
this:

<A HREF="file.html" TARGET="main">Click Here!</A>

The target attribute is simply set as the name of the frame that you want the link
to open in. This is why it's important that each frame has a different name.

OTHER TARGETS

26
WEB DESIGN TECHNOLOGIES DFT3013

You can also use some special target names in the A tag to do some, well,
special things:
_top The file specified will fill the entire browser
window, removing all frames.
_self The file will open in the current frame, i.e. where
the link is.
_parent The file will fill the current frameset. Unless
you're using nested framesets (framesets which
open other framesets in one of their frames), this
will have the same effect as _top.
_blank Opens the file in a completely new browser
window with no frames.

If the target you specify does not exist, a new browser window will be opened
and given that name. Any other links that use the same target name will now also
open in that window. Whenever you link to an external site, always use _top or
_blank to prevent the site opening within your frameset somewhere.
NOFRAMES CONSIDERATIONS

Moving away from links and targets, we come to a very important point about
frames. Not all browsers can read them! Some (mainly old) browsers are unable
to understand frames and so anyone using them will not be able to view your
pages. To be fair, most modern versions of browsers will read frames but with all
the new gadgets out there using the web you can never be too sure. Also, and
more importantly, search engines cannot understand frames. This means that
your site will not be able to be listed on the search engines unless you give them
some real content to read.

To get around this problem, we have the magic NOFRAMES tag. This goes in
your frameset file, after all the FRAME tags (before the final </FRAMESET> tag).

27
WEB DESIGN TECHNOLOGIES DFT3013

It can contain absolutely any normal HTML which will be displayed to anyone
who can't see the frames.
At the very least you should use the NOFRAMES tag to put a brief message
telling the user what has happened and how to upgrade their browser:

<NOFRAMES>
<P>This site uses frames, but your browser doesn't support them</P>
<P>To upgrade your browser, visit the
<A HREF="http://www.microsoft.com/ie/">Microsoft</A> or
<A HREF="http://www.netscape.com">Netscape</A> websites.
</P>
</NOFRAMES>

A much more useful approach would be to provide links to some of your frames
pages so that the user can still get to some of your content. You could even
design a completely separate non-frames site and link to it from the NOFRAMES
section.

Unless you take one of these latter options, it is very unlikely that any search
engines will register your site. They will look in the NOFRAMES section and try to
follow any links there, but they will not touch the frameset.

ACTIVITY 1:
Create the below Frameset. Change the static header’s color.

THIS IS MY FIRST FRAME Static


Header

Place three
Links here Index

Footer

28
WEB DESIGN TECHNOLOGIES DFT3013

NOTES:

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

LAB 5: HTML FORMS

LEARNING OUTCOMES:
1. Learn the fundamentals of implementing and distributing HTML FORMS

THEORY AND CONCEPTS:

INTRODUCTION

A form is an area that can contain form elements. Form elements are elements
that allow the user to enter information (like text fields, textarea fields, drop
down menus, radio buttons, checkboxes, etc) in a form.

Forms have advantages too. With a form you can gather useful information about
the sender, such as browser, IP address, host name, and referring URL, to help
you analyze the visitors to your site.

Finally, forms don't have to be used for visitor feedback either. You often see
buttons and drop down menus used as navigation systems in web sites, and the

29
WEB DESIGN TECHNOLOGIES DFT3013

various elements of a form can be combined with script to provide powerful


functionality.

HOW FORMS WORK

1. Form consists of a number of different elements, such as text boxes,


menus, and buttons, which hold data values which you provide.
2. Forms usually also have a Submit button. This button is used when the
form has been filled in and is ready to be sent off. When the button is
clicked, the browser goes through each of the elements in the form and
notes down the name of the element (if any) and its current value.
3. Sometimes, the form is set to send these details to a certain e-mail
address, by using the mailto: protocol which you met in Formatting text in
HTML.
4. It can receive this data in one of two methods: either GET or POST.
a. If the GET method is used, the form data is combined into a string,
and this string is added on to the end of the target location.
b. The POST method groups the data together and sends it to the
program by HTTP (HyperText Transfer Protocol), so the user can't
see what data is being sent. This is the method used when sending
data using mailto:.
5. How do you know which method to use?
a. GET should be used if the form causes no side effects, and POST
if it does.
b. For example, submitting keywords for a search of a database would
have no side effects, and so the GET method would be used. But
submitting data which will be entered into a database, or which will
be written to a log file, should be done with the POST method.

THE FORM TAG

<form>…………………………..</form>

30
WEB DESIGN TECHNOLOGIES DFT3013

1. The <FORM> tag encloses all the elements of a feedback form.


2. The FORM element has several attributes which you need to specify for
each form that you create.
a. METHOD attribute, which (as you may have guessed) can be either
GET or POST.
b. The ACTION attribute, which is the location of the URL or e-mail
address which will receive the form. There's also the ENCTYPE
attribute for the MIME-type of the form data.
c. The NAME attribute to identify the form in JavaScript (you should
use the ID attribute for HTML 4.0), and the TARGET attribute, to
define in which frame the form results will appear.

For example, here's a line I might use to send a form directly to my e-mail
address:

<FORM METHOD=POST ACTION="mailto:hafizah@ict.puo.edu.my"


ENCTYPE="text/plain">
<FORM METHOD=POST ACTION="/cgi-bin/formmail.cgi"
TARGET="results">

THE FORM ELEMENTS

A form in HTML consists of one or more elements, or controls, which hold data
values. We'll now take a look at each one in detail.

ACTIVITY 1A

INPUT

The most used form tag is the <input> tag. The type of input is specified with the
type attribute. The most commonly used input types are explained below:

1. TEXT FIELDS

31
WEB DESIGN TECHNOLOGIES DFT3013

Text fields are one line areas that allow the user to input text.

<form name="myform" action="" method="POST">


<input type="text" size="25" value="Enter your name here!">
</form>

How it looks in a browser:

Note: The form itself is not visible. Also note that in most browsers, the width
of the text field is 20 characters by default.

2. RADIO BUTTONS

Radio buttons are used when you want to let the visitor select one - and just
one option from a set of alternatives.

<form name="myform" action="" method="POST">


<input type="radio" name="group1" value="Milk">
Milk<br>
<input type="radio" name="group1" value="Butter" checked>
Butter<br>
<input type="radio" name="group1" value="Cheese">
Cheese
</form>

And the resulting output:

3. CHECKBOXES

Check boxes are used when you want to let the visitor select one or more
options from a set of alternatives.

32
WEB DESIGN TECHNOLOGIES DFT3013

<form name="myform" action="" method="POST">


<input type="checkbox" name="option1" value="Milk">
Milk<br>
<input type="checkbox" name="option2" value="Butter"
checked>
Butter<br>
<input type="checkbox" name="option3" value="Cheese">
Cheese<br>
</form>

And the resulting output:

ACTIVITY 1B

1. DROP DOWN MENU / OPTION

Drop-down menus are probably the most flexible objects you can add to your
forms. Depending on your settings, drop-down menus can serve the same
purpose as radio buttons (one selection only) or check boxes (multiple
selections allowed). The advantage of a drop-down menu, compared to radio
buttons or check boxes, is that it takes up less space. But that is also a
disadvantage, because people can't see all options in the menu right away.

<form name="myform" action="" method="POST">


<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</form>

And the resulting output:

33
WEB DESIGN TECHNOLOGIES DFT3013

2. CREATE A BUTTON

This example demonstrates how to create a button. On the button you can
define your own text.

<form name="myform" action="" method="POST">


<input type="submit" value="Hello World!">
</form>

3. FIELDSET AROUND DATA

The <fieldset> tag is used to logically group together elements in a form.

The <fieldset> tag draws a box around the related form elements. The

<legend> tag defines a caption for the fieldset element.

<form>
<fieldset>
<legend>Personal Data</legend>
Name: <input type="text" size="30" /><br>
Email: <input type="text" size="30" /><br>
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

And the resulting output:

34
WEB DESIGN TECHNOLOGIES DFT3013

ACTIVITY 1C

1. THE FORM’S ACTION ATTRIBUTE AND THE SUBMIT BUTTON

When the user clicks on the “submit” button, the content of the form is sent to

another file. The form’s action attribute defines the name of the file to send

the content to. The file defined in the action attribute usually does something

with the received input.

<form name="input" action="form_save.php" method="get">


Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

And the resulting output:

CONCLUSION : FORM TAGS

Tag Description
<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area (a multi-line text input control)
<label> Defines a label to a control
<fieldset> Defines a fieldset
<legend> Defines a caption for a fieldset
<select> Defines a selectable list (a drop-down box)
<optgroup> Defines an option group
<option> Defines an option in the drop-down box

35
WEB DESIGN TECHNOLOGIES DFT3013

<button> Defines a push button


<isindex> Deprecated. Use <input> instead

EXERCISE:
Write HTML code for this output. Combine form and table concept.

NOTES:

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

36
WEB DESIGN TECHNOLOGIES DFT3013

LAB 6: ADVANCED HTML FORM, AUDIO AND VIDEO

LEARNING OUTCOMES:

5. Learn the advanced fundamentals of implementing and distributing HTML


FORMS

THEORY AND CONCEPTS:

MENUS

Menus are useful for when you need the user to select one or more options from
a large selection. The menu is usually rendered as either a list box or a drop-
down menu, so hundreds of different options can be included if desired - as
much as the user's memory can hold. Typical uses for this type of control include
"What country are you from?", "Which US state are you in?", as well as a
navigational aid in conjunction with JavaScript or CGI - just take a look at the top
of this page for an example.

A menu is created with the SELECT tag. The SELECT tag has three attributes
that you're interested in - the ubiquitous NAME attribute and the MULTIPLE and
SIZE attributes. The latter controls how many rows of the menu are visible: omit it
and the menu is usually show as a drop down list; make it larger than one and it
becomes a scrolling list box. The MULTIPLE attribute (either present or it's not)
controls whether the user can select more than one option.

37
WEB DESIGN TECHNOLOGIES DFT3013

Within the SELECT tag, each option available to the user is defined with the
OPTION tag. The OPTION tag has two main attributes - VALUE and
SELECTED. The VALUE attribute is what will be submitted to the form if this
option is selected in the menu. The SELECTED attribute determines whether this
option is initially selected or not. Whatever comes after the OPTION tag is the
text that is shown to the user in the menu; you don't actually have to close the
tag, but you can if you want to.

Now that you've hopefully absorbed all of this, let's take a look at two examples
of menus. The first one is a scrolling list box where you can have multiple
selections:

ACTIVITY 1A

<SELECT NAME="actors" MULTIPLE SIZE="4">


<OPTION VALUE="arnie">Arnold Schwarzennegger
<OPTION VALUE="stallone">Sylvester Stallone
<OPTION VALUE="vandamme">Jean Claude Van Damme
<OPTION VALUE="washington">Denzel Washington
<OPTION VALUE="willis">Bruce Willis
<OPTION VALUE="moore">Demi Moore
</SELECT>

Next we have a drop down menu where only one selection is possible:

<SELECT NAME="film">
<OPTION VALUE="terminator2">Terminator 2
<OPTION VALUE="crow">The Crow
<OPTION VALUE="fallen">Fallen
<OPTION VALUE="godzilla">Godzilla
</SELECT>

ACTIVITY 1B

OPTGROUP ELEMENT

38
WEB DESIGN TECHNOLOGIES DFT3013

The OPTGROUP element has only one attribute, LABEL, which specifies the
name of the group. Here's an example use of the OPTGROUP element:

<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

As there isn't (at the time of writing) a browser that supports OPTGROUP then
the following example defaults to a normal drop down menu, if you are lucky
enough to be viewing this article on a browser that has added this function then
you should see it in all its glory:

INCLUDING FILES IN A FORM

As I mentioned at the beginning of this article, it's actually possible to include a


file with your form submission. This file is uploaded to the server and then the
recipient program does something with it, perhaps storing it in a certain place or
sending it somewhere. In order to receive files from a form, you must make sure
your form is encoded in the correct way. To enable the user to select the file, you
then need to add a file select control to the form. This is once again
accomplished with the INPUT tag.

39
WEB DESIGN TECHNOLOGIES DFT3013

This time it's really simple:

<INPUT TYPE=FILE SIZE=35 NAME="myfile">

This will show up differently in different browsers and platforms, but basically it
comes up as a textbox (size 35), with a Browse button next to it. Clicking on this
button will invoke the operating system's file selector (such as the Windows File
Open dialog box), allowing you to pinpoint the location of the file you want. For
example:

ACTIVITY 1C

HIDDEN CONTROLS

There may be occasions where you want certain information to be sent with the
form, but you don't want this information to be visible to the user. This is where
hidden controls come in. Hidden controls don't show up at all on the form, but
when the form is submitted they do produce a name and a value. This value can
also be changed, using JavaScript.

Let's have a look at how a hidden control is created. As you would by now
expect, hidden controls are made with the INPUT tag. Very simply:

<INPUT TYPE=HIDDEN NAME="hidden1" VALUE="myvalue">

Now, let's take a closer look at why you'd want to use these hidden controls. The
most common reason is for a little "market research" into your visitors. For
example, if you have the same form on several pages of your site, you can set a

40
WEB DESIGN TECHNOLOGIES DFT3013

hidden control with the value being the title of that page - then you can see from
which page the user sent the form.

Hidden controls are also sometimes used to provide extra parameters or values
to specially configured CGI scripts, to make them act in a certain way. For
example, a form-to-email script might look at a hidden control in order to find out
which e-mail address it should send the form to, and which page it should display
after the form is submitted. This may not be the best way to do things, however,
because of potential security problems.

BUTTONS

Buttons are arguably the most important components in a form. They are
extremely versatile and can be configured for many different functions. First and
foremost, you normally click on a button in order to submit the form which you
just filled out to the server. A button is also sometimes provided to clear your
form if you've made a mistake. Forms are heavily connected with JavaScript, so
a button is very often given some JavaScript code which executes when it is
clicked.

Buttons can now come in many different shapes and sizes. There are different
commands for each type of button, so let's look at the most common first - the
Submit button. Just for a change, this button is created with the INPUT tag:

<INPUT TYPE=SUBMIT VALUE="Send the form">

This button will automatically submit the form to the program specified in the
ACTION attribute of the FORM tag. If you omit the VALUE attribute, the button
will show "Submit Query" or something similar.

If you have a large form, it's sometimes useful to let the user clear all of what
they've written and start again. You can achieve this with a Reset button - the line
is the same as a submit button, except that the INPUT TYPE=RESET. Bog-

41
WEB DESIGN TECHNOLOGIES DFT3013

standard buttons which are used in conjunction with script are created in the
same way, but the INPUT TYPE=BUTTON.

Buttons in HTML 4.0 can now look more interesting than a boring grey box with
black text on it. This is thanks to the introduction of the BUTTON element. There
are two advantages to this. Firstly, you can now include the BUTTON tag in your
style sheets in order to make your buttons look more attractive - for example, a
blue background and yellow, bold text with a large font size.

Secondly, you can include content inside your BUTTON element. For example,
you can include some formatted text to be displayed, and then a graphic too.
Below is an example of the BUTTON element in use. It has only one attribute,
the TYPE attribute, which can be set to button, submit or reset depending on the
functionality you want it to have.

<BUTTON TYPE=BUTTON>
<FONT FACE="Arial">
<B>Send</B>
<CENTER><IMG SRC="mail.gif" ALT="Send Mail" BORDER=0></CENTER>
<B>Mail</B>
</FONT>
</BUTTON>

The above code has specified that the button text be Arial in bold (you could -
and should - use CSS to achieve this). We have the word "Send", then an image
centered in the button, and then the word "Mail". Since Internet Explorer 4 is the
only browser to support this element at the time of writing, I've given you a little
picture so you can see what it should look like:

42
WEB DESIGN TECHNOLOGIES DFT3013

Using INPUT TYPE=IMAGE will create a Submit button based on the image you
specify. This is done with the usual SRC attribute. You can also add the ALT
attribute for a description and the USEMAP attribute to make the button into an
image map. A good use of this might be a photo of several different people in a
company, and the user clicks on a person in the photo to send the form's
contents to that person.

FORMS IN HTML 4.0

HTML 4.0 introduces a couple of other innovations into forms in order to make
them more user friendly - the FIELDSET and LEGEND elements.

Fieldsets allow you to group sections of related form controls together. For
example, you could split a form into sections by subject. This would allow you to
apply a different style to each fieldset in CSS, giving you greater power over the
appearance of your form. Fieldsets can also have a legend to clarify what the
group is called.

Fieldsets and legends are very simple to implement. You have one FIELDSET
tag per group, inside the FORM tag, and inside this FIELDSET you put all the
form controls which belong to that group, as well as the LEGEND tag. For
example, a form for entering information into some sort of company database:

43
WEB DESIGN TECHNOLOGIES DFT3013

<FORM ACTION="mailto:person@domain.com" METHOD=POST>


<FIELDSET>
<LEGEND>Personal Details</LEGEND>
Name.....
E-mail.....
Country.....
</FIELDSET>
<FIELDSET>
<LEGEND>Employment details</LEGEND>
Position.....
Salary....
Supervisor....
</FIELDSET>
<FIELDSET>
<LEGEND>Company car details</LEGEND>
Make......
Model.....
Registration.....
Value....
</FIELDSET>
</FORM>

ACTIVITY 1D

AUDIO AND VIDEO

Adding sound to your site gives it another dimension and may seem like a cool
idea. You can add HTML background music code to your web page using the
hidden attribute of the embed tag. The embed tag isn't actually part of the HTML
specification but it is still widely supported by the major browsers.

<embed name="lostmojo" src="/web_design/lostmojo.wav"


loop="false" hidden="true" autostart="true"></embed>

Or

<BGSOUND SRC="helloo.wav" loop="1">

44
WEB DESIGN TECHNOLOGIES DFT3013

Besides that, you also can embed HTML video code into your web page using
the <object> tag. To cater for browsers that don't support the <object> tag, you
can nest the embed tag inside the <object> tag.

<object width="425px" height="360px" >


<param name="allowFullScreen" value="true"/>
<param name="wmode" value="transparent"/>
<param name="movie"
value="http://mediaservices.myspace.com/
embed.aspx/m=5385825,
t=1,mt=video,searchID=,primarycolor=,secondarycolor="/>
<embed src="http://mediaservices.myspace.com/
embed.aspx/m=5385825,
t=1,mt=video,searchID=,primarycolor=,secondarycolor="
width="425" height="360" allowFullScreen="true"
type="application/x-shockwave-flash" wmode="transparent"/>
</object>

Attribute Description Possible Values


autostart Determines whether to start the video as soon as  True
the page has loaded.  False

hidden Determines whether to hide the video. For  True


example, if you just want background noise with  False
no video.
loop Determines whether to continuously replay the  True
video after it has finished.  False

playcount Determines how many times to repeat the video. A number value
volume Determines how loud the audio should be. Number value
between 1 and
100

Some of the more common video formats are:

 .swf - Shockwave/Flash File (by Macromedia/Adobe)


 .wmv - Windows Media Player video format (by Microsoft)
 .mov - QuickTime video format (by Apple)

45
WEB DESIGN TECHNOLOGIES DFT3013

 .mpeg - Video compression format (specified by the Moving Pictures


Experts Group)

CONCLUSSION:

This article has hopefully shown you how you can create user friendly and
effective forms which will allow you to give your site extra functionality, whether
it's by a JavaScript navigation technique or simply a feedback form so that your
visitors can tell you what they really think.

NOTES:

________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

46
WEB DESIGN TECHNOLOGIES DFT3013

LAB 7 : CSS

LEARNING OUTCOMES:

Identify different ways of styles that enable user to customize HTML elements
and precisely control the formatting of a web page.

THEORY AND CONCEPTS:

CASCADING STYLE SHEET (CSS)

CSS is offering styles for your HTML program. Style in CSS can be defined as a
set of formatting instructions that can be applied to a piece of text. In general,
there are 3 mechanisms by which styles can be applied to documents:

i. Inline Style Sheets – The style can be defined within the basic
HTML tags.
ii. Document Level Style Sheets – Styles can be defined in the
<head> section and applied to the whole document.
iii. External Style Sheets – Styles can be defined in external files
called style sheets which can then be used in any document by
including the style sheet via a URL.

EMBEDDING A STYLE SHEET WITHIN HTML DOCUMENT

When you embed a style sheet, the browser will apply the style sheet’s rules to
the tags only on the page in which the style sheet declaration is inserted. You
can apply CSS styles to any tag in a document.

The following is an example on how to set the colour of the heading text using
CSS in a HTML document

47
WEB DESIGN TECHNOLOGIES DFT3013

1> <html>
2> <head>
3> <style type=”text/css”>
4> h1 {color:red}
5> </style>
6> </head>
7> <body>
8> <h1>This is header 1</h1>
9> <p>To set multiples property values for an element in
10> rule, simply separate each assignment using
11> semicolons. </p>
12> </body>
13> </html>

Line 3-5: You embed a style sheet, you need to insert the style sheet’s rules
between the start and end style tags (<style>…</style>) within the header
section. The type attribute in the <style> tag tells the browser the type of style
sheet to expect. Line 4 contains rules that set heading level 1 (<h1>) to red
colour.

ACTIVITY 1

Base on above style declaration, redefine the style attributes of the <body>tag.
To do this, enter the above HTML tags into new file called Embed.html. Using
any text editor such as notepad, declare the CSS styles for <body> tag that
support following property values:

font-family: arial, Helvetica, courier


font-size: 12pt
header 1 font color: yellow
text font color: white
page background-color: #800000

48
WEB DESIGN TECHNOLOGIES DFT3013

ATTACHING AN EXTERNAL STYLE SHEET TO HTML DOCUMENT

The CSS styles you’ve created so far are only applied to one document. Internal
style sheets apply only to the document in which they were created. Now, you’ll
learn how to create an external style sheet which contains the styles you defined
in the document you created before.

1. First, create a new notepad file and save it as mystyle.css.


2. Rewrite the CSS style from the previous example but remember, you must
ignore the opening and closing <style> tag.
3. At this point you only need to write a single sentence,

h1 {color:red;}

4. Save your file.


5. Next, rewrite the same example and save it as external.html. Remember
to remove the style part (from the opening <style> tag to the closing
<style> tag).
6. You need to link these two files in order to make it work.
7. Write this statement in your external.html inside the opening and closing
<head> tag.

<link href="mystyle.css" rel="stylesheet" type="text/css">

8. Then, write <H1>This is header 1</H1>


9. Save your work. Open your external.html in the browser and you’ll see the
same result.

49
WEB DESIGN TECHNOLOGIES DFT3013

DEFINING STYLE INLINE WITHIN HTML TAGS

With inline styles, you define a tag’s style within the tag itself. Inline style is very
useful for overriding inherited styles in external or embedded style sheets. We
are going to use the example from external.html to see how its work.

1. Rewrite the HTML code from external.html, save it as inline.html.


2. The part that will be affected from mystyle.css is inside the H1. We will try
to override the effect by modifying the code as below:

<html>

<head>

<link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

<H1 style ="font-size:60pt; color=blue">Content Comes Here</H1>

</body>

</html>

3. Save your work and see the result.

NOTES:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

50
WEB DESIGN TECHNOLOGIES DFT3013

LAB 8: JAVASCRIPT

LEARNING OUTCOMES:

6. Learn the fundamentals of implementing and distributing a JavaScript.


7. Learn to use the JavaScript.
8. Learn the fundamentals of implementing and distributing advanced
JavaScript.
9. Learn to use the advanced JavaScript.

1. A BRIEF HISTORY OF JAVASCRIPT

JavaScript started life as “LiveScript”. LiveScript was born in the


Netscape programming factory back in 1996. At that time, Netscape was
planning its new features for its Netscape Navigator 2.0 product to be released in
January of that year. LiveScript was originally designed to augment HTML
documents. It was developed for the average Web page designer. So the idea
was to keep a simple syntax, with an easy-to-use interface.

LiveScript’s reception by Web folks was met with low interest in this new
programming language. Most of this was due to the frenzy surrounding newly
announced Java. Java was a more robust programming language developed by
Sun Microsystems. Many Web folks were working hard to use Java as a means
of making Web pages more dynamic and interactive.

Netscape then announced its intention to support Java in its Netscape 2.0
product and to further collaborate with Sun Microsystems to re-engineer its
LiveScript programming language, which was now re-named JavaScript. And
presto! The “little scripting language that could” blossomed.

51
WEB DESIGN TECHNOLOGIES DFT3013

There are several reasons for the success of JavaScript. First, it works in
all popular browsers (where VBScript does not). Whereas Java requires in-depth
programming knowledge and a rather complex software-development kit,
JavaScript programs can be written and executed by beginning programmers
using little more then a simple text editor and current browser.

WHAT IS JAVASCRIPT?

 JavaScript was designed to add interactivity to HTML pages


 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 A JavaScript consists of lines of executable computer code
 A JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute without
preliminary compilation)
 Everyone can use JavaScript without purchasing a license

WHAT CAN A JAVASCRIPT DO?

 JavaScript gives HTML designers a programming tool - HTML authors


are normally not programmers, but JavaScript is a scripting language with
a very simple syntax! Almost anyone can put small "snippets" of code into
their HTML pages
 JavaScript can put dynamic text into an HTML page - A JavaScript
statement like this: document.write("<h1>" + name + "</h1>") can write a
variable text into an HTML page
 JavaScript can react to events - A JavaScript can be set to execute
when something happens, like when a page has finished loading or when
a user clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can read
and change the content of an HTML element

52
WEB DESIGN TECHNOLOGIES DFT3013

 JavaScript can be used to validate data - A JavaScript can be used to


validate form data before it is submitted to a server. This saves the server
from extra processing
 JavaScript can be used to detect the visitor's browser - A JavaScript
can be used to detect the visitor's browser, and - depending on the
browser - load another page specifically designed for that browser
 JavaScript can be used to create cookies - A JavaScript can be used to
store and retrieve information on the visitor's computer

ACTIVITY 1A
SETTING-UP YOUR COMPUTER TO START JAVASCRIPT

1. To set up your computer, go to the View menu from any Window. (You
may do this by right-clicking on your screen’s desk-top, then from the
resulting pop-up menu go to New and then select Folder. You will then
have a new window).
2. From the View menu choose Folder Options.
3. From the resulting dialog box click on the View tab.
4. In the new dialog box uncheck the “Hide file extensions for known file
types” check box.
5. Click the OK button.
6. You will now see file extensions for your known file types. That is, you will
see .txt for text files, .doc for Microsoft Word documents, and .htm for
HTML documents.

Once you have done this, all you need to do now is


1. Create a folder on the desktop.
2. You can name it MyJavaScript.
3. Open the folder, and with your mouse pointing on blank space in the
folder, right click and a pop-up menu will appear.

53
WEB DESIGN TECHNOLOGIES DFT3013

4. From that menu select New, and an extended pop-up menu will appear.
5. From there select Text Document. Once you have done this, you will see
a text document icon with the name “New Text Document.txt”. You may
rename this to lesson1.txt (be sure to add the .txt file extension so
Windows knows it is a text document).

Open the text document


1. Once opened, type: Hello World!
2. Close the document being sure to Save its contents.
3. Change the extension of this text document from .txt to .htm (you will
change it from lesson1.txt to lesson1.htm).
4. You will then get a dialog box with a warning on it that changing this
extension may make the document unstable (changing from .txt to .htm
will not cause any instability)
5. You will be asked if you are sure you want to change it; you do, so click on
the Yes button.
6. You will now see that the icon for your former text document has changed.
7. It will now be the icon for your default web browser (IE, in our case).
8. Double-click on the icon to open it, and you will see a Web page with your
“Hello World!” message displayed.

You only need to go through the above process once.


 After you have opened your web page with your message, all you need
now do is
1. Go to the menu bar on the browser,
2. Select View, then Source.
3. You will now have another window open which is a text editor
(actually the same one you started with). Your browser window is
still open.
4. Now, adjust both windows so you can view both at the same time.

54
WEB DESIGN TECHNOLOGIES DFT3013

5. Try the text editor on the left with the browser on the right. Now
enter some new text into the text editor.
6. Then go through the following sequence:
 File, Save on the Text Editor Menu
 Refresh button on the Browser.

You will now see the results of your new text on the browser. You can repeat
this process as many times as you wish. Just remember that anytime you
change text in the text editor, you must go through the above sequence to see
the results in the browser.

ACTIVITY 1B

YOUR FIRST JAVASCRIPT PROGRAM - USING THE DOCUMENT OBJECT


TO CHANGE THE BROWSER’S PROPERTIES

 The HTML <script> tag is used to insert a JavaScript into an HTML page.

In your text editor that you opened through your browser, type the following text
exactly as shown below:

<script>

document.write(“Welcome to JavaScript!”);

</script>

You will now see the following on the browser:

Welcome to JavaScript!

55
WEB DESIGN TECHNOLOGIES DFT3013

 The <script> tag tells the browser to expect a script language and not
HTML.
 The <document.write> is a method of the document object (the “write”
method).
 Note the use of the dot notation, where there is a “.” between the object
(document in this case) and the method (write in this case).
 The (“Welcome to JavaScript!”) is the argument passed on to the
document object’s write method, so it will know what to write
 The semicolon tells the browser that this is the end of a programming
statement.

Next, go back to the text editor adding a new line so that your code is
exactly as shown below:

<script>

document.write(“Welcome to JavaScript!”);

document.bgColor = “red”;

</script>

 Pay attention to upper case and lower case, JavaScript, like C and C++ is
case sensitive.
 Now go through the File, Save, Refresh sequence. Your browser will display
the same text as before, but this time its background color is red.
 What you have done here is to change a property of the document object.
 Note the use of the dot method to tell the browser what property we want to
change (in this case bgColor, which means “backgrondColor). So what has
been demonstrated here is that an object, such as the document object has
both methods and properties.
56
WEB DESIGN TECHNOLOGIES DFT3013

 That these methods and properties can be accessed using the dot method to
tell the browser which ones we wish to use.

ACTIVITY 1C

With this, you can now experiment with different color combinations for the
background color and foreground color properties of the document object.

<script>

document.write(“Welcome to JavaScript!”);
document.bgColor = “red”;
document.fgColor = “yellow”;

</script>

HTML COMMENTS TO HANDLE SIMPLE BROWSERS

Browsers that do not support JavaScript will display JavaScript as page content.

To prevent them from doing this, and as a part of the JavaScript standard, the
HTML comment tag can be used to "hide" the JavaScript. Just add an HTML
comment tag <!-- before the first JavaScript statement, and a --> (end of
comment) after the last JavaScript statement.

<html>
<body>
<script type="text/javascript">
<!--
document.write("Hello World!");
//-->

57
WEB DESIGN TECHNOLOGIES DFT3013

</script>
</body>
</html>

The two forward slashes at the end of comment line (//) is the JavaScript
comment symbol. This prevents JavaScript from executing the --> tag.

ACTIVITY 1D

WHERE TO PUT THE JAVASCRIPT

JavaScript’s in a page will be executed immediately while the page loads into the
browser. This is not always what we want. Sometimes we want to execute a
script when a page loads, other times when a user triggers an event.

Scripts in the head section: Scripts to be executed when they are called, or
when an event is triggered, go in the head section. When you place a script in
the head section, you will ensure that the script is loaded before anyone uses it.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>

Scripts in the body section: Scripts to be executed when the page loads go in
the body section. When you place a script in the body section it generates the
content of the page.

58
WEB DESIGN TECHNOLOGIES DFT3013

<html>
<head>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

Scripts in both the body and the head section: You can place an unlimited
number of scripts in your document, so you can have scripts in both the body and
the head section.

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
<body>
<script type="text/javascript">
....
</script>
</body>

59
WEB DESIGN TECHNOLOGIES DFT3013

ACTIVITY 1E

VARIABLES AND THEIR USE

A variable is a "container" for information you want to store.

Think of a variable as a word that can contain a value. For example:

<script>
var MyWord = “Hello there!”;

document.write(MyWord);

</script>

A variable's value can change during the script. You can refer to a variable by
name to see its value or to change its value.

Rules for variable names:

 Variable names are case sensitive


 They must begin with a letter or the underscore character

IMPORTANT! JavaScript is case-sensitive! A variable named strname is not the


same as a variable named STRNAME!

DECLARE A VARIABLE

You can create a variable with the var statement:

var strname = some value

60
WEB DESIGN TECHNOLOGIES DFT3013

You can also create a variable without the var statement:

strname = some value

ASSIGN A VALUE TO A VARIABLE

You can assign a value to a variable like this:

var strname="Hege";

Or like this:

strname="Hege";

The variable name is on the left side of the expression and the value you want to
assign to the variable is on the right. Now the variable "strname" has the value
"Hege".

ACTIVITY 1F
IF-THEN-ELSE

<script type="text/javascript">
if (monkey_behavior == "good")

{
var toy = "videogames";

} else {

var toy = "rocks";


}
</script>

61
WEB DESIGN TECHNOLOGIES DFT3013

This example demonstrates the If...Else statement. , "If the monkey's been good,
he gets to play videogames. If not, he gets only rocks."
For those who don't like to squander keystrokes, however, there is a shortcut
(albeit, a less legible one). It's called the "conditional operator," and it goes a little
something like this:

var toy = (monkey_behavior=="good") ? "videogames" : "rocks";

FUNCTION

To keep JavaScript from mixing up same-name variables, put var in front of your
variables as you declare them. A variable inside a function that's declared with
var is called a local variable, and it only exists inside that function. In general, you
want your variables to be local whenever possible.
Here is the JavaScript with the correct vars in it:

<form name="d" onClick = convertTemp()>


<input type="submit" value="Klik di sini">
</form>
<script>

62
WEB DESIGN TECHNOLOGIES DFT3013

function fahrenToCelcius(f)
{
var temp =(f-32)*5/9;
return temp;
}

function convertTemp( )
{
var temp = prompt("what temperature Fahrenheit?","");
var celcius = fahrenToCelcius(temp);
alert(temp +" degrees Fahrenheit is "+
celcius +" degrees Celcius.");
}
</script>

63
WEB DESIGN TECHNOLOGIES DFT3013

EXERCISE:
Design a form like below:

NOTES:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

64

You might also like