How To Create A Website and HTML Authoring Lessons

1
Rakesh Sharma
November 05, 2009
How to create a website
I. INTRODUCTION
Websites are interactive documents and these are created to place information and using online
user-friendly different applications available to internet users. Web page design and website
function have two phases. First, several Web pages are designed for different segments with text,
images and maps. Second, different Web pages are linked with specific locations and combined
to make Web site. The website is placed in web host with specific domain name. A website
designer needs the specific instructions to create website.
II. INSTRUCTIONS TO WEBSITE DESIGNER
As Website designer, you will create Web pages first to make final Website for internet users.
The web pages are documents authored in HTML and Dreamweaver web editors.
Follow the steps to create Web pages1.
 Use HTML and XHTML codes for placing information with details of proposed business
with server linked pages. Use some useful tips:
1. Make a storyboard to design separate segments of Web pages.
2. Use HTML code to combine Web pages together using tag element.
3. Create links to the locations within documents by using anchor element.
4. Create links of inline images or maps to these locations from within the same document
and from within other document.
5. Use hypertext to create links to Web sites on the World Wide Web. Include FTP sites and
e-mail addresses.
6. Set different hypertext attributes to control how the browser displays and reacts to
hypertext links.
The two things needed to create website:
1. Choose a domain name: The domain name can be XXX.net or YYY.com etc.
2. A web host: Define the type of site.

2
Stepwise Instructions to create website2:
1. Plan and make outline of own website.
2. Select right topic of website title.
3. Get your domain name after paying a registration fee to use domain name as website
name. It is the name of your website you wish to create. For example,
“myskillkingdom.com”. Use some useful tips:
• Choose unique domain name
• Register domain name and pay the fee by credit card
• Point your domain name at temporary website available to registrar. For

example, GoDaddy.com
4. Get a Web host to place the website available to internet users. Use some useful tips:
• Choose web host with reliable, high speed access of resource
• High data transfer rate of host is necessary
• Enough space of 15-100 MB is necessary
• Technical support available 24 hours a day, 7 days a week by Web host

company
• Secured file transfer, telnet access or secure shell account(SSH) to test scripts
or programs make safe and secured website
• Get a high speed server and latest operating system. For example, Unix
system running on the Apache server.
Caution: Using secured file transfer with SSH keeps hackers away.
5. Sign up an account with unique password
Note: The account and password are usually combination of symbols and words
untraceable to hackers.
Warning:
3
1. Make your Website scripted. Scripting keeps away all harvesting

softwares and spams.
2. Make password protected and Web pages encrypted
6. Use the Web pages designed in HTML for Website.
7. Try to test your Website. You need to test your web pages in browsers such as
Internet Explorer 8, Firefox, Opera, Safari. An emulator or virtual machine allows
multiple copies of Windows and tests your Website with multiple browsers.
8. Collect credit card information.
• Create your own Merchant Account
• Create Add an Order Form or a “Buy Now” button using credit card to a
website.
• Make sure to get secure server or SSL
9. Get notice of your web site form Web host. Use the following tips:
• Submit your web site to search engine. For example, Google.
• Get a catch-all email control account. It causes any email address at your
domain to route it to your account.
10. Make your website more accessible to target clients. Make sure to fill the following in
your website:
• Target your advertisements
• Frequent advertisements of free stuff
• Attractive banner to visitors
• Rotation and weeding of banners and advertisements
• Content material and great offers
• Feedback and text links
III WEBSITE ON INTERNET

4
Example: A Middle Age Arts company creates historical European art work for home
use. The Web page of company shows as following on Website.
Location: In folder Artwork, open the file gargoyle.htm in Explorer 7. See the folder in
enclosures: Folder: Artwork.
IV CONCLUSION
The website may be created for a person or business, to meet the demand of daily fast
pace global world. It may appear to be a challenge to create a safe and secured user-friendly
Website available 24/7 to internet users. The continuous threat of spammers and hackers needs
the Website as immune to the unauthorized users. The fast speed and secured Websites at
secured internet servers makes the use of Website more efficient and safe. The instructions are
provided here to layman people interested in Website design. You will find easy user-friendly
step by step method of Web page design and using them to create Web site.
Work Cited
1.Carey, Patrick. New Perspectives on HTML and XHTML. 5th Edition: Course
Technology. Cengage Learning, 2008. Pages 3-46. Print.
2. Heng, Christopher. “How to Make / Create a Website: The Beginner's A-Z

Guide”<http://www.thesitewizard.com/gettingstarted/startwebsite.shtml>.
thesitewizard™.2009.November 5,2009.
3.Sharma, Rakesh. “Art Work Web Page”. November 5, 2009
Enclosures: Folder: Artwork3.

5
6
HTML Work Book and lessons
Chapter One:
Exploring the History of the World Wide Web
To share resources effectively, computers can be linked together in a structure called a network.
A network is a structure that links several points called nodes allowing for the sharing of
information and services. For computer networks, each node is a device such as a computer or a
printer or a scanner, capable of sending and receiving data electronically over the network. A
computer node is also called a host. A node that provides information or a service is called a
server. A computer or other device that requests services from a server is called a client.
If the computers are close together, the network is called a local area network (LAN). A network
that covers a wider area, perhaps several cities, is called a wide area network (WAN). The
Internet is a "network of networks". The physical structure of the Internet uses fiber-optic cables,
satellites, phone lines, and other telecommunications media to send data back and forth. The
early Internet was called ARPANET and consisted of two nodes at UCLA and Stanford,
connected by a phone line.
In 1989, Timothy Berners-Lee and other researchers at the CERN nuclear research facility near
Geneva, Switzerland, laid the foundation of the World Wide Web (Web), which allows a quick
access to any resource on the Internet. They developed a system of hypertext documents —
electronic files that provide a way for the organizing of data so that the user can control what is
presented and in what order. The key to hypertext is the use of hyperlinks, or links, which you
activate by clicking, to move from one topic to another. The hypertext approach has become
the dominant method of sharing and retrieving information on the part of the Internet known as
the World Wide Web, or simply Web.
Documents on the Web are known as Web pages and a collection of related documents are
called a Web site. Web pages can contain images, video, sound clips, and programs that run
directly from a Web page. A Web page is stored on a Web server (server), which makes the page
available to users of the Web. To view the page, the users run a Web browser installed on their
computer. A Web browser (client) is a software program that retrieves a Web page and
displays it. Early browsers were predominantly text-based (e.g., Lynx) while modern browsers
7
are graphical (e.g., Internet Explorer, Firefox, PDAs, MP3 players, etc.). With a text-based
browser, you navigate the Web by typing commands; with a graphical browser, you use the
mouse to click to move from page to page.
Introducing HTML
Web pages are actually nothing more than plain text files, written in a language called Hypertext
Markup Language (HTML). A markup language describes the content and structure of
documents. Even though HTML requires special codes placed into a file, it is not considered a
programming language. While HTML can describe the content of a document by using tags that
are interpreted by a Web browser, it is not a formatting language because it does not necessarily
describe how content should be rendered. If you want to format your document, the preferred
method is to use styles. Styles are formatting rules written in a separate language from HTML
telling the browser how to render each element for particular devices.
HTML was derived from the Standard Generalized Markup Language (SGML) used for large-
scale documents in the 1980s. SGML was a strong metalanguage, or language used to create
other languages. HTML allows Web authors to create documents that can be displayed across
different operating systems. HTML code is easy to understand for nonprogrammers because it
describes the format of Web pages through the use of tags.
There are a few reasons for putting the formatting in the control of the Web browser rather than
Web server, including portability and speed. Web pages must be able to work with different
operating systems and browsers. Specifying the exact appearance of a page can dramatically
increase both size of the document file and the time required to retrieve it. Eventually, competing
browsers, seeking to dominate the market, added new features called extensions to the language.
Therefore, HTML uses style sheets, with which a Web designer can explicitly define the fonts
and formatting the Web browser applies to the document.
HTML has a set of rules, called syntax, that specify how document code is written. These rules
appear as a set of standards or specifications developed by a consortium of Web developers,
programmers, and authors called the World Wide Web Consortium (W3C). Figure 1–4 on page 7
describes the versions of HTML. W3C is the organization responsible for deprecating, or
phasing out, older elements of HTML that should no longer be supported by browsers.
Over the years, each browser has added extensions to HTML that support new features.
Ultimately, a group of Web developers, programmers, and authors called the World Wide Web
Consortium, or the W3C, created a set of standards or specifications that all browser
manufacturers were to follow. Current Web development trends are focusing more on XML and
the XHTML languages. XML (Extensible Markup Language) is used for developing document
content using customized tags and attributes. XHTML (Extensible HyperText Markup
Language) is a stricter version of HTML, designed to better integrate HTML with XML.
8
Part of writing good HTML code is being aware of the requirements of various browsers and
devices, as well as understanding the different versions of the language. To create HTML
documents, you can use any text editor, an HTML converter, or an HTML editor. An HTML
converter is a program that translates text written in another language into HTML code. An
HTML editor is a program that helps you create an HTML file by inserting HTML codes for you
as you work.
Creating an HTML document
Before beginning to write the code, you will need to identify the document's key elements and
plan the overall appearance of your Web page. Elements within a Web page are any distinct
objects such as a paragraph, heading, and the page's title. An HTML file contains both
formatting tags and content. Document content is what the user sees on the page. Tags are the
HTML codes that control the appearance of the document content. There are two types of tags:
one-sided tags, which require only a single tag, and two-sided tags.
A one-sided tag allows you to insert noncharacter data into the Web page, such as a graphic or
a video clip. A two-sided tag contains an opening tag that tells the browser to turn on a feature
to be applied to the content, and a closing tag that turns off the feature. Tags are not case-
sensitive, but the current standard is to display all tags in lowercase letters. Examples of each
type of tag and their syntax can be found on page 9 of your textbook.
All documents written in a markup language need to have a root element that contains all of the
elements used in the document. The root element in HTML is <HTML>. HTML documents are
divided into two sections—the head element and the body element. The head element contains
information about the document. One of the elements you can add to the document head is the
document title. The body element contains all of the content that will appear on the Web page.
Within your HTML, you can include comments, which are notes that are viewable in the HTML
source, but not processed by a browser.
Working with Block-Level Elements
A block-level element contains content displayed in a separate section within the page, setting it
off from other blocks while inline elements are parts of the same block as its surrounding
content, such as words or phrases. The most common types of block-level elements are headings
and paragraphs. When the browser renders HTML code, it ignores the presence of white space
within the HTML text file. White space consists of blank spaces, tabs, and line breaks.
Heading elements are elements that contain the text of main headings on the Web page. HTML
supports six levels of headings, numbered <h1> through <h6>. The <h1> heading tag is the
largest and most prominent. Headings are always displayed within browsers in a bold font, and
by default, are left-aligned. The h1 through h6 elements are used to identify headings, but the
exact appearance of these headings depends on the browser and the device being used.
Another example of a block-level element is the paragraph (<p>) tag. When rendered in a
browser, paragraphs are started on a new line. In older HTML code, you might occasionally see
9
paragraphs marked with only the opening <p> tag but without a closing tag. In those situations,
the <p> tag marks the start of each new paragraph. While this convention is still accepted by
many browsers, it does violate HTML's syntax rules; if you want XHTML-compliant code, you
must include the closing tags.
Marking a List
HTML supports three kinds of lists: ordered, unordered, and definition. An ordered list is used to
display information in a numeric order. To create an ordered list, you use the <ol> element to
start the list, the </ol> element (1,2,3…) to end the list, and the <li> tags for each item in the list,
as shown on page 22 of your textbook. An unordered list is used (solid button) when the order of
specific elements are not as specific. The way in which you create an unordered list is exactly as
above, except that the <ol> tag is replaced with the <ul> tag (solid button). An example is shown
on page 23. By default, unordered lists appear as bulleted lists. You can also place one list inside
of another to create several levels of list items. The top level of the nested list contains the major
items, with each sublevel containing items of lesser importance. The third type of list is the
definition list. A definition list is a list of terms, each followed by a definition line that is
typically indented slightly to the right. The definition list uses <dl> (to start the list), <dt> (for
the term in the list), and <dd> (for the term definition).
Exploring Other Block-Level Elements
HTML supports several other block-level elements that you may find useful in your Web pages
such as the address element. Figure 1–25 on page 28 of your textbook describes each of the
block-level elements used in HTML.
Working with Inline Elements
Block-level elements place their content starting on a new line within the page. Another type of
element is an inline element, which marks a section of text within a block-level element. Inline
elements are often used to format characters and words. Inline elements used to bold or italicize
text are referred to as character formatting elements. An example showing how to use these two
elements is shown on page 31 of your textbook.
Sometimes you will want an element that represents a text block or a string of inline text without
it having any other meaning. HTML supports two types of generic elements: div and span. The
div element is used to mark general block-level content. The span element is used to mark
general inline content. Page elements can be organized into two types: logical elements and
physical elements. A logical element describes the nature of the enclosed content but not
necessarily how that content should appear. A physical element, on the other hand, describes
how content should appear but does not indicate the content's nature.
Using Element Attributes

