0% found this document useful (0 votes)

39 views88 pages

WebDesign Book 2022

This document provides an introduction to web design using HTML5 and CSS3, outlining essential skills and tools for creating websites. It covers various internet technologies, including the Domain Name System, web hosting, and the structure of HTML documents. Additionally, it highlights common web design mistakes and emphasizes the importance of effective web design for communication.

Uploaded by

isaacmungudit

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

39 views88 pages

WebDesign Book 2022

Uploaded by

isaacmungudit

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 88

Internet technologies and website

design
BCS / BSE/DIT/DCS

WEB DESIGN USING HTML5 AND CSS3 – AN INTRODUCTION

LEARN HOW TO USE CMS – WORDPRESS TO DESIGN A WEBSITE IN 1 DAY

BOOK NUMBER:

…………………………

NAME:

………………………………………………………………………..

1
INTRODUCTION
Web development is one of the fastest growing practices in the field of internet. It provides skills
necessary to efficiently package content for displaying on the web browser. Development of
professional websites requires skills on various technologies that are used such as HTML editors;
website management tools like FrontPage and/or Dream weaver; basic Internet technologies
such as DNS, email services, LDAP and the HTTP protocol. The practical part of this course
introduces tools and techniques for specifying and prototyping static websites. Skills required
for development of Interactive and advanced internet and web systems will be introduced later
in the programme through covering advanced programming and dynamic web applications
development.
INTERNET TECHNOLOGIES
Website Designing
Web designing has direct link to visual aspect of a web site. Effective web design is necessary to
communicate ideas effectively.

Internet
A global computer network providing a variety of information and communication facilities,
consisting of interconnected networks using standardized communication protocols.
Domain Name System Architecture

The Domain name system comprises of Domain Names, Domain Name Space, Name Server that
have been described below:

Domain Names
Domain Name is a symbolic string associated with an IP address. There are several domain
names available; some of them are generic such as com, edu, gov, net etc, while some country
level domain names such as au, in, za, us etc.

The following table shows the Generic Top-Level Domain names:

Domain Name (with an example ) Meaning (Indicate the owner of the domain)

Com e.g. www.google.com Commercial

Edu

Gov

Int

Mil

2
Net

Org

The following table below shows the Country top-level domain names:

Fill the Domain Name for these countries

Cl E.g. www.jumia.ug/ Uganda

Fr Kenya

Us United States

Za South Africa

Uk United Kingdom

Jp Turkey

De Tanzania

World Wide Web WWW

WWW is also known as W3. It offers a way to access documents spread over the several servers
over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The
hyperlinks allow the users to navigate between the documents.

Hyper Text Transfer Protocol HTTP

HTTP is a communication protocol. It defines mechanism for communication between browser and
the web server. It is also called request and response protocol because the communication
between browser and server takes place in request and response pairs.

Web Designing Tools

Here is the list of tools that can be used to make effective web designs:

Web Page Anatomy

A web site includes the following components:

Containing Block

3
Container can be in the form of page’s body tag, an all containing div tag. Without container there
would be no place to put the contents of a web page

Logo refers to the identity of a website and is used across a company’s various forms of marketing
such as business cards, letterhead, brouchers and so on.

Naviagation

The site’s navigation system should be easy to find and use. Oftenly the anvigation is placed rigth
at the top of the page.

Content
The content on a web site should be relevant to the purpose of the web site.

Footer

Footer is located at the bottom of the page. It usually contains copyright, contract and legal
information as well as few links to the main sections of the site.

Whitespace

It is also called as negative space and refers to any area of page that is not covered by type or
illustrations.

4
Web design Mistakes

One should be aware of the following common mistakes should always keep in mind:

 Website not working in any other browser other internet explorer.

 Using cutting edge technology for no good reason
 Sound or video that starts
automatically.
 Hidden or disguised navigation 100% flash content.

Web development

Web development refers to building website and deploying on the web. Web development
requires use of scripting languages both at the server end as well as at client end.

Websites Hosting

Web hosting is a service of providing online space for storage of web pages. These web pages are
made available via World Wide Web. The companies which offer website hosting are known as
Web hosts.
The servers on which web site is hosted remain switched on 24 x7. These servers are run by web
hosting companies. Each server has its own IP address. Since IP addresses are difficult to
remember therefore, webmaster points their domain name to the IP address of the server their
website is stored on.

It is not possible to host your website on your local computer, to do so you would have to
leave your computer on 24 hours a day. This is not practical and cheaper as well. This is where
web hosting companies comes in.

5
Web Hosting Companies
Following are the several companies offering web hosting service. Identify any Five in Uganda and elsewhere.

Top five Ugandan Hosting Companies Top Five Hosting sites in the world

Web Browsers Web Browser is an application software that allows us to view and explore
information on the web. User can request for any web page by just entering a URL into address
bar.

Web browser can show text, audio, video, animation and more. It is the responsibility of a web
browser to interpret text and commands contained in the web page.

Search Engines
Search Engine refers to a huge database of internet resources such as web pages, newsgroups,
programs, images etc. It helps to locate information on World Wide Web.

6
Web development is one of the fastest growing practices in the field of internet. It provides skills
necessary to efficiently package content for displaying on the web browser. Development of
professional websites requires skills on various technologies that are used such as HTML editors;
website management tools like FrontPage and/or Dream weaver; basic Internet technologies such
as DNS, email services, LDAP and the HTTP protocol. The practical part of this course introduces
tools and techniques for specifying and prototyping static websites. Skills required for
development of Interactive and advanced internet and web systems will be introduced later in the
programme through covering advanced programming and dynamic web applications development.

These notes will introduce the learner to Basic HTML and CSS in a bid to design simple websites
Some concepts will however be handled in class and practically so. These notes should not be a
basis for you to dodge classes.

HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents) are
linked together. Thus, the link available on a webpage is called Hypertext.

• As its name suggests, HTML is a Markup Language which means you

use HTML to simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.
Originally, HTML was developed with the intent of defining the structure
of documents like headings, paragraphs, lists, and so forth to facilitate the
sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
Basic HTML Document

In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
7
</html>
Either you can use Try it option available at the top right corner of the code
box to check the result of this HTML code, or let's save it in an HTML file
test.htm using your favorite text editor. Finally open it using a web browser
like Internet Explorer or Google Chrome, or Firefox etc. It must show the
following output:

HTML
Tags

As told earlier, HTML is a markup language and makes use of various tags
to format the content. These tags are enclosed within angle braces <Tag
Name>. Except few tags, most of the tags have their corresponding closing
tags. For example, <html> has its closing tag</html> and <body> tag has its
closing tag </body> tag etc.
Above example of HTML document uses the following tags:

Tag Description

<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and

mainly comprises of document header which is
represented by <head>...</head> and document body
which is represented by <body>...</body> tags.

<head> This tag represents the document's header which can

keep other HTML tags like <title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to

mention the document title.

8
<body> This tag represents the document's body which keeps
other HTML tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

To learn HTML, you will need to study various tags and understand how
they behave, while formatting a textual document. Learning HTML is simple
as users have to learn the usage of different tags in order to format the text
or images to make a beautiful webpage.
World Wide Web Consortium (W3C) recommends to use lowercase tags
starting from HTML
4.

HTML Document Structure

A typical HTML document will have the following structure:

Document declaration tag

<html>
<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>

We will study all the header and body tags in subsequent chapters, but for
now let's see what is document declaration tag.

9
HTML Basics
Welcome to HTML Basics. This workshop leads you through the basics of Hyper Text Markup
Language (HTML). HTML is the building block for web pages. You will learn to use HTML to author
an HTML page to display in a web browser.

Objectives:
By the end of this workshop, you will be able to:

 Use a text editor to author an HTML document.

 Be able to use basic tags to denote paragraphs, emphasis or special type.
 Create hyperlinks to other documents.
 Create an email link.
 Add images to your document.
 Use a table for layout.
 Apply colors to your HTML document.

Prerequisites:
You will need a text editor, such as Notepad and an Internet browser, such as Internet Explorer or
Netscape.

Q: What is Notepad and where do I get it?

A: Notepad is the default Windows text editor. On most Windows systems, click your Start
button and choose Programs then Accessories. It should be a little blue notebook.

Mac Users: SimpleText is the default text editor on the Mac. In OSX use TextEdit and
change the following preferences: Select (in the preferences window) Plain text instead of Rich
text and then select Ignore rich text commands in HTML files. This is very important because
if you don't do this HTML codes probably won't work.

One thing you should avoid using is a word processor (like Microsoft Word) for authoring your
HTML documents.

What is an html File?

HTML is a format that tells a computer how to display a web page. The documents themselves are
plain text files with special "tags" or codes that a web browser uses to interpret and display
information on your computer screen.

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags

10
 The markup tags tell the Web browser how to display the page  An HTML file must have an
htm or html file extension

Try It?
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as mypage.html. 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. To view how the page should look, visit this web
page: http://profdevtrain.austincc.edu/html/mypage.html

Example Explained
What you just made is a skeleton html document. This is the minimum required information for a
web document and all web documents should contain these basic components. The first tag in
your html document is <html>. This tag tells your browser that this is the start of an html
document. The last tag in your document is </html>. This tag tells your browser that this is the
end of the html document.

