MASENO UNIVERSITY

BACHELOR OF SCIENCE IN COMPUTER SCIENCE

YEAR 2 SEMESTER 1

CCS 215: WEB DESIGN AND DEVELOPMENT

COURSE NOTES

Introduction

What is website design?

Website design means planning, creation and updating of websites. Website design also involves
information architecture, website structure, user interface, navigation ergonomics, website layout, colors,
contrasts, fonts and imagery (photography) as well as icons design.

What is Web publishing?

Web publishing is the process of publishing original content on the Internet.

The process includes building and uploading websites, updating the associated webpages, and posting
content to these webpages online. Web publishing comprises of personal, business, and community
websites in addition to e-books and blogs.

The content meant for web publishing can include text, videos, digital images, artwork, and other forms
of media.

Publishers must possess a web server, a web publishing software, and an Internet connection to carry out
web publishing.

What is a web page?

A web page is a document (containing text, graphics, links, etc.) described in a text file that can be
displayed by a web browser. A web page has no fixed width or length like a paper page. The
information and formatting of the web page is stored in text file that contains the text of the page and
HTML (HyperText Markup Language) codes (called tags) that determine the layout of the page in the
web browser. The HTML tags come in pairs (at least most of them ... some do not have an ending tag)
that indicate the beginning and end of the instruction. The syntax is:

 Beginning tag: <tag-name-and-parameters>

o Optional parameters have the form: parameter-name="parameter-value"
 Ending tag: </tag-name>

What is a web site?

1
A web site is collection of related web pages. In the simplest sense, a web site could be a single web
page. The primary starting page of a web site is called the "Home" page.

Web Page Elements

Web pages consist of various elements (objects) that are placed on the page (screen window) as specified
by the HTML tags. Some of the things that can be found on web pages include ...

 Paragraphs  Links  Frames

 Formatted text  Background  Forms
 Headings  Images  Sound clips
 Lists  Image Maps  Video clips
 Rules (horizontal lines)  Tables  Java applets

Web Page/Site Terminology

 Web Server - A computer with software that provides web pages to users.
 Web Browser - A program on a user's computer that requests web pages from web servers and
then displays these pages.
 HTTP (HyperText Transfer Protocol) - The protocol (i.e. rules) for requesting and transmitting
web pages between a browser and server.
 HTML (HyperText Markup Language) - The set of formatting and layout "tags" used to define
and describe a web page.
 URL (Uniform Resource Locator) - An "address" of a resource on the web. A URL consists of
four parts:
o Example (the URL of this page):
http://sci.maseno.ac/ccs208/lectures/tutor/www/basics.html
 http:// is the Internet protocol to be used by the server
 sci.maseno.ac is the server's domain name (associated w/ an IP# ... 69.1.124.24)
 ccs208/lectures/tutor/www is the folder path on the server to the requested file
 basics.htm is the name of the requested file

Tools for Creating Web Pages

There are four types of programs that are used to create web pages:

