Web Design

qwertyuiopasdfghjklzxcvbnmqwerty
uiopasdfghjklzxcvbnmqwertyuiopasd
fghjklzxcvbnmqwertyuiopasdfghjklzx
cvbnmqwertyuiopasdfghjklzxcvbnmq
wertyuiopasdfghjklzxcvbnmqwertyui
Introduction to Web Development With
HTML, CSS and JavaScript
opasdfghjklzxcvbnmqwertyuiopasdfg
Student Handbook
hjklzxcvbnmqwertyuiopasdfghjklzxc
1/4/2013
vbnmqwertyuiopasdfghjklzxcvbnmq
Lenandlar Singh
of Computer Science
Department
University of Guyana
hjklzxcvbnmqwertyuiopasdfghjklzxc
vbnmqwertyuiopasdfghjklzxcvbnmq
hjklzxcvbnmrtyuiopasdfghjklzxcvbn
mqwertyuiopasdfghjklzxcvbnmqwert
yuiopasdfghjklzxcvbnmqwertyuiopas
dfghjklzxcvbnmqwertyuiopasdfghjklz
xcvbnmqwertyuiopasdfghjklzxcvbnm
qwertyuiopasdfghjklzxcvbnmqwerty
Contents
Introduction to Web Development ..............................................................................................................................3
HTML and Markup ....................................................................................................................................................3
CSS and Style.............................................................................................................................................................3
JavaScript and Interaction ........................................................................................................................................3
Structure of Web Page .................................................................................................................................................4
HTML.........................................................................................................................................................................4
HTML TAGS ...............................................................................................................................................................4
Skeleton structure of a Web page ................................................................................................................................5
A First Web pages .....................................................................................................................................................5
Adding Content to Web Pages......................................................................................................................................7
Title ...........................................................................................................................................................................7
Text Content .............................................................................................................................................................8
Paragraph .................................................................................................................................................................8
Headers.....................................................................................................................................................................8
Lists ...........................................................................................................................................................................9
Ordered List ..........................................................................................................................................................9
Unordered List ....................................................................................................................................................10
Hyperlinks ...................................................................................................................................................................12
Linking Web Pages..................................................................................................................................................12
Images.........................................................................................................................................................................15
Tables..........................................................................................................................................................................15
Forms ..........................................................................................................................................................................17
Form Elements........................................................................................................................................................17
Web page Layout........................................................................................................................................................18
Cascading Style Sheets (CSS) ......................................................................................................................................22
Separating Content from Presentation ..................................................................................................................22
Types of CSS............................................................................................................................................................22
Inline ...................................................................................................................................................................22
Internal ...............................................................................................................................................................23
External...............................................................................................................................................................25
JavaScript ....................................................................................................................................................................27
Introduction to JavaScript ......................................................................................................................................27
Sample Programs....................................................................................................................................................28
Variables .............................................................................................................................................................28
User Input ...........................................................................................................................................................30
2
Conditional Expressions......................................................................................................................................31
Loops...................................................................................................................................................................32
For Loop..............................................................................................................................................................33
While Loop..........................................................................................................................................................34
Event Handling....................................................................................................................................................36
Form Processing..................................................................................................................................................37
Data Validation ...................................................................................................................................................39
Arrays..................................................................................................................................................................42
Introduction to Web Development