The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The <title> tag is used to
uniquely identify each document and is also displayed in the title bar of the browser window.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

11
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm
extension comes from the past when some of the commonly used software only allowed three
letter extensions. It is perfectly safe to use either .html or .htm, but be consistent.
mypage.htm and mypage.html are treated as different files by the browser.

How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages. To find
out, simply click on the View option in your browsers toolbar and select Source or Page Source.
This will open a window that shows you the actual HTML of the page. Go ahead and view the
source html for this page.

HTML Tags What are 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>

Logical vs. Physical Tags

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the
browser) the enclosed text's meaning. An example of a logical tag is the <strong> </strong>
tag. By placing text in between these tags you are telling the browser that the text has some
greater importance. By default all browsers make the text appear bold when in between the
<strong> and
</strong> tags.

Physical tags on the other hand provide specific instructions on how to display the text they
enclose. Examples of physical tags include:

 <b>: Makes the text bold.

 <big>: Makes the text usually one size bigger than what's around it.
 <i>: Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not around,
though the original intention of HTML was to not have physical tags. Rather than use physical tags
to style your HTML pages, you should use style sheets.

HTML Elements
Remember the HTML example from the previous page:

12
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

This is an HTML element:

<b>This text is bold</b>

The HTML element begins with a start tag: <b>

The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>. The
purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.

Nested Tags
You may have noticed in the example above, the <body> tag also contains other tags, like the
<b> tab. When you enclose an element in with multiple tags, the last tag opened should be the
first tag closed. For example:

<p><b><em>This is NOT the proper way to close nested

tags.</p></em></b>

<p><b><em>This is the proper way to close nested tags. </em></b></p>

13
Note: It doesn't matter which tag is first, but they must be closed in the proper order.

Why Use Lowercase Tags?

You may notice we've used lowercase tags even though I said that HTML tags are not case
sensitive. <B> means the same as <b>. The World Wide Web Consortium (W3C), the group
responsible for developing web standards, recommends lowercase tags in their HTML 4
recommendation, and XHTML (the next generation HTML) requires lowercase tags.

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements
on your page. The <tag> tells the browser to do something, while the attribute tells the browser
how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the
background color of your page should be blue, like this: <body bgcolor="blue">.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the
browser that the table should have no borders: <table border="0">. Attributes always
come in name/value pairs like this: name="value". Attributes are always added to the start tag of
an HTML element and the value is surrounded by quotes.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common,
but single style quotes are also allowed. In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single quotes:

name='George "machine Gun" Kelly'

Note: Some tags we will discuss are deprecated, meaning the World Wide Web Consortium
(W3C) the governing body that sets HTML, XML, CSS, and other technical standards decided those
tags and attributes are marked for deletion in future versions of HTML and XHTML. Browsers
should continue to support deprecated tags and attributes, but eventually these tags are likely to
become obsolete and so future support cannot be guaranteed.

For a complete list of tags, visit W3C.org.

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6>
defines the smallest.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading. A useful heading attribute
is align.

<h5 align="left">I can align headings </h5>

<h5 align="center">This is a centered heading </h5>

<h5 align="right">This is a heading aligned to the right </h5>

Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the
align attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p>

Important: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p> elements, the document becomes one
large paragraph. HTML automatically adds an extra blank line before and after a paragraph.
15
Line Breaks
The <br> tag is used when you want to start a new line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document.

This Code Would Display

<p>This <br> is a para<br> This is a para
graph with line breaks</p> graph with line breaks

The <br> tag has no closing tag.

Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections, like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width. For
instance:

This Code Would Display

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can
use comments to write notes to yourself, or write a helpful message to someone looking at your
source code.

This Code Would Display

<p> This html comment would
This HTML comment would be displayed
 be
displayed like this.</p> like this.

Notice you don't see the text between the tags . If you look at the source code, you
would see the comment. To view the source code for this page, in your browser window, select
View and then select Source.

Note: You need an exclamation point after the opening bracket .

HTML automatically adds an extra blank line before and after some elements, like before and after
a paragraph, and before and after a heading. If you want to insert blank lines into your document,
use the <br> tag.

16
Try It Out!
Open your text editor and type the following text:

Save the page as mypage2.html. Open the file in your Internet browser. To view how the
page should look, visit this web page:

Other HTML Tags

As mentioned before, there are logical styles that describe what the text should be and physical
styles which actually provide physical formatting. It is recommended to use the logical tags and
use style sheets to style the text in those tags.

Some Examples:
The following paragraph uses the <blockquote> tag. In the previous sentence, the blockquote
tag is enclosed in the <samp> Sample tag.

We the people of the United States, in order to form a more perfect Union, establish Justice, insure
domestic Tranquility, provide for the common defense, promote the general Welfare, and secure
the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution
for the United States of America.

Although most browsers render blockquoted text by indenting it, that's not specifically what it's
designed to do. It's conceivable that some future browser may render blockquoted text in some
other way. However, for the time being, it is perfectly safe to indent blocks of text with the
<blockquote>.

This Code Would Display

<abbr title="World Wide Web">WWW</abbr> WWW
When you hold your mouse pointer over the WWW, text in the title attribute will appear in.

HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start
of an HTML tag. If we want the browser to actually display these characters, we must insert
character entities in place of the actual characters themselves.

The Most Common Character Entities:

Result Description Entity Name Entity

Number
non-breaking    
space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work '
in IE)
18
A character entity has three parts: an ampersand (&), an entity name or an entity number, and
finally a semicolon (;). The & means we are beginning a special character, the; means ending a
special character and the letters in between are sort of an abbreviation for what it's for. To display
a less than sign in an HTML document we must write: < or < The advantage of using a
name instead of a number is that a name is easier to remember. The disadvantage is that not all
browsers support the newest entity names, while the support for entity numbers is very good in
almost all browsers.

Note: Entities are case sensitive.

Non-breaking Space
The most common character entity in HTML is the non-breaking space   Normally HTML
will truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them.
To add spaces to your text, use the   character entity.

This Code Would Display

<p> This code would
This code would appear as this.
appear as this.</p>

This Code Would Display

<p> This code This code would appear with three extra
    would spaces.
appear with three extra
spaces.</p>

HTML Fonts
The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed
the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be
used to define the layout and display properties of HTML elements.

The <font> Tag Should NOT be used.

HTML Backgrounds
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be
a color or an image.

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name:
19
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.

Background
The background attribute can also specify a background-image for an HTML page. The value of
this attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.

<body background="clouds.gif">
<body
background="http://profdevtrain.austincc.edu/html/graphics/clouds
.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above). If you
want to use a background image, you should keep in mind:

 Will the background image increase the loading time too much?
 Will the background image look good with other images on the page?
 Will the background image look good with the text colors on the page?
 Will the background image look good when it is repeated on the page?
 Will the background image take away the focus from the text?

Note: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the
latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C)
has removed these attributes from its recommendations. Style sheets (CSS) should be used
instead (to define the layout and display properties of HTML elements).

Try It Out!
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body
background="http://profdevtrain.austincc.edu/html/graphics/clouds
.gif" bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
20
<p>Welcome to my <strong>first</strong> webpage. I am writing this
page using a text editor and plain old html. </p>
<p>By learning html, I'll be able to create webpages like a
<del>beginner</del> pro....<br>
which I am of course. </p>
</body>
</htm>
Save your page as mypage3.html and view it in your browser.
Notice we gave our page a background color as well as a background image. If for some reason
the web page is unable to find the picture, it will display our background color.

HTML Colors
Color Values
Colors are defined using a hexadecimal notation for the combination of red, green, and blue color
values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest
value is 255 (hex #FF). This table shows the result of combining red, green, and blue:

Color Color color Color RGB

HEX
#000000 Black rgb(0,0,0)
#FF0000 Red rgb(255,0,0)
#00FF00 Green rgb(0,255,0)
#0000FF Blue rgb(0,0,255)
#FFFF00 Yellow rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF Purple rgb(255,0,255)
#C0C0C0 Grey rgb(192,192,192)
#FFFFFF White rgb(255,255,255)

Color Names
A collection of color names is supported by most browsers.

Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all
other colors you should use the Color HEX value.

21
Color Color Color
HEX Name
#F0F8FF AliceBlue
#FAEBD7 AntiqueWhite
#7FFFD4 Aquamarine
#000000 Black
#0000FF Blue
#8A2BE2 BlueViolet
#A52A2A Brown
Web Safe Colors
A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe
Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac
operating system used 40 different "reserved" fixed system colors (about 20 each). This 216 cross
platform web safe color palette was originally created to ensure that all computers would display
all colors correctly when running a 256 color palette.

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million
different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at
least 16,384 different colors.

HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).

Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered
list starts with the <ul> tag. Each list item starts with the <li> tag.

This Code Would Display

<ul>
<li>Coffee</li>  Coffee
<li>Milk</li>  Milk
</ul>

Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts
with the <ol> tag. Each list item starts with the <li> tag.

This Code Would Display

<ol>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
</ol>

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
22
Definition Lists
Definition lists consist of two parts: a term and a description. To mark up a definition list,
you need three HTML elements; a container <dl>, a definition term <dt>, and a definition
description <dd>.

This Code Would Display