1. Word Processor or Text Editor: Type the text and tags as needed. If a word processor is used,
the file must be saved as a "text" only file. Examples: Notepad
2. HTML Editor: A lot like a text editor, but commands are included that insert the tags for you
(you see them, but you don't need to type them) and associated dialog boxes help with the
optional parameters for each tag. Example: EditPlus2
3. Web Page Authoring Program: WYSIWYG programs that are more like a word processor. In
these programs, you do not need to see or use the actual HTML tags (the program does this for

2
 you in the background). Most of these programs will let you see and edit the actual HTML.
Examples: Dreamweaver (Macromedia/Adobe), FrontPage (Microsoft), and Nvu (open source).
4. Other Applications: Many application programs include a special "save as HTML" option. Not
always the best results, but it basically works. This is not generally the preferred method for
creating web pages, although if some information is already in another application, this can be a
quick way to publish it on the Internet.

Introduction to the Internet: Internet, Packets and Routing, TCP/IP and Domain Names

Internet, Packets and Routing

• Internet is a network of computer networks

• Data is transmitted by packet switching using the standard Internet Protocol (IP)

• Packet – a unit of information carriage

• Packet switching – process of moving packets from one node (computer device) to another

• At the sender, data is broken into packets and sent to the nearest node (router)

• At each router, it sends the packet to another router that is closer to the final destination

• At the receiver, packets are reassembled to get the original data

• A simple analogy: mailing system

TCP/IP and Domain Names

• Basic task of IP – moving packets as quickly as possible from one router to another

• Yet, it doesn’t check whether packets are delivered successfully, thus need TCP

• TCP (Transmission Control Protocol) – disassemble/reassemble packets, error checking, ACK

packets

• We need some sort of address in order to identify different nodes, as if every house has a mailing
address in order to receive mail from others

• The one used by Internet Protocol is called IP address

• Every host on the Internet has a unique IP address, made up of four numbers. E.g..
192.56.215.131, each number is between 0 and 255

• The numbers in an IP address is hard to remember, while names are easier

• Domain Name System – a mapping between the human-readable name (domain name) of a host
and its IP address

3
 • A domain name consists of two or more parts, e.g. sci.maseno.ac

• The rightmost label conveys the top-level domain, e.g. ac

• Each label to the left specifies a subdomain, in our example, subdomain is maseno (Maseno
University ), and sub-subdomain is sci (school of informatics and innovative systems).

• A top-level domain contains of multiple subdomains, each subdomain can contain multiple sub-
subdomain, so on.

• The database contains the mapping between a domain name and an IP address is stored on a DNS
server.

World Wide Web

• The World Wide Web (commonly shortened to the Web) is a system of interlinked, hypertext
documents accessed via the Internet.

• It is created to share files/documents and overcome the barrier of different file formats

• Hypertext refers to text on a computer that will lead the user to other, related information on
demand.

• Hypertext documents are created using a special kind of document formatting or “markup”
language called HyperText Markup Language (HTML).

• HTML is sent or received over the network using HyperText Transfer Protocol (HTTP).

• A browser is a software program which interprets the HTML documents and displays it on the
user’s screen.

URLs and Client-Server Model

• Each document/resource on the WWW needs to have an identifier in order to be accessed by

others.

• A Uniform Resource Identifier (URI), is a compact string of characters used to identify or name
a resource.

• A Uniform Resource Locator (URL) is a URI which provides means of obtaining the resource
by describing its network “location”.

• Two things are given by the URL

• Exact location of the document

• The method or protocol by which to retrieve and display the document

• Example:

4
 http://www. sci.maseno.ac /lectures/ccs208/index.html

• http:// – specifies the protocol

• www. sci.maseno.ac – specifies the host name / domain name

• /lectures/ccs208/index.html – specifies the path of the document on the host

Web browsers

A web browser (commonly referred to as a browser) is a software application for retrieving, presenting
and traversing information resources on the World Wide Web. An information resource is identified by a
Uniform Resource Identifier (URI/URL) and may be a web page, image, video or other piece of content.
Hyperlinks present in resources enable users easily to navigate their browsers to related resources.

Although browsers are primarily intended to use the World Wide Web, they can also be used to access
information provided by web servers in private networks or files in file systems.

The major web browsers are Firefox, Internet Explorer, Google Chrome, Opera, and Safari.

5
Functions of a web browser

 The primary purpose of a web browser is to bring information resources to the user ("retrieval" or
"fetching"), allowing them to view the information ("display", "rendering"), and then access other
information ("navigation", "following links").
 This process begins when the user inputs a Uniform Resource Locator (URL), for example
http://en.wikipedia.org/, into the browser. The prefix of the URL, the Uniform Resource
Identifier or URI, determines how the URL will be interpreted.
 The most commonly used kind of URI starts with http: and identifies a resource to be retrieved
over the Hypertext Transfer Protocol (HTTP).
 Many browsers also support a variety of other prefixes, such as https: for HTTPS, ftp: for the File
Transfer Protocol, and file: for local files. Prefixes that the web browser cannot directly handle
are often handed off to another application entirely. For example, mailto: URIs are usually passed
to the user's default e-mail application, and news: URIs are passed to the user's default newsgroup
reader.
 In the case of http, https, file, and others, once the resource has been retrieved the web browser
will display it. HTML and associated content (image files, formatting information such as CSS,
etc.) is passed to the browser's layout engine to be transformed from markup to an interactive
document, a process known as "rendering".
 Aside from HTML, web browsers can generally display any kind of content that can be part of a
web page. Most browsers can display images, audio, video, and XML files, and often have plug-
ins to support Flash applications and Java applets. Upon encountering a file of an unsupported
type or a file that is set up to be downloaded rather than displayed, the browser prompts the user
to save the file to disk.
 Information resources may contain hyperlinks to other information resources. Each link contains
the URI of a resource to go to. When a link is clicked, the browser navigates to the resource
indicated by the link's target URI, and the process of bringing content to the user begins again.

Features for web browsers

 Available web browsers range in features from minimal, text-based user interfaces with bare-
bones support for HTML to rich user interfaces supporting a wide variety of file formats and
protocols. Browsers which include additional components to support e-mail, Usenet news, and
Internet Relay Chat (IRC), are sometimes referred to as "Internet suites" rather than merely "web
browsers".
 All major web browsers allow the user to open multiple information resources at the same time,
either in different browser windows or in different tabs of the same window. Major browsers also
include pop-up blockers to prevent unwanted windows from "popping up" without the user's
consent.
 Most web browsers can display a list of web pages that the user has bookmarked so that the user
can quickly return to them. Bookmarks are also called "Favorites" in Internet Explorer.
 In addition, all major web browsers have some form of built-in web feed aggregator. In Firefox,
web feeds are formatted as "live bookmarks" and behave like a folder of bookmarks

6
 corresponding to recent entries in the feed. In Opera, a more traditional feed reader is included
which stores and displays the contents of the feed.[26]
 Furthermore, most browsers can be extended via plug-ins, downloadable components that provide
additional features.

User interface for web browsers

Most major web browsers have these user interface elements in common:

 Back and forward buttons to go back to the previous resource and forward respectively.
 A refresh or reload button to reload the current resource.
 A stop button to cancel loading the resource. In some browsers, the stop button is merged with
the reload button.
 A home button to return to the user's home page.
 An address bar to input the Uniform Resource Identifier (URI) of the desired resource and display
it.
 A search bar to input terms into a search engine. In some browsers, the search bar is merged with
the address bar.
 A status bar to display progress in loading the resource and also the URI of links when the cursor
hovers over them, and page zooming capability.
 The viewport, the visible area of the webpage within the browser window.
 The ability to view the HTML source for a page.

Major browsers also possess incremental find features to search within a web page.

Privacy and security

 Most browsers support HTTP Secure and offer quick and easy ways to delete the web cache,
cookies, and browsing history.

Standards support

 Early web browsers supported only a very simple version of HTML.

 The rapid development of proprietary web browsers led to the development of non-standard
dialects of HTML, leading to problems with interoperability.
 Modern web browsers support a combination of standards-based and de facto HTML and
XHTML, which should be rendered in the same way by all browsers.

Extensibility

 A browser extension is a computer program that extends the functionality of a web browser.
Every major web browser supports the development of browser extensions.

Components

7
  Web browsers consist of a user interface, layout engine, rendering engine, JavaScript interpreter,
UI backend, networking component and data persistence component.
 These components achieve different functionalities of a web browser and together provide all
capabilities of a web browser

Web search engines

 A web search engine is a software system that is designed to search for information on the
World Wide Web.
 The search results are generally presented in a line of results often referred to as search engine
results pages (SERPs).
 The information may be a mix of web pages, images, and other types of files. Some search
engines also mine data available in databases or open directories.
 Unlike web directories, which are maintained only by human editors, search engines also
maintain real-time information by running an algorithm on a web crawler.

How web search engines work

A search engine operates in the following order:

1. Web crawling
2. Indexing
3. Searching

 Web search engines work by storing information about many web pages, which they retrieve
from the HTML markup of the pages. These pages are retrieved by a Web crawler (sometimes
also known as a spider) — an automated Web crawler which follows every link on the site. The
site owner can exclude specific pages by using robots.txt.
 The search engine then analyzes the contents of each page to determine how it should be indexed
(for example, words can be extracted from the titles, page content, headings, or special fields
called meta tags).
 Data about web pages are stored in an index database for use in later queries. A query from a
user can be a single word.
 The index helps find information relating to the query as quickly as possible.
 Some search engines, such as Google, store all or part of the source page (referred to as a cache)
as well as information about the web pages, whereas others, such as AltaVista, store every word
of every page they find.
 This cached page always holds the actual search text since it is the one that was actually indexed,
so it can be very useful when the content of the current page has been updated and the search
terms are no longer in it.
 This problem might be considered a mild form of linkrot, and Google's handling of it increases
usability by satisfying user expectations that the search terms will be on the returned webpage.
This satisfies the principle of least astonishment, since the user normally expects that the search

8
 terms will be on the returned pages. Increased search relevance makes these cached pages very
useful as they may contain data that may no longer be available elsewhere.

High-level architecture of a standard Web crawler

 When a user enters a query into a search engine (typically by using keywords), the engine
examines its index and provides a listing of best-matching web pages according to its criteria,
usually with a short summary containing the document's title and sometimes parts of the text.
 The index is built from the information stored with the data and the method by which the
information is indexed.
 From 2007 the Google.com search engine has allowed one to search by date by clicking "Show
search tools" in the leftmost column of the initial search results page, and then selecting the
desired date range.
 Most search engines support the use of the boolean operators AND, OR and NOT to further
specify the search query. Boolean operators are for literal searches that allow the user to refine
and extend the terms of the search. The engine looks for the words or phrases exactly as entered.
Some search engines provide an advanced feature called proximity search, which allows users to
define the distance between keywords.
 There is also concept-based searching where the research involves using statistical analysis on
pages containing the words or phrases you search for. As well, natural language queries allow the
user to type a question in the same form one would ask it to a human.
 The usefulness of a search engine depends on the relevance of the result set it gives back. While
there may be millions of web pages that include a particular word or phrase, some pages may be
more relevant, popular, or authoritative than others. Most search engines employ methods to rank
the results to provide the "best" results first.
 How a search engine decides which pages are the best matches, and what order the results should
be shown in, varies widely from one engine to another. The methods also change over time as
Internet usage changes and new techniques evolve.
 There are two main types of search engine that have evolved: one is a system of predefined and
hierarchically ordered keywords that humans have programmed extensively. The other is a

9
 system that generates an "inverted index" by analyzing texts it locates. This first form relies much
more heavily on the computer itself to do the bulk of the work.
 Most Web search engines are commercial ventures supported by advertising revenue and thus
some of them allow advertisers to have their listings ranked higher in search results for a fee.
Search engines that do not accept money for their search results make money by running search
related ads alongside the regular search engine results. The search engines make money every
time someone clicks on one of these ads.

Internet search techniques

1: Use unique, specific terms

It is simply amazing how many Web pages are returned when performing a search. You might guess that
the terms blue dolphin are relatively specialized. A Google search of those terms returned 2,440,000
results! To reduce the number of pages returned, use unique terms that are specific to the subject you are
researching.

2: Use the minus operator (-) to narrow the search

How many times have you searched for a term and had the search engine return something totally
unexpected? Terms with multiple meanings can return a lot of unwanted results. The rarely used but
powerful minus operator, equivalent to a Boolean NOT, can remove many unwanted results. For example,
when searching for the insect caterpillar, references to the company Caterpillar, Inc. will also be returned.
Use Caterpillar -Inc to exclude references to the company or Caterpillar -Inc -Cat to further refine the
search.

3: Use quotation marks for exact phrases

I often remember parts of phrases I have seen on a Web page or part of a quotation I want to track down.
Using quotation marks around a phrase will return only those exact words in that order. It's one of the best
ways to limit the pages returned. Example: "Be nice to nerds". Of course, you must have the phrase
exactly right -- and if your memory is as good as mine, that can be problematic.

4: Don't use common words and punctuation

Common terms like a and the are called stop words and are usually ignored. Punctuation is also typically
ignored. But there are exceptions. Common words and punctuation marks should be used when searching
for a specific phrase inside quotes. There are cases when common words like the are significant. For
instance, Raven and The Raven return entirely different results.

5: Capitalization

10
Most search engines do not distinguish between uppercase and lowercase, even within quotation marks.
The following are all equivalent:

 technology
 Technology
 TECHNOLOGY
 "technology"
 "Technology"

6: Drop the suffixes

It's usually best to enter the base word so that you don't exclude relevant pages. For example, bird and not
birds, walk and not walked. One exception is if you are looking for sites that focus on the act of walking,
enter the whole term walking.

7: Maximize AutoComplete

Ordering search terms from general to specific in the search box will display helpful results in a drop-
down list and is the most efficient way to use AutoComplete. Selecting the appropriate item as it appears
will save time typing. You have several choices for how the AutoComplete feature works:

Use Google AutoComplete. The standard Google start page will display a drop-down list of suggestions
supplied by the Google search engine. This option can be a handy way to discover similar, related
searches. For example, typing in Tucson fast will not only bring up the suggestion Tucson fast food but
also Tucson fast food coupons. Use browser AutoComplete. Use this Google start page to disable the
Google AutoComplete feature and display a list of your previous searches in a drop-down box. I find this
particularly useful when I've made dozens of searches in the past for a particular item. The browser's
AutoComplete feature must be turned on for this option to work. Click one of these links for instructions
detailing how to turn AutoComplete on or off in I.E. and Firefox.

Examples:

 Visual Basic statement case

 Visual Basic statement for
 Visual Basic call

8: Customize your searches

There are several other less well known ways to limit the number of results returned and reduce your
search time:

 The plus operator (+): As mentioned above, stop words are typically ignored by the search
engine. The plus operator tells the search engine to include those words in the result set. Example:
tall +and short will return results that include the word and.

11
  The tilde operator (~): Include a tilde in front of a word to return results that include synonyms.
The tilde operator does not work well for all terms and sometimes not at all. A search for ~CSS
includes the synonym style and returns fashion related style pages --not exactly what someone
searching for CSS wants. Examples: ~HTML to get results for HTML with synonyms; ~HTML -
HTML to get synonyms only for HTML.
 The wildcard operator (*): Google calls it the fill in the blank operator. For example,
amusement * will return pages with amusement and any other term(s) the Google search engine
deems relevant. You can't use wildcards for parts of words. So for example, amusement p* is
invalid.
 The OR operator (OR) or (|): Use this operator to return results with either of two terms. For
example happy joy will return pages with both happy and joy, while happy | joy will return pages
with either happy or joy.
 Numeric ranges: You can refine searches that use numeric terms by returning a specific range,
but you must supply the unit of measurement. Examples: Windows XP 2003..2005, PC $700
$800.
 Site search: Many Web sites have their own site search feature, but you may find that Google
site search will return more pages. When doing research, it's best to go directly to the source, and
site search is a great way to do that. Example: site:www.intel.com rapid storage technology.
 Related sites: For example, related:www.youtube.com can be used to find sites similar to
YouTube.
 Change your preferences: Search preferences can be set globally by clicking on the gear icon in
the upper-right corner and selecting Search Settings. I like to change the Number Of Results
option to 100 to reduce total search time.
 Forums-only search: Under the Google logo on the left side of the search result page, click
More | Discussions or go to Google Groups. Forums are great places to look for solutions to
technical problems.
 Advanced searches: Click the Advanced Search button by the search box on the Google start or
results page to refine your search by date, country, amount, language, or other criteria.
 Wonder Wheel: The Google Wonder Wheel can visually assist you as you refine your search
from general to specific. Here's how to use this tool:

Internet as a research tool

Advantages

 The Internet is available 24 hours a day.

 Internet pages can be more quickly updated than paper sources.
 Some newspapers magazines and encylopedias are available online.
 Some books not available in the library may be available online.
 Many different types of media are available on the Internet.

Disadvantages

12
  Anyone can create a web page.
 Authority of the work may not be readily apparent.
 What you see today may not be what you see tomorrow. There is nothing to prevent the author
from changing tomorrow what you quoted today.
 Internet information is usually not organized in any way to help in finding it.
 Archived materials - newspapers, magazines, etc. may not go back very far.
 There is no one to ask assistance of if you can't find anything.
 Media available in different formats may require software not available on your computer.
 Most journals and magazines are not available on the Internet except through databases which
require a paid subscription.
 Most books are not available through the Internet.

When using the Internet for research, please evaluate the authority of the site.

Web design, development and hosting

The Web Site Design and Development Process

There are numerous steps in the web site design and development process. From gathering initial
information, to the creation of your web site, and finally to maintenance to keep your web site up to date
and current.

The exact process will vary slightly from designer to designer, but the basics are the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance

Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be taken
into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of the company it is
created for. It involves a good understanding of you – what your business goals and dreams are, and
how the web can be utilized to help you achieve those goals.

13
It is important that your web designer start off by asking a lot of questions to help them understand your
business and your needs in a web site.

Certain things to consider are:

 Purpose

 What is the purpose of the site?

 Do you want to provide information, promote a service, sell a product?

 Goals

 What do you hope to accomplish by building this web site?

 Two of the more common goals are either to make money or share information.

 Target Audience

 Is there a specific group of people that will help you reach your goals?
 It is helpful to picture the “ideal” person you want to visit your web site.
 Consider their age, sex or interests – this will later help determine the best design style
for your site.

 Content

 What kind of information will the target audience be looking for on your site?
 Are they looking for specific information, a particular product or service, online
ordering…?

Phase Two: Planning

 Using the information gathered from phase one, it is time to put together a plan for your web site.
This is the point where a site map is developed.
 The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable.
 This serves as a guide as to what content will be on the site, and is essential to developing a
consistent, easy to understand navigational system.
 The end-user of the web site – aka your customer – must be kept in mind when designing your
site. These are, after all, the people who will be learning about your service or buying your
product.
 A good user interface creates an easy to navigate web site, and is the basis for this.
 During the planning phase, your web designer will also help you decide what technologies should
be implemented.
 Elements such as what CMS (content management system) such as WordPress to incorporate,
will any contact forms be needed, etc. are discussed when planning your web site.

14
Phase Three: Design

 Drawing from the information gathered up to this point, it’s time to determine the look and feel of
your site.
 Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for
example, will look much different than one meant for a financial institution.
 As part of the design phase, it is also important to incorporate elements such as the company logo
or colors to help strengthen the identity of your company on the web site.
 Your web designer will create one or more prototype designs for your web site. This is typically a
.jpg image of what the final design will look like.
 Often times you will be sent an email with the mock-ups for your web site, while other designers
take it a step further by giving you access to a secure area of their web site meant for customers to
view work in progress.
 Either way, your designer should allow you to view your project throughout the design and
development stages. The most important reason for this is that it gives you the opportunity to
express your likes and dislikes on the site design.
 In this phase, communication between both you and your designer is crucial to ensure that the
final web site will match your needs and taste. It is important that you work closely with your
designer, exchanging ideas, until you arrive at the final design for your web site.

Phase Four: Development

 The developmental stage is the point where the web site itself is created. At this time, your web
designer will take all of the individual graphic elements from the prototype and use them to create
the actual, functional site.
 This is typically done by first developing the home page, followed by a “shell” for the interior
pages.
 The shell serves as a template for the content pages of your site, as it contains the main
navigational structure for the web site.
 Once the shell has been created, your designer will take your content and distribute it throughout
the site, in the appropriate areas.
 Elements such as the CMS (content management system) like WordPress, interactive contact
forms, or ecommerce shopping carts are implemented and made functional during this phase, as
well.
 This entire time, your designer should continue to make your in-progress web site available to
you for viewing, so that you can suggest any additional changes or corrections you would like to
have done.
 On the technical front, a successful web site requires an understanding of front-end web
development. This involves writing valid HTML / CSS code that complies to current web
standards, maximizing functionality, as well as accessibility for as large an audience as possible.

15
Phase Five: Testing and Delivery

 At this point, your web designer will attend to the final details and test your web site.
 They will test things such as the complete functionality of forms or other scripts, as well last
testing for last minute compatibility issues (viewing differences between different web browsers),
ensuring that your web site is optimized to be viewed properly in the most recent browser
versions.
 A good web designer is one who is well versed in current standards for web site design and
development.
 The basic technologies currently used are HTML and CSS (Cascading Style Sheets).
 As part of testing, your designer should check to be sure that all of the code written for your web
site validates. Valid code means that your site meets the current web development standards – this
is helpful when checking for issues such as cross-browser compatibility as mentioned above.
 Once you give your web designer final approval, it is time to deliver the site.
 An FTP (File Transfer Protocol) program is used to upload the web site files to your server.
 Some web designers offer domain name registration and web hosting services as well, or have
recommendations as to where you can host your site.
 Once these accounts have been setup, and your web site uploaded to the server, the site should be
put through one last run-through. This is just precautionary, to confirm that all files have been
uploaded correctly, and that the site continues to be fully functional.
 Other final details include plugin installation (for WordPress or other CMS driven web sites and
SEO (Search Engine Optimization).
 SEO is the optimization of your web site with elements such as title, description and keyword
tags which help your web site achieve higher rankings in the search engines.
 There are a lot of details involved in optimizing your web site for the search engines – enough to
warrant its own post. This is a very important step, because even though you now have a web site,
you need to make sure that people can find it!

This marks the official launch of your site, as it is now viewable to the public.

Phase Six: Maintenance

 One way to bring repeat visitors to your site is to offer new content or products on a regular basis.
Most web designers will be more than happy to continue working together with you, to update the
information on your web site.
 Many designers offer maintenance packages at reduced rates, based on how often you anticipate
making changes or additions to your web site.
 If you prefer to be more hands on, and update your own content, there is something called a CMS
(Content Management System) such as WordPress can be implemented to your web site. This is
something that would be decided upon during the Planning stage. With a CMS, your designer will
utilize online software to develop a database driven site for you.
 A web site driven by a CMS gives you the ability to edit the content areas of the web site
yourself.

16
  You are given access to a back-end administrative area, where you can use an online text editor
(similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or
if you are feeling more adventurous, you can even add new pages and content yourself. The
possibilities are endless!
 It’s really up to you as far as how comfortable you feel with updating your own web site.
 Some people prefer to have all the control so that they can make updates to their own web site the
minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough
tasks on-hand that are more important for them to handle directly.
 Other maintenance type items include regular site backups, WordPress upgrades, additional
plugin installation, etc.

Web hosting

 Hosting (also known as Web site hosting, Web hosting, and Webhosting) is the business of
housing, serving, and maintaining files for one or more Web sites. More important than the
computer space that is provided for Web site files is the fast connection to the Internet.
 Most hosting services offer connections on T-carrier system lines. Typically, an individual
business hosting its own site would require a similar connection and it would be expensive. Using
a hosting service lets many companies share the cost of a fast Internet connection for serving
files.

What is Website Hosting?

 Hosting a website means making a website available to public worldwide. When you create
website, it is composed of web pages having text, images, videos and other content for people to
see them.
 However, people can see your website only when it is available on the Internet.
 To make your website available on the Internet, you have to store it on a computer called web
server. When you buy some space on a web server and store your web pages there, your website
becomes hosted and can be seen by anyone.

What is Web Server?

 A web server is the computer on which the web pages of your website are stored. It delivers or
‘serves’ the content of your website to the users through Internet.
 The computer which acts as server has to have very high specifications. It is also connected to the
Internet through very powerful link.
 The web hosts or the web hosting companies have their own servers on which they rent out space
to you so that you can host your website and make it accessible to the general public.

17
Who is Web Host?

 Any person or company who owns a server and rents out web space for website hosting can be
called the web host.
 Some web hosts do not own servers but rent a server from some large web hosting company and
then resell the space under their own brand. This is called reseller hosting service and such web
hosts are called web resellers.
 The large web hosting companies even own their datacenter (collection of servers) where they
can host millions of websites. Datacenters have many computer servers connected to the Internet
with fast connections, back up and high security.
 Most of the web hosts provide not only web space but many other services related to website
hosting are thus also called web service providers.

What Services are given by Web Hosting Companies?

 Space on their servers is, no doubt, the most important product sold by a web host.
 Many other products and services, essential for website hosting, are also provided by them such
as domain name registration, email hosting services, and SSL certificates etc.
 Some of the service providers also give the facility of website builder tools through which you
can create your own website without the help of web designers and developers.
 However, the most important products of a web host are the different types of web server hosting
so that their clients might choose the hosting space suitable to their specific needs.

What are the Basic Features of a Web Hosting Plan?

Here is a list of basic features that most of the website hosting plans provide:

Disk Space
 Disk space means the amount of storage space provided to you by your web hosting provider.
 You need disk space to store your web files composed of text, images, video, audio, etc. disk
space is measured in megabytes and a good hosting company will provide packages with
differing amounts of space to cater to the needs of all sizes of websites- from smaller personal
websites to larger company websites.

Bandwidth
 Bandwidth means the amount of data that a website can transfer over a period of time. It
determines the speed of your website.
 More bandwidth means more speed. The less bandwidth your site has, the slower it takes for it to
load. Some hosting service providers provide unlimited bandwidth whereas some others have
different prices based upon the amount you use.
 If your website has heavier pages like those with lots of images, videos etc. then you will need
higher storage along with greater bandwidth.

18
Uptime
 Uptime means the percentage of time that a hosting server stays up or running. 99.99% uptime
would mean that your website will go down only for about 8 hours in a year while 98% uptime
would mean that your website may remain down for about 7.3 days in a year.
 If your website is an ecommerce website and your customers pay online or you get any type of
business through your website, more downtime can mean greater losses.

Programming Services
 The website hosting packages also let you create web pages with programming languages
including HTML, PHP, ASP as well as databases.
 The best offers can be called those providing PHP language and mySQL database.

Customer Service
 This is one of the basic and most essential features that one should look for while selecting
website hosting service.
 Customer support options like those provided through chat, phone and email etc. are extremely
useful in the event of any technical or other problems related to your website.

Are there Additional Features in a Web Hosting Plan?

 This depends wholly upon the web hosting service provider. Some web hosts give additional
features like free domain; email accounts for your domains; content management system (CMS);
Google adwords credit or some other form of advertising; site back up options; set ups for social
features like forums, bulletin boards; website builder with free website templates; set ups for
ecommerce websites like online stores templates; choice of operating system (OS) including
windows, linux and java hosting.

 Some web hosting providers even make special attractive package that includes everything you
need to make your own website such as this website builder tool called EasySite which includes
drag-and-drop website building tool with free hosting and email accounts along with over 10000
website templates with such features as maps, videos, flash, social networking integration, and
ecommerce features.

What are the Types of Web Server Hosting?

 Not all persons and even businesses require similar type of web hosting service.
 A good web hosting company provides you with different types of web hosting options as per
your needs and also help you migrate to a different hosting plan with the growth of your website.

Shared Server Hosting

 As the name suggests, several webmasters share space on a single server.
 This type of hosting plan is good for small time ecommerce sites, static website or a personal
website that need cost effective hosting solutions.

19
  The entry level websites don’t need high performance features and thus, shared hosting can fulfill
their needs without having to pay larger amounts of money.

Dedicated Server Hosting

 A server wholly dedicated for your website is a little costly but could not be affected by the other
websites as it could happen in a shared server hosting.
 This type of website hosting service is most suitable for websites that attract higher traffic and
cannot afford to be down due to business purposes such as for e-commerce sites.

Cloud Server Hosting

 Based on the innovative cloud computing technologies, cloud hosting is done through multiple
servers inter connected with each other.
 This is unlike shared or dedicated server hosting that are provided through only one server.
 The multiple servers acting as a single system has multiple advantages like load balancing, no
single point of failure, non-reliance on a single server leading to higher security and also the
facility to increase or decrease server resources as per your needs.
 It is also cost effective web hosting solution as the website hosting companies charge you for
cloud hosting services on the basis of usage. As you can scale your resources up and down on a
cloud server, you are able to use more resources only on the days when you expect higher traffic.

What is the Difference Between Linux and Windows Web Hosting?

 Whenever you go for a web hosting plan, you have to select the operating system on which the
server will run.
 Windows and Linux are the two most popular operating systems for web hosting. Operating
systems work at the back end and it does not make much difference to the end user.
 However, the features and options provided by Linux and windows operating systems for web
hosting should be definitely considered before selecting the one that’s best suited for your
requirements.
 Windows and Linux, both offer FTP access to your files.
 However, only Linux Hosting generally offers telnet or ssh access through which you can open a
window directly on the Web server to edit them.
 If your website is going to be a dynamic web site then you will need a database too. Access and
MySQL are the two most popular databases. Linux servers most often offer mySQL. However
mySQL runs on both Linux and Windows. Access is available only for Windows Hosting.
 Security is one of the major concerns for any website.
 Many people consider Linux to be more secure than Windows web server but they are both
equally secure. Security is more an issue at the level of hosting service's administration and not at
the operating system level. Good administrators ensure that your server remains secure whatever
the OS is.

20
Now which OS to choose for web hosting?

 You can select Linux or Windows web hosting based upon the features that you need for your
website.
 Linux web hosting is more popular because it has more features for better web designing.
However, many websites need specific Windows applications.
 If your website needs window specific applications then you have to go for windows web hosting.
 In case you want to experiment with both Linux and Windows hosting, you can opt for Java
Hosting.
 When you use Java hosting, you don’t have to face portability issues. The same underlying code
works on both Windows as well as Linux servers and it is suitable for everyone, from beginners
to technical experts.

What Type of Web Hosting do I Need?

 This depends on what kind of website you want to create.

 If you are a professional or own a small office or company, you can select a Basic Web Hosting
Package which includes 250 MB disk space along with all the other features that a good web
hosting package should have such as high bandwidth, 99.9% uptime and 24 X 7 customer
support.
 However, if you want to make a website where you expect to get higher traffic, say around 1000
visits per day, you can buy Advanced Web Hosting Package which offers 500 MB space with
other features and additional feature of MySQL along with free Google Adwords credit to
advertise your site.
 If you are about to make an ecommerce site or sites, you should buy the Ecommerce Hosting
Plan. It gives you 2GB space, java support and free Google Adwords credit. You can also host
upto 5 sites with this package.
 The Mega Web Hosting Plan is for medium and large enterprises. It offers 750 MB space along
with all the other useful features of a best web hosting package.
 If, however, you do not find any of these plans suitable for making and hosting your website, you
can even create your Custom Hosting Package with whatever features you want to have in your
own hosting plan.

21
INTRODUCTION TO HTML

HTML - HyperText Markup Language

HTML a markup language used for developing static web pages.

Preparation for HTML

To begin coding in HTML, you need a simple-text editor, such as Notepad. Notepad is the most basic of
simple-text editors, and can code a fair amount of HTML with it. Notepad++ is another popular favorite
among web developers. These innovative text editors are specialized for writing simple code and they
utilize color coding to help you write concise code.

Web Pages

Web pages are so useful because:

 They are a low-cost and easy way to spread information to a large audience.
 They provide another medium you can use to market your business.
 They serve as a platform to let the world know about you.

Basic terminologies to Know

 Tag - Used to tag or "mark-up" pieces of text. Once tagged, the text becomes HTML code to be
interpreted by a web browser. Tag is represented as <tag>
 Element - A complete tag, having an opening <tag> and a closing </tag>.
 Attribute - Used to modify the value of the HTML element. Elements will often have multiple
attributes.

HTML - Elements

An element consists of three essential pieces: an opening tag, the content, and a closing tag.

1. <p> - opening paragraph tag

2. Element Content - "I have started learning HTML programming"
3. </p> - closing tag

A Complete HTML Element:

<p> I have started learning HTML programming </p>

A single page can contain hundreds or thousands of elements, but every HTML page should have a
minimum of four critical elements: the HTML, head, title, and body elements.

22
<html> Element...</html>

 <html> is the element that begins and ends each and every web page.
 Its sole purpose is to hold each web element in position and serves the role of book cover; all
other HTML elements are encapsulated within the <html> element.
 The tag also lets web browsers know that the document is an HTML web page, so that the
browser knows how to render it.
 HTML document is closed with the corresponding </html> tag to signify the end of the HTML
document.

HTML Element Code:

Open notepad text editor and enter the following code

<html>
</html>

Save the file as index.html.

The above code creates a blank (White) web page.

<head> Element

 The <head> is usually the first element contained inside the <html> element.
 While it is also an element container that encapsulates other HTML elements, these elements are
not directly displayed by a web browser.
 Instead they function behind the scenes, providing more descriptive information about the HTML
document, like its page title and other meta data.
 Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the
<head> element.

HTML Head Element Code:

<html>
<head>
</head>
</html>

HTML <title> Element

 The <title> element adds a title to a web page.

 Web page titles are displayed at the top of any browser window or at the top of browser tabs.

23
  They are probably the first thing seen by web surfers as pages are loaded, and web pages you
bookmark are saved using the web pages' titles.
 A proper title makes a good first impression, and any page caught without a title is considered
unprofessional.

HTML Title Element Code:

<html>
<head>
<title>My Web Page!</title>
</head>
</html>

HTML <body> Element

 This is the element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of
a web page.
 The body element is one of the four critical web page elements, and it contains all of the page's
viewable content.

HTML Body Element Code:

<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p> I have started learning HTML programming </p>
</body>
</html>

Go ahead and view your first complete web page.

HTML - Tags

 A web browser reads an HTML document from top to bottom, left to right.
 Each time the browser finds a tag, the tag is rendered accordingly.
 Paragraph tags render paragraph text, image tags render images, etc. Tags are used to code
HTML document.

HTML elements are comprised of three major parts: the opening tag, the content, and the closing tag.
Everything displayed on a web page requires the use of a tag or two.

24
HTML Tag Code:

<tag>Content</tag>

<p>This text will be rendered like a paragraph</p>

Tags should always be written in lowercase letters if you plan on publishing the page online, as this is the
web standard for XHTML and Dynamic HTML.

HTML More Tag Code:

<body>Body Tag
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

HTML - Elements without closing tags

 There are a few elements that do not require formal closing tags.
 In a way, they still have the 3 parts (opening/closing and content), but they are consolidated into
one tag.
 The reason for this is that these tags do not really require any content to be placed within them,
but sometimes may require attributes such as source URLs for images.
 One prime, easy example of an HTML tag that does not require a closing tag is the line break tag.

HTML Line Break Code:

<br />
 To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary
to type <br>linebreak</br>.
 Other tags, such as image tags and input tags, have also been modified in such a manner.

HTML Code:

<img src="../mypic.jpg" /> -- Image Tag

<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field

25
HTML – Text

 Text is the backbone of any web page.

 It plays a double role; it provides content for web surfers to enjoy as they skim through articles
and articles of information, but it also gives Search Engines and Spiders keywords and meta data.

HTML Text Code:

<html>
<head>
<title>My Web Page!</title>
</head>
<body>
Hello World!
</body>
</html>

HTML - Paragraph Text

Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph
tag <p>. This tag is reserved specifically for blocks of text, such as those you would expect to find inside
your favorite novel.

HTML <p> Tag Code:

<html>
<head>
<title>My Web Page!</title>
</head>
<body>
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>
</body>
</html>

HTML - Headings 1:6

 HTML has heading tags which can be used as headers or subheaders.

 By placing text inside of an <h1> heading tag, for example, the text displays bold and the size of
the text increases to a 24pt font size.
 Heading tags are numbered 1 through 6, and they change size depending on which tag you
choose, with 1 being the largest font size at 24pt, and 6 being the smallest font size at 8pt.

26
HTML Heading Element:

<body>
<h1>This is heading 1</h1>
<h2> This is heading 2</h2>
<h3> This is heading 3</h3>
<h4> This is heading 4</h4>
<h5> This is heading 5</h5>
<h6> This is heading 6</h6>
</body>

HTML - Formatting Text Elements with Tags

 Text formatting is done to enhance the appearance of a web document.

 HTML offers a handful of special tags that can be utilized to do formatting

HTML Text Formatting Tags:

<p>An example of <b>Bold Text</b></p>

<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of ^{superscripted Text}</p>
<p>An example of _{subscripted Text}</p>
<p>An example of <del>strikethrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>

HTML - Line Breaks

 A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return
on your keyboard.
 In short, a line break ends the line you are currently on and resumes on the next line.
 The opening and closing tags are combined into a single line break element <br />

HTML Format Text:

<p>
John Nyaga<br />
Box 61<br />
Nairobi, Kenya<br />
</p>

27
HTML - <pre> Preformatting

 A web browser interprets your HTML document as being one long line.
 Use the <pre> tag for any special circumstances where you wish to have the text appear exactly
as it is typed.
 Spaces, tabs, and line breaks that exist in your actual code will be preserved with the <pre> tag.

HTML Pre Code:

<pre>
Roses are Red,
Violets are blue,
I may sound crazy,
I Roses.
</pre>

HTML – Attributes

 Attributes are like blue print schematics informing the browser how to render an HTML
element.
 As an HTML tag is processed, the web browser looks to these attributes as guides for the
construction of web elements.
 HTML attributes are responsible for customizing web elements.

HTML - Title Attribute

 The title attribute titles an HTML element and adds a tiny text pop-up to any HTML element,
offering your web viewers a tool-tip mechanism where information can be found or where a
better description of an HTML element can be seen.

HTML Title Attribute:

<h2 title="Hello There!">Titled Heading Tag</h2>

If you hover your mouse over the displayed heading you will see value of the title attribute .

HTML - Align Attribute

 If you wish to change the horizontal alignment of your elements, you may do so using the align
attribute.
 It allows you to align things left, right, or center.
 By default, most elements are automatically aligned left, unless otherwise specified.

28
HTML Align Attribute Code:

<h2 align="left">Left-aligned heading</h2>

<h3 align="center">Centered Heading</h3>
<h4 align="right">Right-aligned heading</h4>

HTML – Font

 The <font> tag provides no real functionality by itself, but with the help of a few attributes, this
tag is used to change the style, size, and color of HTML text elements.

HTML - Font Size

 Set the size of your font with size.

 The range of accepted values goes from 1 -- the smallest, to 7 -- the largest.
 The default size of a font is 3.

HTML Font Size Code:

<p>
<font size="5">Here is a size 5 font</font>
</p>

HTML - Font Color

 Set the color of your font with color.

<font color="#990000">This text is hex color #990000</font> <br />

<font color="red">This text is red</font>

HTML - Font Face

 Choose a different font face by specifying any font you have installed.
 Font face is synonymous with font type.
 As a web designer, be aware that if you specify a custom font type and users viewing the page
don't have the exact same font installed, they will not be able to see it.
 Instead the chosen font will default to Times New Roman. To reduce the risk of running into this
situation, you may provide a list of several fonts with the face attribute, such as outlined below.

29
HTML Font Face Code:

<p>
<font face="Georgia, Arial, Garamond">This paragraph
has had its font...</font>
</p>

HTML - Links (Anchors)

 Links enable a website user to move from one place to another, either in the same document or in
another document
 Links are created using an anchor tag <a>…</a>
 Hypertext Reference (href) one of the most important attribute of <a> tag

HTML - Hypertext Reference (href)

 A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid
URL in order to properly direct a user to a different location.
 Hypertext Reference is where users will navigate to if they click on this link.

Creating HTML Text Link Code:

General syntax:

<a href="URL" target="_blank">Link name</a>

Example:
<a href="http://www.jumbo.com/" target="_blank">Jumbo Home</a>
<br />
<a href="http://www.yahoo.com/" target="_blank">Yahoo Home</a>

 The address of a website is called a Uniform Resource Locator (a URL), and it acts like a street
address for a website as a user is directed from one site to another.
 The examples below shows different types of URLs.

HTML Text Link Code of different URLs

Global - href="http://www.cnn.com/" Links to other domains outside your website domain.

Local - href="../internal/mypage2.html" Links to other pages within your website domain.
Internal - href="#anchorname" Links to anchors embedded in the current web page.

30
Link Targets

 The target attribute defines how each link will open when clicked. Will each one open in a new
window, or will each one open in the current browser window?
 As the web designer, you should show how a user navigates from page to page, so long as you
know how to handle the target attribute.

Link Targets:

Target Description

_blank Opens new page in a new browser window

_self Loads the new page in the current window

_parent Loads new page into a parent frame

_top Loads new page into the current browser window, cancelling all frames

 The two most important values are the top two, (target="_blank" and target="_self").
 The _self value is generally the default. It loads each new page in the current browser window,
while _blank opens up a new web browser window with each click of the text link.

HTML - Email Links

 If you want people to mail you about your site, a good way to do it is place an email link with a
subject line already filled out for them.

HTML Email Link Code:

<a href="mailto:[email protected]?subject=Feedback" >[email protected]</a>

 In some circumstances, it may be necessary to fill in the body of the email for the user as well.

Example:

<a href="mailto:[email protected]?subject=Feedback&body=Sweet site!">

[email protected]</a>

31
HTML - Download Links

 Placing files available for download is done in exactly the same fashion as placing text links.

HTML Download Link Code:

<a href="http://www.jumbo.com/pics/htmlT/blanktext.zip">Text Document</a>

HTML - Default Links; Base

 Use the <base> tag in the head element to set a default URL for all links on a page to go to.
 It's always a good idea to set a base tag just in case your links become bugged somewhere down
the line. Usually, you should set your base to your home page.

HTML Base Link Code:

<head>
<base href="http://www.jumbo.com/" />
</head>

HTML - Comments

 Comments are little notes placed on the webpage to remind yourself and other developers what
pieces of code are doing.
 Comments are also used for troubleshoot bugs and code errors, as they give you the ability to
comment out lines of code one at a time to search for the exact line causing problems.
 A comment is a way to control which lines of code are to be ignored by the web browser and
which lines of code to incorporate into your web page. There are three main reasons why you
may want your code to be commented out or ignored.

1. Comment out elements temporarily rather than removing them, especially if they have
been left unfinished.
2. Write notes or reminders to yourself inside your actual HTML documents.
3. Create notes for other scripting languages like JavaScript which requires them.

Comment Tags:

<!-- Opening Comment Tag

-- > Closing Comment Tag

32
Example:

<!--Note to self: This is my banner image! Don't forget -->

<img src="http://www.tizag.com/pics/tizagSugar.jpg" height="100" width="400" />

HTML - Lists

 Lists are used to arrange items in a web page

 There are three different types of HTML lists, including

 unordered lists (bullets)

 ordered lists (numbers)
 definition lists (think: dictionaries).

 Each list type utilizes its own unique list tag, which we'll demonstrate below.

HTML List Item Code:

<body>
<ul>
<li>I am a list item!>
<li>I am a list item too!>
<li>I am a list item also!>
</ul>
</body>

HTML List Items:

 I am a list item!
 I am a list item too!
 I am a list item also!

The actual list tags themselves, such as <ul>, are nothing but container elements for list items (<li>).
They work behind the scenes to identify the beginning and ending of an HTML list element.

HTML - Unordered Lists

 An unordered list is rendered by <ul> tag.

 An unordered list tag <ul> signifies to a web browser that all list items contained inside the <ul>
tag should be rendered with a bullet preceding the text.
 The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted
using an HTML attribute called type.
 Each item in the list is represented by <li> tag

33
Example:

<h4 align="center">Shopping List</h4>

<ul>
<li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li>
</ul>

Output:

Shopping List

 Milk
 Toilet Paper
 Cereal
 Bread

To render a list with a different bullet type, add a type attribute to the unordered list element. Using
the same code in the example above, replace the <ul> line from the previous example with any of the
lines listed below to change the bullet from disc shape to another shape.

HTML Unordered List Type Code:

<ul type="square">
<ul type="disc">
<ul type="circle">

HTML Unordered List Types:

type="square" type="disc" type="circle"

 Milk  Milk o Milk

 Toilet Paper  Toilet Paper o Toilet Paper
 Cereal  Cereal o Cereal
 Bread  Bread o Bread

HTML - Ordered Lists

An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded
with numbers instead of bullets.

34
HTML Numbered/Ordered List:

<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>

HTML Numbered List:

Goals

1. Find a Job
2. Get Money
3. Move Out

The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting
the type attribute.

HTML Code:

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Ordered List Types:

Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals

a. Find a Job A. Find a Job i. Find a Job I. Find a Job

b. Get Money B. Get Money ii. Get Money II. Get Money
c. Move Out C. Move Out iii. Move Out III. Move Out

The start attribute

 This attribute allows you to further customize an HTML ordered list by setting a new starting
digit for the ordered list element.

35
Example

<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li>
</ol>

HTML Numbered List Start - 4:

Goals

4. Buy Food
5. Enroll in College
6. Get a Degree

HTML - Definition Term Lists

 HTML definition lists <dl> are list elements that have a unique array of tags and elements; the
resulting listings are similar to those you'd see in a dictionary.

 <dl> - opening clause that defines the start of the list

 <dt> - list item that defines the definition term
 <dd> - definition of the list item

These lists displace the word term (<dt>) in such a way that it rests just above the definition element
(<dd>) to offer a very unique look. For best, results we suggest bolding the definition terms with the bold
tag <b>.

Example:

<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dl>

HTML Definition List Display:

36
Fromage
French word for cheese.
Voiture
French word for car.

HTML - Images & Pictures

 Images are a staple of any web designer, so it is very important that you understand how to use
them properly.
 In order to place an image onto a website, one needs to know where the image file is located
within the file tree of the web server -- the URL (Unified Resource Locator).
 Use the <img /> tag to place an image on your webpage. Like the <br /> tag, <img /> tag does
not require a formal ending tag. Instead, all we need to do to close this tag out with a slash (/)
placed just inside the ending bracket (/>).

Example:

<img src="http://www.jumbo.com/pics/htmlT/sunset.gif" />

HTML - Image src Attribute

 The source attribute (src) is what makes an image tag display an image.
 An image source is a URL value and should point to the directory location of an image file. Let's
take one more look at the code from our first HTML image example.

HTML - Source URLs

 Image source URLs can be either local or global, meaning that the picture files you wish to
display on your website can be either hosted locally on your machine (local) or hosted elsewhere
on some other web site domain (global).

 Global: http://www.jumbo.com/pics/htmlT/sunset.gif
 Local: pics/sunset.gif

Local URLs are relative to the file path of the web page itself. For example, if the picture file is placed
inside the same directory as the web page, then the local URL for the image would simply be the name of
the image, since it is residing in the same directory as the HTML page.

Local URLs Explained:

37
Local Src Location Description

src="sunset.gif" picture file resides in same directory as .html file

src="pics/sunset.gif" picture file resides in the pics directory

src="../sunset.gif" picture resides one folder "up" from the .html file

src="../pics/sunset.gif" picture file resides in the pics directory, one folder "up" from the .html file.

Pictures must reside on the same web host as your .html file in order for you to use local URLs. A URL
cannot contain drive letters such as C:\, since a src URL is a relational interpretation based on the location
of the.html file and the location of the picture file. Something like src="C:\www\web\pics\" will not work.

HTML - Image Height and Width Attributes

Height and width are HTML attributes that define an element's height and width properties. These values
can either be percentage-based (%) or rely on pixel sizes.

HTML Height and Width Attributes:

<img src="sunset.gif" height="50" width="100" />

HTML Height and Width Code:

<table height='200' width='400'>

<tr>
<td>
<img src="sunset.gif" height="100%" width="100%">
</td>
</tr>
</table>

HTML Height and Width (Percentage):

This image is now pixelated, having been rendered to fill the 400x200 table element. The reason we are
seeing a low-quality, pixelated rendering of the image is because the actual image file is much smaller
than 400x200 and has been stretched by the web browser because we coded it to do so.

Here's a few things to remember when trying to place images on your web page:

1. Maintain the same height to width ratio. The ratio is critical, and must be maintained to avoid
skewing.
2. Always scale down. -- Larger images will always scale down nicely and continue to look sharp.

38
If no height or width attribute is specified inside the <img> tag, the browser will use the actual
dimensions of the image file to render the image. This can cause problems with the page layout if the
picture file is too large, as other HTML elements will be moved further down the page in the event of an
over-sized image.

HTML - Alternative Attribute

 The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find
the image, or if a user has image files disabled in their web browser settings.
 Text-only browsers greatly depend on the alt attribute since they are not capable of displaying
pictures.

HTML Alternative Attribute (alt):

<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

HTML Alternative Text Attribute:

HTML - Horizontally Align Images

Images can be aligned horizontally to the right or to the left of other elements using the align attribute.
Image elements are aligned to the left by default.

HTML Align Attribute Code:

<img src="sunset.gif" align="right">

HTML Gifs vs. Jpegs vs. PNGs

 These are most popular file formats for images used in web design
 Gifs are best used for banners, clip art, and buttons.

 The main reason for this is that .gif files can have transparent backgrounds -- a priceless
attribute when it comes to web design.
 On the down side, .gif files are limited to only 256 colors and any .gif image containing
more than a few colors tends to have a larger file size than their .jpeg or .png
counterparts.

 Jpegs have an unlimited color wheel and a high compression rate, which downsizes your load
times and saves on hard drive space.

39
  Although .jpeg (or .jpg) files don't allow for transparent backgrounds, their size/quality
ratio is outstanding.
 It's best to use .jpeg files for photo galleries or artwork.
 Avoid using .jpeg files for graphical designs, though

 PNG image files are the best of both worlds.

 They have a large color wheel, low file size, and allow for transparencies like .gif images
do.
 With a high-compression rate and transparent coloring, they might just be the best format
for any web graphics.

HTML - Image Links

HTML Image Link

 An image can be used as a link to facilitate movement from one place to another in a web site
 Example:

<a href="http://www.espn.com" target="_blank"> <img src="ahman.gif" /> </a>

HTML Image Border Code:

<a href="http://www.espn.com" target="_blank"> <img src="ahman.gif" border="0" /> </a>

HTML – Tables

 Tables are used to organize items in a web document

 An HTML table is an element comprised of table rows and columns
 A table element consists of three different HTML tags including the <table> tag, <tr> (table
rows), and the <td> (table columns) tags.

HTML Table Code:

<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>

40
 <td>Row 2 Cell 2</td>
</tr>
</table>

Basic HTML Table Layout:

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

prevent our table element from rendering correctly. We've also added a border attribute to ensure the
table cells/rows are more visible to our readers.

Content elements like HTML lists, images, and even other table elements can be placed inside each table
cell. Doing so aligns the elements in a tabular fashion and provides structure.

HTML Table Code:

<table border="1">
<tr>
<td width="50%">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</td>
<td>
<ul>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>
</td>
</tr>
<tr>
<td>
<p>Avoid losing floppy disks with important school...</p>
</td>
<td>
<a href="http://www.espn.com" target="_blank" rel="nofollow">
<img src="http://www.tizag.com/pics/htmlT/ahman.gif" class="linksESPN" />
</a>

41
 </td>
</tr>
</table>

HTML Table 2:

 List Item 1  List Item 4

 List Item 2  List Item 5
 List Item 3  List Item 6

Avoid losing floppy disks with important school...

HTML Table Code:

<table border="1">
<tr title="You are looking at Row 1" bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>

HTML Table Code Example:

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

HTML - Tables: Spanning Multiple Rows and Cells

Use rowspan to span multiple rows merging together table rows and colspan to span across multiple
columns.

42
HTML Table Rowspan Attribute:

<table border="1">
<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
<td><b>Column 3</b></td>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>

HTML Colspan and Rowspan Attributes:

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Cell Padding and Spacing

 With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between
table cells.
 Setting the cellpadding attribute determines how much space will exist between a table cell
border and the elements contained within it,
 whereas cellspacing determines how much space will exist between each table cell. Color has
been added to the table below to emphasize these attributes.

43
HTML Cellpadding/Cellspacing Code:

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">

<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
</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>

HTML Cellspacing and Padding:

Column 1 Column 2

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

And now we will change the cellpadding of the table and remove the cellspacing from the previous
example. This should clearly demonstrate the difference between cellpadding and cellspacing.

HTML Code:

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">

<tr>
<td><b>Column 1</b></td>
<td><b>Column 2</b></td>
</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>

44
 </tr>
</table>

HTML Cell Pads:

Column 1 Column 2

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

The value you specify for padding and spacing is interpreted by the browser as a pixel value. So a value
of 10 is simply 10 pixels wide. Most HTML attributes that use numeric values for their measurements
represent a pixel value

HTML - The bgcolor Attribute

The bgcolor attribute is used to set the background color of an HTML element.

HTML Bgcolor Code:

<body bgcolor="silver">
<p>This page now has a SILVER background!</p>
</body>

HTML Bgcolor:

This page now has a SILVER background!

HTML - Web Colors

Our example uses the text value, which is one of three different types of color values that can be used
with the bgcolor attribute. Below is a table of the 16 basic HTML color values that are available to
HTML web designers.

45
HTML Basic Colors:

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

 HTML supports three different types of color values including text values, numeric, (RGB) and
hexadecimal values.

Example:

<table bgcolor="#ff0000" border="1"><tr>

<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>

<td>A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".</td>
</tr></table>

<table bgcolor="lime" border="1"><tr>

<td>A lime colored table background using color names.</td>
</tr></table>

HTML - Coloring Fonts, Table Rows, & Table Columns

HTML Bgcolor Code:

<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>

46
HTML - Background

 HTML background is the HTML attribute used to place pictures in the background of HTML
elements.

HTML Background Image Code:

<table height="100" width="150"

background="http://www.tizag.com/pics/htmlT/background.jpg" >
<tr><td>This table has a background image</td></tr>
</table>

HTML - Web Forms

 HTML web forms are a composition of buttons, checkboxes, and text input fields embedded
inside of HTML documents with one goal in mind:

 to capture user input. By doing things such as providing fields for user data such as
names, phone number, and email addresses, web forms give users the opportunity to
interact directly with a webpage.
 HTML forms are placed on a web page using the <form> tag. This tag should
encapsulate a series of other form elements, identifying them as a single cohesive web
form.

HTML Form Element:

<form name="myWebForm" action="myServerSideScript.php" method="post">

<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>

HTML Web Form:

 HTML form elements rely on action and method attributes to identify where to send the form data
for processing (action) and how to process the data (method).
 Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP,
PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML
form elements.

47
HTML Email Form Element:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>

 Now when the SUBMIT button is clicked, the user should see their default email client launch.
 HTML forms provide user interaction between visitors and the website while simultaneously
collecting priceless user data from your users.

HTML - Input Element(s)

 HTML input elements are form elements such as text fields, checkboxes, and buttons.
 The name comes from the <input> tag, which is the mark-up that identifies web form
components. The <input> tag relies upon a few attributes to classify and name each form item,
providing the web developer with a means to manipulate each element individually.
 The type attribute determines what kind of input element to render to the screen. Options here
include: text, checkbox, radio, button, submit, reset, password, and hidden form elements. Each
has its own unique functionality and customizable presentation.

HTML Input Element Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

Check Me: <input type="checkbox" /><br />
Name: <input type="text" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>

HTML - Web Forms: Value Attribute

 The value attribute plays a different role depending on the type of the input field.
 For example, when used with an HTML button, the value attribute defines the text inside of the
button.
 When used with a text field, the value attribute populates the field with a default value.

48
HTML Input Element Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

Check Me: <input type="checkbox" /><br />
Name: <input type="text" value="David" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
</form>

HTML - Web Forms: Name and ID Attributes

Setting the name and id attributes inside of form elements is a good habit. The element name and/or id
will later serve as the link between your HTML form and any server-side script that you may deploy later
on to process that data. Perhaps the best approach is to use both attributes in your code, since varying
scripting languages demand one identifying attribute over the other.

HTML Input Element Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

Check Me: <input name="" id="" type="checkbox" /><br />
Name: <input name="userName" id="userName" type="text" /><br />
Yes: <input name="radioItem" id="radioItem" type="radio" /> No: <input name="radioItem"
id="radioItem" type="radio" /><br />
<input name="submitForm" id="submitForm" type="submit" value="SUBMIT" />
<input name="resetForm" id="resetForm" type="reset" value="RESET" />
</form>

HTML - Text Fields

 Text fields offer a small rectangular box that's always ready to receive information from viewers.
 Users will notice that when they click these fields, the cursor will change from the typical arrow
to a pipe character ( | ), allowing for text entries to be typed inside each input field.
 A text field is placed on a web page using the <input> tag, with the type attribute set with a value
of "text".

49
HTML Text Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last: <input
title="Please Enter Your Last Name" id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>

 Text fields are designed to capture single words or phrases from the user. That information may
then be processed through some kind of client/server side script (PHP, PERL, JavaScript).
 If you do plan on processing the data, be sure to include the name and id attributes. A descriptive
title is also a great visual aid for providing a tool-tip display for your web elements.

HTML - Text Fields: Size Attribute

 The value of size attribute represents how many characters a text field can display within the text
field window.
 As the web designer, it is your job to analyze and predict the average length of characters that
will be entered into each field by your users.
 First and last names may generally vary from 8-24 characters in length, while a typical email
address may range from 12-36 digits.

HTML Text Field Size:

<form name="myWebForm" action="mailto:[email protected]" method="post">

First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" /><br />
<input type="submit" value="SUBMIT" />
</form>

HTML Text Field Size:

First:

Last:

 If the user happens to enter more digits than the size attribute value, these characters will not be
discarded; it just means that the user will not be able to see all of their input at once. Instead, they
will be forced to scroll to the beginning and end of the input element, which tends to discourage
user interaction.

50
HTML - Text Fields: Maxlength Attribute

 Maxlength is an optional attribute that accepts an integer value.

 It allows the developer to restrict the number of characters a user can type in a specific text field.

HTML Text Field Maxlength:

<form name="myWebForm" action="mailto:[email protected]" method="post">

First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="3" value="David" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18"
maxlength="3" value="Smith" /><br />
<input type="submit" value="SUBMIT" />
</form>

HTML - Password Fields

 HTML password fields are designed to capture user input, but disguise each character with an
asterisk (*) instead of displaying the entered digits.
 They offer a user on-screen privacy while he or she is entering a password.
 Password fields are placed on a website using the <input> tag and specify a value of "password"
for the type attribute.

HTML Password Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

Password: <input type="password" title="Please Enter Your Password" size="8" /><br />
<input type="submit" value="SUBMIT" />
</form>

HTML - Password Fields: Attributes

HTML Password Input Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text"
size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br />
<input type="submit" value="SUBMIT" />
</form>

51
  Password fields offer a very thin layer of security by visually concealing passwords; they offer no
security whatsoever against maintaining the integrity of the password data.
 From data is processed in plain text and can be readily sniffed by a hacker, unless HTTPS is used
to encrypt the data.

HTML - Reset Buttons

 A reset button allows users to basically clear their web form. It wipes values from all fields by
"resetting" the form to its default appearance.
 Set the type attribute of the <input> tag to "reset" to incorporate a reset button into a web form.

HTML Reset Button Code:

<input type="reset" value="Reset" />

<input type="reset" value="Start Over" />

Two HTML Reset Buttons:

Placing a reset button inside of a form tag automatically associates the reset button with each form
element and delivers a useful feature for your viewers.

HTML Code:

<form action="myphp.php" method="post"> <input type="text" size="12" maxlength="12" />

<input type="text" size="24" maxlength="24" />
<input type="reset" value="Reset" /> </form>

Fill out some information in the field boxes and press reset to experience a reset form!

HTML - Submit Buttons

 Submit buttons send form data to a back-end process or application.

 The back-end process then verifies and precesses the data, eventually passing the information into
some database application.
 Set the type attribute of the <input> tag to "submit" in order to place a submit button on a web
page.

HTML Submit Buttons:

<input type="submit" value="Submit" />

<br /> <input type="submit" value="Send" />
<br /> <input type="submit" value="Submit Form" /><br />

52
HTML - Form Submission - Action

 Submission buttons send form data to whatever action has been designated by the action attribute
of the encapsulating <form> element.

HTML Code:

<form method="post" action="mailto:[email protected]" >

First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>

HTML - Checkbox Forms

 Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web
page.
 Deploy checkbox elements in a situation when the user must check all boxes that apply (or none).
 A scripting language such as PHP will easily handle this form element, returning all elements the
user has checked

HTML Checkbox Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<p>Please select every sport that you play.</p>

Soccer: <input type="checkbox" name="sports" value="soccer" /><br />

Football: <input type="checkbox" name="sports" value="football" /><br />

Baseball: <input type="checkbox" name="sports" value="baseball" /><br />

Basketball: <input type="checkbox" name="sports" value="basketball" />

</form>

HTML Checkbox Form:

Please select every sport that you play.

Soccer:

Football:

53
Baseball:

Basketball:

 Checkboxes are used for instances where a user may wish to select multiple options, such as in
the instance of a "check all that apply" question.

HTML Checkboxes Selected

A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked
attribute with a "yes" value. By doing so, this element will now default to a checked status each time the
HTML page is loaded.

HTML Checkbox Selected Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" checked="yes"
name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports"
value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br />
Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
</form>

HTML Pre-Selected Checkboxes:

Please select every sport that you play.

Soccer:

Football:

Baseball:

Basketball:

Deploy checkbox elements in a situation when the user must check all boxes that apply (or none). A
scripting language such as PHP will easily handle this form element, returning all elements the user has
checked (check out our PHP Form Example.)

HTML Checkbox Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<p>Please select every sport that you play.</p>

Soccer: <input type="checkbox" name="sports" value="soccer" /><br />

54
Football: <input type="checkbox" name="sports" value="football" /><br />

Baseball: <input type="checkbox" name="sports" value="baseball" /><br />

Basketball: <input type="checkbox" name="sports" value="basketball" />

</form>

HTML Checkbox Form:

Please select every sport that you play.

Soccer:

Football:

Baseball:

Basketball:

Checkboxes are used for instances where a user may wish to select multiple options, such as in the
instance of a "check all that apply" question.

HTML Checkboxes Selected

A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked
attribute with a "yes" value. By doing so, this element will now default to a checked status each time the
HTML page is loaded.

HTML Checkbox Selected Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" checked="yes"
name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports"
value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br />
Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
</form>

HTML Pre-Selected Checkboxes:

Please select every sport that you play.

Soccer:

Football:

55
Baseball:

Basketball:

HTML - Radio Forms

Radio form elements resemble the "Scan-Tron" sheets you may have used when you were in school to
take a test. They basically allow the user to "bubble" in their choice and limit each question to only one
selection per radio group.

Place a radio element on to your web page by setting the type attribute of the <input> tag to "radio".

HTML Radio Input Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>

HTML Radio Fields:

Please select your favorite food category.

: Italian

: Greek

: Chinese

By naming each field similarly with a type of cuisine, we have created a relation, or a "grouping," of radio
elements. This is how we link each element together and assure that the user is able to select only one
answer.

Let's now take a look at how we can group together different sets of radio elements and simulate
capturing two pieces of user data: gender and favorite food.

HTML Multiple Radios:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />

56
<h4>Please select your gender.</h4>
<input type="radio" name="gender" /> : Male<br />
<input type="radio" name="gender" /> : Female<br />
Lt44/form>

HTML - Select Fields

HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They allow the
user to select one or more values from a pre-determined series of options. Incorporating a select field into
a web page is done using the <select> tag. List values are then added to the field using the <option> tag,
similar to how list items <li> are added to ordered list elements (<ol>).

HTML Drop Down List:

<select name="selectionField">
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

HTML Drop Down List:

By default, select fields, popularly called drop down lists, only allow the user to choose a single value.
This behavior and appearance may be changed by adjusting the multiple and size attributes as
demonstrated below.

HTML Selection Field Code:

<select size="3" name="selectionField" multiple="yes" >

<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

HTML Selection Element:

With the above settings, the user is now able to select multiple values by pressing and holding the
Control (ctrl) key and clicking each value.

HTML - Disabling Selection Fields

Disabling a selection field is achieved by setting the disabled attribute to "yes". But before doing that, you
should set at least one of the values to be selected. Doing so renders a read-only selection field on the
page that can inform your users of their selections without allowing them to alter the selection.

57
HTML Read-Only Selection Field:

<select size="3" name="selectionField" multiple="yes" disabled="yes">

<option value="CA" >California -- CA </option>
<option selected value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

HTML - Textareas

An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user.
If you've ever posted on a forum or left feedback on your favorite blog, you probably do so using an
HTML textarea.

Embed textareas in HTML documents using the <textarea> tag. Any text placed between the opening and
closing textarea tags will be rendered inside the textarea element as the "default" text. This makes for a
great way to give users an example or description of how to go about filling out the text area field.
Something like, "Please limit your response to 100 characters," would be an ideal description.

HTML Textarea Code:

<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100

characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200
characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500
characters.</textarea><br />

HTML – Body

 The <body> tag serves as the element containing all the content for the website. Tables, lists,
forms, paragraphs, and everything else must be placed within the body element to ensure each
element is displayed on your site.

HTML - Body Margins

Unique Attributes

 leftmargin - Sets a left hand margin for your body element.

 topmargin - Sets a margin along the top of your body element.

HTML Code:

<body topmargin="50">
<body leftmargin="50">

58
HTML - Base Text

The text attribute sets the text color of all text contained within the body tags. Think of it as a means to set
the color of your text, unless otherwise noted. Basically, you use these tags to set a base color scheme,
which you can later modify through additional tags inside of the body.

HTML Code:

<body text="red" >

or

<body text="rgb(255,0,0)" >

HTML - Base Links

Along the same lines, we may also specify base colors for visited or unvisited links. This method has
deprecated, and we recommend that you use Cascading Style Sheets (CSS) instead.

HTML Code:

<body link="white" vlink="black" >

or
<body link="rgb(255,255,255)" vlink="rgb(0,0,0)" >

Setting a baselink is a great way to ensure your viewers will not receive the annoying error message that
occurs with broken links.

HTML Style: Inline CSS:

<p id="contentParagraph" style="color: #0900C4;">

Here we've changed the font color of this paragraph to blue.
</p>

HTML - Styling

HTML - Div Element(s)

 The <div> tag a container unit that encapsulates other page elements and divides the HTML
document into sections.
 Web developers use <div> elements to group together HTML elements and apply CSS styles to
many elements at once.

59
  For instance, by wrapping a set of paragraph elements into a <div> element, the developer can
take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to
the <div> tag instead of coding the same style for each paragraph element.
 Group together text elements within a <div> tag to slice up HTML documents.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element">

<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>

With these text elements now grouped together under a <div> element, we can alter the appearance of
each underlying element collectively by applying a style attribute to the <div> tag.

HTML Div Element Code:

<div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4; font: Helvetica
12pt;border: 1px solid black;">
<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>

HTML - Frames

 Frames allow for multiple .html documents to be displayed inside of one browser window at a
time.
 This means that one page has no content on it, but rather tells the browser which web pages you
would like to open.

Frames - A Generic Frame Page

 Frames are most typically used to have a menu in one frame, and content in another frame.
 When someone clicks a link on the menu, that link is then opened in the content page.
 Here is a classic example of a basic "index" frameset with a menu on the left and content on the
right.

60
HTML Code:

<html>
<body>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</body>
</html>

Frame Set:

Here is the example: Frame Index

 frameset - The parent tag that defines the characteristics of this frames page. Individual frames
are defined inside it.
 frameset cols="#%, *" - The width that each frame will have. In the above example, we chose
the menu (the 1st column) to be 30% of the total page and used a "*", which means the content
(the 2nd column) will use the remaining width for itself (70%).
 frame src="" - The URL of the web page to load into the frame.

A good rule of thumb is to call the page which contains this frame information "index.html", as that is
typically a site's main page.

Adding a Banner or Title Frame

Add a row to the top for a title and graphics with the code as follows:

HTML Code:

<html>
<body>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</body>
</html>

61
FrameBorder and FrameSpacing

 Framespacing and border are the same attribute, but some browsers only recognize one or the
other, so use both, with the same value, to be safe.

 frameborder="#" - Determines whether there will be a border.

 border="#"- Modifies the border width.
 framespacing="#" -Modifies the border width, used by Internet Explorer.

Here's an example of the same frameset without the borders.

HTML Code:

<html>
<body>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</body>
</html>

Frame Name and Frame Target

How nice would it be to make each menu link load into the content page? We do this by naming each
frame and setting the correct base target inside "menu.html".

HTML Code:

<html>
<body>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</body>
</html>

62
HTML Code:

<html>
<head>
<base target="content">
</head>
<body>
<!-- Content Goes Here -->
</body>
</html>

HTML - Scripts

 There are two very popular scripting languages that are commonly used in HTML to make web
pages come alive. JavaScript and VBScript are very useful scripting languages.
 With HTML scripts, you can create dynamic web pages, make image rollovers for really cool
menu effects, or even validate the data on your HTML forms before users submit their
information.

HTML Javascript Code

 If you want to insert JavaScript code into your HTML, you are going to use the <script> tag.
 Below is the correct code to insert embedded JavaScript code onto your site.

HTML Code:

<script type="text/javascript">
<!--script
***Some JavaScript code should go here***
-->
</script>

 For JavaScript, you set the type attribute equal to "text/javascript", which is similar to the process
of specifying CSS.
 We can also include a comment around the JavaScript code. This will prevent browsers that do
not support JavaScript or have had JavaScript disabled from displaying the JavaScript code in the
web browser.

63
HTML VBScript

To insert VBScript code onto your website, you must once again make use of the <script> tag. Below is
the correct code to insert VBScript code onto your site.

HTML Code:

<script type="text/vbscript">
<!--script
***The VBScript code should go in this spot***
-->
</script>

For VBScript, you set the type attribute equal to "text/vbscript", which is similar to specifying CSS. We
also include a comment around the VBScript code. This will prevent browsers that do not support
VBScript or have had VBScript disabled from displaying the VBScript code in the web browser.

HTML - <!-- Commenting Scripts -->

Scripting languages such as JavaScript and VBScript must be commented out as well. You will learn that
it is only once they are placed within the <script> tags that the browser executes the scripts without
causing errors.

HTML Code:

<script>
<!--
document.write("Hello World!")
//-->
</script>

Additional Spaces and <>.

Regardless of how many spaces you place between words, your web browser will only render a single
space. To get around this, use the non-breaking space character entity.

HTML Code:

<p>Everything that goes up, must come &nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp; down!</p>

64
HTML Code:

<p>
Less than - &lt; <br />
Greater than - &gt; <br />
Body tag - &lt;body &gt;
</p>

Less than Greater than:

Less than - <

Greater than - >
Body tag - <body>

Cascading Style Sheets (CSS)

• Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts,
colors, layouts) to Web documents.
• Styles provide powerful control over the presentation of web pages.
• A style sheet consists of a set of rules.

• Each rule consists of one or more selectors and a declaration block.

• A declaration block consists of a list of declarations in curly braces ({}).

• Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).

CSS Syntax

 selector {property: value;}

 CSS property names are separated by dashes when they are multiple words
 for example, font-face, font-size, line-height, and so on.
 Allowed values come in many forms; from simple keywords like xx-small, strings like
"Arial", plain numbers like 0, numbers with units like 100px or 2cm, and special
delimited values such as URLs, url(../ styles/fancy.css).

65
Scopes of CSS
There are three different scopes of CSS

• Local: confined to a single element (tag)

• Internal: affect elements in an entire page

• External: can affect multiple pages

• Precedence

 Local > Internal > External

Local(inline) Style Sheet

• Example

– <h1 style="color:white; background:orange; font-weight:bold;">Local Style

Sheet Applied to Header 1</h1>

66
Internal Style Sheet
How to create Internal Style Sheet

 Put <style> </style> tag between <head> and </head> tags of your HTML page
 Use type attribute to indicate the style sheet type, usually type=“text/css”
 Specify a default style sheet language for the whole document by
<meta http-equiv="Content-Style-Type" content="text/css" />
 Put your set of style sheet rules in between <style> and </style> tags

Example

<head>
<style type="text/css">
/* a sample style sheet */
h1 {color: red; text-align: center;}
p {line-height: 150%;}
</style>
</head>

External Style Sheet

• An external style sheet is simply a text-only file that contains only CSS rules.

• The name of the text file should have .ccs extension

• For example: mystyle.css

Example

body {background-color: white; color: black;}

p {font-family: Arial, Helvetica, Sans-Serif;
line-height: 150%;}
.intro {font-style: italic;}
#firstPara {background-color: yellow;}
 This is saved as: mystyle.css

67
How to link to external style sheet
• An external style sheet is referenced via a <link> tag found in the head of the document,
like:
<link href=“URL of CSS File" rel="stylesheet" type="text/css" />
e.g. <link href="mystyle.css" rel="stylesheet" type="text/css">
• Given that link would be an empty element if we were using XHTML as our base
document, the <link> tag requires the trailing slash:
<link href="mystyle.css" rel="stylesheet" type="text/css" />

Binding a rule to a particular element

 To build a style sheet, we need to define the rules that select elements and apply various
style properties to them.
 Besides element selectors
 id selector is used to specify a rule to bind to a particular unique element
 class selector is used to specify a group of elements.
 Elements are named in (X)HTML using the id attribute, which is found on nearly any
element. As an example
<h1 id="primaryHeadline">CSS Works Fine!</h1>
 Now that the tag is named, we can bind a style rule just for it by using a #id-value
selector like:
#primaryHeadline {color: black; font-size: xx-large; font-weight: bold;}
The values for id must be unique
 In order to affect a group of tags, we relate them by setting their class attribute to the
same value:
<p class="fancy">I’m fancy!</p>
<p>Poor me I am a plain paragraph.</p>
<p>I am not completely fancy, but <span class="fancy">part of me is</span>!</p>

 We utilized a <span> tag around a portion of content we desired to style.

 Now to bind a rule to the elements in the class fancy, we use a selector of the form .class-
name like:
.fancy {background-color: orange; color: black; font-style: italic;}

68
Inherited properties
 Given that many rules may be applied at once, the final style applied to a particular
element may not be immediately obvious.
 In quite a number of cases, the properties affecting an element’s look may be inherited
from an enclosing parent element.
 For example, consider the following rules:
<style type="text/css">
body {background-color: white; color: black;}
p {font-family: Arial, Helvetica, Sans-Serif;
line-height: 150%;}
.intro {font-style: italic;}
#firstPara {background-color: yellow;}
</style>

 When the preceding is applied to a paragraph like

<p id="firstPara" class="intro">Paragraph text goes here.</p>

 it produces a paragraph with a yellow background and black, Arial, italicized text that is
spaced with a 150 percent line height.
 What has happened is that the various rules are applied by selectors, and some property
values are inherited from their enclosing parent elements.
 This is what explains the motivation behind the name Cascading Style Sheets.

69