10
Many markup tags contain attributes that control the use, behavior, and in some cases the
appearance of elements in the document. You apply an attribute to an element by adding it to
the element's markup tag using the syntax <element attribute1="value1" attribute2="value2" ...
>content</element>. One attribute that is associated with most elements is the id attribute, which
uniquely identifies the element in the Web page. Another important attribute is the style
attribute. If you want to change how the browser displays an element, you can use the style
attribute. Style rules are entered by specifying a style name followed by a colon and then a style
value. A demonstration showing how to apply styles is shown on page 35 of your textbook. One
way that HTML changed since its inception is to accommodate this new class of users was to
introduce presentational attributes, which are attributes that specifically describe how any
element should be rendered. Almost all presentational attributes are now deprecated in favor of
styles.
Working with Empty Elements
When the term empty element is used, it refers to those one-sided tags that were mentioned
earlier, such as images, horizontal lines(hr), and line breaks (br), which contain no content. Line
breaks (<br>) need to be placed within block-level elements such as paragraphs or headings. The
hr or horizontal rule element, which places a horizontal line across the Web page. Horizontal
rules are useful in breaking up a long Web page into topical sections.
Images are displayed within Web browsers as inline images. An inline image is an image that is
contained in a file separate from the HTML code, but is displayed directly on the Web page
when the page is accessed by a user. An inline image can be placed on a separate line or directly
within a line of text. The two most common formats for inline images are GIF (Graphic
Interchange Format) and JPEG (Joint Photographic Experts Group). To create an inline image,
you should use <img> tag along with the "src" attribute, which would identify the full location
path to the image. An example of how to use this tag is shown on pages 41–42 of your textbook.
Working with Character Sets and Special Characters
Occasionally, you will want to include special characters in your Web page that do not appear on
your keyboard. Each character set has a name. The character set representing the alphabet of
English characters is called ASCII (American Standard Code for Information Interchange). A
more extended character set called Latin-1 or the ISO 8859-1 character set supports 255
characters and can be used by most languages that employ the Latin alphabet, including English,
French, Spanish, and Italian. The most extended character set is Unicode, which can be used for
any of the world's languages, supporting up to 65,536 symbols. The most commonly used
character set on the Web is UTF-8, which is a compressed version of Unicode.
You can insert mathematical symbols or the copyright symbol into your HTML document. To
store a character set, browsers need to associate each symbol with a number in a process called
character encoding. The number is called the numeric character reference. Another way to
insert a special symbol is to use a character entity reference, in which a short memorable name is
used in place of the numeric character reference. One use of character codes is to insert text
about HTML itself. To create a special character, type an ampersand (&) followed by the code
11
name or the code number, and then a semicolon. Code numbers are preceded by a pound sign
(#). Figure 1–39 on page 45 shows some of the HTML symbols and the corresponding code
numbers or names.
Working with Character Sets and Special Characters
Occasionally, you will want to include special characters in your Web page that do not appear on
your keyboard. Each character set has a name. The character set representing the alphabet of
English characters is called ASCII (American Standard Code for Information Interchange). A
more extended character set called Latin-1 or the ISO 8859-1 character set supports 255
characters and can be used by most languages that employ the Latin alphabet, including English,
French, Spanish, and Italian. The most extended character set is Unicode, which can be used for
any of the world's languages, supporting up to 65,536 symbols. The most commonly used
character set on the Web is UTF-8, which is a compressed version of Unicode.
You can insert mathematical symbols or the copyright symbol into your HTML document. To
store a character set, browsers need to associate each symbol with a number in a process called
character encoding. The number is called the numeric character reference. Another way to insert
a special symbol is to use a character entity reference, in which a short memorable name is used
in place of the numeric character reference. One use of character codes is to insert text about
HTML itself. To create a special character, type an ampersand (&) followed by the code name
or the code number, and then a semicolon. Code numbers are preceded by a pound sign (#).
Figure 1–39 on page 45 shows some of the HTML symbols and the corresponding code numbers
or names.
To Do List
Here are the tasks you need to complete before the deadline
• Read my Instructor Notes:

Read through my Instructor Notes below - you can follow along as you read through the
tutorials.
• Read the Tutorial:
Read through Tutorial # 2 (pages 61 through 107), completing the hands-on labs
(activities in the beige boxes) as you go through the tutorial. By the end of this tutorial,
you will have completed a three page site that includes "home.htm, tips.htm &
glossary.htm" files.
• Complete your Assignment:
After you have finished the tutorial above, complete "Case Problem 1" - "uwlist.htm"
(page 110)
• FTP your assignments to the server:
Now you need to move the entire Tutorial.02 folder over to the student serrver inside
your secret folder..
• Always Verify your Files:
To verify you moved the file over correctly, visit the URL
http://student.tcc.fl.edu/cgs1820-001/youruseridhere/secretfolder and click on the link to
12
the assignment. If the file shows up in the browser - you did it correctly. If not, then start
troubleshooting.
• Additional Resources:
You may also read through the additional Resources below by clicking on the
PowerPoint Presentation Folder.
• Complete Quiz:
Finally, click on the "Q2" link below to begin the quiz for this week. - all Quizzes are
open book and can be repeated until the deadline. But always finish any quiz you start or
you will not get a grade.
Chapter 2:
Exploring Web Site Structures
Before you develop your HTML code for your site, especially its links, it is worthwhile to map
out exactly how you want the pages to relate to each other, using a technique known as
storyboarding. A storyboard is a diagram of a Web site's structure, showing all the pages in the
site and indicating how they are linked together. A well-designed structure ensures that users will
able to navigate the site without getting lost or missing important information.
Every Web site starts with a single home page that acts as a focal point for the Web site. One
way to layout a Web site is using a linear structure, in which each page is linked with the pages
that follow and precede it. An augmented linear structure is one in which each page contains an
additional link back to the main page. Another popular structure is the hierarchical structure, in
which the pages are linked going from the home page down to pages dedicated to specific topics.
Those pages, in turn, can be linked to even more specific topics. With larger and more complex
Web sites, you often need to use a combination of structures. In some cases, you might want to
supply your users with a site index, which is a page containing an outline of the entire site and its
contents. The same Web site design principles discussed here apply to a password protected
portion of a Web site as the regular, open section of the site.
Creating a Hypertext Link
A hypertext document contains hypertext links, which are items that you can select by clicking,
to view another topic or document (the destination of the link). Hypertext links are created by
enclosing some document content with a set of opening <a> and closing </a> tags. These links
can point to a page on the World Wide Web, a local file, an e-mail address, or a network server.
13
An example demonstrating the inclusion of a hyperlink within a Web page is shown on pages 68
through 69 of your textbook.
Specifying a Folder Path
When you specify only the filename in a link, the browser searches for the file in the same folder
as the document containing the hypertext link. As a site grows, you will most likely need to
include folders to organize your files. To create a link to a file located in a different folder than
the current document, you must specify the file's location, or path, so that browsers can find it.
HTML supports two kinds of paths: absolute and relative. An absolute path specifies a file's
precise location within a computer's entire folder structure. A relative path specifies a file's
location in relation to the location of the current document. To reference a different folder on
the same level of the folder tree, known as a sibling folder, you move up the folder tree using
the double period (..) and then down using the name of the sibling folder. Examples of each of
these types of paths can be found on pages 71 through 72 of your textbook.
Linking to Locations within Documents
To break a Web page into different sections, each having their own link, you will first need to
determine a way to identify those elements in the HTML document. To reference unique sections
in your HTML or XHTML document, you must assign the id attribute to elements. The names
of ids need to be unique as a browser will only recognize the first occurrence of duplicate names.
By adding ids to various sections of a document, you can then add hyperlinks to those sections
that when clicked, would tell the browser to automatically move to that location within the
document without requiring that the user scroll to the location.
• To create a link within a document, you enclose the content that you want to format as a
link in an anchor (<a>) tag, and use the href attribute (short for “Hypertext Reference”) to
identify the link target. When the <a> tag is used for linking, it is also often called the
link tag. To reference an id within your document, the value of the href attribute will start
with a # symbol and be followed by the id of the destination. Older browsers do not
support the use of ids as link destinations. For older browsers, to create the destination
text for the link, or the anchor, you need to specially mark the text using the <a> tag and
then assign each anchor its own anchor name, using the “name” attribute.
• To create a link between two documents, or Web pages, you use the same <a> tag with
the href attribute as you did when creating links within the same document. However,
unlike creating hypertext links between elements on the same page, this process does not
require you set an anchor in a file to link to it. The filename of the file serves as the
anchor or destination point for your link.
When you create a link to a Web page, it navigates to the top of the destination page. If you want
to navigate to a specific location within a document, you can set an anchor and a link to an
internal anchor within the document. You can combine what you learned earlier with the #
symbol and what you have learned in the examples above to create a link that looks like this: <a
href=”filename#id”> which will cause a browser to scroll down to the element with the given id
14
in the page specified by the filename when the link is clicked. An example of how to create such
a link is shown on pages 79 through 81 of your textbook.
Working with Linked Images and Image Maps
When you mark an inline image as a hypertext link, the entire image is linked to the same
destination file. HTML also allows you to divide an image into different zones, or hotspots, each
linked to a different destination. To define these hotspots, you create an image map that matches
a specified region of the inline image to a specific destination. HTML supports two kinds of
image maps: client-side image maps and server-side image maps. A client-side image map is an
image map that is handled entirely by the Web browser running on the user's computer as
demonstrated on pages 84 through 85 of your textbook. Hotspot coordinates are measured in
pixels, which are the smallest unit or dot in a digital image or display. To determine the
coordinates of a hotspot, you can use either a graphics program such as Adobe Photoshop or
image map software that automatically generates the HTML code for the hotspots you define. To
apply an image map to an image, you will add the usemap attribute to the inline image's <img>
tag.
The other type of image map you might encounter on the Web is a server-side image map, which
is stored on the Web server rather than entered into the HTML code of the Web page. When you
click a hotspot on a server-side image map, the coordinates of the mouse click are sent to the
server, which activates the corresponding link, downloading the page to your Web browser. The
server-side image map was the original HTML standard.
Linking to Resources on the Internet
To create a link to a document on the Internet, you need to know the URL of the document or
resource. A URL, or Uniform Resource Locator, specifies a precise location on the Web for a
file. You can find the URL of a Web page in the Location or Address box of your browser's
document window. The first part of the URL identifies the communication protocol, which is a
set of rules that governs how information is exchanged. Your Web browser communicates with
Web servers using the Hypertext Transfer Protocol or HTTP. A listing of the available protocols
for HTML linkages can be found on page 90 of your text. Following the communication
protocol, there is a separator, such as colon and two slashes. The rest of the URL identifies the
location of the document or resource on the Internet. By convention, if the path and filename are
left off the URL, the server will serve up the default home page found in the root folder of the
Web server. An example of adding a link to your Web pages can be found on pages 91 through
92 of your textbook.
The World Wide Web allows users to access several other types of Internet resources, such as
FTP servers, local files, or e-mail addresses. You can create a link to each object in the same way
that you do another Web page, if you know the URL for it. FTP Servers use the communication
protocol FTP, or File Transfer Protocol. FTP servers can store files that Internet users can
download, or transfer, to their computers. URLs for FTP servers follow the same format as Web
pages, except that they use the FTP protocol rather than the HTTP protocol. You can also link to
files stored locally on your computer or LAN by preceding the file's location with file://. A link
15
to a document would take the form file://server/path/filename where server is the name of the
computer that holds the file, the path is the folder hierarchy to the file, and filename is the name
of the particular file.
Many Web designers include their e-mail addresses on their Web pages. You can identify e-mail
addresses as hypertext links as well. When a user clicks the e-mail address, the browser starts
your default e-mail program and automatically inserts the e-mail address. The URL for an e-mail
address is "mailto:e-mail_address". One concern of linking your address on pages is the effect
on increasing spam. Spam is unsolicited junk e-mail sent to large numbers of people, promoting
products, services and in some cases, pornographic Web sites. Spammers create their lists by
scanning Usenet postings, stealing Internet mailing lists, and using programs called e-mail
harvesters that scan HTML from the Web looking for the e-mail addresses contained in mailto
URLs. Page 98 of your textbook gives suggestions on how to get around this problem while still
displaying your address on your Web pages.
Working with Hypertext Attributes
HTML provides several attributes to control the behavior and appearance of your links. One of
those is the window in which your browser opens a link when it is clicked. By default, each Web
page you open is displayed in the main browser window, replacing the one you were viewing
last. To force a document to appear in a new window, use the target attribute in the <a> tag. A
target attribute may have a "target" name, "_self" keyword, or "_blank" keyword. Each of
these are described on page 99 of your textbook.
If you want to provide additional information to your users, you can add a tooltip to your links. A
tooltip is descriptive text that appears whenever a user positions the mouse pointer over a link.
To add a tooltip to your link, add the title attribute to the <a> tag.
The text of a hypertext link should always describe the type of document that will be called up
by the link. You can also use the rel and rev attributes to add information about the link. The rel
attribute describes the relation of the current document to the linked document. The rev attribute
describes the reverse relationship: how the linked document views the current document. Links
containing the rel and rev attributes are called semantic links because the tag contains
information about the relationship between the link and its destination.
Using the Link Element
Another way to add a link to your document is to add a link element to the document's head.
Because the link element is placed in a document's head section, these links do not appear within
a browser's window and are used only by the browser. Link elements are traditionally used to
connect a style sheet to a Web page. Browsers such as Opera can use this tag to import custom
toolbars.
Working with Metadata

16
Optimizing a Web site for search engines can be a long and involved process. To be noticed on
the Web, a site needs to include information about itself so the search engines can read it and add
the site to their search indices. Information about the site is called metadata. For search engines,
you should include metadata describing the site and the topics it covers. This is done by adding a
meta element containing the site description and another meta element with a list of keywords.
An example demonstrating how to add metadata to a document is shown on page 105 of your
textbook.
Describing your document is not the only use of the meta element. You can add information and
commands to this communication stream with the meta element's http-equiv attribute. One
common use of the http-equiv attribute is to force the browser to refresh the Web page at timed
intervals, which is useful for Web sites that publish scoreboards or stock tickers. Another use of
the meta element is to redirect the browser from the current document to a new document.
Chpater 3
The Background Style
The various background styles can be combined into the following single style background:
color url(url) repeat attachment horizontal vertical where color, (url), repeat, attachment,
horizontal, and vertical are the values for the background style attributes that set the background
color and control the placement and tiling of a background image.
Floating an Element
Floating an element like an inline image causes the element to move out of the normal document
flow on the page, moving to a position along the left or right margins of the parent element. The
other elements on the Web page that are not floated are then moved up to occupy the position
previously occupied by the floating element. To float an element, apply the style float: position
where position is none (the default to turn off floating), left, or right. To prevent an element from
wrapping, apply the clear style clear: position where position is none (the default), left, right, or
both.
Working with the Box Model
CSS will allow you to treat each element on a page using what is called the box model, which is
composed of four sections:
17
• the margin between the element and other page content

• the border of the box containing the element content
• the padding between the element's content and the box border
• the content of the element itself
The size and appearance of these four sections determine how the element is displayed by the
browser and play an important role in determining the layout of the elements on the Web page.
CSS supports several styles to set the element margin, such as margin-top: length margin-right:
length margin-bottom: length margin-left: length where length is one of the CSS units of
measure discussed in the last session.
Padding is the space between the box around the block-level element and the border. Setting the
padding for an element is similar to setting margins in that you can use one of four styles:
padding-top, padding-right, padding-bottom, and padding-left. You can also using margin or
padding to combine the styles into a single style with style: top right bottom left where style is
margin or padding and top, right, bottom, and left would be replaced with a value. Since some
browsers treat items such as bulleted lists differently, to ensure you change the indentation for
the bullets in a list, you would need to set box the left margin and the left padding values.
Adding borders to page elements can make a page more attractive and easier to read. CSS allows
you to set an element's border width, color, and style. These styles can be applied to all four sides
of an element at once or to individual sides. Figure 3–45 on page 169 summarizes the different
border styles which are available for use. When talking about border widths, they are expressed
as either thin, medium, or thick. Border colors can be any color name or color value.
The final aspect of the box model that can be controlled with CSS styles is the box's width and
height. According to the CSS specifications, the width value does not take into account the size
of the margins, padding space, or borders but only applies to the actual content of the element.
To set the width of the element content, use the width style width: value where value is the width
of the content expressed in CSS units of measure. To set the height of the element content, use
the height style height: value where value is the height of the content expressed in CSS units of
measure.
Controlling Page Layout with div Containers
The <div> element is used to group blocks of text such as paragraphs, block quotes, headings, or
lists and treat them as a single element for positioning purposes. These text blocks are known as
block-level elements. Divs can be given IDs, which can then be assigned styles, such as float,
width, height, etc. There are several examples showing how to align elements within divs on
pages 175 through 179 of your textbook.
Setting the Display Style
CSS allows you to change the display style applied to any element, which would make inline
elements appear as block-level elements and vice versa. The syntax for the display style is
18
display: type where type can be any one of the values as shown in Figure 3–59 on page 180 of
your textbook. The use of this type of setting can help improve a page's appearance and at the
same time, move the formatting for the appearance to the style sheet. One example of such
formatting that can be used this way would be to include display: block as a style for links,
which would move each of your links to a new line, or new block, when your page is displayed.
Chapter 5:
Introducing Web Tables
Each table in a Web page follows a basic structure consisting of the table element and a
collection of table rows nested in the table element. A table is marked with the <table> tag and
each row is designed with the <tr> tag. Note that the dimension of a Web table is defined by the
number of rows and the number of cells within the rows. There is no HTML element to mark a
table column. An example demonstrating a simple table can be found on page 274 of your
textbook.
There are two types of table cells: those that contain headings and those that contain data. The
two tags are different so that the headings in a table are formatted differently than the rest of the
cells. Table headings, the cells that identify the contents of a row or column, are marked using a
<th> tag. The other type of table cells is data cells, which are marked with the <td> tag and are
used for any content that is not considered a heading. By default, there are no gridlines displayed
in a Web table, making it difficult to see the table structure. To add gridlines, add the
border="value" attribute to the table element, as demonstrated on page 278 of your textbook.
Spanning Rows and Columns

19
To merge several HTML table cells into a single cell, you can create what is called a spanning
cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning
cells are created by inserting the rowspan or colspan attributes into a <td> or <th> tag. The
colspan and rowspan values are expressed as the number of columns or rows in the spanning cell
of the table. The spanning starts in the cell where you put the rowspan and colspan attributes and
goes downward and to the right from that cell. When a cell spans several rows or columns, you
must adjust the overall number of cell tags used within that table's affected row or column, or
both. There are several examples spanning pages 280 through 284 of your textbook that
demonstrate this concept.
Creating a Table Caption
Table captions are another part of the basic table structure and are marked using the caption
element placed immediately within the opening table tag. Only one caption is allowed per Web
table and the <caption> tag must be listed directly after the opening <table> tag. The caption is
treated as a block-level element, placed directly above the table, but you can change the
placement of the caption using the align attribute, as demonstrated on page 285 of your textbook.
Marking Row Groups
You can divide a table's rows into row groups, in which each group element contains different
types of content and can be formatted differently. HTML supports three row groups: one to mark
the header rows, another for the body rows, and a third for the footer rows. Order is important.
The thead element must appear first, and then the tfoot element, and finally the tbody element. A
table can contain only one set of thead and tfoot elements, but it can have any number of tbody
elements. One purpose of row groups is to allow you to create different styles for groups of rows
in your table. An example showing the use of row groups is shown on page 287 of your
textbook.
Marking Column Groups
Another way that you can organize your tables is through the creation of column groups to
organize columns and format one or more columns with a single style declaration. Column
groups give you the ability to assign a common format to all of the cells within a given column.
The number of col elements must match the number of columns in the Web table. Once you
create a column group, you can add id or class attributes to identify or classify individual
columns. The col element also supports the span attribute, allowing a column reference to cover
several table columns. An example showing the use of column groups is shown on page 290 of
your textbook.
Adding a Table Summary
Nonvisual browsers cannot display tables. While a caption and the surrounding page text usually
provide clues about the table and its contents, the summary attribute when added to the table
element allows you to include a more detailed description.
20
Formatting Tables with HTML Attributes
There are two approaches to formatting Web tables. One is to use HTML attributes, and the other
is to use CSS styles. Web tables are one of the older HTML page elements, predating the
introduction of cascading style sheets. Because of this, HTML has long supported several
attributes controlling a table's layout and appearance. To control the amount of space between
table cells, you would add the cellspacing attribute to the table element. Related to cell spacing is
cell padding, which is the space between the cell contents and the cell border and is noted by the
cellpadding attribute. Cell spacing and cell padding are demonstrated on page 294 of your
textbook.
You can also use HTML to set the overall width and height of the table, and of the individual
cells within the table. By default, the width of tables will range from the minimum necessary to
display all the cell contents without the line wrapping up to the width of the container element.
To set the width of the table to a specific value, add the width attribute to the table element. You
can still never reduce a table to a width smaller than is required to display the content or larger
than the width of its container. Many browsers also support the height attribute added to the table
element. You can also set the width of individual columns by applying the width attribute to
either an individual column or a column group. Similarly, you can use HTML to set the row
heights by applying the height attribute to the tr element.
The placement of a table's borders can be modified using table frames and table rules. A table
frame specifies which sides of the table (or which sides of the table cells) will have borders. The
various values of the frame attribute that can be added to the table element are shown in Figure
5–26 on page 296 of your textbook. A table rule specifies how the internal gridlines are drawn
within the table, controlled by adding the rules attribute to the table element as demonstrated in
Figure 5–28 on page 297 of your textbook. By combining frame and rules values, you can
duplicate many of the same effects you could achieve using the CSS border-style property.
By default, browsers horizontally center the contents of table header cells and left-align the
contents of table data cells. You can specify a different horizontal alignment using the align
attribute within table rows, row groups, columns, column groups, or individual table cells. When
you apply the align attribute to the table element, it aligns the entire table with the surrounding
page content but does not affect the alignment of the cells within the table. You can also use
HTML to vertically align the contents of each table cell. The default is to place the text in the
middle of the cell. To choose a different placement you would use the valign attribute.
Formatting Tables with CSS
Starting with CSS2, Cascading Style Sheets included support for Web tables. Web tables use the
same CSS border styles that other page elements use in previous tutorials. Unlike the HTML
border attribute, you can apply one set of borders to the Web table itself and another set of
borders to the individual cells within the table. CSS provides for two ways of drawing the table
borders with the default being to draw separate borders around the table cells and the entire table.
The other approach is to collapse the borders in upon each other. Both of these concepts are
demonstrated on page 301 of your textbook. One of the key differences between the separate and
21
collapse border models is that under the separate border model you can only apply borders to the
table itself or to table cells. Under the collapse border model, any table object can have a border,
including table rows, row groups, columns, and column groups. The separate borders model,
therefore, has the same effect as the HTML cellspacing attribute in providing additional space
between table cells. Although the collapse model appears more complicated at first, the rules are
reasonable and allow for a wide variety of border designs. This concept is demonstrated on pages
303 through 304 of your textbook.
Table objects, like other parts of CSS, have levels of precedence in which the more specific
object has priority over the more general. The most general styles are those applied to the entire
table. Those styles are overruled by styles that are applied to column groups and then to columns.
The next level up in precedence contains those styles applied to row groups and then rows. The
highest level of precedence is given to those styles applied to table cells. An example
demonstrating precedence and how to apply background styles to table cells is contained on
Recall that browsers will set the table width to efficiently use the page space, never making
tables wider than necessary to display the content. You can use the CSS width style to specify a
different table size. You can set column widths using the same width style you applied to the
table itself. Style widths are expressed either in a CSS unit of measure or as a percentage of the
entire width of the table. Heights are set using the CSS height style. You can apply heights to
entire table rows or individual table cells. You can also use the height style to set the height of
the entire table.
Remember that browsers usually place captions above the table, but you can specify the caption
location using the caption-side style. To horizontally align the caption text you use the CSS text-
align style. An example demonstrating the positioning of a caption can be found on pages 309
Applying Table Styles to Other Page Elements
Tables are useful for displaying information in an organized structure of rows and columns that
they are not limited to Web tables. Using the CSS display style, you can apply the table layout to
other HTML elements, such as paragraphs, block quotes, or lists as described in Figure 5-51 on
page 311 of your textbook. The reason for this is that HTML is designed to mark content, but not
indicate how that content should be rendered by the browser, meaning this is done so that the
original tags do not lose their meaning. As long as the markup tags are nested in a way that
mimics the table structure, it does not matter if they are table tags or not. You can display them
as tables using CSS.
Using Tables for Page Layout
The table element was originally introduced in HTML to simply display tabular data, but now
has become a popular way to organize inline images, headings, paragraph text, lists, and other
tables. One of the most basic Web page layouts is to place the entire contents of the page within
a table that is centered on a page. If you do this and specify different background colors for the
22
page and table, your page will give the effect of a printed page being displayed against a colored
background.
Tables support a wide variety of possible page layouts. One such layout is the jigsaw layout, so
called because it involves breaking up the page content into separate table cells that are then
joined together like pieces in a jigsaw puzzle. An example is shown in Figure 5–56 on page 315
where the page's content is actually 14 different table cells. In this example, only the center cell
will contain content and the remaining cells will be used to display the outside borders to help
shape the appearance of a rounded box. In a jigsaw layout, you do not want any seams to appear
between the cells, so you have to collapse the table borders and set the cell padding to 0 pixels.
Because the box will vary in width and height depending on its content, the different cells need
to be free to move in different directions. The left and right sides should expand in the vertical
direction to accommodate the table content, while the top and bottom sides should expand
horizontally. The four corner cells are fixed in size and should not expand or contract based on
the table content. Even though the process may appear lengthy, it would be very beneficial to
read through the examples demonstrating this concept on pages 316 through 324 of your
textbook. The advantage of the table design you have created is that it's flexible and will expand
to match the content you place in the center cell.
Exploring the Controversy over Table Layouts
Using Web tables for page layout predates the introduction of CSS, and for many years the
technique was one of the essential tools of the Web page designer. However, this changed with
the introduction of CSS, which held the promise of simplifying the process of Web page design.
As browsers began to support CSS and in particular the CSS positioning styles, Web designers
began to advise against using Web tables for page layout for reasons such as:
• Table layouts are not in the spirit of HTML

• Table layouts are difficult to revise
• Tables take longer to render
• Tables can be code-heavy
• Tables can be inaccessible to users with disabilities
With the current strong browser support for CSS, there is less reason to use tables for page
layout. In fact, the jigsaw layout shown earlier could also be done using div containers
positioned on the Web page with CSS. Even so, Web table layouts will not disappear
immediately, so Web page designers must be conversant with both approaches
Creating a Rounded Box Using div Containers
As an alternative to the jigsaw layout with tables, you will learn that there are actually hundreds
of techniques that Web designers have developed over the years to create rounded borders
without using tables. The basic idea of one approach is to nest several levels of div elements
within one another. Since the div elements have no padding and no margin spaces, they will be
completely superimposed upon one another—creating a stack of div elements that all occupy the
same space on the Web page. Because they're stacked on top of each other, when these div
23
elements are displayed by the browser, any background image from an element lower in the
stack will be visible as long as it is not obstructed by another background image higher in the
stack. This concept is demonstrated on pages 327 through 329 of your textbook.
Chapter 6
Introducing Web Forms:
Web forms can be added to Web pages to collect information. Each piece of information for a
form is stored in a field, and the value itself is known as the field value. Users enter or select a
field value using control elements, which are buttons, boxes, lists, and so on, that provide a way
of associating a field value with a particular field. HTML supports the following control
elements: input boxes, option (radio) buttons, selection lists, check boxes, and text areas.
Web forms have the capability of sending information to a program running on a Web server for
processing purposes. These server processing programs have made it possible to insert
information about people into databases, process e-commerce orders, and to generate online
discussion forums for Web pages. Not everyone will have access to the programs necessary to
process Web forms because of the direct interaction with the server. Server-based programs are
written in a variety of languages. The earliest and most common of these languages are called
Common Gateway Interface (CGI) scripts, written in a language called Perl. Other popular
24
languages widely used today for writing server-based programs include: ASP, ColdFusion, C/C+
+, PHP, and VBScript. The language you would use to create server-based programs depends on
what your server supports.
Creating a Web Form:
Web forms are created through the form element, which has the structure <form attributes>
elements </form>. Attributes control how the form is processed, including how the data is
transferred to the server, the location of the server processing program, etc. Two of the attributes
that should be included to identify the form, but do the same thing, are the id attribute, which is
the newer HTML/XHTML standard, and the name attribute, which is still needed for older
browser support.
Creating a field set:
As mentioned previously, a form's elements are the data to be collected by the form, with each
control element being called a field. One way of organizing a form is to group similar fields into
field sets. When rendered by the browser, a field set usually appears as a box surrounding the
fields, separating those fields from other field sets, as demonstrated on page 351 of your
textbook. Every field set can contain a legend describing its contents. Field sets are block-level
elements that expand to accommodate their content.
Most of the control elements in which users either type or select a data value are marked as input
elements. The syntax for an input element is <input type="type" name="name" id="id" /> where
type can be one of 10 input types as described on page 353 of your textbook. The exact
appearance of each control element varies among browsers and operating systems.
Creating a input box:
To create an input, or text box, set the type of the input box to text. If the type attribute is
omitted, text is the default type. When a form is submitted to the server, the server program
receives the data in name/ value pairs in which the name or id of each field is paired with
whatever field value is entered into the corresponding control element. The names for the control
elements do not have to match the labels you place beside the fields on the Web page, but be
aware that many servers are case sensitive, meaning EMAIL could be different from email for an
element's name.
Adding field labels:
Nothing in the HTML code explicitly associates the text with an input box. To associate text
with a control element, you can use the label element in the form <label for="id">label
text</label>. The id would equal the id attribute of the particular form field. This allows a user to
click either on a form element or a label to have their cursor placed directly into that field's entry
box.
Working with Form Styles and HTML Attributes:

25
Placing labels and control elements in separate columns is a common form layout, and has
usually been done with Web tables. However, instead of a Web table, you may want to lay out
the form using positioning styles placed in an external style sheet. This has the advantage of
making it easier to modify the form layout later on because you will not have to modify the
markup code in the HTML file. Examples demonstrating this basic technique are shown on
By adding additional styles, you can control the width of an input text element. By adding
additional attributes to the input element, you can control the maximum number of characters
and default value of input boxes. By default, all input boxes are 20 characters wide. To change
the size of an input box, simply associate a width style with the id of the particular input element.
Even so, setting the width of a text box does not limit the number of characters the box can hold,
so if a user enters text longer then the box's width, the text scrolls to the left. To limit the number
of characters to be entered, use the maxlength attribute within the <input> element. To define a
default value for a field you can add the value attribute of the <input> element. Default values
can save time and increase accuracy for users of your Web site.
Creating option buttons:
Option buttons, also called radio buttons, allow users to select a data value from a limited set of
possible values. With option buttons, users can select only one button at a time from a group.
You create a radio button by using the <input> element with the radio type, name (not optional)
attribute specifying the group the radio button belongs to, and value attribute indicating the value
sent to the server if a user selects that particular radio button. The general syntax is <input
type="radio" name="name" id="id" value="value" />. When a group of option buttons share the
same name, this puts them in a group—so that selecting one option button automatically
deselects all of the others. Examples demonstrating the creation and use of radio buttons are
contained on pages 367 through 369 of your textbook.
Creating a selection list:
A selection list is a list box from which a user selects a particular value or set of values, used
when the user should be presented with a fixed set of possible responses. You create a selection
list using the <select> element, and the individual selection items with the <option> element.
Examples showing how to add a simple selection box to a Web form is shown on pages 373
Although the first text entry is displayed in a selection list, this is not a default value for the list.
To specify which of the options should be selected by default, add <selected="selected"> to the
option element. In a selection list, the options are presented in the same order as they appear in
the HTML code. In long selection lists it might be difficult for users to locate a particular option
value. You can organize the selection list options by placing them in option groups using the
optgroup element. By default, selection lists display only the currently selected option value.
You can change the number of options displayed by applying the size attribute to the select
element. If the size is greater than 1, the selection box changes from a drop-down list box to a list
box with a scroll bar.
26
Adding the multiple="multiple" attribute to the <select> element allows multiple selections from
a list when they hold down an access key while making selections. In Windows, the access key
for multiple, noncontinuous selections is Control. For a contiguous selection, a user would click
the first item and then while holding Shift, click the last item.
By default, the form sends the value displayed in the list for each item to the server, but
sometimes, you may only want to receive an abbreviation or code representing the user's
selection(s). If this is the case, you can specify the value sent to the server by adding the value
attribute to an option element. You can also specify a default selection in the list by adding the
<selected="selected"> attribute to an option element.
Working with a check box:
You can create a check box using the <input> element with the checkbox type attribute. The
name, id, and value attributes are added to a check box's input element similar to how they are
with an option button. As with input boxes and option buttons, check boxes do not display any
text and there is only one check box per field. You add text or a label next to the <input> element
to describe the purpose of the check box. Check boxes are not selected by default, but you can
change this by adding the checked="checked" attribute to the check box's input element. The
value attribute contains the value of the field when the check box is checked. If no value is
provided, the value On is used by default.
http://www.csszengarden.com
Chapter 8
Frames: Web site designers often want to duplicate information on each page of their site.
However, as a Web site grows in size and complexity, duplicating information across the Web
site can present problems as it would require a great deal of time and effort to repeat the same
information over and over again. Also, each time a change is required, you need to repeat your
edit for each page in the site. To work around this issue, Web site designers can use frames,
which are sections of the browser window capable of displaying the contents of an entire Web
page. A common use of frames is to display a table of contents for a site in one frame and the
contents in another frame.
Even though frames sound all well and good, there are some drawbacks of using frames. One
consequence of a frame-based Web site is that the browser has to load multiple HTML files
before a user can view the contents of the site. Another drawback is that a particular page within
a Web site may be difficult to bookmark. Also, some search engines do not handle frames-based
pages well.
27
Planning frames: Before using frames, it is recommended that you spend some time planning
what you will want to do with frames. Issues to consider include:
• what will be contained in each frame

• how frames will be placed on the page and at what size
• which frames respond to clicks
• which frames are static in content
• what page will users first see upon entering the site
• if users can resize the frames or not
An example layout showing the use of three frames-one as a logo, one for a table of contents,
and one for the content-is shown in Figure 8-4 on page 483 of your textbook.
Creating frameset: There are two HTML elements used to create pages with HTML frames.
The <frameset> tag is used to store the definition of the various frames in the file, providing
definitions on how the frames are organized and displayed within a browser window. The frame
element defines which document is displayed within a frame. The general syntax used to create a
frameset is shown on page 483 of your textbook. It is worthy to note that the frameset element
replaces the body element in the HTML document because the frameset page actually does not
display HTML content.
To create a frame layout, you use the rows and cols attributes of the <frameset> tag. The rows
attribute creates a row of frames, whereas the cols attribute creates a column of frames. You
cannot use both attributes within a single <frameset> tag, but there is no limit to the number of
rows or columns you can specify for a frameset. Row and column sizes can be specified in
pixels, as a percentage of the total size of the frameset, or by an asterisk (*). The asterisk
instructs the browser to allocate any unclaimed space in the frameset to the particular row or
column. If you use multiple asterisks, the browser divides the remaining display space equally
among the frames with the asterisks. For example, the tag <frameset rows="160, *"> creates two
rows of frames, the first being 160 pixels high and the last the height of the remaining space in
the browser window. It is recommended that you specify at least one of the rows or columns with
an asterisk to ensure that the frames fill up the screen no matter what a user's monitor is set to
display.
To specify the source for a particular frame, you will insert the <frame> element with the src
attribute between the opening and closing <frameset> tags. An example showing the creation of
a frameset and a frame source can be found on pages 487 through 488 of your textbook.
Since you cannot create a frameset with rows and columns, to create a layout with frames and
columns, you will have to nest one frameset within another. When doing this, the percentages
that you use to specify frame sizes will represent the height or width of the frame in which that
row or column is located. An example showing the nesting of frames can be found on pages 488
28
Formatting a frame: When creating frames, you can control three attributes: the appearance of
scroll bars, the size of the margin between the source document and the frame border, and
whether or not users are allowed to change the frame size.
By default, a scrollbar is displayed with a frame when the content will not fit within a frame's
window. You can override this setting using the scrolling attribute of the frame element with
scrolling="type"where type can be either yes (to always display a scroll bar) or no (to never
display a scroll bar). Be sure that you only remove scrollbars when you know that the contents of
a frame will fit within the display area given to the frame.
You control the spacing between a frame's border and its content by specifying the margin sizes
for a frame. The attribute for specifying margin sizes for a frame is marginheight="value"
marginwidth="value" where the marginheight value specifies the amount of space, in pixels,
above and below the frame source, and the marginwidth value specifies the amount of space to
the left and right of the frame source. Setting the margin values is usually a trial and error
process to see what looks the best with your content.
By default, users can resize frame borders while viewing a Web page that uses frames by
dragging a frame border within their browser window. If you wish to lock the size of frames on
your page and disallow resizing, you can add the noresize="noresize" attribute to your frame
element.
Working with frames and links: By default, clicking a hyperlink within a frame will open the
linked file inside that same frame. When you want to control the behavior of hyperlinks within a
frame-based page, you will need to give each frame on the page a name, and then point each
hyperlink to one of those named frames. Pointing a hyperlink to a particular frame is called the
hyperlink's target. To assign a name to a frame, add the name attribute to the frame element in
the form <frame src="url" name="name" />.
Similarly to how you used the target attribute with links to open a page in a new window, you
can use the target attribute to open a page in a specific frame. To open a link in a specific frame,
you add the target attribute to the a href link element with target="name" where name is the
name that was assigned to the destination frame in your Web page, as demonstrated on page 497
of your textbook. If you wish to identify a default target for all of the hyperlinks in a particular
page, you can add the <base> element within the <head> tags of your HTML file. The <base>
element is useful when your page contains a large number of hypertext links that all point to the
same target. Even when using the base element, the target in the <a> element will override any
target specified in the <base> element.
Using Reserved Target Names: Reserved target names are special names that can be used in
place of a frame name as the target. They are used when the name of the frame is unavailable,
when you want the page to appear in a new window, or when you want to replace the current
browser window. All reserved target names begin with the underscore character ( _ ) and the
most common reserved target names include: _blank, _self, _parent, and _top, which are each
described in Figure 8-22 on page 499 of your textbook. These reserved target names are case-
sensitive and must be entered in lowercase. Examples demonstrating the various uses for the
29
reserved target names can be found on pages 499 through 502 of your textbook. It is important to
note that the _top target should be used when you are linking to pages outside of your Web site.
Using the noframes Element: To allow your Web site to be viewable through browsers that do
not support frames and those that do, you can use the <noframes> element within your frames
page. This creates a section of your HTML file containing code for browsers incapable of
viewing frames, called frame-blind browsers.
When a browser that does not support frames processes this HTML code, it ignores the
<frameset> and <noframes> elements. When you use the <noframes> element, you must include
the <body> tag. If you want to use your framed version with the frame-blind browsers, place
your HTML code, including the <body> tags, within a pair of <noframes> tags as demonstrated
on pages 504 through 505 of your textbook.
Working with Frame Borders: With some browsers, there are additional attributes you can
apply to the <frame> element to allow you to change a frame's border size and appearance. To
change the color of a frame's border, you can add the bordercolor attribute. The attribute can be
applied either to an entire set of frames, using the <frameset> tag, or to individual frames, using
the <frame> tag. When you apply these tags and attributes to your Web page, you should always
view the page using different browsers to ensure they work properly.
You can also change the border width using the border attribute. This attribute can be only used
in the <frameset> tag, and not in individual <frame> tags. To see how this attribute affects the
appearance of your Web page, remove the frame borders by setting the frameborder attribute's
value to 0. The frameborder attribute can take a value of 1 or 0, either displaying borders or
hiding them and can be applied to individual frame elements. The borders should be removed if
you want to create the impression of a seamless page or want to create more space for your text
and images while maintaining frames within your site.
Creating Inline Frames: A floating frame, or inline frame, is displayed as a separate box or
window within a Web page. To place the frame within a Web page, you use the <iframe>
element in much the same way that you add an image to a Web page. The syntax for a floating
frame is <iframe src="url"> alternate content </iframe where url is the URL of the document you
want displayed in the inline frame and alternate content is the content you want displayed by
browsers that do not support inline frames. Figure 8-34 on page 510 of your textbook
summarizes some of the attributes that you may use that are associated with inline frames. An
example demonstrating the use of an inline frame can be found on pages 511 through 513 of
your textbook.
30
Chapter 9
Introducing XHTML:
To appreciate XHTML, it is appropriate to study the history of the language. Standard

Generalized Markup Language (SGML) was introduced in the late 1980s to be a device-
independent and system-independent language. HTML is a product of SGML. As has been
covered in previous tutorials, HTML is the language that has shaped the World Wide Web. A
problem with HTML is that Web browsers began to develop their own flavors of HTML. Some
extensions produced by browser manufactures are still not capable of being used across multiple
browsers, resulting in competing standards. Also, browsers do not enforce all standards, giving
way to beginning Web page designers, but at the expense of affecting page and browser design.
Due partly to these reasons, the need arose for the development of a standard language for Web
developers. The first of these languages is XML.
31
Extensible Markup Language, or XML, can be thought of as SGML Lite. XML has been used to
create other languages, including MathML and CML. XHTML is HTML that has been written in
XML. The W3C now maintains standards for XHTML at version 1.1 with versions 2.0 and 5.0
already in the works.
Creating Well-formed XHTML Documents:
XML documents must be parsed with an XML parser to be evaluated. This parser checks for
syntax and content problems. A document with correct syntax is known as a well-formed or valid
document. XML parsers reject XML document that are not well-formed, whereas browsers
forgive errors in HTML.
It is important to understand the rules for forming well-formed XHTML documents. Seven rules
for XHTML are shown in Figure 9-6 on page 531 of your textbook. Another important rule is
that the root element of XHTML is the html element and all other elements in a document must
be contained within this root element. XHTML also does not allow for attribute minimization,
which is allowed in HTML. An example of attribute minimization in HTML is using compact as
an attribute by itself. The common rule is to use the name of the attribute as its value when
updating HTML documents to XHTML, such as compact="compact".
Creating Valid XHTML documents:
A valid document is a well-formed document that also contains only approved elements,
attributes, and other features of the language. Document developers create rules for determining
the validity of a document called the document type definition (DTD). Three DTDs are
associated with XHTML: transitional, frameset, and strict, with each explained in detail on page
533 of your textbook. Which DTD you would choose to develop an XHTML document depends
on the needs of your users. If you are needing to support older browsers, select transitional
because it recognizes deprecated elements and attributes. If you only need to support newer
browsers, and weed out deprecated elements, use strict. A listing of the elements that are not
supported by the strict DTD are listed on page 534 of your textbook. The frameset DTD supports
all of those deprecated elements, plus the frame, frameset, and noframes elements. Each of the
three DTDs requires the html, head, title, and body elements to be present in every XHTML
document.
Similar to elements, there is also a proper way to use attributes of HTML elements in XHTML.
A listing of attributes that are not allowed in the strict DTD are shown in Figure 9-10 on page
536. For example, instead of using align="left" to specify the alignment of an image, you would
use a style in the form style="float: left". The strict DTD also requires the use of the id attribute
in the place of the name attribute for the a, form, img, and map elements. Transitional and
frameset DTDs also require the id attribute, but do not reject documents that do not conform.
Some elements require certain attributes to be present. A listing of those elements and their
required attributes are found in Figure 9-11 on page 537. To specify which DTD is used by the
XHTML document, you add a DOCTYPE declaration directly after the XML prolog as
demonstrated on page 539 of your textbook.
32
Setting the XHTML Namespace
Recall from the history of HTML that browser developers dealt with the issue of needing new
features in their documents by adding extensions to the HTML language. XML (and through it,
XHTML) deals with this problem by allowing elements and attributes from several different
XML-based languages to be combined within a single document. This is done through the use of
a namespace, which is a unique identifier for the element sand attributes originating from a
particular document type. The default namespace is the namespace applied to the root element
and any element within it. To use a namespace, you add xmlns="namespace" to the root element.
In the case of XHTML, the root element is html, and its namespace would make it read <html
xmlns="http://www.w3.org/1999/xhtml">. The namespace in this case appears to be a URL, but
is treated as a unique string used to identify XHTML. You can also include multiple namespaces
with prefixes in the form xmlns:prefix="namespace". When using a prefix, you can then use this
prefix with the name of the element that is specific to that namespace. An example of how to do
this, combining XHTML and MathML in a single document is shown on page 541 of your
textbook.
Testing under XHTML Transitional
Once you have created an XHTML document, you will need to test it by sending it through an
XML parser or XHTML validator, such as the one listed on the W3C Web site at
http://validator.w3.org/. Often times, multiple mistakes reported by such a validator will be
related to the same error. It is best to fix the most obvious mistakes first to reduce the size of the
list. As a tip, if the validator reports that an end tag is missing for an element, it means that either
a two-sided tag is missing an end tag or a one-sided tag was improperly entered. An example
demonstrating how to submit a document to the validator is contained on pages 542 through 543
of your textbook.
Testing Under XHTML Strict
Many errors that are specified when using the strict DTD can be fixed by using style sheets.
Once you have a document that passes the validation test, you can make a note of it on your Web
page by including the W3C code as shown on page 551 of your textbook. On pages 544 through
551 of your textbook, there are several examples given of invalid XHTML code and how to fix
that code while using the validator.
Using Style Sheets and XHTML
Although XHTML and HTML files are simple text documents, not all text is the same. Browsers
and parsers distinguish between two types of text: parsed character data and unparsed character
data. Parsed character data, or PCDATA, is text that is processed by a browser or parser. With
PCDATA, you cannot use special symbols and expect them to be displayed by the browser. For
example, if you wanted to display a < or & character, you would have to use the HTML
character code < or & because the < and & have their own meaning in XHTML.
33
Unparsed character data or CDATA, is text that is not processed by the browser or parser. You
can use CDATA without worry of the data being misinterpreted. Most elements in XHTML
contain PCDATA.
Embedded style sheets are also treated as PCDATA. This can cause problems if the style sheet
has characters that may be processed by the parser. Some parsers invalidate documents
containing special characters within a style sheet. You can avoid this type of problem by placing
a CDATA section within a style sheet so that the text is treated as CDATA instead of the default
PCDATA. The syntax for such a section is <![CDATA[text]]> which would be entered between
the <style> and </style> elements. Even though this is possible and creates a workaround, some
browsers do not understand the CDATA section, which can cause problems in displaying your
page.
Chapter 10:
Introducing JavaScript
This tutorial introduces you to JavaScript by putting you through an example of its usage to help
combat spam. Spam is essentially junk e-mail—messages that advertise products and services
not requested by the recipient. A spammer is a person who sends these unsolicited e-mails,
sometimes in bulk e-mailings involving tens of thousands of recipients. One way that spammers
collect e-mail addresses is through the use of e-mail harvesters. An e-mail harvester is a program
that scans documents, usually Web pages, looking for e-mail addresses. JavaScript can be used
to help prevent spam by jumbling e-mail addresses in a page's code but displaying them correctly
to the user viewing the page in a browser.
Programming on the Web comes in two types: server-side programming and client-side
programming. In server-side programming, a program is placed on the server that hosts a Web
34
site and that program is then used to modify the contents and structure of Web pages. Server-side
programs use Web server resources, and in some cases a server's system administrator might
place limitations on access to server-side programs to prevent users from continually accessing
the server and potentially overloading it. Client-side programming solves many of these
problems by running programs on each user's computer rather than remotely off the server.
Computing is thereby distributed so that the server is not overloaded with program-related
requests.
A team of developers from Netscape and Sun Microsystems created a subset of Java called
JavaScript, which was different from Java in several important ways. JavaScript is an interpreted
language, meaning that the program code is executed directly without compiling. Figure 10-7 on
page 569 of your textbook lists additional differences. You need only two things to use
JavaScript:
• a text editor to write the JavaScript commands

• a Web browser to run the commands and display the results
This means that JavaScript code can be inserted directly into an HTML or XHTML file, or
placed in a separate text file that is linked to the Web page. An international body called the
European Computer Manufacturers Association (ECMA) is in charge of developing the standard
for the language, officially called ECMAScript—though browsers still refer to it as JavaScript.
Working with the Script Element
The Web browser runs a JavaScript program when the Web page is first loaded, or in response to
an event such as the user clicking a button on a Web page form or positioning the pointer over a
hypertext link. JavaScript programs can either be placed directly into the HTML file or they can
be saved in external files which are referenced from HTML. Placing the program in an external
file allows you to hide the program code from the user, and also to reuse the same code in
multiple pages of your Web site.
When you place JavaScript code directly into an HTML file, you place the script within the
<script> element. The <script> element is a two-sided tag that identifies the beginning and end
of a client-side program in the form <script type="mime-type"> script commands </script>. The
mime-type for JavaScript is "text/javascript". Script elements are processed in the order in which
they appear within an HTML file; there is no limit to the number of script elements that you can
use within a Web page. Every JavaScript program consists of a series of statements. Each
statement—also known as a command—is a single line that indicates an action for the browser to
take.
Because JavaScript is transmitted within the body of the document, XHTML validators treat it as
PCDATA (see Tutorial 9). Because special symbols are often used in programming, you should
force the interpretation of JavaScript by including it in a CDATA section, which is described on
page 571 of your textbook.
Writing Output to a Web Document

35
To use JavaScript to output content to a Web document, you use the document.write("text");
method. As demonstrated in the example on page 572, the placement of the script element tells
the browser where to place the new text. This method reflects the object-oriented nature of the
JavaScript language. An object-oriented language accomplishes tasks by manipulating either pre-
made or custom developed objects. An object is any item—from the browser window itself to a
document displayed in the browser to an element displayed within the document. A method is a
process by which JavaScript manipulates or acts upon the properties of an object.
You can also include HTML tags in the text string to format the text and to insert images. The
text string specified by the document.write() method can be enclosed within either double or
single quotation marks. Note that each JavaScript command line ends with a semicolon to
separate it from the next command line in the program.
Understanding JavaScript Syntax
It should be noted, however, that most JavaScript commands and names are case-sensitive. Like
HTML, JavaScript ignores most occurrences of extra white space so you can indent your code to
make it easier to read. However, a line break cannot be placed within the name of a JavaScript
command or within a quoted text string without causing an error in the code. If you must break a
string over multiple lines, the + symbol is used to do so as demonstrated on page 576 of your
textbook. When a browser does not support the <script> element, you should have an alternative
specified with a <noscript> element. The noscript element is a two-sided tag and if the script
element is not supported, HTML placed between the tags is displayed.
Working with Variables
A variable is a named element in a program that stores information. Declaring a variable tells the
JavaScript interpreter to reserve memory space for the variable. The statement to declare a
variable is var variable;. Once a variable has been created or declared, you can assign it a value.
The statement to assign a value to a variable is variable=value;. A quick example showing how
to declare and use a variable is shown on page 579 of your textbook.
There are restrictions to the names you give your variables, which includes the fact that the first
character must be either a letter or an underscore character (_); the remaining characters can be
letters, numbers, or underscore characters; variable names cannot contain spaces, and cannot be
reserved JavaScript words. Variable names are case-sensitive.
JavaScript supports four different types of variables, known as data types: numeric values, text
strings, Boolean values, and null values. A numeric variable can be any number. A text string is
any group of characters within quotes. Boolean variables are variables that accept one of two
values, either true or false. A null variable is a variable that has no value at all, assigned the
keyword null.
In JavaScript, a variable's data type is always determined by the context in which it is used.
When variables are not strictly tied to specific data types like this, programmers refer to the
language as a weakly typed language.
36
Creating a JavaScript Function
When you need to reuse the same JavaScript commands in your Web page, you should store the
commands in a function, which is a collection of commands that performs an action or returns a
value. Every function includes a function name identifying it, and a set of commands that are run
when the function is called. Some functions also require parameters, which are variables
associated with the function.
When a browser encounters a function, it bypasses it without executing any of the code it
contains. The function is executed only when called by another JavaScript command. Functions
can be called repeatedly with different parameter values to achieve different results. Examples
demonstrating functions and function calling can be found on pages 585 through 588 of your
textbook.
Creating a Function to Return a Value
For a function to return a value, it must include a return statement. Typically such a function will
work to calculate a value and return that calculated value. Functions that return a value can be
placed within larger expressions.
Important to understand when programming is a variable's scope, which indicates where a

variable can be referenced, which in JavaScript can be either local or global. A variable created
within a JavaScript function has local scope and can be referenced only within that function.
Variables with local scope are sometimes referred to as local variables. Variables not declared
within functions have global scope and can be referenced from within all script elements on the
Web page. Variables with global scope are often referred to as global variables.
Accessing an External JavaScript File
It is a common practice for JavaScript programmers to create libraries of functions located in

external files that are easily accessible to pages on the entire Web site. To reference JavaScript
placed in an external file, you use <script src="url" type="mime-type"></script> where the src
attribute identifies the location of the external file. External files containing JavaScript
commands and functions always have the file extension .js to distinguish them from files
containing commands from other languages.
Commenting JavaScript Code
Commenting your code is an important programming practice. It helps other people who
examine your code to understand what your programs are designed to do and how they work.
You can include comments within your JavaScript to let you or others know the purpose of your
code in one of two ways. To comment a single line, you start the line with //. To comment a
block of lines, you start the block with /* and end it with */.
Using additional HTML comment tags around your JavaScript, you can hide your script from
browsers that do not support JavaScript. To do this, after the <script> element insert a <!— and
37
then before the ending </script> element, enter –>. You must do this because if a browser does
not support the script element, it would skip it and print the remainder of your code to the Web
page. If your browser supports the script element, it skips any HTML within the element,
meaning the HTML comments are ignored.
Debugging Your JavaScript Programs
Debugging is the process of searching code to locate a source of trouble. To debug a program,
you must first determine the type of error present in your code. When programming in
JavaScript, you will undoubtedly encounter the three types of errors, which will have to be
handled. 1.A load-time error is one that occurs when a script is first loaded by the interpreter and
it fails to execute. When a load-time error is encountered, an error message is typically given
indicating what line and what character on that line has caused the error. 2.A second type of error
is a run-time error that can occur after a script has been loaded and while it is executing. Logical
errors are those that are free of syntax or structural mistakes, but result in incorrect results. A list
of some of the most common mistakes can be found on page 599 of your textbook.
One way in which you can try to improve your JavaScript programming to avoid making
mistakes is to write modular code. This means that you can break up the different tasks of the
program into smaller, manageable chunks, usually into functions. These chunks can often be
reused for different purposes. You can also use the Microsoft Script Debugger while using
Internet Explorer to create and debug your JavaScript. Firefox provides a similar debugger called
the Firefox Error Console.
Hope You enjoyed.
Note: For uploading web page html files, you can create uwlist.htm file. For the case file,
uwlist.htm, you need to include the base tag with the appropriate attribute in the head section of
your page. This should have been - which would force all links to open in the collegeWin
window. That would also require you to add the target="_self" attribute to the top three links that
pointed to IDs to force those to open in their current window.

How To Create A Website and HTML Authoring Lessons

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Create A Website and HTML Authoring Lessons

Uploaded by

Copyright:

Available Formats

1

November 05, 2009

How to create a website

II. INSTRUCTIONS TO WEBSITE DESIGNER

Follow the steps to create Web pages1.

1. Make a storyboard to design separate segments of Web pages.

3. Create links to the locations within documents by using anchor element.

The two things needed to create website:

2. A web host: Define the type of site.

Stepwise Instructions to create website2:

1. Plan and make outline of own website.

2. Select right topic of website title.

• Choose unique domain name

• Register domain name and pay the fee by credit card

• Point your domain name at temporary website available to registrar. For

• Choose web host with reliable, high speed access of resource

• High data transfer rate of host is necessary

• Enough space of 15-100 MB is necessary

• Technical support available 24 hours a day, 7 days a week by Web host

5. Sign up an account with unique password

1. Make your Website scripted. Scripting keeps away all harvesting

2. Make password protected and Web pages encrypted

6. Use the Web pages designed in HTML for Website.

8. Collect credit card information.

• Create your own Merchant Account

• Make sure to get secure server or SSL

• Submit your web site to search engine. For example, Google.

• Target your advertisements

• Frequent advertisements of free stuff

• Attractive banner to visitors

• Rotation and weeding of banners and advertisements

• Content material and great offers

• Feedback and text links

III WEBSITE ON INTERNET

2. Heng, Christopher. “How to Make / Create a Website: The Beginner's A-Z

3.Sharma, Rakesh. “Art Work Web Page”. November 5, 2009

Enclosures: Folder: Artwork3.

HTML Work Book and lessons

Exploring the History of the World Wide Web

Creating an HTML document

Working with Block-Level Elements

Exploring Other Block-Level Elements

Working with Inline Elements

Using Element Attributes

Working with Empty Elements

Working with Character Sets and Special Characters

Working with Character Sets and Special Characters

• Read my Instructor Notes:

Exploring Web Site Structures

Creating a Hypertext Link

Specifying a Folder Path

Linking to Locations within Documents

Working with Linked Images and Image Maps

Linking to Resources on the Internet

Working with Hypertext Attributes

Using the Link Element

Working with Metadata

The Background Style

Working with the Box Model

• the margin between the element and other page content

Controlling Page Layout with div Containers

Setting the Display Style

Introducing Web Tables