<dl>
<dt>Cascading Style
Sheets</dt> <dd>Style sheets Cascading Style Sheets
are used to provide
Style sheets are used to provide
presentational suggestions
for documents marked up in presentational suggestions for documents
HTML. marked up in HTML.
</dd>
</dl>

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links,
other lists, etc

Try It Out
Open your text editor and type the following:

<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this
page using a text editor and plain old html. </p>
<p>By learning html, I'll be able to create web pages like a
pro....<br> which I am of course. </p> Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colors</li>
<li>How to create Lists</li>
</ul>
</body>
</html>
23
Save your page as mypage4.html and view it in your browser. Open it in a browser and see
how it looks like

24
HTML Links
HTML uses the <a> anchor tag to create a link to another document or web page.

The Anchor Tag and the Href Attribute

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 tell the address
of the document or page we are linking to, and the words between the open and close of the
anchor tag will be displayed as a hyperlink.

This Code Would Display

<a href="http://www.austincc.edu/">Visit Visit ACC!
ACC!</a>

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default,
the link will open in the current window. The code below will open the document in a new browser
window:

<a href=http://www.austincc.edu/ target="_blank">Visit ACC! </a>

Email Links
To create an email link, you will use mailto: plus, your email address. Here is a link to ACC's Help
Desk:

<a href="mailto:[email protected]">Email Help Desk</a>

To add a subject for the email message, you would add? subject= after the email address. For
example:

<a href="mailto:[email protected]?subject=Email
Assistance">Email Help Desk</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors, we can create
links that can jump directly to a specific section on a page, instead of letting the user scroll around
to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change
the appearance of the text (unless you set styles for that anchor) or indicate in any way that there
is anything special about the text. Below is the syntax of a named anchor:
25
<a name="top">Text to be displayed</a>

To link directly to the top section, add a # sign and the name of the anchor to the end of a URL,
like this:

This Code Would Display

A hyperlink to the top of the page from

within the file 10links.html will look like
this:
Back to top of page
<a href="#top">Back to top of page </a>

Note: Always add a trailing slash to subfolder references. If you link like this:
href="http://profdevtrain.austincc.edu/html", you will generate two HTTP requests to the server,
because the server will add a slash to the address and create a new request like this:
href="http://profdevtrain.austincc.edu/html/"

Named anchors are often used to create "table of contents" at the beginning of a large document.
Each chapter within the document is given a named anchor, and links to each of these anchors
are put at the top of the document. If a browser cannot find a named anchor that has been
specified, it goes to the top of the document. No error occurs.

HTML Images
The Image Tag and the Src Attribute
The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To
display an image on a page, you need to use the src attribute. Src stands for "source". The value
of the src attribute is the URL of the image you want to display on your page. The syntax of defining
an image:

This Code Would Display

26
Not only does the source attribute specify what image to use, but where the image is located. The
above image, graphics/chef.gif, means that the browser will look for the image name chef.gif
in a graphics folder in the same folder as the html document itself.

src="chef.gif" means that the image is in the

same folder as the html document calling for it.

src="images/chef.gif" means that the image

is one folder down from the html document that
called for it. This can go on down as many layers as
necessary.

src="../chef.gif" means that the image is in

one folder up from the html document that called for
it.

src="../../chef.gif" means that the image

is two folders up from the html document that called
for it.

src="../images/chef.gif" means that the

image is one folder up and then another folder down
in the images directory.

src="../../../other/images/chef.gif"
means this goes multiple layers up.

The browser puts the image where the image tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the
second paragraph.

The Alt Attribute

The alt attribute is used to define an alternate text for an image. The value of the alt attribute is
author-defined text:

27
<img src="graphics/chef.gif" alt="Smiling Happy Chef ">

The alt attribute tells the reader what he or she is missing on a page if the browser can't load
images. The browser will then display the alternate text instead of the image. It is a good practice
to include the alt attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers or use screen readers.

Image Dimensions
When you have an image, the browser usually figures out how big the image is all by itself. If you
put in the image dimensions in pixels however, the browser simply reserves a space for the image,
then loads the rest of the page. Once the entire page is loads it can go back and fill in the images.
Without dimensions, when it runs into an image, the browser has to pause loading the page, load
the image, then continue loading the page. The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling

Happy Chef">

Open the file mypage2.html in your text editor and add code highlighted in bold:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome to my first webpage. I am writing this page using a text editor and plain old html.
</p>
<p>By learning html, I'll be able to create web pages like a pro....<br> which I am of course. </p>

<p><img src="graphics/chef.gif" width="130" height="101"
alt="Smiling Happy Chef" align="center"></p>
<p align="center">This is my Chef</p>
</body>
</html>

Save your page as mypage5.html and view it in your browser. To see how your page should
look visit this web page:

28
29
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and
each row is divided into data cells (with the <td> tag). The letters td stands for table data, which
is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms,
horizontal rules, tables, etc.

This Code Would Display

Tables and the Border Attribute

To display a table with borders, you will use the border attribute.

This Code Display the result

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
and....

This Code Display the result

Open up your text editor. Type in your <html>, <head> and <body> tags. From here on I will
only be writing what goes between the <body> tags. Type in the following:

30
<td>Tables can be used to layout information</td>
<td>  <img
src="http://profdevtrain.austincc.edu/html/graphics/chef.gif">
 
</td>
</tr>
</table>
Save your page as mytable1.html and view it in your browser.

Headings in a Table
Headings in a table are defined with the <th> tag.

This code Would Display

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Cell Padding and Spacing

The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table
example without these properties. These properties may be used separately or together.

This Code Would Display

31
Cellspacing is the pixel width between the individual data cells in the table (The thickness of the
lines making the table grid). The default is zero. If the border is set at 0, the cellspacing lines will
be invisible.

This Code Would Display

Cellpadding is the pixel space between the cell contents and the cell border. The default for this
property is also zero. This feature is not used often, but sometimes comes in handy when you
have your borders turned on and you want the contents to be away from the border a bit for easy
viewing. Cellpadding is invisible, even with the border property turned on. Cellpadding can be
handled in a style sheet.

This Code Would Display

Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a
table

32
Table Size
Table Width
The width attribute can be used to define the width of your table. It can be defined as a fixed
width or a relative width. A fixed table width is one where the width of the table is specified in
pixels. For example, this code, <table width="550">, will produce a table that is 550 pixels
wide. A relative table width is specified as a percentage of the width of the visitor's viewing
window. Hence this code, <table width="80%">, will produce a table that occupies 80
percent of the screen.

This table width is 250 pixels

This table width is 50%

There are arguments in favor of giving your tables a relative width because such table widths yield
pages that work regardless of the visitor's screen resolution. For example, a table width of 100%
will always span the entire width of the browser window whether the visitor has a 800x600 display
or a 1024x768 display (etc). Your visitor never needs to scroll horizontally to read your page,
something that is regarded by most people as being very annoying.

HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an
HTML page.
A part of this page is formatted with two columns. As you can see on this page, there is a
left column and a right column. This text is displayed in the left column.

Try It Out!
An HTML <table> is used to divide a part of this Web page into two columns. The trick is to
use a table without borders, and maybe a little extra cell-padding. No matter how much
text you add to this page, it will stay inside its column borders.

33
Let's put everything you've learned together to create a simple page. Open your text editor and
type the following text:

<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" >
<tr bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="graphics/contact.gif"
width="100" height="100"></td>
<td valign="top"><h1 align="right">Janet Doeson</h1>
<h3 align="right">Technical Specialist</h3></td>
</tr>
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.austincc.edu">Links</a> </li>
</ul></td>
<td valign="top"><h2 align="center">Welcome! </h2>
<p>Welcome to my first webpage. I created this webpage without
the assistance of a webpage editor. Just my little text editor and
a keen understanding of html. </p>
<p>Look around. Notice I'm able to use paragraphs, lists and
headings. You may not be able to tell, but the layout is done with
a table. I'm very clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should
have been more specific. </p>
<cite>Lily Tomlin </cite> </blockquote> </td>
</tr>
</table>
<hr width="90%" align="left">
<address>
Janet Doeson<br>
Technical Specialist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:[email protected]">
[email protected] </a> </p>
</body>
Save your page as mytable2.html and view it in your browser.

34
What would be the output of the above code?

Page 35 of 88
ASSIGNMENT Create Your Own Page
It’s time to create your own page. Use your text editor to create a page which contains the
following:

• the required HTML page codes

• link to another web page
• an email link
• a picture/graphic
• a list of information

Page 36 of 88
HTML Forms
What is HTML Form

HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.

Forms contain special elements called controls like inputbox, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text, selecting
items, etc. and submitting this form to a web server for processing.

The <form> tag is used to create an HTML form. Here's a simple example of a login form:
Example
<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Submit">
</fieldset>
</form>

The following section describes different types of controls that you can use in your form.

Input Element

This is the most commonly used element within HTML forms.

It allows you to specify various types of user input fields, depending on the type attribute. An input
element can be of type text field, checkbox, password field, radio button, submit button, reset
button, etc. and several new input types introduced in HTML5.

The most used input types are described below.

Text Fields

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

Single-line text input controls are created using an <input> element, whose type attribute has a
value of text. Here's an example of a single-line text input used to take username:

Example
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</form>