World Wide Web (or simply web) development is a process that involves the use of various
technologies to design and implement information spaces in the form of web pages and websites. The
various technologies are generally classified as client or server side technologies. Client and server side
technologies are used to create web pages and to provide a mechanism for them to be delivered to users
via their web browsers.
At the very basic level, a web page is a document with various kinds of content and capable of being
displayed in a web browser. Content is generally in the form of multimedia text, images, audio, video,
etc. A website is a collection of related web pages, joined (hyperlinked) together to form a common
information space. Every resource on the World Wide Web web page, images, videos and audios etc
can be identified by a URL (Uniform Resource Locator) or simply an address.
In this handbook, we explore web development using three client side technologies HTML, CSS and
JavaScript.
HTML and Markup is considered the most fundamental of all the web development technologies. It
provides the basic mechanism for setting up web pages. In a nutshell, it provides elements that allow us to
add content to our web page document. As is expected, different elements allow for the addition of
different types of multimedia content.
CSS and Style is used to add the styling aspects to our web pages. A range of styles are available. Even
though HTML does provide some styling elements, it is advisable to use CSS for styling elements and let
HTML provide the content.
JavaScript and Interaction is a scripting (programming) language that provides web developers
with the capacity to create interactive web pages. By default, web pages created with HTML alone is
almost entirely static. This in general means that content on a web page remain as is when the web page is
loaded into a web browser. No interaction with the user of the content is possible. While this is useful,
there are times when you need to interact with your user. JavaScript allows for many forms of interactions
to be programmed into your web pages.
3
Structure of Web Page
A web page is a document that is interpreted and presented by your web browser. In order for a web page
to be effectively rendered, the web browser will have to instructed correctly. A web page is generally
divided into two sections a head section and a body section as shown in FIGURE 02 below:
HEAD contains
HEAD important elements e.g.
title of web page
BODY
BODY contains content
displayed in main
browser window
FIGURE 01 Basic structure of a web page
To implement the above structure, we use HTML elements. See FIGURE 02 below.
HTML
HTML or Hypertext Markup Language provides the instructions used to markup or create web pages. In
HTML, instructions for marking up content are represented by tags. These tags are predefined meaning
that you cannot create your own HTML tags. To effectively use these tags, a basic understanding of their
structure and usage is important.
HTML TAGS
HTML provides a set of markup tags to describe a web page. These tags are usually referred to as HTML
tags and your web page is sometimes referred to as an HTML document. HTML tags are keywords
enclosed by angle brackets e.g. <html>. These tags normally come in pairs an opening tag (start tag)
and a closing tag (end tag). However, not all tags come in pairs. Where there is a corresponding end tag,
the / (forward slash) is used before the text name of the tag to signal the end of the tag, for e.g. </html>.
Where theres only one tag an opening tag, the forward slash is used at the end of the opening tag e.g.
<hr />. So essentially, a web page is a series of HTML tags and the content these tags markup. To
effectively markup or create your web pages, it is important to use the appropriate tags and follow basic
markup guidelines for e.g. every tag should be closed.
4
Skeleton structure of a Web page
Figure 01 provided a conceptual view of a web page (HTML document). To implement this structure, we
have to use the corresponding HTML tags. Figure 02 below demonstrates this structure.
<html>
HEAD
<head>
</head>
BODY <body>
</body>
</html>
FIGURE 02 structure of web page with corresponding HTML code
Figure 02 shows the basic structure of any web page on the left and the corresponding HTML tags to
implement this structure. THREE pairs of tags are required to set up this structure. The <html> </html>
pair indicates the start and end of a web page. Every other element comes within these tags. The <head>
</head> indicates the head section of the web page and of course the <body> </body> represents the
main content area.
A First Web pages
To create our web pages, we need tools. The most basic tool that is needed to write your html code is a
text editor for e.g. Notepad on the Windows Operating System. More sophisticated html editors are
available for e.g. Notepad++, Dreamweaver, etc
Figure 03 below is a simple web page written using Notepad. It is important to save your web pages
correctly. HTML pages are saved using a name and the .html extension. In figure 03, the web page is
called skeleton.html
5
FIGURE 03 Skeleton.html written in Notepad
This page once saved correctly, can now be viewed in your web browser. To do so, open your web
browser and navigate to the web page and open it. Alternatively, locate the web page and double click on
it. It will open in your web browser.
This particular web page will not display any content in your web browser since we have not added any
content. See figure 04 below.
FIGURE 04 Skeleton.html displayed in web browser.
We have provided a completed web page but only the skeleton structure. We will start to add some
content below.
So in summary, to create a web page, we need to learn HTML, use a tool to help us enter the code into the
computer e.g. Notepad, and finally use a web browser to display the web page. Changes to the web page
are done by opening the web page code in your editor. To see the effects of any changes, save all changes
and refresh your browser.
6
Adding Content to Web Pages
Now that we have our skeleton web page set up, we can start marking up content. HTML allows us to
mark up almost any conceivable type of multimedia element. To add any content, we need to use the most
appropriate tag and decide exactly where we want to add the content in our page. By default, content is
displayed on your webpage in the order of the HTML code and from left to right, top-down.
We will develop web pages that include the following HTML element:
Title
Text Content
o Headers
o Paragraphs
Lists
o Ordered
o Unordered
o
Hyperlinks
Images
Tables
Forms
Title
Every web page should have a title. The title of a web page is displayed in the browser title bar at the top
left. The title is used to provide a brief description of the web page. Appropriate names are recommended.
To insert a title, we used the <title> </title> enclosed in the head section of our web page. Figure 05
below is the HTML code with a title included. We will save this page in figure 05 as index.html (index is
a default name used for the homepage of most websites).
<html>
<head>
<title> Lens homepage </title>
</head>
Actual Content
of title
<body>
</body>
</html>
FIGURE 05 Web page with a Title
7
Save this file as index.html and open in your browser. If done correctly, your output should look like
FIGURE 06 below
Webpage Title
FIGURE 06 index.html with title inserted
Text Content
A number of HTML elements allow us to add text-based content to our web pages. The most commonly
used text elements are:
Paragraph
Paragraphs are inserted using the <p> </p> tag. A line break is inserted by default after every paragraph
Headers
Headers are bold pieces of text and are inserted using <h1> </h1> .<h6> </h6>, each of h1 to h6
represents a different size starting with h1 being largest to h6 being smallest
Paragraphs and Headers are added to the body section of the web page. Figure 07 below demonstrates the
use of the paragraph and header tags. The content on this page is taken from your course outline of CSI
1201.
8
<html>
<head>
<title> Lens homepage

