1. FACULTY OF NATURAL AND APPLIED
SCIENCE
DEPARTMENT OF MATHEMATICS AND
COMPUTER SCINCE
CSC 3311
INTERNET PROGRAMMING I
LECTURE NOTE 1
BY
UMAR DANJUMA MAIWADA
1
2. WEB PROGRAMMING
PART I
THE INTERNET
Introduction
The Internet surely will be listed among the most important and profound creation of human
kind. In the past, most computer applications executed on “stand-alone” computers (i.e,
computers that were not connected to one another). Today’s applications can be written to
communicate with hundreds of millions of computers. The Internet mixes computing and
communications technologies. It makes our work easier. It makes information instantly and
conveniently accessible worldwide. Individuals and small businesses can receive worldwide
exposure on the Internet. It is changing the nature of the way business is done. People can search
for the best prices on virtually any product or service. Special-interest communities can stay in
touch with one another and researchers can learn of scientific and academic breakthroughs
worldwide.
Definition: Internet is a worldwide collection of computer networks a network of networks
sharing digital information via a common set of networking and software protocols.
Brief History of Internet
In 1967, Larry Roberts was named head of the U.S. Department of Defense's Advanced Research
Project Agency (ARPA) project ARPA project to design a long-distance computer network.
Within a year, Roberts and his team had finalized plans for the network, which was to be called
the ARPANet. In 1969, the ARPANet became a reality, linking four computers at the University
of California at Los Angeles (UCLA), the University of California at Santa Barbara (UCSB), the
Stanford Research Institute (SRI), and the University of Utah. The network utilized dedicated
cables, lines buried in the ground and used solely for communications between the computers.
Researchers at the four institutions were able to connect to one another's computers and run
programs remotely, meaning that researchers at multiple sites could share both hardware and
software costs. In addition, researchers could share information by transferring text and data files
from one location to another.
The U.S. Department of Defense originally intended the ARPANet to connect only military
installations and universities participating in government projects. Throughout the 1970s and
early 1980s, the ARPANet grew at a steady pace, as computers owned by various military
contractors and research institutions were added to the network.
After more than a decade of slow, steady expansion, the ARPANet experienced an astounding
growth spurt in the 1980s. Attracted by network applications such as electronic mail (through
which users can send messages and files over the network), newsgroups (through which users
can share ideas and results), and remote logins (through which users can share computing
power), researchers at virtually every college and university wanted to become a part of the
ARPANet. By 1984, the ARPANet encompassed more than 1,000 computers, far exceeding the
expectations of its original designers.
Figure below documents the increasing size of the Internet over the past two decades, as
estimated by the Internet Software Consortium (another nonprofit organization involved in
developing and disseminating Internet standards). These statistics indicate exponential
growth, with the number of the Internet-connected computers doubling every one to two years.
Of course, this rate of expansion cannot continue indefinitely — the world contains a large but
2
3. nonetheless limited number of potential network users. To date, however, technological advances
have been able to accommodate increasing demand, and no immediate end to growth is foreseen.
Figure: Internet growth.
Funding for the ARPANet was provided by the U.S. Department of Defense, which had very
specific objectives in mind. Given that the country was in the midst of the cold war, the military
wanted to develop a national communications network that would be resistant to attack. This goal
required a design that allowed communication to take place even if parts of the network were
damaged or destroyed, either by an enemy action or by normal mechanical failures. Clearly, a
centralized network that relied on a small number of master computers to coordinate
transmissions would not suffice. For example, the U.S. telephone network of the time relied on
central hubs or switches that were responsible for routing service to entire regions. If a hub failed
for some reason, entire cities or regions could lose service. Baran proposed a different
architecture for a computer network, one in which control was distributed across a large number
of machines. His design utilized a lattice structure, in which each computer on the network was
linked to several others. If a particular computer or connection failed, then communications could
be routed around that portion of the network, and the network would continue to transmit data.
Common uses of the Internet
- E-mail
The concept of sending electronic text messages between parties in a way analogous to mailing
letters or memos predates the creation of the Internet.
- The World Wide Web
Many people use the terms Internet and World Wide Web (or just the Web) interchangeably, but,
as discussed above, the two terms are not synonymous.
The World Wide Web is a huge set of interlinked documents, images and other resources,
linked by hyperlinks and URLs.
3
4. - Remote access
The Internet allows computer users to connect to other computers and information stores easily,
wherever they may be across the world.
- Collaboration
The low cost and nearly instantaneous sharing of ideas, knowledge, and skills has made
collaborative work dramatically easier.
- File sharing
A computer file can be e-mailed to customers, colleagues and friends as an attachment. It can be
uploaded to a website or FTP server for easy download by others.
- Streaming media
Many existing radio and television broadcasters provide Internet "feeds" of their live audio and
video streams (for example, the BBC).
- Voice telephony (VoIP)
VoIP stands for Voice over IP, where IP refers to the Internet Protocol that underlies all Internet
communication. This phenomenon began as an optional two-way voice extension to some of the
instant messaging systems that took off around the year 2000. In recent years many VoIP systems
have become as easy to use and as convenient as a normal telephone.
The World Wide Web
The goal of the Web was to be a shared information space through which people (and
machines) could communicate. The intent was that this space should span from a private
information system to a public information, from high value carefully checked and
designed material, to off-the-cuff ideas which make sense only to a few people and may
never be read again.
Tim Berners-Lee
The World Wide Web: Past, Present and Future, 1996
Although Internet communications among universities and government organizations were
common in the 1980s, the Internet did not achieve mainstream popularity until the early 1990s,
when the World Wide Web was developed. The Web, a multimedia environment in which
documents can be seamlessly linked over the Internet, was the brainchild of Tim Berners-Lee
(1955- ), a researcher at the European Laboratory for Particle Physics (CERN).
In 1990, Berners-Lee produced working prototypes of a Web server and browser. His browser
was limited by today's standards, in that it was text-based and offered only limited support for
images and other media. This early version of the Web acquired a small but enthusiastic
following when Berners-Lee made it available over the Internet in 1991. However, the Web
might have remained an obscure research tool if others had not expanded on Berners-Lee’s
creation, developing browsers designed to accommodate the average computer user. In 1993,
Marc Andreesen and Eric Bina, of the University of Illinois' National Center for Supercomputing
Association (NCSA), wrote the first graphical browser, which they called Mosaic. Mosaic
employed buttons and clickable links as navigational aids, making the Web easier to traverse.
The browser also supported the integration of images and media within pages, which enabled
4
5. developers to create more visually appealing Web documents. The response to Mosaic's release
in 1993 was overwhelming. As more and more people learned how easy it was to store and
access information using the Web. In 1994, Andreesen left NCSA to found the Netscape
Communications Corporation, which marketed an extension of the Mosaic browser called
Netscape Navigator. Originally, Netscape charged a small fee for its browser, although students
and educators were exempt from this cost. However, when Microsoft introduced its Internet
Explorer browser as free software in 1995, Netscape was eventually forced to follow suit. The
availability of free, easy-to-use browsers certainly contributed to the astounding growth of the
Web in the mid 1990s. By 1999, however, Internet Explorer had surpassed Navigator as the most
commonly used browser. Finding it difficult to compete with Microsoft, Andreesen relinquished
control of Netscape in 1999, by selling the company to AOL.
The Web’s development is now guided by a non-profit organization called the World Wide Web
Consortium (W3C), which was founded by Berners-Lee in 1994. The W3C maintains and
regulates Web-related standards and oversees the design of Web-based technologies.
How the Web Works
The World Wide Web relies on protocols to ensure that Web pages are accessible to any
computer, regardless of the machine’s hardware, operating system, browser, or location. The
standards most central to the Web interactions are HyperText Markup Language (HTML) and the
HyperText Transfer Protocol (HTTP), which work in combination with Transmission Control
Protocol / Internet Protocol (TCP/IP) to enable the exchange of Web pages over the Internet.
HTML
HyperText Markup Language (HTML) is the predominant markup language for web pages. It
provides a means to describe the structure of text-based information in a document - by denoting
certain text as links, headings, paragraphs, lists, and so on - and to supplement that text with
interactive forms, embedded images, and other objects.
XHTML
XHTML, an acronym for eXtensible Hypertext Markup Language, is the first big change to
HTML in years. With it, the W3C is trying to add the structure and extensibility of XML to
HTML pages. By adding a few simple structural elements to existing HTML pages, you can be
assured that your Web pages are compatible with later versions of HTML, and even with XML.
It is the next generation of HTML.
5
6. XML
Stands for eXtensible Markup Language. It is the newest language being developed by the World
Wide Web Consortium (W3C), and is also the most flexible.
Internet Protocol (IP)
It is a predefined set of rules used to enable computers to communicate with each other,
regardless of which operating system they are running.
URIs
Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has
an address that may be encoded by a Universal Resource Identifier, or "URI". URIs typically
consists of three pieces:
1. The naming scheme of the mechanism used to access the resource.
2. The name of the machine hosting the resource.
3. The name of the resource itself, given as a path.
XHTML Requirements
XHTML, the latest revision of HTML, adds another required element to your Web pages: the
<! DOCTYPE> tag. This tag appears at the top of the file and identifies the file as an HTML
document conforming to the XHTML requirements. If you were to create an XHTML-
conforming document, it would look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My XHTML Page</title>
</head>
<body>
<p>This is my first XHTML page. </p>
</body>
</html>
The <!DOCTYPE> tag has three variations: Strict, Transitional, and Frameset. You declare
which one you are using in the top of the file.
Strict Declare this variation when you are certain that your viewers will be accessing your pages
from newer browsers that interpret style sheets correctly. The Strict variation looks like this:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional Declare this variation when you are not certain how your viewers will be accessing
your pages.
<!DOCTYPE html
6
7. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Frameset Declare this variation when you are working in frames.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
You might have noticed one more change from the HTML required elements: The <html> tag
has some new attributes: xmlns, xml: lang, and lang. In HTML, you only have to include the
<html> tag to identify the document as an HTML file, but XHTML requires that you use the
xmlns attribute to link your document to the W3C's definition of XHTML, which continues to
evolve. For now, just remember to include the <!DOCTYPE> tag and the full <html> tag (shown
in the following sample) in all your Web pages.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
Note: The <!DOCTYPE> tag is the only tag that appears in uppercase. All other HTML tags
should be lowercase as explained in the next section.
Using Good Form
Tags aren't the only things that make a good Web page. As you continue through the lessons,
you'll discover that while HTML was very forgiving, XHTML must conform to the rules.
Though current versions of the most popular browsers will recognize your intentions even if you
use incorrect tags (or enter the correct tags in the wrong order), later versions will not. You'll
want to move beyond the novice level now and follow some basic Web coding principles to
conform to XHTML's standards. Following is a brief list of those principles:
• Include all the required XHTML elements that you learned in this lesson you might want
to create a template for yourself that already includes these tags. You can use the
XHTML document created in the "XHTML Requirements" section as a template.
Whenever you create a new Web page; open your template file, add your new text, and
save the new file.
• Use lowercase for all tags to the browser, <HEAD>, <Head>, and <head> all mean the
same thing. (That won't always be true.) Use the same lowercase spelling for all your
commands and you won't be caught having to recode your pages as the standard evolves.
• Never use spaces in filenames Older computer systems have trouble reading filenames
that include spaces (for example, my first page.htm). Instead, you can use a couple of file
management tricks to replace the spaces:
o Use an underscore (_) to represent spaces (for example, my_first_page.htm).
7
8. o Use initial capital letters to indicate new words in a filename (for example,
MyFirstPage.htm).
8
9. HTML Basics
A Web page is a text document that contains additional formatting information in a language
called HTML (HyperText Markup Language). Using HTML, a Web page creator can identify
various features of a page, such as a section heading, a centered table, or an image to be
displayed. This information is then interpreted by a Web browser, which formats the page
contents appropriately.
HTML Tags
HTML specifies formatting within a page using tags. In its simplest form, a tag is a word or
symbol surrounded by braces (<>). For example, every Web page must begin with the tag
<html> and end with the tag </html>. These tags specify that the enclosed text may contain
HTML formatting information and that the browser should interpret the contents accordingly.
Two required sections must appear inside every page’s HTML tags: a HEAD section, which is
delimited by the tags <head> and </head>, and a BODY section, which is delimited by the
tags <body> and </body>.
The HEAD section contains information that the browser uses to determine the look of the page.
For now, the only information that we will place in the HEAD will be the title of the page,
delimited by the tags <title> and </title>. When a browser renders the page, the text
occurring between the TITLE tags is displayed in the title bar at the top of the browser window.
The BODY section contains the text that will actually appear in the page (see Figure 1.0).
Figure 1.0: Example of Web Page
HTML Elements
You may note that the tags you have seen so far — HTML, HEAD, BODY, and TITLE — all
come in pairs. The first tag marks the beginning of a section, whereas the second tag (which is
identical to the first except for the slash /) marks the end of the section. For this reason, we will
often refer to the first and second tags as opening and closing tags, respectively. For example,
<title> is the opening tag for the TITLE and </title> is the closing tag. HTML elements,
which form the building blocks of Web pages, are made up of text and the tags that specify the
text’s role or purpose within the page. For example, <title>Title of the
Page</title> can be referred to as a TITLE element, since it represents the piece of the
Web page that specifies a title.
While most HTML tags come in pairs, some do not. A comment element, or comment for short,
is defined by a single tag, which begins with <! -- and ends with -->. You may think of
comments as notes to yourself, or to some future Web developer who might review your HTML
text. Comments are ignored by the browser, so the additional text does not clutter up the page
9
10. when it is rendered. You should always place a sequence of comments at the top of any HTML
document you create to identify the file name, author, and purpose of the page.
EXERCISE 1: Create a simple home page for yourself using some text editor. Your page should
have a title, such as "(Your Name) Home Page", and should contain some basic information
about you. Save your page to a disk under the name index.html.
Document Formatting
You may have found that, when you displayed your home page, the text didn't appear in the
browser window exactly as you typed it. This is inevitable, since the size of the browser window
in which the page is rendered may vary. The lines you typed might be too long to fit in the
window or might leave wasted white space at the end. To ensure that Web page text looks
attractive in various window sizes, the browser automatically adjusts the length of lines to fit the
current window, wrapping text to the next line as needed. You may also have noted that, when
the browser performs this automatic formatting, it ignores any blank lines, extra spaces, and tabs
in your text. When displayed in the browser, any consecutive spaces, tabs, or blank lines will
appear as a single space.
Text Spacing
Despite browsers’ automatic formatting features, Web designers can control some text spacing
by using additional HTML tags. A P element specifies text that is to be treated as a paragraph.
Text enclosed within the opening tag <p> and the closing tag </p> will be displayed starting
on a new line that is preceded by a blank line. If you wish to break text explicitly without
inserting a blank line, you can place a BR element in the text. Unlike the paragraph element,
which has opening and closing tags (since there is a logical beginning and end to the paragraph),
a BR element is defined by a single tag: <br />. Text that follows a <br /> tag will be
displayed starting on a new line. By convention, tags such as <br /> that do not have a
corresponding closing tag end with />. In addition, if you don’t want to begin a new line but
would like to force consecutive spaces in the text, you can do so by inserting the special symbol
in the page. In general, a special symbol is a word in HTML that has special meaning
to the browser when it renders the page. For example, the special symbol represents a
non breaking space. When a Web page is rendered by a browser, each occurrence of the special
symbol is displayed as a space, no matter where it appears in the text. Figure below
demonstrates the use of tags and the symbol to control spacing.
EXERCISE 2: Add additional paragraphs to your home page. If you are having trouble thinking
of things to write about yourself, consider writing one paragraph that provides biographical
data, another that describes your hobbies, and a third listing some favorite books or movies. Use
<p></p>, <br />, and appropriately to make your page readable and attractive.
Headings and Alignment
10
11. In a large document, it is often useful to divide the text into sections and then provide each with a
heading describing the content that follows. HTML includes special tags that enable Web
designers to specify headings of various sizes. For example, text enclosed between the tags <h1>
and </h1> is displayed in large, bold letters above the text that follows it. The tags <h2> and
</h2> can be used to display a heading in slightly smaller letters, <h3> and </h3> is used
for even smaller letters, and so on down to <h6> and </h6>. To divide different parts of a
document further, designers can separate sections with a horizontal line using the <hr /> tag
(where HR stands for horizontal rule).
By default, all text in a Web page is displayed left-justified on the page. This means that each
heading, paragraph or line of text begins at the page’s left edge. However, it is possible to align
text so that it is centered or even right-justified by including a STYLE attribute in the appropriate
opening tag. In general, an attribute is an additional property that can be assigned to an HTML
element as part of its tag. The STYLE attribute can be added to an opening tag to specify the
alignment of that particular element. For example, the opening tag
<h2 style="text-align: center">
specifies a heading that will be centered in the page, whereas
p style="text-align: right">
specifies a paragraph that will be right-justified in the page.
Figure below demonstrates the alignment of headings and paragraphs within a page. This page
also incorporates DIV tags, which can be used to group multiple elements into a single page
division. The advantage of arranging multiple elements inside a set of DIV tags is that you can
format all enclosed elements at once, as opposed to formatting each individually. In this example,
a heading and a paragraph are grouped together and right-justified using DIV tags.
11
12. EXERCISE 3: Divide your home page into sections. Use a large heading (delimited by H1 tags)
to list your name so that it is centered at the top of the page, followed by a horizontal line. For
each subsequent text section, use a smaller heading, e.g. H2 or H3. At least one section of your
page should contain multiple paragraphs.
Font Formatting
In printing terminology, a font defines a particular typeface (such as Times Roman, Courier, or
Arial) and size (such as 11 pt. or 12 pt.) used to display characters in a document. In general,
Web page creators have limited control over the fonts that are used to display their pages.
Browsers allow the user to specify his or her own font preferences by selecting default fonts for
viewing pages, so one browser may display a page very differently than another would. There is
some font formatting that can be forced in a page, however. For example, text enclosed in the
tags <b></b> will appear in bold, <i></i> indicate text in italics, and <u></u> indicate
underlined text. In addition, you can change the color of text by enclosing it in SPAN tags of the
following form:
<span style="color: DESIRED_COLOR"> … </span>
SPAN tags serve to group a block of text together for common formatting. The STYLE attribute
of the form style="color:DESIRED_COLOR" specifies the color of the text within the
SPAN tags, where DESIRED_COLOR is a color name such as red, blue, darkblue, or
purple. See figure below for a Web page that demonstrates text formatting.
12
13. EXERCISE 4: Augment your home page by coloring some of the text and using font formatting
where appropriate. For example, if you listed favorite books or movies, you could italicize or
underline their titles.
Hypertext and Multimedia
Although it is always possible to retrieve a Web page by entering its URL into the browser’s
Address box, most pages are not accessed this way. The defining feature of the Web is its ability
to link pages together through hyperlinks. A hyperlink is an element on a Web page, usually
displayed as underlined text that connects the page to another page or online resource. When a
Web user clicks on a hyperlink, the browser loads the connected page, regardless of its physical
location on the Web. Thus, by following a chain of hyperlinks, a user can explore related
documents, even if the documents are stored on computers thousands of miles apart. Text that
contains embedded hyperlinks is referred to as hypertext.
Hyperlinks
When inserting a hyperlink into a document, Web designers use the tags <a> and </a> to
enclose the text that will represent the link. In this context, A is short for anchor, signifying that
the hyperlink anchors (e.g., connects) separate documents together. The designer also must
indicate the address of the page to which the link connects; this information is specified within
the <a> tag via an attribute named HREF (short for Hypertext REFerence). The general form of
a hyperlink element is:
<a href="ADDRESS_OF_PAGE">TEXT LABEL FOR LINK</a>
Whatever text you type between <a> and </a> tags will appear as an underlined link when
the page is rendered. If the user clicks that text, the browser will replace the current page with the
page specified in the opening tag. The address listed in the HREF attribute can be either an
absolute address, meaning that it specifies the URL of a page on the Web, or a relative address,
meaning that it specifies a file stored in a location related to that of the Web page itself. For
example, the Web page in Figure below contains two hyperlinks. The first utilizes an absolute
address, specifying the URL (starting with http://) where that page can be found. When a
visitor clicks the link labeled "Home Page for Bayero University Kano", the browser will access
the linked page and display it in the browser window. The second hyperlink utilizes a relative
address, specifying only the file name of the desired page. Since the http:// prefix is omitted,
the browser automatically assumes that this address refers to a file stored in the same directory as
the current Web page.
13
15. C:Program FilesMicrosoft OfficeOFFICE11BITMAPSDBWIZassets.gif
EXERCISE 6: Look around the Web or your computer, and choose an image that you would
like to include on your Web page. Then, copy the image to your local directory by clicking the
right mouse button over the desired image and selecting Save Image from the resulting
menu. After saving the image in the directory that contains your pages, incorporate the local
image into your home page. Be sure to include alternate text for your image via the ALT
attribute.
Lists
When organizing text in a page, it is often convenient to list similar items in sequence. For
example, we have mentioned the possibility of listing your hobbies or favorite movies in your
home page. HTML provides two different elements for organizing lists. In an unordered list,
individual items are preceded by bullets (solid circles), as shown on the left-hand side of Table
Below. In an ordered list, the items are numbered in sequence, as shown on the right-hand side of
the figure.
Unordered List Ordered List
• Old movies 1. And Then There Were None
• Celtic music 2. Bringing Up Baby
• Baseball 3. Crouching Tiger, Hidden Dragon
• Hacking around on the computer 4. Big Trouble in Little China
5. The Usual Suspects
In HTML, an unordered list is identified by the tags <ul> and </ul>, whereas an ordered list
is identified by the tags <ol> and </ol>. In either type of list, the individual list items are
delimited by the tags <li> and </li> (see figure below).
Formatting Lists
By default, items in an unordered list are preceded by bullets and items in an ordered list are
numbered. However, the page designer can specify alternative formats using the STYLE
attribute. Items in an unordered list will be preceded by squares, instead of bullets, if you add the
attribute style="list-item-type:square" to the opening UL tag. Likewise, you can
specify that an ordered list use letters or roman numerals instead of numbers to identify each list
15
16. item. The style attributes that correspond to each of these formatting styles are listed in Figure
1.3.
Figure 1.3 Style attributes to format lists.
The ability to specify an ordered list’s format is especially useful when you wish to nest lists. For
example, the Web page in Figure 1.4 displays an algorithm for finding the oldest person in a
room. In this case, the algorithm has four main steps, which appear in the page as items in an
ordered list. The creator of this page has broken the third step into parts "a" and "b" by nesting an
ordered list (with appropriate STYLE attribute) inside the third list item.
EXERCISE 7: Add a list to your home page. For example, you might list your favorite CDs,
your current courses, or the names of your siblings.
16
17. Figure 1.4: demo.html rendered in a Web browser.
Tables
Although it is usually preferable to let the browser determine how text is laid out within a page,
there are times when you want things to line up just so. For example, suppose that you wanted to
display a collection of related information about a student. Aligning such data into columns can
make a page more attractive and easier to read.
Name: Chris
Age: 20
Hometown: Calabar
Major: Computer Science
In HTML, table elements are used to organize text and other elements into rows and columns.
Elements in the same row appear on the same line when rendered by a browser (as is the case
with "Name:" and "Chris" above). Elements in the same column are aligned on the left-hand side
(as is the case with "Chris", "20", "Calabar", and "Computer Science"). Web designers specify a
table element using the tags <table> and </table>. Individual rows in the table are
identified by <tr></tr> (short for table row), and the number of columns is determined by
the number of data items in the rows, as identified by <td></td> (short for table data). Every
time you end one row element and begin another, the browser places the first data item in the
first column of that new row. For example, the Web page in Figure 1.5 contains a table element
that displays the aligned text from our sample student information record.
17
18. Figure 1.5
As this example demonstrates, the browser automatically adjusts the width of each column to
accommodate its largest entry. In this case, the width of the first column is determined by the
space needed to fit "Hometown:” If the table included a fifth row containing a longer entry in the
first column — say "Favorite Movie:" — then the browser would adjust the column size to fit
that entry.
Table Borders
If you would like to insert borders between the rows and columns in a table, this is accomplished
by assigning a number to the BORDER attribute in the opening TABLE tag. For example, the
opening tag <table border=1> would begin a table in which a border separated each row
and column. The number value assigned to the BORDER attribute refers to the width of the
border, as measured in pixels (or picture elements, the dots that make up the display on a
computer screen). By increasing the number, the page designer can increase the width of the
border.
Aligning Images and Text
In addition to organizing text into columns, tables are useful for aligning a variety of HTML
elements. For example, a common use of tables is to align an image with text that refers to it. The
Web page in Figure 1.6 includes a table with only one row. An image appears in the first column,
and text appears in the second column. The result is that the text appears to the right of the
image, centered vertically.
A Web page that demonstrates a table for image alignment.
18
19. Figure 1.6: A Web page that demonstrates a table for image alignment rendered in
browser.
Background Color and Images
By default, most browsers display Web pages with a white background (though individual users
can reset this default value via preferences). However, a little color can sometimes make a page
more attractive and interesting. To change a page’s background color, you must assign a specific
color value to the BGCOLOR attribute of the BODY tag. For example, the opening tag <body
bgcolor="lightgrey"> would cause the background of the page to appear light gray.
Appendix B lists the most commonly used color names that are predefined by HTML.
EXERCISE 10: Add a background color to your home page. Be careful in your choice of colors,
though. Subtle colors, such as lightgrey or lightblue, can be attractive, but bright or dark colors,
such as yellow or darkblue, can make reading the page’s text extremely difficult. Remember that
readability is the primary goal when designing a Web page – if users can't read the contents, it
doesn't matter how pretty the page is! Try changing text color to a lighter one if you insist on
using dark background.
As you surf the Web, you may have noticed that some Web pages have backgrounds comprised
of textured patterns or even photographic images. A Web designer can specify an image as the
background of a Web page using the BACKGROUND attribute of the BODY tag. For example,
the opening tag
<body background= "C:Program FilesMicrosoft
OfficeOFFICE11BITMAPSSTYLESACEXPDTN.GIF">
would cause the image located at the specified directory to be displayed in the background of the
page. In this case, the background would have a yellow, stone-like texture. Note that, if the image
is too small to fill the entire browser window (which is usually the case), then the image is
repeated to fill the space. This is why simple, repetitive patterns make the best backgrounds.
EXERCISE 11: If desired, add a background image to your page (sample images can be found
at various Web sites, such as
http://wp.netscape.com/assist/net_sites/bg/backgrounds.html and
http://www.free-backgrounds.com/) or inside your computer. However, be very
selective when choosing your image. Plastering your picture in the background of your page
might seem like a neat idea, but complex background images almost always detract from the
readability of the page.
Images as Links
In all the examples you have seen so far, links have been labeled with text—that is, only text
appeared between the opening and closing A tags. However, Web designers can anchor a link to
any HTML element, including an image. The following example defines an image link, in which
an IMG element is placed inside the A tags.
<a href="yourpage.htm">
<img src="assets.gif" alt="Company Logo" /></a>
Images that serve as hyperlinks display the same behavior that hypertext do. When a user clicks
the image, the browser loads the page specified in the HREF attribute. By default, images
enclosed in A tags are surrounded by colored borders to identify the images as links. However, if
you do not want the image to appear with a border, you can add attributes to the ANCHOR and
IMG tags to remove the border, as in the following:
19
20. <a href="yourpage.htm" style="text-decoration: none">
<img src="assets.gif"
alt="Company Logo" border=0 />
</a>
EXERCISE 12: Add images that serve as links to your home page. The images that you select
should have relevance to the link destinations – don't use a picture unless a user could intuitively
connect the image to the document represented by the link. Also, do not remove the borders from
images unless you have a good reason for doing so. These borders help Web users identify and
locate links.
Basic XHTML Forms
When browsing Web sites, users often need to provide information such as e-mail addresses,
search keywords and zip codes. XHTML provides a mechanism, called a form, for collecting
such user information.
Data that users enter on a Web page normally is sent to a Web server that provides access to a
site’s resources (e.g., XHTML documents, images, etc.). These resources are either located on
the same machine as the Web server or on a machine that the Web server can access through the
network. When a browser requests a Web page or file that is located on a server, the server
processes the request and returns the requested resource. A request contains the name and path of
the desired resource and the method of communication (called a protocol). XHTML documents
use the HyperText Transfer Protocol (HTTP).
Creating HTML Forms
Up to this point, everything in this book has focused on getting information to others. But HTML
is a two-way street; you can use your Web pages to gather information from the people who
access them as well. Web forms enable you to receive feedback, orders, and other information
from your Web page's viewers. If you've ever used Web sites such as bukportal or search engine
such as google, you're familiar with HTML forms. Online Registration forms are also an
extremely popular use of forms.
Definition: An HTML form is part of a Web page that includes areas where viewers can enter
information to be sent back to you, the publisher of the Web page.
Before you learn the HTML tags to make your own forms, you should understand how the
information that someone fills in on a form makes its way back to you. You also need to have the
person who runs your Web server computer set it up to process your forms.
Every form must include a button for the user to submit the form. When someone clicks that
button, all the information he or she has filled in is sent (in a standard format) to an Internet
address that you specify in the form itself. You have to put a special forms- processing program
at that address in order for that information to get to you.
Creating a Form
Every form must begin with a <form> tag, which can be located anywhere in the body of the
HTML document. The form tag normally has two attributes, method and action:
<form method="post" action="mailto:me@mysite.com">
Nowadays, the method is almost always "post", which means to send the form entry results
as a document. In some special situations, you might need to use method="get", which
20
21. submits the results as part of the URL header instead. For example, "get" is sometimes used
when submitting queries to search engines from a Web form. The form in Figures below includes
every type of input that you can currently use on HTML forms.
21
23. Notice that some of the text in Figures above is monospaced, meaning that every letter is the
same width. Monospaced text makes it easy to line up a form input box with the box above or
below it and can make your forms look neater. To use monospaced text in all or part of a form,
enclose the text between <pre> and </pre> tags. Using these tags also relieves you from
having to put <br /> at the end of every line because the <pre> tag puts a line break on the
page at every line break in the HTML document.
Note that each of the lines of the form <input type=" . . .” . . . /> contains the
terminating slash and that all <option> tags within the <select> tags have closing tags.
Text Input
To ask the user for a specific piece of information within a form, use the <input /> tag. This
tag must fall between the <form> and </form> tags, but it can be anywhere on the page in
23
24. relation to text, images, and other HTML tags. For example, to ask for someone's name, you
could use the following:
What's your first name? <input type="text" size="20"
maxlength="30" id="firstname" />
What's your last name? <input type="text" size="20"
maxlength="30" id="lastname" />
The type attribute indicates what type of form element to display—a simple one-line text entry
box in this case. Because it determines which type the element is to be, this attribute is required.
The size attribute indicates approximately how many characters wide the text input box should
be. If you are using a proportionally spaced font, the width of the input will vary depending on
what the user enters. If the input is too long to fit in the box, most Web browsers will
automatically scroll the text to the left. This attribute is optional and will default to 20 if not
present.
Maxlength determines the number of characters the user is allowed to type into the text box.
If someone tries to type beyond the specified length, the extra characters won't appear. You can
specify a length that is longer, shorter, or the same as the physical size of the text box. size
and maxlength are used only for type="text" because other input types (check boxes,
radio buttons, and so on) have a fixed size. This attribute is optional and will default to unlimited
if not present.
If you want the user to enter text without its being displayed on the screen, you can use <input
type="password" /> instead of <input type="text" />. Asterisks (***) are then
displayed in place of the text the user types. The size, maxlength, and name attributes work
exactly the same for type="password" as for type="text".
No matter what type an input element is, you must give a name to the data it gathers. You can use
any name you like for each input item, as long as each one on the form is different. When the
form is sent to you (or to your form-processing script), each data item is identified by name.
Check Boxes
The simplest input type is a check box, which appears as a small square that the user can select or
deselect by clicking. You must give each check box a name. If you want a check box to be
checked by default when the form comes up, include the checked attribute. For example, the
following would make two check boxes:
<input type="checkbox" id="baby" checked="checked" /> Baby Grand
Piano
<input type="checkbox" id="mini" /> Mini Piano Stool
The check box labeled Baby Grand Piano would be checked. (The user would have to click it to
turn it off if he didn't want a piano.) The check box marked Mini Piano Stool would be
unchecked to begin with, so the user would have to click it to turn it on. When the form is
submitted, selected check boxes appear in the form result: baby=on
You can use more than one check box with the same name, but different values, as in the
following code:
<input type="checkbox" id="pet" value="dog"> dog
<input type="checkbox" id="pet" value="cat"> cat
<input type="checkbox" id="pet" value="iguana"> iguana
24
25. If the user checks both cat and iguana, the submission result includes the following:
Pet=cat
Pet=iguana
Radio Buttons
Radio buttons, it is used where only one choice can be selected at a time, are almost as simple to
implement as check boxes. Just use type="radio" and give each of the options its own
input tag, but use the same name for all the radio buttons in a group:
<input type="radio" id="card" value="v" checked="checked" /> Visa
<input type="radio" id="card" value="m" /> MasterCard
The value can be any name or code you choose. If you include the checked attribute, that
button is selected by default. (No more than one radio button with the same id can be checked.)
If the user selects MasterCard from the preceding radio button set, the following is included in
the form submission to the server script:
Card=m
If the user doesn't change the default checked selection, card=v is sent instead.
Selection Lists
Both scrolling lists and pull-down pick lists are created with the <select> tag. You use this
tag together with the <option> tag:
<select id="extras" size="3" multiple="multiple">
<Option selected> Electric windows</option>
<option> AM/FM Radio</option>
<Option> Turbocharger</option>
</select>
No HTML tags other than <option> and </option> should appear between the
<select> and </select> tags. Unlike the text input type, the size attribute here
determines how many items show at once on the selection list. If size="2" were used in the
preceding code, only the first two options would be visible, and a scrollbar would appear next to
the list so that the user could scroll down to see the third option. Including the
multiple="multiple" attribute enables users to select more than one option at a time, and
the selected="selected" attribute makes an option selected by default. The actual text
that accompanies selected options is returned when the form is submitted. If the user selected
Electric windows and Turbocharger, for instance, the form results would include the following
lines:
extras=Electric windows
extras=Turbocharger
If you leave out the size attribute or specify size="1", the list will create a pull-down pick
list. Pick lists cannot allow multiple choices; they are logically equivalent to a group of radio
buttons. For example, another way to choose between credit card types follows:
<select id="card">
<option> Visa</option>
<option> MasterCard</option>
</select>
25
26. Text Areas
The <input type="text"> attribute mentioned earlier allows the user to enter only a
single line of text. When you want to allow multiple lines of text in a single input item, use the
<textarea> and </textarea> tags instead. Any text you include between these two tags
is displayed as the default entry. Here's an example:
<textarea id="comments" rows="4" cols="20">
Please send more information.
</textarea>
As you probably guessed, the rows and cols attributes control the number of rows and
columns of text that fit in the input box. Text area boxes do have a scrollbar, however, so the user
can enter more text than fits in the display area. It will, of course, depend on which characters
you type, but generally the number assigned to the cols attribute is the number of characters
that will fit in a row. Some older browsers do not support the placement of default text within the
text area. In these browsers, the text might appear outside the text input box.
Submit!
Every form must include a button that submits the form data to the server. You can put any label
you like on this button with the value attribute:
<input type="submit" value="Place My Order Now!" />
A gray button will be sized to fit the label you put in the value attribute. When the user clicks
it, all data items on the form are sent to the email address or program script specified in the form
action attribute. You can also include a button that clears all entries on the form so that users
can start over if they change their minds or make mistakes. Use the following:
<input type="reset" value="Clear This Form and Start Over" />
You can combine forms with all the HTML techniques you learn about in this paper, including
backgrounds, graphics, text colors and tables. When you do so, however, the standard Submit
and Reset buttons might start looking a little bland. Fortunately, there is an easy way to substitute
your own graphics for those buttons. Use the following to use an image of your choice for a
Submit button:
<input type="image" src="button.gif" />
The image named button.gif will appear on the page, and the form will be submitted
whenever someone clicks that image. You can also include any attributes normally used with the
<img /> tag, such as border and align.
Cascading Style Sheets
Style Sheet: A set of rules that determine how the styles are applied to the HTML tags in your
documents.
In 1996, the W3C first recommended the idea of Cascading Style Sheets (CSS) to format HTML
documents. The recommendation, which was updated in mid-1998, enables Web developers to
separate the structure and format of their documents.
The CSS recommendation describes the following three types of style sheets:
26
27. • Inline The style properties are included throughout the HTML page. Each HTML tag
receives its own style attributes as they occur in the page.
• Embedded The style properties are included (within the <style> tags) at the top of the
HTML document. A style assigned to a particular tag applies to all those tags in this type
of document. In this book, you'll see embedded style sheets most often.
• Linked The style properties are stored in a separate file. That file can be linked to any
HTML document using a <link> tag placed within the <head> tags.
Even without all the formatting benefits that style sheets provide, Web developers can rejoice in
knowing that using style sheets will no doubt be the biggest timesaver they've ever encountered.
Because you can apply style sheets to as many HTML documents as you like, making changes
takes a matter of minutes rather than days.
Before the advent of style sheets, if you wanted to change the appearance of a particular tag in
your Web site, you would have to open each document, find the tag you wanted to change, make
the change, save the document, and continue on to the next document. With style sheets, you can
change the tag in a single style sheet document and have the changes take effect immediately in
all the pages linked to it.
Defining the Rules
Style sheet rules are made up of selectors (the HTML tags that receive the style) and declarations
(the style sheet properties and their values). In the following example, the selector is the body
tag and the declaration is made up of the style property (background) and its value (black).
This example sets the background color for the entire document to black.
body {background: black}
You can see that, in a style sheet, the HTML tag is not surrounded by brackets as it would be in
the HTML document, and the declaration is surrounded by curly braces. Declarations can contain
more than one property. The following example also sets the text color for this page to white.
Notice that the two properties are separated by a semicolon.
body {background: black; color: white}
You can format this style rule in a number of ways to make it easier to read. For example, the
following rule produces exactly the same results as the preceding style:
body {background: black;
Color: white}
So does this:
body {
background: black;
Color: white
}
If you want to apply the same rules to several HTML tags, you could group those rules together,
as in the following example:
body, td, h1 {
background: black;
27
28. Color: white
Add a Little class
As the old saying goes, rules are made to be broken. What if you don't want every single H1
heading in your document to be white on a black background? Maybe you want every other h1
heading to be yellow on a white background. Let me introduce you to the class attribute. You
can apply this attribute to almost every HTML tag, and it's almost like creating your own tags.
Take a closer look at the style properties below. This document defines two table styles within
the <style> tags. The HTML tag name table is followed by a period (.) and the class
names (nav and rest).
<style type=text/css>
table.nav {background: aqua}
table.rest {background: yellow;
text-align: center;
Color: black}
</style>
When the table is referenced in the body of the document, you must apply the class attribute to
tell the browser which style properties should be applied. The HTML markup for each table in
this example appears in the following HTML code. You can see that the class name appears
within quotations just like the other HTML attributes (and as with the width attribute shown
here).
<table class="nav" width="100%">
<table class="rest" width=50%>
Applying Styles
Before moving on, we'll quickly cover how to apply style properties to your documents.
Remember, you have three methods to add style sheets: embedded, linked, and inline. We'll
discuss each one in turn.
In designing your Web site, use linked style sheets to describe your most frequently used styles
(the ones that will be formatted in the same fashion for all of the pages in your Web site), such as
the heading tags and link tags. Use embedded style sheets to describe the formatting of tags that
will remain the same within a single document, or set of documents, such as special table settings
or page margins. Use the inline style sheets to describe the formatting of tags that vary from the
site-wide formatting applied with the other style sheets, such as for a special callout or sidebar.
Embedded Styles
All the styles are defined at the top of the HTML document within the <head> tags because
they contain information about the entire document. The styles defined here apply only to the one
document in which they appear. If you plan to use these same styles in another document, you
need to add them there as well.
<head>
<style type="text/css">
table.nav {background: aqua}
table.rest {background: yellow;
text-align: center;
color:black}
a:link {color:red;
28
29. text-decoration:none}
</style>
</head>
The <style> tag almost always includes the type="text/css" attribute, so you should get
used to adding it.
Linked Styles
Linked style sheets hold all the style properties in a separate file. You then link the file into each
HTML document where you want those style properties to appear.
<head>
<link rel="stylesheet" href="mystyles.css" type="text/css">
</head>
With this method, I've created a separate file called mystyles.css (for cascading style sheet) that
contains all my style properties. You can see that the same type="text/css" attribute shows
up here. Following are the entire contents of the mystyles.css file. These are the same styles that
showed up in the preceding embedded styles example, but now they appear in a separate text file.
table.nav {background:aqua}
table.rest {background:yellow;
text-align:center;
color:black}
a:link {color:red;
text-decoration:none}
Well-designed Web sites (with more than one page) contain repeated page elements and styles.
The linked style sheet is most appropriate for this type of Web authoring.
Inline Styles
With inline styles, the style properties are added to the HTML tag as the tag is entered. This
means that if I want the same style to appear on all the <h1> tags in my document, I would have
to type those styles in all the <h1> tags. Look at the following example. I am still using the same
style properties, as in the previous examples, but now you can see how the two tables would be
created using inline styles.
<table style="background:aqua" width="100%">
<table style="background:yellow; text-align:center;
color:black" width="100%">
Using inline styles, the <style> tag becomes the style attribute. Multiple style properties are
still separated by semicolons, but the entire group of properties for each tag is grouped within
each HTML tag. This type of style sheet is fine for documents in which you need to apply styles
to only one or two elements, but you wouldn't want to do all that work when you have a lot of
styles to add.
Cascading Precedence
These three styles are not treated equally by the browsers, nor are they supposed to be. Web
browsers give precedence to the style that appears closest to the tag. So, inline styles (which
appear as attributes within the tag itself) are most important. Embedded styles (which appear at
29
30. the top of the HTML file) are applied next, and linked styles (which appear in another file
altogether) are applied last.
Imagine that you have created an embedded style for the <h1> tag, but want to change that style
for one occurrence of the <h1> tag in that document. You would create an inline style for that
new <h1> tag. The browsers recognize that fact and change the style for that tag to reflect the
inline style.
Caution: Style sheet precedence is supposed to place more importance on embedded styles than
on linked style sheets. In actual practice, however, you'll find that both Internet Explorer and
Netscape treat linked sheets as more important than embedded sheets (but they do treat inline
styles as more important than either of the other two). You'll find that you have better luck if you
use either linked or embedded styles, but not both.
Formatting Text with Styles
Text is the most important element of any Web page. Without text, there is nothing on the page
to help people decide whether it's worth coming back.
Text on an HTML page is structured by the <body>, <p>, <td>, <tr>, <th>, <h1> <h6>,
and <li> tags (among others). You can add your own style preferences to each of these tags
using the style properties shown in Table below.
Style Properties for Text
Property Description of Use and Values
background Sets the background color for the text.
color Sets the text color for the text.
font-family Sets the font for the text.
font-size Can be a point size, a percentage of the size of another tag, or xx-small
to xx-large.
font-style normal (which is assumed) or italic.
font-weight extra-light to extra-bold.
text-align left, right, center, or justify (full).
text-indent Can be a fixed length or a percentage.
text- underline, overline, strikethrough, and none.
30
31. Style Properties for Text
Property Description of Use and Values
decoration
In the following example, we've added some embedded style elements that set the font, font size,
and font color for the body text of the basic HTML document.
<html>
<head>
<title>My First Web Page</title>
<style type="text/css">
body {font-family:"Arial";
font-size:"12pt";
color:red}
</style>
</head>
<body>
<p>This is my <b><i>first</i></b> Web page.</p>
</body>
</html>
Link Styles
You have probably seen those bright blue underlined hyperlinks on the Web. Style sheets have
the following selectors to help you change the look of them:
• a:link sets the styles for unvisited links.
• a:visited Sets the styles for visited links.
• a:active Sets the styles for the link while it is linking.
• a:hover Sets the style for the link while your mouse is hovering.
Table below shows some of the style properties you can assign to your links.
Table 5.2. Style Properties for the Anchor Styles
Property Description of Use and Values
background-color Sets the background color for the link.
color Sets the text color for the link.
font-family Sets the font for the text of the link.
31
32. Table 5.2. Style Properties for the Anchor Styles
Property Description of Use and Values
text-decoration underline, overline, strikethrough, and none.
One of the most popular style sheet effects on the Web right now is to remove the underlining on
hyperlinks. To do this on your pages, just add the text-decoration:none declaration to
the a styles, as shown in the following example:
a:link {color:yellow;
text-decoration:none}
If you like the look of the underlined hyperlink, you're in luck. You don't have to specify
anything at all. Underlining is assumed for all a styles.
Color Styles
As you can see in Table below, you can apply color to your HTML tags in two different ways:
with color or with background.
Style Properties for Color
Property Description of Use and Values
color Sets the color of the text.
background Sets the background of the page or text.
Caution: Don't forget to test your pages before you publish them. Not all colors work together. If
you've specified a black background color and a black text color, you've got a problem because
no one will be able to see your text.
Margin Styles
Style sheets give you another important advantage: You can specify the margins of almost any
HTML element. The margins can be defined in pt, in, cm, or px sizes.
body {margin-left: 100px;
margin-right: 100px;
margin-top: 50px}
You can set the margin-left, margin-right, and margin-top properties individually
or combine them into one property called margin that applies the sizes to the top, right, and
left margins.
32
33. body {margin: 100px 100px 50px}
The sample CSS below also specifies margins for the text elements. Try it on your documents.
<style type="text/css">
body {background: coral}
.subhead { color: black;
font-size: 28px;
margin-top: 12px;
margin-left: 20px;
line-height: 32px;
font-family: Impact, Arial Black, Arial,
Helvetica, sans-serif}
</style>
References:
Internet & World Wide Web How to Program: Second Edition Reviewers By:
Richard Albright, Joan Aliprand, Race Bannon and Paul Bohman
HTML 4.01 Weekend Crash Course By:
Greg Perry
The Essential Guide to CSS and HTML Web Design By:
Craig Grannell
HTML, XHTML, and CSS Bible 3rd Edition By:
Brian Pfaffenberger, Steven M. Schafer, Charles White and Bill Karow
HTML & XHTML: The Definitive Guide, 6th Edition By:
Bill Kennedy, Chuck Musciano
33