Page 37 of 88
Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are
masked i.e. shown as asterisks or dots. This is to prevent others from reading the password on the
screen. This is also a single-line text input controls created using an <input> element whose type
attribute has a value of password.

Here's an example of a single-line password input used to take user password:

Example
Try this code »
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
Radio Buttons

Radio buttons are used to let the user select exactly one option from a pre-defined set of options.
It is created using an <input> element whose type attribute has a value of radio.

Example
Try this code »
<form>
<input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
</form>
Checkboxes

Checkboxes allows the user to select one or more option from a pre-defined set of options. It is
created using an <input> element whose type attribute has a value of checkbox.

Example
Try this code »
<form>
<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
</form>

Page 38 of 88
File Select box

The file fields allow a user to browse for a local file and send it as an attachment to the form data.
It normally rendered as a text box with a button that enables the user to browse for a file. However,
the user can also type the path and name of the file in the text box.

This is also created using an <input> element, whose type attribute value is set to file.

Example
Try this code »
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
Textarea

Textarea is a multiple-line text input control that allows a user to enter more than one line of text.
Multi-line text input controls are created using an <textarea> element.

Example
Try this code »
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
Select Boxes

A select box is a dropdown list of options that allows user to select one or more option from a
pull-down list of options. Select box is created using the <select> element and <option>
element. The option elements within the <select> element define each list item.

Example
Try this code »
<form>
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
</form>
Submit and Reset Buttons

A submit button is used to send the form data to a web server. When submit button is clicked the
form data is sent to the file specified in the form's action attribute to process the submitted data. A
reset button resets all the forms control to default values.

Page 39 of 88
Example
Try this code »
<form action="action.php" method="post" id="users">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
Most frequently used form attributes are:
Attribute Description

name The name of the form.

action URL of the program that processes the information submitted via form.

The HTTP method that the browser uses to submit the form. Possible values are get and
method
post.

A name or keyword indicating the target page where the result of the script will be displayed.
target
The reserved keywords are _blank, _self, _parent and _top.

Page 40 of 88
HTML Layout
Web page layout is an essential part of creating well-formed, well-structured, semantically-rich
websites.

Creating Website Layouts

Creating a website layout is the activity of positioning the various elements that make a web page
in a well-structured manner and give appealing look to the website.

You can find, most of the websites on the internet have put their content in multiple rows and
columns — formatted like a magazine or newspaper, to give general web users a better reading
and writing environment. This can be easily achieved by using the <table>, <div> or <span> tags
and adding some styles to them.

HTML Layout Using Tables

Tables are the simplest method for creating layouts in HTML. Generally, this involves the
process of putting the content into rows and columns.

The following HTML layout is achieved using a table with 3 rows and 2 columns — the first and
last row spans both columns using the colspan attribute:

Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
<table cellpadding="10px;" cellspacing="0" style="font:12px verdana, sans-
serif; width:100%;">
<tr>
<td colspan="2" style="background-color:#679BB7;">
<h1 style="font-size:18px; margin:10px 0;">Tutorial
Republic</h1>
</td>
HTML Layouts Using Div and Span

The HTML <div> (stands for division) element is used for marking out a block of content, or set
of other elements inside an HTML document. It can contain further div element if required, but it
cannot be contained within an inline element. The <span> element on the other hand is used for
marking out sections within a block element or other inline elements.

The following example uses the div elements to create a multiple column layout, producing the
same result as in the previous example that uses tables:
Page 41 of 88
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Div Layout</title>
<style>
body{
font: 12px verdana, sans-serif;
margin: 0px;
}
.header{
padding: 10px 0;
background-color: #679BB7;
}
Creating Website Layouts Using HTML5 Structural Elements

HTML5 has introduced new structural elements like <header>, <footer>, <nav>, <section> etc.
to define different parts of the web pages in a more semantic way. You can consider these elements
as a replacement for commonly used classes such as .header, .footer, .nav, .section etc. The
following example uses the new HTML5 structural elements to create the same web page layout
what we have created in the previous examples.

Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Web Page Layout</title>
<style type="text/css">
body{
font: 12px verdana, sans-serif;
margin: 0px;
}
header{
background-color: #679BB7;
padding: 10px;
}

The following table provides a brief overview of new structural elements in HTML5.

Tag Description

<header> Represents the header of a document or a section.

<footer> Represents the footer of a document or a section.

<nav> Defines a section of navigation links.

Page 42 of 88
<section> Defines a section of a document, such as header, footer etc.

<article> Defines an article.

<aside> Defines some content loosely related to the page content.

Represents a widget from which the user can obtain additional information or controls
<details>
on-demand.

<summary> Defines a summary for the <details> element.

Page 43 of 88
1. CSS ─ OVERVIEW

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language

intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
as well as a variety of other effects.

CSS is easy to learn and understand but it provides a powerful control over
the presentation of an HTML document. Most commonly, CSS is combined with
the markup languages HTML or XHTML.

Advantages of CSS

• CSS saves time - You can write CSS once and then reuse the
same sheet in multiple HTML pages. You can define a style for each
HTML element and apply it to as many web pages as you want.
• Pages load faster - If you are using CSS, you do not need to
write HTML tag attributes every time. Just write one CSS rule of a tag
and apply it to all the occurrences of that tag. So, less code means faster
download times.
• Easy maintenance - To make a global change, simply change
the style, and all the elements in all the web pages will be updated
automatically.
• Superior styles to HTML - CSS has a much wider array of
attributes than HTML, so you can give a far better look to your HTML
page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to
be optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cellphones or for printing.
• Global web standards – Now HTML attributes are being
deprecated and it is being recommended to use CSS. So it’s a good idea

Page 44 of 88
2. CSS ─SYNTAX

to start using CSS in all the HTML pages to make them compatible with
future browsers.

CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts:

• Selector: A selector is an HTML tag at which a style will be applied. This could
be any tag like <h1> or <table> etc.

• Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border, etc.
• Value: Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows:
selector { property: value }
Example: You can define a table border as follows:
table{ border :1px solid #C00; }
Here table is a selector and border is a property and the given value
1px solid #C00 is the value of that property.
You can define selectors in various simple ways based on your comfort.
Let me put these selectors one by one.

CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
Page 45 of 88
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by
changing just one file!

CSS Syntax and Selectors

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.

In the following example all <p> elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.
Page 46 of 88
You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):

p {
text-align: center;
color: red;
}

The id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element should be unique within a page, so the id selector is used

to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.

The style rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by
the name of the class.

In the example below, all HTML elements with class="center" will be red and ce
.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a
class.

Page 47 of 88
In the example below, only <p> elements with class="center" will be center-
aligned:

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

In the example below, the <p> element will be styled according to

class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

Grouping Selectors
If you have elements with the same style definitions, like this:

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example
h1, h2, p {
text-align: center;
color: red;
}

Page 48 of 88
CSS Comments
Comments are used to explain the code, and may help when you edit the source
code at a later date.

Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External style sheet

 Internal style sheet
 Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by
changing just one file!

Each page must include a reference to the external style sheet file inside the
<link> element. The <link> element goes inside the <head> section:

Page 49 of 88
An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "mystyle.css" looks:

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such
as margin-left: 20 px;). The correct way is: margin-left: 20px;

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline Styles
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a
<h1> element:

Page 50 of 88
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Tip: An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.

Example
Assume that an external style sheet has the following style for the <h1>
element:

h1 {
color: navy;
}

then, assume that an internal style sheet also has the following style for the
<h1> element:

h1 {
color: orange;
}

If the internal style is defined after the link to the external style sheet, the
<h1> elements will be "orange":

Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

However, if the internal style is defined before the link to the external style
sheet, the <h1> elements will be "navy":

<head>
<style>
h1 {
color: orange;
Page 51 of 88
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Cascading Order
What style will be used when there is more than one style specified for an HTML
element?

Generally speaking, we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number one has the highest
priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in an
external style sheet, or a browser default value.

The Type Selectors

This is the same selector we have seen above. Again, one more example
to give a color to all level 1 headings:
h1 { color: #36CFFF;
}
The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type:
* { color: #000000;
}

This rule renders the content of every element in our document in black.

The Descendant Selectors

Page 52 of 88
Suppose you want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, the style rule will apply to
<em> element only when it lies inside the <ul> tag.

ul em { color: #000000;
}

The Class Selectors

You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.

.black { color: #000000;

}

This rule renders the content in black for every element with class attribute set to
black in our document. You can make it a bit more particular. For example:

h1.black { color: #000000;

}

This rule renders the content in black for only <h1> elements with class attribute set
to black.
You can apply more than one class selectors to a given element. Consider the
following example:

<p class="center bold">

This para will be styled by the classes center and bold.
</p>

The ID Selectors

You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.

#black { color: #000000;

}

This rule renders the content in black for every element with id attribute set to black
in our document. You can make it a bit more particular. For example:

h1#black { color: #000000;

Page 53 of 88
}

This rule renders the content in black for only <h1> elements with id attribute set to
black.
The true power of id selectors is when they are used as the foundation for descendant
selectors. For example:

#black h2 { color: #000000;

}

In this example, all level 2 headings will be displayed in black color when those
headings will lie within tags having id attribute set to black.

The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is
very similar to descendants but have different functionality. Consider the following
example:

body > p { color: #000000;

}
This rule will render all the paragraphs in black if they are a direct child of the
<body> element. Other paragraphs put inside other elements like <div> or <td>
would not have any effect of this rule.

The Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule
below will match all the input elements having a type attribute with a value of text:

input[type="text"]{ color: #000000;

}

The advantage to this method is that the <input type="submit" /> element is
unaffected, and the color applied only to the desired text fields.
There are following rules applied to attribute selector.

• p[lang] - Selects all paragraph elements with a lang attribute.

• p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value
of exactly "fr".

• p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains

the word "fr".

Page 54 of 88
• p[lang|="en"] - Selects all paragraph elements whose lang attribute contains
values that are exactly "en", or begin with "en-".

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these
rules to combine multiple properties and corresponding values into a single block as
defined in the following example:

h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom:

1em; text-transform: lowercase;
}
Here all the property and value pairs are separated by a semicolon (;). You can keep
them in a single line or multiple lines. For better readability, we keep them in separate
lines.
For a while, don't bother about the properties mentioned in the above block. These
properties will be explained in the coming chapters and you can find the complete
detail about properties in CSS References.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a
comma, as given in the following example:

h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-

bottom: 1em; text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The order
of the list is irrelevant. All the elements in the selector will have the corresponding
declarations applied to them.

You can combine the various class selectors together as shown below:

#content, #footer, #supplement { position: absolute; left: 510px; width:

200px;
}

There are four ways to associate styles with your HTML document. Most commonly
used methods are inline CSS and External CSS.

Page 55 of 88
Embedded CSS - The <style> Element

You can put your CSS rules into an HTML document using the <style> element. This
tag is placed inside the <head>...</head> tags. Rules defined using this syntax will
be applied to all the elements available in the document. Here is the generic syntax:

<head>
<style type="text/css" media="...">
Style Rules
............
</style>
</head>

Attributes

Attributes associated with <style> elements are:

Attribute Value Description

type text/css
Specifies the style sheet language as a content-
type (MIME type). This is a required attribute.

media Specifies the device, the document will be

displayed on. Default value is all. This is an
screen tty tv optional attribute.
projection
handheld print
braille

aural
all

Example

Following is an example of embed CSS based on the above syntax:

Page 56 of 88
<head>
<style type="text/css" media="all"> h1{ color: #36C; }
</style>
</head>

Inline CSS - The style Attribute

You can use style attribute of any HTML element to define style rules. These rules will
be applied to that element only. Here is the generic syntax:

<element style="...style rules....">

Attributes

Attribute Value Description

style
style The value of style attribute is a combination of style
rules declarations separated by semicolon (;).

Example

Following is the example of inline CSS based on the above syntax:

<h1 style ="color:#36C;"> This is inline CSS </h1>

It will produce the following result:

This is inline CSS

External CSS - The <link> Element

The <link> element can be used to include an external stylesheet file in your HTML
document.
An external style sheet is a separate text file with .css extension. You define all the
Style rules within this text file and then you can include this file in any HTML document
using <link> element.
Here is the generic syntax of including external CSS file:
Page 57 of 88
<head>
<link type="text/css" href="..." media="..." />
</head>

Attributes

Attributes associated with <style> elements are:

Attribute Value Description

type text/css
Specifies the style sheet language as a content-type
(MIME type). This attribute is required.

href URL Specifies the style sheet file having Style rules. This
attribute is a required.

media Specifies the device the document will be displayed on.

screen tty Default value is all. This is an optional attribute.
tv
projection
handheld
print
braille

aural
all

Example

Consider a simple style sheet file with a name mystyle.css having the following rules:

h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-

bottom: 1em; text-transform: lowercase;
}

Now you can include this file mystyle.css in any HTML document as follows:

Page 58 of 88
Imported CSS - @import Rule

@import is used to import an external stylesheet in a manner similar to the <link>

element. Here is the generic syntax of @import rule.

Here URL is the URL of the style sheet file having style rules. You can use another
syntax as well:

Example

Following is the example showing you how to import a style sheet file into an HTML
document:

<head>
@import "mystyle.css";
</head>

CSS Rules Overriding

We have discussed four ways to include style sheet rules in an HTML document. Here
is the rule to override any Style Sheet Rule.

• Any inline style sheet takes the highest priority. So, it will override any rule
defined in <style>...</style> tags or the rules defined in any external style
sheet file.

• Any rule defined in <style>...</style> tags will override the rules defined in
any external style sheet file.

• Any rule defined in the external style sheet file takes the lowest priority, and
the rules defined in this file will be applied only when the above two rules are
not applicable.

Page 59 of 88
Handling Old Browsers

There are still many old browsers who do not support CSS. So, we should take care
while writing our Embedded CSS in an HTML document. The following snippet shows
how to use comment tags to hide CSS from older browsers:

CSS Comments

Many times, you may need to put additional comments in your style sheet blocks.
So, it is very easy to comment any part in the style sheet. You can simply put your
comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and
C++ programming languages.

Example

/* This is an external style sheet file */ h1, h2, h3 { color: #36C; font-
weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform:
lowercase;
}
/* end of style rules. */

Page 60 of 88
4. CSS ─MEASUREMENT UNITS

Before we start the actual exercise, we would like to give a brief idea about the CSS
Measurement Units. CSS supports a number of measurements including absolute
units such as inches, centimeters, points, and so on, as well as relative measures
such as percentages and em units. You need these values while specifying various
measurements in your Style rules e.g. border="1px solid red".
We have listed out all the CSS Measurement Units along with proper Examples:
Unit Description Example

Defines a measurement as a
p {font-size: 16pt; line-height:
% percentage relative to another value,
125%;}
typically an enclosing element.

cm Defines a measurement in div {margin-bottom: 2cm;}

centimeters.

em A relative measurement for the height p {letter-spacing: 7em;}

of a font in em spaces. Because an em
unit is equivalent to the size of a given
font, if you assign a font to 12pt, each
"em" unit would be 12pt; thus, 2em
would be 24pt.