</title>
</head>
<body>
<h1>CSI 121: Applications

on Micro-Computers
</h1>
<h2> Introduction </h2>
<p>This course is designed

to introduce students to the
most commonly used
software packages and the
concepts around software
usage.
</p>
<p>
It is also intended to teach
students to build web pages
and to write simple
computer programs.
</p>
</body>
</html>
FIGURE 07 Paragraph and Header tags
Lists
Lists are used to organize content in point forms. HTML allows for the creation of an ordered list <ol>
</ol> and an unordered list <ul> </ul>. We can also have a hybrid list an ordered and unordered
combined. Ordered lists are used when it is important to identify the order in which items should be
presented. Unordered lists are used when order is not very important. Lists are made of one or more items
<li> </li>.
Ordered List
<ol>
<li> Arthur Chung</li>
<li> LFS Burnham </li>
<li> HD Hoyte</li>
</ol>
9
Unordered List
<ul>
<li> Berbice</li>
<li> Essequibo</li>
<li> Demerara</li>
</ul>
Figure 08 below demonstrates the applications of lists.
10
<html>
<head>

</title>
</head>
<body>

on Micro-Computers
</h1>

most commonly used
usage.
</p>
</p>
and to write simple
computer programs.
</p>
<h3> Objectives of CSI 121
</h3>
<ul>
<li>Use Microsoft Office
Software to create
documents, spreadsheets,
PowerPoint Presentations
and databases </li>
<li> Design a web page
using HTML</li>
<li> Write interactive
webpages using
JavaScript</li>
</ul>
<h3> Lecturers</h3>
<p> CSI 121 will be taught
by the following
lecturers</p>
<ol>
<li> P DeFreitas</li>
<li> A Liddell </li>
<li> F DeJesus</li>
<li> L Singh </li>
</ol>
</body>
FIGURE 08 Lists
</html>
11
Hyperlinks
Hyperlinks or simply links glue web pages together to form the web. Technically, links can be created
from any source to any destination providing a destination address is known.
To create links we use the anchor <a> </a> tag. The general format is as follows:
<a href = Destination > Clickable object </a>
href - is an attribute/property of the anchor tag. The attributes of a tag allows a tag to
become functional in some cases for e.g. the <a> tag. In other cases, attribute extend the
default functionality of a tag.
Destination represents the address of the content linked to
Clickable object this appears as the visible/clickable hotspot that allows the user
access to the destination. Plain text and images are typically used clickable objects.
Linking Web Pages
Lets add a link at the end of index.html in figure 08 above to a second page called content.html.
Assuming that both web pages are in the same location, our link from index.html to content.html is as
follows:
<a href=content.html> Course Content </a> - as demonstrated in FIGURE 09 below:
12
<html>
<head>

</title>
</head>
<body>

on Micro-Computers
</h1>

most commonly used
usage.
</p>
</p>
and to write simple
computer programs.
</p>
<h3> Objectives of CSI 121
</h3>
<ul>
<li>Use Microsoft Office
Software to create
documents, spreadsheets,
PowerPoint Presentations
and databases </li>
<li> Design a web page
using HTML</li>
<li> Write interactive
webpages using
JavaScript</li>
</ul>
<h3> Lecturers</h3>
<p> CSI 121 will be taught
by the following
lecturers</p>
<ol>
<li> P DeFreitas</li>
<li> A Liddell </li>
<li> F DeJesus</li>
<li> L Singh </li>
</ol>
</body>
<a href=content.html>
Course Content</a> FIGURE 09 Link to Content.html from index.html
</html>
The link Course Content when clicked will open content.html. Figure 10 below shows content.html
13
<html>
<head>
<title> Course Contents </title>
</head>
<body>
<h1> Contents</h1>
<ul>
<li>Web Page Development

<ol>
<li>Introduction to World Wide Web
</li>
<li> Web Design</li>
<li> HTML </li>
<li>css </li>
</ol>
</li>
<li> Javascript Programming

