Lab WorkBook and Activity HTML CSS JavaS PDF

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
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
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
 (end of
comment) after the last JavaScript statement.
<html>
<body>
<script type="text/javascript">

57
</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>
</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
<html>
<head>
</head>
<body>
....
</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>
</head>
<body>
....
</script>
</body>
59
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
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
if (monkey_behavior == "good")
{
var toy = "videogames";
} else {
var toy = "rocks";

}
</script>
61
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
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
EXERCISE:
Design a form like below:
NOTES:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
64

Lab WorkBook and Activity HTML CSS JavaS PDF

Transféré par

Informations du document

Titre original

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

Lab WorkBook and Activity HTML CSS JavaS PDF

Transféré par

Droits d'auteur :

Formats disponibles

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

LAB 1: BASIC UNDERSTANDING ABOUT HTML (TEXT)

THEORY AND CONCEPTS:

 HTML stands for Hyper Text Markup Language

 HTML tags are used to mark-up HTML elements

Basic HTML Tags

 HTML stands for Hyper Text Markup Language

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

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

LAB 2 : HTML TABLE & LIST

THEORY AND CONCEPTS:

Using tables judiciously

Tables also have distinct disadvantages on mobile devices:

The markup for this is:

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

with the following result:

The former occurs when a cell is empty:

Cells that span more than one row or column

2000 $10M $8M $18M

2001 $14M $11M $25M

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

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

This was produced using the following markup:

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

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

Monday Tuesday Wednesday Thursday Friday

9 BIS 3050 Lec BIS 4226 lab

12 BIS 3050 Lab BIS 4226 lab

1 BIS 3050 Lab

THEORY AND CONCEPTS:

Three kinds of lists

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

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

1. How would you create the following list?

LAB 3 : HOW TO MAKE A LINK

THEORY AND CONCEPTS :

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

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

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

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

3. Save the file.

Linking into the middle of Web pages

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

Linking (to scroll up the web page document).

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

LAB 4: HTML FRAME

YOUR FIRST FRAMESET

FRAMES? WHAT FRAMES?

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

THIS IS MY FIRST FRAME Static

LAB 5: HTML FORMS

THEORY AND CONCEPTS:

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

HOW FORMS WORK