ex This value defines a measurement p {font-size: 24pt; line-height:

relative to a font's x-height. The x- 3ex;}
height is determined by the height of
the font's lowercase letter x.

in Defines a measurement in inches. p {word-spacing: .15in;}

mm Defines a measurement in p {word-spacing: 15mm;}

millimeters.

pc Defines a measurement in picas. A p {font-size: 20pc;}

pica is equivalent to 12 points; thus,
there are 6 picas per inch.

Page 61 of 88
5. CSS ─ COLORS

pt Defines a measurement in points. A body {font-size: 18pt;}

point is defined as 1/72nd of an inch.

px Defines a measurement in screen p {padding: 25px;}

pixels.

CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element (i.e., its text) or for the background of the element. They can also
be used to affect the color of borders and other decorative effects.

You can specify your color values in various formats. Following table lists all the possible
formats:
Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

These formats are explained in more detail in the following sections:

CSS Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red
value, the next two are a green value (GG), and the last are the blue value (BB).

A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.

Page 62 of 88
Each hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the
examples to use Hexadecimal notation.
Color Color HEX

black #000000

Red #FF0000

Lime Green #00FF00

Blue #0000FF

Yellow #FFFF00

#00FFFF

Pink #FF00FF

Grey #C0C0C0

white #FFFFFF

CSS Colors - Short Hex Codes

This is a shorter form of the six-digit notation. In this format, each digit is replicated
to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Jasc Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #. Following are the
examples to use the Hexadecimal notation.

Page 63 of 88
Page 64 of 88
1.JAVASCRIPT OVERVIEW

What is JavaScript?

Javascript is a dynamic computer programming language. It is lightweight and most

commonly used as a part of web pages, whose implementations allow client-side
script to interact with the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript
made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The
general-purpose core of the language has been embedded in Netscape, Internet
Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript
language.

• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform.

Client-Side JavaScript

Client-side JavaScript is the most common form of the language. The script should
be included in or referenced by an HTML document for the code to be interpreted by
the browser.
It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI
server-side scripts. For example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field.
The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link
navigation, and other actions that the user initiates explicitly or implicitly.
Page 65 of 88
Advantages of JavaScript

The merits of using JavaScript are:

• Less server interaction: You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your
server.

• Immediate feedback to the visitors: They don't have to wait for a page
reload to see if they have forgotten to enter something.

• Increased interactivity: You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.

• Richer interfaces: You can use JavaScript to include such items as drag-
anddrop components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the

following important features:

• Client-side JavaScript does not allow the reading or writing of files. This has
been kept for security reason.

• JavaScript cannot be used for networking applications because there is no such

support available.

• JavaScript doesn't have any multithreading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that
allows you to build interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive

development tools. You can start with a simple text editor such as Notepad. Since it
is an interpreted language inside the context of a web browser, you don't even need
to buy a compiler.
To make our life simpler, various vendors have come up with very nice JavaScript
editing tools. Some of them are listed here:

Page 66 of 88
2.JAVASCRIPT– SYNTAX

• Microsoft FrontPage: Microsoft has developed a popular HTML editor called

FrontPage. FrontPage also provides web developers with a number of
JavaScript tools to assist in the creation of interactive websites.

• Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very

popular HTML and JavaScript editor in the professional web development
crowd. It provides several handy prebuilt JavaScript components, integrates
well with databases, and conforms to new standards such as XHTML and XML.

• Macromedia HomeSite 5: HomeSite 5 is a well-liked HTML and JavaScript

editor from Macromedia that can be used to manage personal websites
effectively.

Where is JavaScript Today?

The ECMAScript Edition 5 standard will be the first update to be released in over four
years. JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard, and the
difference between the two is extremely minor.
The specification for JavaScript 2.0 can be found on the following site:
http://www.ecmascript.org/
Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript
standard, although both the languages still support the features that are not a part
of the standard.
JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within you
web page, but it is normally recommended that you should keep it within the <head>
tags.
The <script> tag alerts the browser program to start interpreting all the text between
these tags as a script. A simple syntax of your JavaScript will appear as follows.

The script tag takes two important attributes:

• Language: This attribute specifies what scripting language you are using.
Typically, its value will be javascript. Although recent versions of HTML (and
XHTML, its successor) have phased out the use of this attribute.

Page 67 of 88
• Type: This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".
So your JavaScript syntax will look as follows.

<script language="javascript" type="text/javascript">

JavaScript code
</script>

Your First JavaScript Code

Let us take a sample example to print out "Hello World". We added an optional HTML
comment that surrounds our JavaScript code. This is to save our code from a browser
that does not support JavaScript. The comment ends with a "//-->". Here "//"
signifies a comment in JavaScript, so we add that to prevent a browser from reading
the end of the HTML comment as a piece of JavaScript code. Next, we call a function
document.write which writes a string into our HTML document.

This function can be used to write text, HTML, or both. Take a look at the following
code.

This code will produce the following result:

Hello World!

Whitespace and Line Breaks

Page 68 of 88
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.
You can use spaces, tabs, and newlines freely in your program and you are free to
format and indent your programs in a neat and consistent way that makes the code
easy to read and understand.

Semicolons are Optional

Simple statements in JavaScript are generally followed by a semicolon character, just

as they are in C, C++, and Java. JavaScript, however, allows you to omit this
semicolon if each of your statements are placed on a separate line. For example, the
following code could be written without semicolons.

<script language="javascript" type="text/javascript">

</script>

But when formatted in a single line as follows, you must use semicolons:

<script language="javascript" type="text/javascript">

</script>

Note: It is a good programming practice to use semicolons.

Case Sensitivity

JavaScript is a case-sensitive language. This means that the language keywords,

variables, function names, and any other identifiers must always be typed with a
consistent capitalization of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE: Care should be taken while writing variable and function names in
JavaScript.

Page 69 of 88
Comments in JavaScript

JavaScript supports both C-style and C++-style comments. Thus:

• Any text between a // and the end of a line is treated as a comment and is
ignored by JavaScript.

• Any text between the characters /* and */ is treated as a comment. This may
span multiple lines.
• JavaScript also recognizes the HTML comment opening sequence <!--.
JavaScript treats this as a single-line comment, just as it does the // comment.

• The HTML comment closing sequence --> is not recognized by JavaScript so it

should be written as //-->.

Example
The following example shows how to use comments in JavaScript.

<script language="javascript" type="text/javascript">

<!--

// This is a comment. It is similar to comments in C++

/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>

All the modern browsers come with built-in support for JavaScript. Frequently, you
may need to enable or disable this support manually. This chapter explains the
procedure of enabling and disabling JavaScript support in your browsers: Internet
Explorer, Firefox, chrome, and Opera.

JavaScript in Internet Explorer

Here are the steps to turn on or turn off JavaScript in Internet Explorer:
Page 70 of 88
3.JAVASCRIPT– ENABLING

• Follow Tools -> Internet Options from the menu.

• Select Security tab from the dialog box.
• Click the Custom Level button.
• Scroll down till you find the Scripting option.
• Select Enable radio button under Active scripting.
• Finally click OK and come out.
To disable JavaScript support in your Internet Explorer, you need to select Disable
radio button under Active scripting.

JavaScript in Firefox

Here are the steps to turn on or turn off JavaScript in Firefox:

• Open a new tab -> type about: config in the address bar.
• Then you will find the warning dialog. Select I’ll be careful, I promise!
• Then you will find the list of configure options in the browser.
• In the search bar, type javascript.enabled.
• There you will find the option to enable or disable javascript by right-clicking
on the value of that option -> select toggle.
If javascript.enabled is true; it converts to false upon clicking toogle. If javascript
is disabled; it gets enabled upon clicking toggle.

Page 71 of 88
JavaScript in Chrome

Here are the steps to turn on or turn off JavaScript in Chrome:

• Click the Chrome menu at the top right hand corner of your browser.
• Select Settings.
• Click Show advanced settings at the end of the page.
• Under the Privacy section, click the Content settings button.
• In the "Javascript" section, select "Do not allow any site to run JavaScript" or
"Allow all sites to run JavaScript (recommended)".

JavaScript in Opera

Here are the steps to turn on or turn off JavaScript in Opera:

• Follow Tools-> Preferences from the menu.

• Select Advanced option from the dialog box.
• Select Content from the listed items.
• Select Enable JavaScript checkbox.
• Finally click OK and come out.
To disable JavaScript support in Opera, you should not select the Enable
JavaScript checkbox.

Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a
warning message to the user using <noscript> tags.
You can add a noscript block immediately after the script block as follows:

<script language="javascript" type="text/javascript">

Page 72 of 88
4.JAVASCRIPT– PLACEMENT

<!--
19

document.write ("Hello World!")

//-->
</script>

Now, if the user's browser does not support JavaScript or JavaScript is not enabled,
then the message from </noscript> will be displayed on the screen

There is a flexibility given to include JavaScript code anywhere in an HTML

document. However, the most preferred ways to include JavaScript in an HTML file
are as follows:

• Script in <head>...</head> section.

• Script in <body>...</body> section.
• Script in <body>...</body> and <head>...</head> sections.
• Script in an external file and then include in <head>...</head> section.
In the following section, we will see how we can place JavaScript in an HTML file in
different ways.

JavaScript in <head>...</head> Section

If you want to have a script run on some event, such as when a user clicks
somewhere, then you will place that script in the head as follows.

Page 73 of 88
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
Click here for the result
<input type="button" onclick="sayHello()" value="Say Hello" />

</body>
</html>

This code will produce the following results:

Click here for the result

Say Hello

JavaScript in <body>...</body> Section

If you need a script to run as the page loads so that the script generates content in
the page, then the script goes in the <body> portion of the document. In this case,
you would not have any function defined using JavaScript. Take a look at the
following code.

Page 74 of 88
<html> <head>
</head>
<body>
<script type="text/javascript">

</script>
<p>This is web page body </p>
</body>
</html>

This code will produce the following results:

Hello World
This is web page body

JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body> section altogether as
follows.

Page 75 of 88
<html>
<head>
<script type="text/javascript">

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

</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

This code will produce the following result.

HelloWorld

Say Hello

JavaScript in External File

As you begin to work more extensively with JavaScript, you will be likely to find
that there are cases where you are reusing identical JavaScript code on multiple
pages of a site.
You are not restricted to be maintaining identical code in multiple HTML files. The
script tag provides a mechanism to allow you to store JavaScript in an external file
and then include it into your HTML files.

Page 76 of 88
5.JAVASCRIPT– VARIABLES

Here is an example to show how you can include an external JavaScript file in your
HTML code using script tag and its src attribute.

To use JavaScript from an external file source, you need to write all your JavaScript
source code in a simple text file with the extension ".js" and then include that file as
shown above.
For example, you can keep the following content in filename.js file and then you
can use sayHello function in your HTML file after including the filename.js file.

function sayHello() { alert("Hello World")

}

JavaScript Datatypes

One of the most fundamental characteristics of a programming language is the set

of data types it supports. These are the type of values that can be represented and
manipulated in a programming language.
JavaScript allows you to work with three primitive data types:

• Numbers, e.g., 123, 120.50 etc.

• Strings of text, e.g. "This text string" etc.
• Boolean, e.g. true or false.
JavaScript also defines two trivial data types, null and undefined, each of which
defines only a single value. In addition to these primitive data types, JavaScript
supports a composite data type known as object. We will cover objects in detail in
a separate chapter.
Note: Java does not make a distinction between integer values and floating-point
values. All numbers in JavaScript are represented as floating-point values.

Page 77 of 88
JavaScript represents numbers using the 64-bit floating-point format defined by the
IEEE 754 standard.

JavaScript Variables

Like many other programming languages, JavaScript has variables. Variables can
be thought of as named containers. You can place data into these containers and
then refer to the data simply by naming the container.

Before you use a variable in a JavaScript program, you must declare it. Variables
are declared with the var keyword as follows

25
//-->
</script>

You can also declare multiple variables with the same var keyword as follows:

Storing a value in a variable is called variable initialization. You can do variable

initialization at the time of variable creation or at a later point in time when you
need that variable.
For instance, you might create a variable named money and assign the value
2000.50 to it later. For another variable, you can assign a value at the time of
initialization as follows.

Page 78 of 88
<script type="text/javascript">

</script>

Note: Use the var keyword only for declaration or initialization, once for the life of
any variable name in a document. You should not re-declare same variable twice.
JavaScript is untyped language. This means that a JavaScript variable can hold a
value of any data type. Unlike many other languages, you don't have to tell JavaScript
during variable declaration what type of value the variable will hold. The value type
of a variable can change during the execution of a program and JavaScript takes care
of it automatically.

JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.
• You should not use any of the JavaScript reserved keywords as a variable
name. These keywords are mentioned in the next section. For example, break
or boolean variable names are not valid.

• JavaScript variable names should not start with a numeral (0-9). They must
begin with a letter or an underscore character. For example, 123test is an
invalid variable name but _123test is a valid one.

• JavaScript variable names are case-sensitive. For example, Name and name
are two different variables.

JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the following table. They
cannot be used as JavaScript variables, functions, methods, loop labels, or any
object names.

In summary, JavaScript is a lightweight programming language that runs in a Web

browser (client-side).
Embedded in HTML files and can manipulate the HTML itself. It is Interpreted, not
compiled.

Page 79 of 88
JavaScript is not Java, Developed by Netscape, not Sun.
Only executed in a browser. It is not a full-featured programming language.
However, the syntax is similar.
Uses of JavaScript
To add dynamic function to your HTML.
JavaScript does things that HTML can’t—like logic.
You can change HTML on the fly.
To shoulder some of the form-processing burden.
JavaScript runs in the browser, not on the Web server.
Better performance
JavaScript can validate the data that users enter into the form, before it is sent to
your Web application.
The Document Object Model makes it possible to support dynamic HTML documents
with JavaScript

Page 80 of 88
Page 81 of 88
WordPress

WordPress is an open source Content Management System (CMS), which allows the users to
build dynamic websites and blog. WordPress is the most popular blogging system on the web and
allows updating, customizing and managing the website from its back-end CMS and components.
This tutorial will teach you the basics of WordPress using which you can create websites with
ease. The tutorial is divided into various sections for convenience. Each of these sections contain
related topics with screenshots explaining the WordPress admin screens.

WordPress is an open source Content Management System (CMS), which allows the users to
build dynamic websites and blogs. WordPress is the most popular blogging system on the web
and allows updating, customizing and managing the website from its back-end CMS and
components.

What is Content Management System (CMS)?

The Content Management System (CMS) is a software which stores all the data such as text,
photos, music, documents, etc. and is made available on your website. It helps in editing,
publishing and modifying the content of the website.

WordPress was initially released on 27th May, 2003 by Matt Mullenweg and Mike Little.
WordPress was announced as open source in October 2009.

Features

• User Management − It allows managing the user information such as changing the
role of the users to (subscriber, contributor, author, editor or administrator), create or
delete the user, change the password and user information. The main role of the user
manager is Authentication.
• Media Management − It is the tool for managing the media files and folder, in
which you can easily upload, organize and manage the media files on your website.
• Theme System − It allows modifying the site view and functionality. It includes
images, stylesheet, template files and custom pages.
• Extend with Plugins − Several plugins are available which provides custom
functions and features according to the users need.
• Search Engine Optimization − It provides several search engine optimization (SEO)
tools which makes on-site SEO simple.
• Multilingual − It allows translating the entire content into the language preferred
by the user.
• Importers − It allows importing data in the form of posts. It imports custom files,
comments, post pages and tags.

Advantages

Page 82 of 88
• It is an open source platform and available for free.
• CSS files can be modified according to the design as per users need.
• There are many plugins and templates available for free. Users can customize the
various plugins as per their need.
• It is very easy to edit the content as it uses WYSIWYG editor (What You See Is What
You Get is a user interface that allows the user to directly manipulate the layout of
document without having a layout command).
• Media files can be uploaded easily and quickly.
• It offers several SEO tools which makes on-site SEO simple.
• Customization is easy according to the user's needs.
• It allows creating different roles for users for website such as admin, author, editor
and contributor.

Disadvantages

• Using several plugins can make the website heavy to load and run.
• PHP knowledge is required to make modifications or changes in the WordPress
website.
• Sometimes software needs to be updated to keep the WordPress up-to-date with
the current browsers and mobile devices. Updating WordPress version leads to loss of
data, so it a backup copy of the website is required.
• Modifying and formatting the graphic images and tables is difficult.

System Requirements for WordPress

• Database − MySQL 5.0 +

• Web Server − WAMP (Windows) o LAMP (Linux) o XAMP (Multi-platform) o
MAMP (Macintosh)
• Operating System − Cross-platform
• Browser Support − IE (Internet Explorer 8+), Firefox, Google chrome, Safari, Opera
• PHP Compatibility − PHP 5.2+

We’ll now illustrate how to install and design dynamic websites using WordPress.

Page 83 of 88
Website Development Document guide
Concept Document
• A document showing the objectives of systems development (website development);
• Handed in by project team to management
• Meant to seek authorization and funding
• It is a planning stage in Website development
• It is a blueprint that will guide us on how the website will work
Site Planning and Development
• Web Site Goals/ objectives
• Planning Stages
• Conceptualization of the website
• Content Development
• Web Site Design Principles
A: Web Site Goals
• What are the aims of building your site?
• What are the client needs?
• Are these in line with Company Mission?
• Does going online improve our competitive position?
B: Planning Stages
• Systems analysis and design (Planning)
• Building the system: In-house vs. outsourcing
• Website hosting: In-house vs. outsourcing
• System Testing, Implementation and maintenance
• Website optimization factors
Systems Analysis& Design
• Analyze the current systems
• How is the firm managing its clients?
• Is going online better than existing marketing platforms?
• How feasible is website development?
o Technically
o Socially
o Politically/ Organizational policy compliance?
o Financially/ Economically
o Select a design method; RAD, JAD, Prototyping, or SDLC?
Website hosting Considerations?
: In-house vs. outsourcing
• Cost (Server Per Month)
• Hardware requirements
• Network Traffic you are planning for
• Bandwidth limits
• Facilities provided
• Customer Care
• Server Platform (both for Web server and for databases)
• Disk space allocations
• User friendliness of Providers’ interface
Other Considerations?

Page 84 of 88
• Extra charges for exceeding disk space, bandwidth
• Limits on e-mail accounts and types of e-mail access (POP3, Web, etc)
• Tech support provided (and toll-free support number)
• Monthly rates and Setup fees
• Tools available to administer your site, such as adding new users, changing user permissions,
adding directories, modifying directory permissions
• Add-on software provided such as ColdFusion Server, WebTrends,
• Backup schedule, procedures, and guarantees
• Referrals from other clients
• Reputation of Service provider
In-house Hosting
Benefits Costs Incurred:
 Secure systems Costs Incurred:
 Competitive advantage • Company may lack expertise to host its
 Cheaper than outsourcing own system
 Efficient disk space allocation • Employees may compromise systems
 No Bandwidth limits security
 Day-to-day Maintenance is easy
 Data Backup are easy

Out-Sourced Hosting
Benefits Costs Incurred:
 More reliability since Host is professional • Company is locked into the hosting
 A greater level of availability provider’s system, technologies and
 The burden of servers and other network policies.
hardware do not fall on your shoulders • Insecurity of firm’s sensitive web-data
 A chance to concentrate on more key • Costly in terms of charges
activities of the firm • No competitive advantage coz we use a
generic industry system
• Less administrative control over your
entire domain

C: Conceptualization of the website

How to develop a Conceptual design for the given company?
1. Give a Background of the company / About the company (ownership, location, products)
2. Vision or mission Statement of the company
3. Objectives of the website / goal of the site
4. Target audience
5. Page layouts
6. Navigation Scheme
Common Storyboard Items on Pages
 Draw pictures showing how these pages will look like online. Plan your site.
• Home
• About Us
• Products

Page 85 of 88
• Contact us
• Order
Make diagrammatical representations of your system

E.g. Home Page

About Us Page

Site Navigation Scheme

Show how one will move from one page to another

Page 86 of 88
Identify the Tools to Use

Testing and Maintenance

Testing and Implementation Ways
• Direct cutover: changeover from the old system to the new system immediately. There is no
pre-testing- risky
• Parallel operation: both the old and the new systems operate. We test how the new is better
than the old
• Pilot operation: implementing the complete new system at a selected location of a company-
Test how the system works in Pilot site
• Phased operation: implementing the new system in stages, or modules.
Website Systems Maintenance types
• Corrective maintenance: performed after discovery of problems in system. It corrects systems
errors
• Perfective maintenance: Modification of a software product after delivery to improve
performance
• Preventive maintenance: Modification of a software product after delivery to detect and
correct latent faults Eg installing an anti-virus

Page 87 of 88
• Adaptive maintenance: performed after delivery to keep a website good in a changed or
changing business environment.
Web-Optimization Factors
How do u make your domain a destination online?
Factors that will attract people to your site:
 Use your keyword in your title tag, e.g the word MIU must appear in www.mui.ac.ug
 Anchor text of inbound links
 Link popularity of your site- how many external links do you get to your site?
 The age of your website- Older sites are deemed to be more trust-worthy and if you are starting
anew site, it may pay to research older domains that are available for purchase
 Internal link structure of your website- no dead links
 Topical relevance of external links to your site- are all links you have relevant to a visitor
 Use of important keywords in your body text
 Text surrounding your inbound links should be related to what you do
 Unique, relevant content will draw traffic

WEBSITE DESIGN PROJECT ASSIGNMENT

You are required to design a website from any of the following categories. This project should be done
in groups as instructed in class.
You are only required to ONLY use HTML5 and CSS.
DO NOT hire anyone to do for you work, but rather seek some assistance to understand what you are
required to do.
You’ll be required to submit and present your project.
Areas to choose from
 School
 Restaurant
 Hotel
 Hospital
 NOG
 University
Submission Deadline: ……………………………….
Deliverables.

1. A website of not less than 5 pages and 1 CSS file. Zip it with images.
2. A concept document for your website. Submit hard copy.
3. A similar website developed with WordPress

Good Luck

Page 88 of 88

WT Unit 1 Ppts Web Development Process
No ratings yet
WT Unit 1 Ppts Web Development Process
142 pages
Web Development
No ratings yet
Web Development
77 pages
Web Technology Unit I Web Development Process Front End Tools
No ratings yet
Web Technology Unit I Web Development Process Front End Tools
141 pages
HTML Hypertext Markup Language
No ratings yet
HTML Hypertext Markup Language
11 pages
Unit 1
No ratings yet
Unit 1
113 pages
Web Technology Notes
No ratings yet
Web Technology Notes
18 pages
Project Planning
No ratings yet
Project Planning
55 pages
Note 1
No ratings yet
Note 1
55 pages
WD Reviewer
No ratings yet
WD Reviewer
7 pages
Fusion
No ratings yet
Fusion
34 pages
Website Design
No ratings yet
Website Design
22 pages
Understanding Web Authoring Basics
No ratings yet
Understanding Web Authoring Basics
7 pages
ITWS01 Module 2020 Approved
No ratings yet
ITWS01 Module 2020 Approved
59 pages
Unit-4 Web Development
100% (1)
Unit-4 Web Development
26 pages
Web Development
No ratings yet
Web Development
95 pages
Com225 - Web Technology
No ratings yet
Com225 - Web Technology
58 pages
Chapter 4 - Web Page Development
No ratings yet
Chapter 4 - Web Page Development
41 pages
Webpage Design MODULE
No ratings yet
Webpage Design MODULE
129 pages
WT Unit1
No ratings yet
WT Unit1
96 pages
Lesson 10 - Web Development
No ratings yet
Lesson 10 - Web Development
45 pages
Unit 4-Website and HTML
No ratings yet
Unit 4-Website and HTML
7 pages
Web Design and Development (HTML, CSS and JavaScript)
100% (11)
Web Design and Development (HTML, CSS and JavaScript)
68 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
42 pages
Website Designing
No ratings yet
Website Designing
9 pages
Computer Networks Lecture Notes: Course Code - Course Name
No ratings yet
Computer Networks Lecture Notes: Course Code - Course Name
57 pages
Internet Programming Fundamentals Guide
No ratings yet
Internet Programming Fundamentals Guide
10 pages
Chapter 1 and 2-Chapter 1&2 dt-2025-04-01 13-38-50
No ratings yet
Chapter 1 and 2-Chapter 1&2 dt-2025-04-01 13-38-50
251 pages
Main
No ratings yet
Main
27 pages
Basic Web Chapter 1
No ratings yet
Basic Web Chapter 1
57 pages
Grade 9 Chapter 2
No ratings yet
Grade 9 Chapter 2
34 pages
Lecture 1 - Introduction
No ratings yet
Lecture 1 - Introduction
19 pages
Unit1and 2 WDM HTML Css
No ratings yet
Unit1and 2 WDM HTML Css
147 pages
Web Design 02 HTML
No ratings yet
Web Design 02 HTML
45 pages
Web Technologies-Bcom CA IV Sem
No ratings yet
Web Technologies-Bcom CA IV Sem
107 pages
Unit 1-2
No ratings yet
Unit 1-2
22 pages
Lecture Note Internet and Web Design
No ratings yet
Lecture Note Internet and Web Design
44 pages
Web Design
No ratings yet
Web Design
11 pages
HTML Course Outline for East Africa University
100% (1)
HTML Course Outline for East Africa University
60 pages
Creative Web Design Course Overview
No ratings yet
Creative Web Design Course Overview
49 pages
HTML & XHTML Basics Guide
No ratings yet
HTML & XHTML Basics Guide
70 pages
HTML Unit 1 and 2
No ratings yet
HTML Unit 1 and 2
25 pages
HTML Session 1
No ratings yet
HTML Session 1
147 pages
Module 4 Final
No ratings yet
Module 4 Final
103 pages
CCS 215 Web Design and Development NOTES
No ratings yet
CCS 215 Web Design and Development NOTES
69 pages
Web Systems and Technologies Transmission Control Protocol and Internet Protocol (TCP/IP)
No ratings yet
Web Systems and Technologies Transmission Control Protocol and Internet Protocol (TCP/IP)
53 pages
Web Tech Basics for Beginners
100% (1)
Web Tech Basics for Beginners
3 pages
Web Designing and HTML
No ratings yet
Web Designing and HTML
19 pages
Introduction to Web Design Basics
No ratings yet
Introduction to Web Design Basics
26 pages
Module 4.part1
No ratings yet
Module 4.part1
51 pages
WebSites 223377228
No ratings yet
WebSites 223377228
8 pages
Terms: Types of Toolbar
No ratings yet
Terms: Types of Toolbar
5 pages
Internet and Web Fundamentals Overview
No ratings yet
Internet and Web Fundamentals Overview
19 pages
Lab Manual
No ratings yet
Lab Manual
10 pages
2 Web Development
No ratings yet
2 Web Development
13 pages
G11 Ict Unit 4 Short Notes
No ratings yet
G11 Ict Unit 4 Short Notes
2 pages
Unit I
No ratings yet
Unit I
23 pages
Web Designing
No ratings yet
Web Designing
6 pages
Web Development
No ratings yet
Web Development
128 pages
Web Dev & e-Commerce Course
No ratings yet
Web Dev & e-Commerce Course
62 pages
Java JavaScript123uo00es0270 PDF
No ratings yet
Java JavaScript123uo00es0270 PDF
508 pages
Subject: Computer Cbse 2024-25 Grade: VI: Syllabus Indicator and Exam Portion
No ratings yet
Subject: Computer Cbse 2024-25 Grade: VI: Syllabus Indicator and Exam Portion
37 pages
Unit-2 Dynamic HTML
No ratings yet
Unit-2 Dynamic HTML
61 pages
Digital Media Syllabus IIMC
No ratings yet
Digital Media Syllabus IIMC
44 pages
HTML Tag, Elements and Attribute
No ratings yet
HTML Tag, Elements and Attribute
7 pages
How TO - Hover Tabs
No ratings yet
How TO - Hover Tabs
7 pages
IT and Its Application in Business Sec 3 1 CHG M2
No ratings yet
IT and Its Application in Business Sec 3 1 CHG M2
3 pages
Aman Chaturvedi: Tech Resume Overview
No ratings yet
Aman Chaturvedi: Tech Resume Overview
1 page
Internet, Email, and HTML Basics
No ratings yet
Internet, Email, and HTML Basics
5 pages
VTRLRTD Vhfdds
No ratings yet
VTRLRTD Vhfdds
4 pages
Beautiful Soup & Selenium Web Scraping Guide
No ratings yet
Beautiful Soup & Selenium Web Scraping Guide
5 pages
WP Chapter 1-4 Imp Question
No ratings yet
WP Chapter 1-4 Imp Question
2 pages
Garritan Personal Orchestra
No ratings yet
Garritan Personal Orchestra
9 pages
Capstone Project 2 PPT - Group 1489
No ratings yet
Capstone Project 2 PPT - Group 1489
27 pages
Web Components & Polymer Intro
No ratings yet
Web Components & Polymer Intro
26 pages
HTML Basics and Quiz Questions
No ratings yet
HTML Basics and Quiz Questions
4 pages
E-Commerce Enabling Technologies
No ratings yet
E-Commerce Enabling Technologies
11 pages
CSS Introduction
No ratings yet
CSS Introduction
15 pages
Fiverr HTML5 Test Answers 2020
No ratings yet
Fiverr HTML5 Test Answers 2020
24 pages
Frontend Development Interview Question
No ratings yet
Frontend Development Interview Question
3 pages
Composite Screen
100% (1)
Composite Screen
9 pages
Class11 SSC Maharashtra IT DetailedNotes
No ratings yet
Class11 SSC Maharashtra IT DetailedNotes
2 pages
MBA UNIT 1 Rtu
No ratings yet
MBA UNIT 1 Rtu
50 pages
Computer Science Notes Compilation
No ratings yet
Computer Science Notes Compilation
262 pages
Notifier Win-Rar Com
No ratings yet
Notifier Win-Rar Com
6 pages
PHP & MySQL A2 Starter Guide
No ratings yet
PHP & MySQL A2 Starter Guide
30 pages
XML Guide for Web Developers
No ratings yet
XML Guide for Web Developers
26 pages
Mobile-Responsive Tic-Tac-Toe Game
No ratings yet
Mobile-Responsive Tic-Tac-Toe Game
4 pages
Computer Engineering Manual
No ratings yet
Computer Engineering Manual
81 pages
Ui/Ux Design: Course
No ratings yet
Ui/Ux Design: Course
14 pages