<ol>
<li>Introduction to Programming </li>
<li> Javascript and Web Pages</li>
<li> Programming Constructs</li>
<li> Data Storage</li>
<li> Form Processing </li>
</ol>
</li>
</ul>
<ul>
<li><a href="index.html"> Home </a></li>
<li><a href="resources.html">Resources
</a></li>
</ul>
</body>
</html>
FIGURE 10 content.html
Content.html uses nested lists to display the contents of the two main topics. Nested lists are lists within
another list. The two links at the end are to index.html (Home) and a third page resources.html
(Resources). Figure 11 below show resources.html
14
<html>
<head>
<title> Other Resources</title>
</head>
<body>
<h1> Resources</h1>
<ol>
<li><a href="www.w3schools.com">
W3Schools </a> </li>
<li><a href="www.tizag.com"> Tizag
</a></li>
<li><a href="www.w3c.org"> W3C
</a></li>
</ol>
<ul>
<li><a href="index.html"> Home
</a></li>
<li><a href="content.html">Content
</a></li>
</ul>
</body>
FIGURE 11 resource.html
</html>
Resource.html uses 2 lists. The items for each list are links and not plain text. The ordered list contains
three links to external resources (www.w3schools.com, www.tizag.com, and www.w3c.org ). The
unordered list are internal links to index.html and content.html.
Images
The <img /> tag is used to insert images into a webpage. A number of attributes of the <img> tag makes
it possible to insert your images. Some of the most commonly used attributes are shown below in BOLD
<img src="image file" alt="text if image unavailable" width="width for image" height="height for
image" /> - image file is the image to be inserted.
For example
<img src="len.jpg" alt="Len Singh" width="100" height="200" />
Tables
Tables provide web developers with a tool that allows content to be presented in a tabular structure. A
table in html is structured according to the number of rows and the number of cells in each row. In order
to create a table, a number of tags are necessary. The most important tags are:
<table> <./table> - used to create a table

<tr> </tr> - used to create rows
<td> </td> used to add cells in each row
<th> </th> used to create headings
15
Figure 12 below shows the code on the left column used to create the table on the right.
<table border=1>
<tr>
<th> Firstname</th>
<th>Lastname </th>
<th>Reg # </th>
<th>Major </th>
</tr>
<tr>
<td> Len</td>
<td>Singh </td>
<td>00/000/0000</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Brian</td>
<td>Lara</td>
<td>10/100/1000</td>
<td>Engineering </td>
</tr>
<tr>
<td> Shiv</td>
<td>Chanderpaul </td>
<td>30/300/3000 </td>
<td>Environmental Science</td> FIGURE 12 - Tables
</tr>
</table>
The table in Figure 12 above contains only text elements. Any multimedia content can be placed in a
table.
FIGURE 13 below shows a table of images.
16
<table border=1>
<tr>
<td> <img src ="groupPic1.jpg" width=50 height=50 /></td>
<td> <img src ="img1.jpg" width=50 height=50 /></td>

</tr>
<tr>
<td> <img src ="img2.jpg" width=50 height=50 /></td>
<td><img src ="img3.jpg" width=50 height=50 /> </td>
</tr>
FIGURE 13 Images in a Table
</table>
Forms
Forms are used to collect data from users. HTML provides form elements to collect various types of data.
The <form> </form> is used to create a form together with the various elements. The general structure of
a form is as follows:
<form name=somename>
elements of the form in here
</form>
Form Elements
To input element <input type=typeOfInput name=inputName> enables the creation of a number of

input elements. The type attribute specifies the nature of the input element and the name attribute is used
to identify the element.
FIGURE 14 below shows a typical login form.
17
<form name="login">
<fieldset>
<legend>Login Details:</legend>
Username: <input type="text" size="30"

name =un /><br />
password: <input type="password"

size="30" name=pw /><br />
Login: <input type="button" value="Sign

In" />
</fieldset>
FIGURE 14 Login Form
</form>
The Login Form in Figure 14 above uses three different input type text, password and button. Text
allows the user to enter plain text data, password allows for a password to be entered. The characters of
this field are masked out. The button input type allows for a clickable button to be inserted.
There are other input types available. For example, the radio allows the user to create radio buttons and
the checkbox input type allows the user to create checkboxes.
Web page Layout

So far, all of the web pages presented use the default layout structure for presenting html elements in a
web page. The default structure presents content from left to right, top to bottom. Elements are presented
by the web browser in the same order the html code is written. This default structure does not allow the
web designer an opportunity to layout and organize content according to the designers choice.
The structure and layout of a web page can be dictated by the web designer in a number of ways. One
approach to layout a web page is to use a table to organize the entire structure of a web page. A table
allows a web designer to place content exactly where required.
Figure 15 and Figure 16 below are examples of two typical layout structure used by many website.
18
FIGURE 15 A 3-row by 2-column Tabular Layout
FIGURE 16 A 3-row by 3-column Tabular Layout
The sample source code that implements Figure 15 is presented below:
19
<html>
<body>
<table width="100%" height="100%">
<tr valign="center" height="60px">
<td colspan="2" style="background-color:#FF0000;">

<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#00FF00; width:50px; text-align:top;">
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>
<td style="background-color:#EEEEEE; height:200px; width:400px; text-align:top;">

Content goes here
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFFF00; text-align:center; height:25px">

Copyright 2012 CSI 121
</td>
</tr>
</table>
</body>
</html>
Figure 15 uses three rows. In the first row there is only 1 cell. In the second row, there are two cells. In
order to cater for this, row one was set up to span 2 cells (colspan=2). Row three is similar to row 1.
20
The sample source code to that implements Figure 16 is presented below:
<html>
<body>
<table width="500px">
<tr>
<td colspan="3" style="background-color:#0FFF00;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top" height="100px">

