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.com4. 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.

5. Sign up an account with unique passwordNote: The account and password are usually combination of symbols and words untraceable to hackers.Warning:

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.

Caution: Using secured file transfer with SSH keeps hackers away.

3

Make sure to get secure server or SSL9. 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

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.

4

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

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 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

6

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.

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

7

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 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

8

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

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

9

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 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

10

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 the assignment. If the file shows up in the browser - you did it correctly. If not, then start troubleshooting.

11

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. An example demonstrating the inclusion of a hyperlink within a Web page is shown on pages 68 through 69 of your textbook.

12

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 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.

13

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 to a document would take the form file://server/path/filename where server is the name of the

14

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

15

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

16

CSS will allow you to treat each element on a page using what is called the box model, which is composed of four sections:

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.

17

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 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

18

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

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.

19

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.

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

20

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 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 pages 305 through 306 of your textbook.

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 through 310 of your textbook.

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

21

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 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

22

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 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:

23

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 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

24

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:

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 pages 357 through 361 of your textbook.

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:

25

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 through 377 of your textbook.

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.

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

26

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.

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

27

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 through 489 of your textbook.

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" />.

28

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 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.

29

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.

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

31

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.

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

32

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 &lt; or &amp; because the < and & have their own meaning in XHTML.

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.

33

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 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

34

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

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

35

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.

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.

36

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 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

37

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.