<td style="background-color:#FFD700; width:100px; text-align:top;">
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>

Content goes here
</td>
<td style="background-color:#FFD700; width:100px; text-align:top;">
Menu<br />
HTML<br />
CSS<br />
JavaScript<br />
</td>
</tr>
<tr>
<td colspan="3" style="background-color:#FFFF00; text-align:center;">

Copyright 2012 CSI 121
</td>
</tr>
</table>
</body>
</html>
Figure 16 also uses three rows. In the first row there is only 1 cell. In the second row, there are three cells.
In order to cater for this, row one was set up to span 3 cells (colspan=3). Row three is similar to row 1.
The width and height attributes of the table tag are used to allocate the dimensions of your table. Width
and height values can be specified using various units, e.g. pixels (px), percentage (%), etc.
With these tabular layouts, the web designer can now place content in any of the available cells. For
example, the first row can be used to place a banner image, while navigation menus can be set up using
the cells in row 2, and content can be displayed in the main content area.
21
Various style elements are used to add presentation to the layout. These will be covered in the CSS
section below.
Cascading Style Sheets (CSS)

Cascading style sheets are used to style html elements. CSS is also used to add layout elements to a web
page .While the html <font> </font> tag is can be used to add styles to your web pages, it is not the
preferred option for a number of reasons.
Separating Content from Presentation
CSS allows style elements to be separate from the html elements in general. This separation of content
(html) from presentation (css) makes it easier to manage your web design process. Making changes to
your html or css is much easier when the two sets of code are separated out. Further, by separating your
code, it becomes much easier to reuse css for multiple pages. Reuse saves time and effort. Also, reuse
means that the developer can apply the same style across all web page elements, leading to consistent
look and feel for an entire website.
Types of CSS
There are three types of styles that can be added to a web page, and are as follows:
Inline
Internal
External
Inline styles are used to apply presentation elements to individual html tags. Internal styles are used to
apply presentation aspects to an entire web page. Inline and external css elements are saved as part of
your .html document. External styles are written entirely separate from a web page and can be applied to
any web page. External style sheets are saved a different file (.css).
Inline
Inline styles are applied to individual html elements through the use of the style attribute. Figure 15 and
Figure 16 above use inline styles to apply presentation aspects to the respective web pages. The general
format for applying inline style is as follows:
<htmlTag style=CSSproperty:value> content of htmlTag </htmlTag>
CSSproperty is the actual style that you wish to apply to your htmlTag and value is the corresponding
value to be applied to that particular CSSproperty.
There are many CSSproperty that can be set for your htmlTag. It is now a matter of learning what those
elements are and what values can be set for each.
22
Examples of Inline Styles
In Figure 15 and Figure 16, we used the following inline style for the <td> elements of:
style="background-color:#FFFF00
This is used to set the background color of the particular html tag where the style is applied. The css
property is background-color and the value is #FFFF00 (a color, using the RGB color scheme, where
the first 2 values provide the amount of Red, the next two values, the amount of Green, and the last two
the amount of Blue).
Width, height and text-align are css properties also used in figure 15 and figure 16. Look at the complete
example below:

Content goes here
</td>
In this example, we have set four css properties with their respective values for the same html element.
One or more styles can be set for an individual element. The property:value pairs as they are sometimes
called, are separate from each other using a semi-colon (;)
The following is a small sample of commonly used css properties:
CSS Property Property Value Examples

Color FFFFFF, Red
Text-align Left, center, right
Font-size 10px, 100%
Font-family Arial, sans-serif
Font-style Italics, bold,
There are many more properties available. The task of the web designer is to seek out the appropriate
styles required to achieve the required presentation.
NOTE: Inline styles are best used when it is necessary to apply a particular style to an html element to
achieve a unique look and feel. This approach to applying style does NOT separate content from
presentation as you have noticed and therefore should be used only when absolutely necessary. If not used
properly, content and presentation becomes mixed up and management of your web page more difficult.
Internal
Internal style sheets are place in the <head> </head> section of your web page. An internal style is a set
of style rules grouped together. These rules are place within the <style> </style> tag. The general format
is as follows:
<style type=text/css>
Style rules are placed in here
</style>
23
The type=text/css is referred to as a MIME type and its main purpose is to indicate to the browser that
this is a style sheet.
Style Rules
Style rules specify the CSS style property to be applied together with the given value (similar to the
property:value pairs with inline). However, a style rule also includes a selector whose purpose is to
match the element the style is to be applied to.
The general format for any style rule is as follows:
Selector {property:value;}
Typically, selector matches one-on-one with html elements. However, user-defined selectors are also
possible. In addition, multiple styles can be set for one selector/html element and multiple selectors/html
elements can use the same set of styles.
In the example below, the selectors used correspond to their respective html elements by name. For
example:
p - <p> </p>
h1,h2, h3 etc are html headers <h1> </h1> etc
ul, ol html lists
a html anchors (links)
NOTE: When writing your style rules, do NOT include the selectors in < >
The following a complete example of an internal style sheet that is applied to index.html
<head>
<title>Lens homepage </title>
<style type="text/css">
p{
color:purple;
background-color:gray;
font-family:"Times New Roman";
}
h2, h3 {
text-align:center;
background-color:"green";
color:red;
}
h3 {
font-family:"Arial";
}
24
h1 {
text-align:center;
color:blue;
background-color:#FF0000;
}
ul {
list-style-type: circle; /* change default bullet to circle*/
}
ol{
list-style-type: upper-roman; /* change default numbering to upper case roman numerals */
}
a:link {color:FF0000;} /* unvisited link */

a:visited {color:#0FFFF0;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
When index.html loads, the browser will apply all inline styles as priority. If there is an internal style
sheet such as is above, the browser will apply only those styles that are not already set as inline. In other
words, inline styles have a higher priority than internal styles.
If the other pages have similar html elements, then this style sheet can be copied into the <head> </head>
section of those pages and as such is reused immediately. If there are additional elements, the style sheet
can be extended to include additions or it can also be edited if different styles are needed.
External
External style sheet rules are written in exactly the same way as internal style sheets. However, the
<style> </style> tag is not necessary. Essentially, an external style sheet is a text file of css style rules and
is saved with a .css extension. For example, we can take the internal style sheet applied to index.html
above and save it as an external style sheet as follows:
p{
color:purple;
background-color:gray;
font-family:"Times New Roman";
}
h2, h3 {
text-align:center;
background-color:"green";
color:red;
}
h3 {
font-family:"Arial";
}
h1 {
25
text-align:center;
color:blue;
background-color:#FF0000;
}
ul {
list-style-type: circle; /* change default bullet to circle*/
}
ol{
list-style-type: upper-roman; /* change default numbering to upper case roman numerals */
}
a:link {color:FF0000;} /* unvisited link */

a:visited {color:#0FFFF0;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Notice there is no <style> </style>. We can write our external style sheets using Notepad. However, be
sure to save you file with the correct (.css) extension. We can save this style sheet as csi121.css .
Using External Style Sheets
To use an external stylesheet, we have to create a connection from within the web page where we would
like to apply that stylesheet. We do this in the <head> </head> section of our webpage using the <link>
tag, as follows:
<head>
<title> Page Title...</title>
<link rel="stylesheet" type="text/css" href="csi121.css" />
</head>
The href attribute takes a link to the external stylesheet. This stylesheet can be reused across all pages or
only on those pages where it is needed.
Cascading Order
As noted above, inline styles have the highest priority. This means that where there might an inline,
internal and external style set for the same element e.g. a paragraph in a page, the inline style will be
applied by the browser. External style sheets have the lowest priority.
It is normal to have all three types of styles in a single page for each type serves a particular purpose with
specific advantages. The challenge for the web designer is to organize styles for maximum reuse, while at
the same time apply the most efficient use of style elements.
26
JavaScript
Introduction to JavaScript
JavaScript is a scripting language used on the World Wide Web (WWW). It is used on web sites to add
functionality to web pages that are not otherwise possible with HTML and CSS. Specifically, JavaScript
can be used for a number of things include (i) validating data entry via html forms, (2) interact and
change web page elements and so on. JavaScript is also used in other applications.
JavaScript is an interpreted programming language that executes mainly in the web browser (client-side
JavaScript). JavaScript can also be used on the server side and in other applications.
27
Sample Programs
Variables
1. Calculate GPA based on hardcoded Grade points and total credits.
<html>
<head>
<script type="text/javascript">
//Variable Declaration
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
<h1> gpa calculator </h1>
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr; // calculate GPA

document.write("gpa is --->" + gpa); // Output GPA
</script>
</body>
</html>
28
29
User Input
2. Calculate GPA based on user-inputted total grade point and total credit
<html>
<head>
//variable declaration
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
t_gp = window.prompt("please enter total grade points", ""); // user input of total
gp
t_cr = window.prompt("please enter total credits",""); // user input of total credit
gpa = t_gp / t_cr;
document.write("gpa is --->" + gpa);
</script>
</body>
</html>
30
Conditional Expressions
3. Conditional expression example: the if-else statement
<html>
<head>
var t_gp;
car t_cr;
var gpa;
</script>
</head>
<body>
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
document.write("gpa is --->" + gpa);
if( gpa >= 2.0){

document.write("<h3>you have doing ok ---></h3>");
}
// if and else block --- only one of these will ever be true, execution stops after
if (gpa >=3.4)
document.write("you are a distinction student --->");
else
if (gpa >=2.7)
document.write("you are a <b>credit</b> student--->")
else
if (gpa >= 2.0)
document.write("you are a pass student--->");
else
document.write("you are not ready to graduate--->");
</script>
</body>
</html>
31
Loops
4. For Loops used to repeat a block of a code a number of times.
<html>
<head>
var t_gp;
car t_cr;
var gpa;
var i;
</script>
</head>
<body>
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
//loop below executes 5 times
for(i = 0; i< 5; i++){
document.writeln("gpa is --->" + gpa + "<br />");
if( gpa >= 2.0){

document.writeln("you have doing ok --->");
}
if (gpa >=3.4)
document.write("you are a distinction student --->");
else
if (gpa >=2.7)
document.write("you are a credit student--->")
else
if (gpa >= 2.0)
document.write("you are a pass student--->");
else
document.write("you are not ready to graduate--->");
document.writeln( "<br />");
} // end of for loop
</script>
</body>
</html>
32
For Loop
5. For loop used to repeat a block of code a number of times. This example repeats a number of
times as decided by the user
<html>
<head>
var t_gp;
car t_cr;
var gpa;
var numCrs;
</script>
</head>
<body>
numCrs = window.prompt("enter number of courses",""); //user input
for(i = 0; i< numCrs; i++){
t_gp = window.prompt("please enter total grade points", "");

t_cr = window.prompt("please enter total credits","");
gpa = t_gp / t_cr;
document.write("gpa is --->" + gpa + "<br />");
if( gpa >= 2.0){

document.writeln("you have doing ok ---><br />");
}
if (gpa >=3.4)
document.write("you are a <b>DISTINCTION</b> student ---><br />");
else
if (gpa >=2.7)
document.write("you are a <b>CREDIT</b> student---><br />")
else
if (gpa >= 2.0)
document.write("you are a <b>PASS</b> student---><br />");
else
document.write("you are not ready to graduate---><br />");
}// end of for loop
</script>
</body>
</html>
33
While Loop
6. The while loop similar to the for loop but could be more flexible. User input for example can
determine the end.
<html>
<head>
var t_gp;
car t_cr;
var gpa;
var i;
</script>
</head>
<body>
t_gp = 72;
t_cr = 24;
gpa = t_gp / t_cr;
i = 0; // start position of loop
while (i< 5){
document.writeln("gpa is --->" + gpa + "<br />");
if( gpa >= 2.0){

document.writeln("you have doing ok --->" + "<br />");
}
if (gpa >=3.4)
document.write("you are a distinction student --->" + "<br />");
else
if (gpa >=2.7)
document.write("you are a credit student--->" + "<br />")
else
if (gpa >= 2.0)
document.write("you are a pass student--->" + "<br />");
else
document.write("you are not ready to graduate--->" + "<br />");
document.write("<br />");
i++; // counter used to move the loop to next step

} // end of while loop
</script>
</body>
</html>
34
7. A more flexible version of the while loop similar to 2nd for loop above.
<html>
<head>
var t_gp;
car t_cr;
var gpa;
var numCrs;
var i;
</script>
</head>
<body>
numCrs = window.prompt("enter number of courses","");

i = 0;
while(i < numCrs){
t_gp = window.prompt("please enter total grade points", "");
t_cr = window.prompt("please enter total credits","");
gpa = t_gp / t_cr;
document.write("gpa is --->" + gpa + "<br />");
if( gpa >= 2.0){

document.writeln("you have doing ok ---><br />");
}
if (gpa >=3.4)
document.write("you are a <b>DISTINCTION</b> student ---><br
/>");
else
if (gpa >=2.7)
document.write("you are a <b>CREDIT</b> student---><br />")
else
if (gpa >= 2.0)
document.write("you are a <b>PASS</b> student---><br />");
else
document.write("you are not ready to graduate---><br />");
i++; // move the loop 1 step
}
</script>
</body>
</html>
35
Event Handling
8. Event Handling and Form Processing: Events can be thought of as actions generated as a result
of some interaction with an element and some other entity. For example a user clicking on a
button generates an event.; the onClick event. An event handler is a piece a code that can be set
up execute when an event is generated. Not all events will have an attached event handler.
<html>
<head><title>My Page</title></head>
<body>
<form>
<input type="button" Value="Press" onClick="window.alert('Hello');">
</form>
</body>
</html>
<html>
<head><title>My Page</title>
</head>
<body>
<p>Enter your name:</p>
<form name="alertform" id="x1">
<input type="text" name="yourname">
<input type="button" value= "Go" onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
</body>
</html>
36
Form Processing
9. Form Processing: Forms are used to collect data. Event handlers can be to particular form
elements to process data supplied by user.
<html>
<head>
<title>
</title>
<script type=text/javascript>
function displayValues(form){
var firstname=document.f.firstname.value;
var lastname=document.f.lastname.value;
var age=document.f.age.value;
alert('my name is ' +firstname + ' ' +lastname + ' and my age is ' +age );
document.write(firstname + "<br />" + lastname + "<br />" + age);
}
</script>
</head>
<body>
<form name="f" id="f">

<label> First Name: </label>
<input type="text" name="firstname" id="f1" />
<br />
<label> Last Name: </label>
<input type="text" name="lastname" id="f2" />
<br />
<label> Age: </label>
<input type="text" name="age" id="f3"/> <br />
<input type ="button" value = "display values" onClick="displayValues(form)"/>
</form>
</body>
</html>
37
10. A simple calculator.
<html>
<head>
<title>
</title>
<script type=text/javascript>
//form as argument is a property of the form object, passes a copy of the form to be processed
function doAddition(form){
var v1=parseInt(document.f.val1.value); // collect and convert form data to number

var v2=parseInt(document.f.val2.value);
var sum= v1 + v2;
document.f.sum.value = sum; // display data to form element
//document.write("val1 + val2 is----> " + sum);
}
</script>
</head>
<body>
<form name="f" id="f">
<label> First value: </label>
<input type="text" name="val1" id="f1" />
<br />
<label> second value: </label>

<input type="text" name="val2" id="f2" />
<br />
<label> Sum: </label>

<input type="text" name="sum" id="f3"/> <br />
<input type ="button" value = "add numbers" onClick="doAddition(form)"/>
</form>
</body>
</html>
38
Data Validation
11. Data Validation - Data validation is important. Incorrect data leads to incorrect processing and
output. JavaScript can be used to perform validation and checks on data using validation criteria.
39
<html>
<head><title>Form Validation</title>

</script>
</head>
</head>
//-->
</script>
</head>
return( true );
40
}
//-->
<body>
<form name="myForm" onsubmit="return(validate());">

<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Password</td>
<td><input type="password" name="pw" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">Guyana</option>
<option value="2">Trinidad</option>
<option value="3">Jamaica</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
41
Arrays
12. Array an array is a data structure that can be used to store more than one piece of data. By
allowing multiple pieces of data to be stored in one common storage structure, data processing and
management is made easier. For example, we can group related data together and then use a loop
to traverse the entire array when processing the data elements.
<html>
<head>
</head>
<body>
<h1> JavaScript Arrays </h1>

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

Web Design

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design

Uploaded by

Copyright:

Available Formats

qwertyuiopasdfghjklzxcvbnmqwerty

Introduction to Web Development

FIGURE 01 Basic structure of a web page

FIGURE 02 structure of web page with corresponding HTML code

A First Web pages

FIGURE 04 Skeleton.html displayed in web browser.

<title> Lens homepage </title>

FIGURE 05 Web page with a Title

FIGURE 06 index.html with title inserted

<title> Lens homepage

<h1>CSI 121: Applications

<h2> Introduction </h2>

<p>This course is designed

FIGURE 07 Paragraph and Header tags

Figure 08 below demonstrates the applications of lists.

<title> Lens homepage

<h1>CSI 121: Applications

<h2> Introduction </h2>

<p>This course is designed

<a href = Destination > Clickable object </a>

Destination represents the address of the content linked to

Linking Web Pages

<a href=content.html> Course Content </a> - as demonstrated in FIGURE 09 below:

<title> Lens homepage

<h1>CSI 121: Applications

<h2> Introduction </h2>

<p>This course is designed

<li>Web Page Development

<li> Javascript Programming

<li><a href="index.html"> Home </a></li>

<img src="len.jpg" alt="Len Singh" width="100" height="200" />

<table> <./table> - used to create a table

FIGURE 13 below shows a table of images.

<td> <img src ="groupPic1.jpg" width=50 height=50 /></td>

<td> <img src ="img1.jpg" width=50 height=50 /></td>

<td><img src ="img3.jpg" width=50 height=50 /> </td>

elements of the form in here

To input element <input type=typeOfInput name=inputName> enables the creation of a number of

FIGURE 14 below shows a typical login form.

Username: <input type="text" size="30"

password: <input type="password"

Login: <input type="button" value="Sign

Web page Layout

FIGURE 16 A 3-row by 3-column Tabular Layout

The sample source code that implements Figure 15 is presented below:

<table width="100%" height="100%">

<tr valign="center" height="60px">

<td colspan="2" style="background-color:#FF0000;">

<td style="background-color:#EEEEEE; height:200px; width:400px; text-align:top;">

<td colspan="2" style="background-color:#FFFF00; text-align:center; height:25px">

<tr valign="top" height="100px">

<td style="background-color:#EEEEEE; height:200px; width:400px; text-align:top;">

<td style="background-color:#FFD700; width:100px; text-align:top;">

<td colspan="3" style="background-color:#FFFF00; text-align:center;">

Cascading Style Sheets (CSS)

Separating Content from Presentation

<htmlTag style=CSSproperty:value> content of htmlTag </htmlTag>

<td style="background-color:#EEEEEE; height:200px; width:400px; text-align:top;">

The following is a small sample of commonly used css properties:

CSS Property Property Value Examples

Style rules are placed in here

The general format for any style rule is as follows:

h1,h2, h3 etc are html headers <h1> </h1> etc

ul, ol html lists