Web Development Using HTML

1
CHAPTER 1: Exploring the Internet

The web Services offered by the Internet Connecting to the Internet Getting on the web Entering a web address Basic navigation Searching the web Saving favorite WebPages Using the History list Opening multiple WebPages The Internet is a network that links millions of computers around the world. Not so long ago, few people had heard of the Internet. Today, the Internet has revolutionized how people use computers. Many people depend on it daily to communicate with others and to get the information they need. You don't have to connect your computer to the Internet, but once you do, you'll probably wonder how you lived without it.
The web
The part of the Internet that most people are familiar with is the World Wide Web (usually called the Web, or web). The web is so popular that people often use the terms Internet and web to mean the same thing. But the Internet also includes other services, such as e-mail, newsgroups, and file sharing. You can send an e-mail message or participate in a newsgroup without using the web. Definitions 1. The web is an Internet service that is that consist of web pages that are interconnected with each other via hyperlinks 2. A hyperlink is text, image or a picture that contains a http URL that points to another page either within the same site or to another site elsewhere in the world wide web. 3. A web page is a document formatted primarily with HTML and other scripts that is displayed by web browsers. 4. A website (or site) is a collection of interconnected WebPages. The web contains millions of websites and billions of web pages! 5. An Internet Explorer is an application that is designed to display web page content by parsing the HTML tags and script programs. With HTML one is able to search the Internet for Internet resources. The web displays information in a colorful, visually appealing format. The content that can be displayed include: Headlines, text, paragraphs, lists, forms, tables, etc. Images and pictures Sound and animation Moves When you click a link on a page, you are taken to a different page. Going from page to page using links is sometimes called surfing the web.

2 The diagram below shows two websites (site 1 and site 2) with their respective web pages. The web sites are connected to each other via hyperlinks.
Main page In site 1
Main page In site 2
Services offered by the Internet

Finding information. The web contains a vast amount of informationfar more than even the world's largest libraries. For example, you can read news stories and movie reviews, check airline schedules, see street maps, get the weather forecast for your city, or research a health condition. Reference sources, such as dictionaries and encyclopedias, are widely available, as are historical documents and classic literature. Most companies, government agencies, nonprofit organizations, museums, and libraries have websites with information about their products, services, or collections. Many individuals publish websites with personal journals called blogs (short for web logs) about their hobbies and interests. Note Even though the web is great for research, not all information on the web is reliable. Information on some websites might be inaccurate, out of date, or incomplete. Before you trust information, make sure it comes from an authoritative source, and check other sources to verify the information. Communicate. E-mail is one of the most popular uses of the Internet. You can send an e-mail message to anyone with an e-mail address, and it will arrive almost instantly in the recipient's e-mail inboxeven if he or she lives halfway around the world. See Getting started with e-mail. Instant messaging (IM) allows you to have a real-time conversation with another person or a group of people. When you type and send an instant message, the message is immediately visible to all participants. Unlike e-mail, all participants have to be online (connected to the Internet) and in front of their computers at the same time.
3 Newsgroups and web-based forums allow you to participate in text-based discussions with a community of other people who are interested in the same topic. For example, if you are having trouble using a program, you could post a question in a discussion group for users of that program. Share. You can upload (copy) pictures from your digital camera to a photo-sharing website. Invited friends and family members can then visit the website to view your photo albums. Shop. The web is the world's biggest shopping mall. You can browse and purchase products books, music, toys, clothing, electronics, and much moreat the websites of major retailers (usually a credit card is required). You can also buy and sell used items through websites that use auction-style bidding. Play. You can play games of every type on the web, often against other playersno matter where they are in the world. Many games are free, and you can download others for a fee. You can also listen to Internet radio stations, watch movie clips, and download or purchase music, videos, and even some TV shows. E learning: This is one of the hot points of discussions about the Internet today. It is possible to a Degree/Diploma course purely over the Internet. Universities across the world are carrying out research on how they can deliver learning content using the Internet. Virtualization. The network infrastructure that makes up the Internet has provided a major mode of information transmission highway for all kind from music, pictures, Video clips and streaming video. Etc. This possibility has given rise to a new concept that has gained ground and is relevant in education sectors, referred to as virtualization. The ever-evolving web technology has presented itself as tool to be used in almost every application areas with profound benefits. Today we hear virtualization in almost every physical phenomenon: Be it a meeting, office premises (virtual office), conferences and the classroom, shops (One can buy any item when in an office from any where in the world) including virtual dating (people can court over the internet and get married without prior physical eye to eye interaction). Thanks to web technology.
Connecting to the Internet

To use the Internet you must be connected. In windows operating system you use the Connect to the Internet wizard, which guides you through the steps of setting up an Internet connection.
To connect to the Internet need

You need an Internet service provider (ISP) and some hardware to connect to the Internet: An Internet Service Provider (ISP) is a company that provides you with access to the Internet, usually for a fee. The most common ways to connect to an ISP are by using a phone line (dial-up) or broadband connection (cable or DSL). Many ISPs provide additional services such as e-mail accounts, web browsers, and space for you to create a website. You sign up for an account with an ISP just as you do for telephone service or utilities. Hardware. o For a broadband connection such as Digital Subscriber Line (DSL) or cable, you need a DSL or cable modem. This is usually included as part of the start-up hardware from your ISP when you sign up for a broadband account.
4 o For a dial-up connection, you need a dial-up modem. Many computers come with this type of modem already installed. There are two common kinds of modems: Broadband modems. Broadband modems connect to either a cable or Digital Subscriber Line (DSL), and they provide high-speed Internet access. Dial-up modems. Dial-up modems connect to the Internet using a phone line, usually at much slower speeds than broadband modems. Different ISPs offer different connection types and speeds. There are two basic types of connections: Dial-up. A dial-up connection uses a dial-up modem to connect your computer to the Internet through a standard telephone line. Many computers come with a dial-up modem already installed. In contrast to broadband, dial-up is slower and requires you to establish a new connection each time you want to use the Internet. However, dial-up is less expensive than broadband, and in some areas might be the only option for Internet access. Once you have an ISP and a modem, you're ready to connect to the Internet. The Connect to the Internet wizard will guide you through the steps.
Using the web

Once you've established an Internet connection, you can access the web using Internet Explorer, a web browser included with Windows. You can also use any other web browser that you have installed on your computer.
Entering a web address

Just as every residence has a unique street address, every webpage has its own web address. That address is called the Uniform Resource Locator (URL). For example, the URL for the Microsoft main website is http://www.microsoft.com. If you know the URL for a page, you can type it directly into Internet Explorer: 1. In the Address box, type the URL. 2. Click the Go button or press ENTER to go to the website.
Tips
You don't have to type http://. For example, you can type www.microsoft.com and Internet Explorer will fill in the rest. To quickly enter a URL ending in ".com", type the part between "www." and ".com" and then press CTRL+ENTER.
Basic navigation
Using links. Most WebPages have dozens or even hundreds of links. To get from one page to another, click any link. However, figuring out which things on a page are links isn't always easy. Links can be text, images, or a combination of both. Text links often appear as colored and underlined, but link styles vary among websites. To test whether something is a link or not, point to it. If it's a link, two things happen: The mouse pointer changes to a hand with a pointing finger. A URL appears in the status bar of your web browser. This shows the website you'll go to if you click the link.
5 Back button (left); Forward button (right) Using the Back and Forward buttons. As you go from page to page, Internet Explorer keeps track of your trail. To get back to the previous page, click the Back button. Click the Back button several times to retrace your steps even further. After you've clicked the Back button, you can click the Forward button to go forward in the trail. Recent Pages menu Using the Recent Pages menu. If you want to get back to a page you've visited in your current session, but want to avoid repeatedly clicking the Back or Forward buttons, use the Recent Pages menu. Click the arrow next to the Forward button, and then select a page from the list. DNS (Domain Name System) And DNS Server Websites have both a "friendly" address, called a Uniform Resource Locator (URL) and an IP address. People use URLs to find websites, but computers use IP addresses to find websites. DNS translates URLs into IP addresses (and vice versa). For example, if you type http://www.microsoft.com into the address bar in your web browser, your computer sends a request to a DNS server. The DNS server translates the URL into an IP address so that your computer can find the Microsoft web server. The last part of a URL is called a top-level domain name (TLD). TLDs identify different types of websites. Here are some common TLDs and what they stand for: Top-level Stands for domain .com Commercial (business) site .net Internet administrative site .org Nonprofit organization .gov U.S. government agency .edu Educational institution In addition to the TLDs listed above, individual countries or regions have their own TLDs. For example, .ca is the TLD for Canada.
DNS Dynamic Update

Some computers are given a different IP address each time they connect to the Internet. An Internet service provider (ISP) can use a few IP addresses to serve many customers that way, but it means that your computer's "address" on the Internet is always changing. If you host a website, you don't want the website name to change, even if your ISP changes the IP address. DNS dynamic update automatically maintains the relationship between your fixed website name and the changing IP address so that your website is easy to find on the Internet.
Looking up a DNS name or IP address

You must be connected to the Internet to look up a DNS name or IP address. 1. Open Command Prompt. 2. At the command prompt, type nslookup, a space, and the IP address or domain name (for example, nslookup microsoft.com), and then press ENTER.
DNS cache
When you type a web address into your web browser and press ENTER, you are sending a query to a DNS server. If the query is successful, the website you want opens; if not, you'll see an error message. A record of these successful and unsuccessful queries is stored in a temporary storage location on your computer called the DNS cache. DNS always checks the cache before querying any DNS server, and if a record is found that matches the query, DNS uses that record instead of querying the server. This makes queries faster and decreases network and Internet traffic.
To view the contents of the DNS cache

1. Open Command Prompt. 2. At the command prompt, type ipconfig /displaydns.
Clearing the Contents of the DNS Cache

Clearing the DNS cache forces DNS to query a DNS server rather than using information stored in the cache. You might want to clear the DNS cache if you are moving and changing websites, or if you are receiving repeated errors when you know the web address you are typing is correct. Open Command Prompt. At the command prompt, type ipconfig /flushdns.
Computer Viruses
A virus is a program that replicates itself. It spreads by making copies of itself on a computer or by inserting computer code into program or operating system files. Viruses don't always damage files or computers, but they usually affect a computer's performance and stability. For a virus to infect a computer or to spread, you usually have to do something, such as open an infected e-mail attachment. Virus damage can range from slowing computer performance to a loss of information and programs. In the worst case, viruses delete or modify information and programs on your computer. Some e-mail viruses send confidential information in messages when spreading. Even when a virus is not directly damaging information, the process of replication can slow your computer and Internet connection.
Worm
A worm is computer code that spreads without user interaction. Most worms begin as e-mail attachments that infect a computer when they're opened. The worm scans the infected computer for files, such as address books, or temporary webpages, that contain e-mail addresses. The worm uses the addresses to send infected e-mail, and often mimics (or spoofs) the "From" addresses in subsequent e-mail messages so that those infected messages appear to be from someone you know. Worms then spread automatically through e-mail, networks, or operating system vulnerabilities, often overwhelming those systems before the cause is known. Worms aren't always destructive to computers, but they usually cause computer and network performance and stability problems.
Trojan horse
A Trojan horse is a malicious software program that hides inside other programs. It enters a computer hidden inside a legitimate program, such as a screen saver. It then puts code into the
7 operating system, which enables a hacker to access the infected computer. Trojan horses do not usually spread by themselves; they are spread by viruses, worms, or downloaded software.
blended threat
A blended threat is a combination of some or all of the malicious programs discussed in the sections above. Blended threats often begin when someone interacts with a virus (such as opening an unsafe e-mail attachment). The virus automatically propagates using worm behavior, and then installs a Trojan horse on the infected computer.
Prevent viruses: Using Antivirus

Install an antivirus program. To be most effective, an antivirus program should always be turned on, should scan incoming e-mail, and should scan file access.
Checking If Your Computer has a virus

There is no single indicator of a virus infection, but some of the more common effects include poor computer performance, pop-up ads displaying (even when you have turned on a pop-up blocker or disconnected from the Internet). If you can answer "yes" to any of the following questions, your computer might have a virus. 1. Is your computer running very slowly? A common symptom of a virus is much slower than normal computer performance. However, there can be other reasons for slow performance, including a hard disk that needs defragmenting, a computer that needs more memory (RAM), or the existence of spyware or adware. 2. Are you getting unexpected messages, or are programs starting automatically? Some viruses can cause damage to Windows or some of your programs. The results of this damage might include messages appearing unexpectedly, programs starting or closing automatically, or Windows shutting down suddenly. 3. Is your modem or hard disk working overtime? An e-mail virus works by sending many copies of itself by e-mail. One indicator of this is that the activity light on your broadband or external modem is constantly lit; another is the sound of your computer's hard disk continually working. These are not always symptoms of a computer virus, but when combined with other problems, can indicate a virus infection. To check for viruses, scan your computer with an antivirus program. New viruses appear every day, so keeping your antivirus program updated is important.
Web Development Using HTML

Web development as a software development process involves writing programs that run at the user end and the counterpart programs that run at the server end. There are client-side web development languages and server-side web development languages. The diagram below shows a typical configuration of a simple web system. The client process makes request to the server process over a network or the Internet, which send back a response after processing the request. The request may involve writing to database or reading from a database. The client and the server process are programs that are running on different computers. Request Client Process Server Process write
Response
read
DB
Client-side Programming
Client-side programming involves writing code that is interpreted by a browser such as Internet Explorer or Mozilla Firefox or by any other Web client such as a cell phone. The most common languages and technologies used in client-side programming are HTML, JavaScript, Cascading Style Sheets (CSS) and Macromedia Flash.
HTML
HyperText Markup Language (HTML) is the language behind most Web pages. The language is made up of elements that describe the structure and format of the content on a Web page.
Cascading Style Sheets

Cascading Style Sheets (CSS) is used in HTML pages to separate formatting and layout from content. Rules defining color, size, positioning and other display aspects of elements are defined in the HTML page or in linked CSS pages.
JavaScript
JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms, pop up new windows, and create dynamic effects such as dropdown menus and image rollovers.
Dynamic HTML
Dynamic HTML is not a language in and of itself, but rather refers to code that uses JavaScript to manipulate CSS properties on the fly.
Ajax
The term AJAX was originally an acronym for "Asynchronous JavaScript And XML," but is now used much more broadly to cover all methods of communicating with a server using JavaScript. As we will see, Ajax is not always asynchronous and does not always involve XML. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh.
Adobe Flash
Over the past few years, Flash has taken the Web by storm. At the time of this writing, according to Adobe's website, more than 97% of computers connected to the internet have Flash Player installed. Flash Player is a plug-in to Internet Explorer and other Web browsers. It enables browsers to display dynamic graphical Web pages that can be visually more fluid than pages that built with Dynamic HTML. Flash pages are called movies and they are created using special software (also called Flash). ActionScript, a language similar to JavaScript, is used to manipulate Flash objects to make movies more interactive.
Server-side Programming
Server-side programming involves writing code that connects Web pages with databases, XML pages, email servers, file systems and other systems and software accessible from the Web server. The most common server-side languages and programming frameworks are Perl, ColdFusion, Active Server Pages, JavaServer Pages, ASP.NET and PHP.
Perl
Perl was the first server-side language to become popular in Web development. Originally derived from C, its relative simplicity and strengths in file and text manipulation and the fact that it is open source made it a good choice for writing CGI scripts. Although Perl is still widely used, it is not as popular a choice for new Web projects as some of the other server-side languages discussed below.
ColdFusion
ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to understand than some of the other choices. Because of the relative ease with which it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion code is compiled to Java bytecode, which means the pages run quickly. Web developers can accomplish virtually any required task using the ColdFusion Markup Language (CFML). However, as ColdFusion can easily be integrated with Java applications, developers have the choice of using Java to extend ColdFusion applications.
Active Server Pages

Microsoft Active Server Pages (ASP) is a framework that allows developers to write server-side pages in many scripting languages; however, VBScript and JScript are the only commonly used choices. ASP became popular quickly and sites with pages ending in .asp are now all over the Web. It is not as simple as ColdFusion, but it has the huge advantage of being built in to Microsoft Internet Information Server (IIS). Although still commonly used, ASP has been replaced by Microsoft with ASP.NET, an architecture that is much more similar to Java's than to traditional ASP's.
JavaServer Pages
10 As with ColdFusion MX, pages written using JavaServer Pages (JSP) are compiled into Java servlets. JSP pages are made up of tags (as in ColdFusion) and scriptlets (as in ASP). It has replaced Java Servlets as the most popular choice for Java coders writing Web applications.
ASP.NET
Microsoft's ASP.NET is not a language, but a framework for writing Web sites and software. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run faster than traditional ASP pages do. ASP.NET pages can be written in many languages, but the most popular are C# (pronounced C-sharp) and Visual Basic .NET (VB.NET).
PHP
Like Perl, PHP is open source. It has rapidly become a popular alternative to the proprietary languages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn and runs on almost all commonly used Web servers. A nice feature is that it can be integrated with both Java and COM.
Ruby on Rails
Wikipedia describes Ruby on Rails as "a web application framework that aims to increase the speed and ease with which database-driven web sites can be created and offers skeleton code frameworks (scaffolding) from the outset. Often shortened to Rails, or RoR, Ruby On Rails is an open source project written in the Ruby programming language and applications using the Rails framework are developed using the Model-View-Controller design pattern."
11
Introduction to HTML
HyperText Markup Language (HTML) is the language behind most Web pages. The language is made up of elements that describe the structure and format of the content on a Web page. HTML makes use of tags to specify how content will be displayed or formatted. HTML is maintained by the World Wide Web Consortium (W3C). The latest version is HTML 4.01.
Getting Started
Exercise: A Simple HTML Document
In this exercise, you will create your first HTML document by simply copying the text shown below. The purpose is to give you some sense of the structure of an HTML document. 1. Open a simple text editor such as Notepad and create a new file. Do not use an HTML editor for this exercise. 2. Save the file as HelloWorld.html in the Desktop/YourName/HTMLBasics/Exercises folder. 3. Type the following exactly as shown:
<html> <head> <title>Hello world!</title> </head> <body> <h1>Hello world!</h1> </body> </html>
4. Save the file again and then open it in your browser by navigating to the file in your folder system and double-clicking on it.
The HTML Skeleton

At its simplest, an HTML page contains what can be thought of as a skeleton - the main structure of the page. It looks like this: Example: Desktop/YourName/HTMLBasics/Skeleton.html
<html> <head> <title></title> </head> <body>
Content that appear In the browser
</body> </html>
12
The <head> Element

The <head> element contains content that is not displayed on the page itself. Some of the elements commonly found in the <head> are:

Title of the page (<title>). Browsers typically show the title in the "title bar" at the top of the browser window. Meta tags, which contain descriptive information about the page (<meta />) Script blocks, which contain javascript or vbscript code for adding functionality and interactivity to a page (<script>) Style blocks, which contain Cascading Style Sheet rules (<style>). References (or links) to external style sheets (<link />).
The <body> Element

The <body> element contains all of the content that appears on the page itself. Body tags will be covered thoroughly throughout this manual.
Whitespace
Extra whitespace is ignored in HTML. This means that all hard returns, tabs and multiple spaces are condensed into a single space for display purposes. Example: Whitespace.html
<html> <head> <title>Whitespace Example</title> </head> <body> This is a sentence on a single line. This is a sentence with extra whitespace throughout. </body> </html>
The two sentences in the code above will be rendered in exactly the same way.
HTML Elements
HTML elements describe the structure and content of a Web page. Tags are used to indicate the beginning and end of elements. The syntax is as follows:
<tagname>Element content</tagname>
Attributes
Tags often have attributes for further defining the element. Attributes come in name-value pairs Note that attributes only appear in the open tag, like so:
<tagname att1="value" att2="value">Element content</tagname>
The order of attributes is not important.
13
Empty vs. Container Tags

The tags shown above are called container tags because they have both an open and close tag with content contained between them. Tags that do not contain content are called empty tags. The syntax is as follows:
<tagname />
or
<tagname att1="value" att2="value" />
Blocks and Inline Elements Block-level Elements

Block elements are elements that separate a block of content. For example, a paragraph (<p>) element is a block element. Other block elements include: Lists (<ul> and <ol>) Tables (<table>) Forms (<form>) Divs (<div>)
Inline Elements
Inline elements are elements that affect only snippets of content and do not block off a section of a page. Examples of inline elements include: Links (<a>) Images (<img>) Formatting tags (<b>, <i>, <tt>, etc.) Phrase elements (<em>, <strong>, <code>, etc.) Spans (<span>) Important: Inline elements cannot be direct children of the body element. They must be contained within a block-level element.
Comments
Comments are generally used for one of three purposes. 1. To write helpful notes about the code; for example, why something is written in a specific way. 2. To comment out some code that is not currently needed, but may be used sometime in the future. 3. To debug a page. HTML comments are enclosed in . For example:

XHTML vs. HTML

XHTML 1.0 and HTML 4.0 consist of the same sets of elements. The only difference is that HTML is fairly flexible; whereas, XHTML has strict rules.
DOCTYPE Declarations
The DOCTYPE declaration goes at the beginning of the document and is used to indicate which version of (X)HTML the page uses. There are three versions of (X)HTML documents: strict, frameset and transitional (loose). In HTML, the DOCTYPE declaration is optional. In XHTML, it is required.
Strict
14 The strict versions of HTML and XHTML do not allow use of tags and attributes that have been deprecated. The strict versions do not support framesets.
XHTML Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional (Loose)
The transitional (or loose) versions of HTML and XHTML allow for the use of deprecated tags and attributes. The transitional versions also do not support framesets.
XHTML Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset
The frameset versions of HTML and XHTML are the same as the transitional versions, except that they also support frames.
XHTML Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> HTML Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Closing Tags
HTML 4.0 allows some closing tags to be omitted. For example, in HTML, list item (<li>) tags do not require a matching close tag (</li>). In XHTML, all tags must be closed. Empty tags are closed by adding a forward slash before the final angle bracket of the tag:
<tagname att1="value" att2="value" />
Note the space before the forward slash. Though this is not required by XHTML, it may help older browsers from getting confused. In HTML 4.0, the forward slash is not required:
<tagname att1="value" att2="value">
Case Sensitivity
In HTML, case is not important. In XHTML, all tags and attributes must be in lowercase letters.
Quotes
In HTML, attribute values do not always have to be in quotes; whereas, in XHTML quotes are required. Either single quotes or double quotes may be used.
15
Nesting
In both HTML and XHTML, tags should be nested properly. Proper nesting requires nested tags to be closed in reverse order from which they were opened. Another way to say this is that each element must be completely contained by its parent element. For example, the following line of code uses improper nesting:
<parent><child>sometext</parent></child>
The corrected line looks like this:

<parent><child>sometext</child></parent>
Some XML Stuff The XML Declaration

XHTML documents are, by definition, XML documents. This means that they follow the rules of XML. Although not required, it is good practice to include an XML declaration in your XHTML documents. If included, the XML declaration must be at the very beginning of the document. The XML declaration looks like this:
<?xml version="1.0" encoding="UTF-8"?>
For best results, it is best to define the encoding in a meta tag as well. We'll cover meta tags later in the manual. For now, note that you should include the following tag within the head tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
The XHTML Namespace

In XHTML documents, the html tag must contain an xmlns declaration for the XHTML namespace, which indicates that the document must conform to the rules defined in the XHTML namespace. The syntax is shown below:
<html xmlns="http://www.w3.org/1999/xhtml">
Special Characters
Special characters (i.e, characters that do not show up on your keyboard) can be added to HTML pages using entity names and numbers. For example, a copyright symbol () can be added using
16 © or ©. The following table shows some of the more common character references.
lang and xml:lang

The lang and xml:lang attributes are used to tell the browser (or other user agent) the language contained within an element. The W3C recommends that both lang and xml:lang be included in the html tag of all XHTML documents, like so:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
According to the W3C, these attributes may be helpful in:

Assisting search engines Assisting speech synthesizers Helping a user agent select glyph variants for high quality typography Helping a user agent choose a set of quotation marks Helping a user agent make decisions about hyphenation, ligatures, and spacing Assisting spell checkers and grammar checkers
17
Introduction to HTML Conclusion

In this lesson of the HTML tutorial, you learn the basics of HTML. You should understand how an HTML page is structured, know the major differences between HTML and XHTML and understand the basic syntax of HTML tags. To add paragraphs to the page. To use HTML headings. To separate sections with breaks and horizontal rules. To create quoted text. To create preformatted text. To use phrase elements. To use non-deprecated formatting elements. To note document version changes. This lesson discusses how properly markup text. With just a few exceptions, it does not discuss how to change the formatting or display of these elements. This is a task for CSS, which is not covered in this lesson.
Paragraphs
Paragraph text should be contained in <p> tags as shown in the following example: Example: Paragraphs.html
<html> <head> <title>Paragraphs</title> </head> <body> <p>Pooh always liked a little something at eleven o'clock in the morning, and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so exited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</p> <p>And for a long time after that he said nothing...until at last, humming to himself in a rather sticky voice, he got up, shook Rabbit lovingly by the paw, and said that he must be going on. 'Must you?' said Rabbit politely. 'Well,' said Pooh, 'I could stay a little longer if it-if you-' and he tried very hard to look in the direction of the larder. 'As a matter of fact,' said Rabbit, 'I was going out myself directly.' 'Oh well, then, I'll be going on. Good bye.' 'Well good bye, if you're sure you won't have any more.' 'Is there any more?' asked Pooh quickly. Rabbit took the covers of the dishes, and said 'No, there wasn't.' 'I thought not,' said Pooh, nodding to himself. 'Well Good-bye, I must be going on.'</p> </body> </html>
Heading Levels
HTML supports six levels of heading. The tags are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>, descending in importance from <h1> to <h6>. Headings are block elements.
<html><head> <title>Heading Levels</title> </head> <body> <h1>Heading Level 1</h1> <p>Paragraph following heading level 1.</p> <h2>Heading Level 2</h2>
Example: Headings.html
18
<p>Paragraph following heading <h3>Heading Level 3</h3> <p>Paragraph following heading <h4>Heading Level 4</h4> <p>Paragraph following heading <h5>Heading Level 5</h5> <p>Paragraph following heading <h6>Heading Level 6</h6> <p>Paragraph following heading </body> </html> level 2.</p> level 3.</p> level 4.</p> level 5.</p> level 6.</p>
Breaks and Horizontal Rules

The <br /> tag forces a line break. The <hr /> tag creates a horizontal rule across the page. The code below shows how they are used:
Example: BRandHR.html
<html> <head> <title>Breaks and Horizontal Rules</title> </head> <body> <p>Sometimes<br />it is desirable<br />to break text across lines.</p> <hr/> <p>And to separate text with horizontal rules.</p> </body> </html>
Exercise: Creating an HTML Page

In this exercise, you will create an HTML page from scratch. It should look like the page in the picture below:
1. Create a new page and save it as index.html. 2. Write code to make the page look like the one in the screenshot above.
19 3. Save your work and open your new page in a browser to test it. 4. Use special characters instead of the dashes to make more interesting bullets. Try •
Quoted Text
The <blockquote> and <q> elements are used to designate quoted text. Both elements can take the cite attribute, which is used to reference the source. <blockquote> is a block-level element, while <q> is an inline element. See the example below:
Example: Quotes.html
<html> <head> <title>Quotes</title> </head> <body> <h1>The Declaration of Independence</h1> <p>The Declaration of Independence begins with the following paragraph:</p> <blockquote cite="http://www.ushistory.org/declaration/document/index.htm"><p>When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p></blockquote> <p>The second paragraph, which begins <q cite="http://www.ushistory.org/declaration/document/index.htm">We hold these truths to be self-evident, that all men are created equal...</q> is more widely known.</p> </body> </html>
Most browsers indent blockquotes from both the left and right. They are supposed to wrap text nested in <q> tags with quotes. Some notes: Modern browsers don't do anything visual with the cite attribute. Blockquotes should not be used simply to indent text from both sides. CSS can be used for that purpose. Blockquotes cannot be contained within paragraphs. Blockquotes cannot have text as a direct child. Usually, blockquotes contain paragraphs (<p> tags).
Preformatted Text
Occasionally it is desirable to output content as it is laid out in the code, whitespace and all. The <pre> tag is used for this purpose. It is often used in online coding tutorials so that the whitespace shown in the tutorial reflects how it would appear in the document it represents. The code below shows how <pre> is used.
Example: Pre.html
<html> <head> <title>Preformatted Text</title> </head> <body> <h1>Your First HTML Page</h1> <pre> <html>
20
<head> <title>Hello world!</title> </head> <body> <h1>Hello world!</h1> </body> </html> </pre> </body> </html>
The page is rendered as follows:
Phrase Elements
Phrase elements provide structural information about the content they contain. The most common phrase elements are <em> and <strong>. Both elements indicate that the element content should be emphasized. <strong> indicates stronger emphasis than <em>. Most browsers bold <strong> content and italicize <em> content. The code below illustrates how these tags can be used:
Example: EmAndStrong.html
<html> <head> <title>Emphasis</title> </head> <body> <h1>Emphasis</h1> <p>This is <em>important</em>.</p> <p>This is <strong>really important</strong>.</p> </body> </html>
The page is rendered as follows:
Formatting Elements
In HTML 4.0 and XHTML, most formatting tags have been deprecated. The five that remain are shown in the table below:
21 Non-deprecated Formatting Tags Tag Description <b> Bolds text <i> Italicizes text <tt> Renders teletype text <big> Increases font size <small> Decreases font size The example below shows how they are used:
Example: Formatting.html
<html> <head> <title>Non-deprecated formatting tags</title> </head> <body> <h1>Non-deprecated formatting tags</h1> <p> <b>Bold</b> <i>Italicized</i> <tt>Teletype</tt> <big>Big font</big> <small>Small font</small> </p> </body> </html>
Code Explanation The page is rendered as follows:
All of these effects can be created with CSS. We recommend you avoid these tags in favor of CSS.
Documenting Changes
Sometimes it is necessary to document changes in your HTML pages. This is especially common when drafting legal documents. The specification provides <ins> and <del> elements for documenting inserted and deleted content, respectively. Both elements take a cite attribute for pointing to a resource explaining the change and a datetime attribute for indicating the time and date of the change. The title attribute can also be used to indicate a short reason for the change. The example below shows how they are used:
Example: ChangeTracking.html
<html> <head> <title>Change Tracking</title> </head> <body> <h1>Change Tracking</h1> <p>The baseball player with the most home runs is <del datetime="2007-08-01" cite="http://mlb.mlb.com" title="At the time of this writing, this is just a prediction.">Hank Aaron</del><ins datetime="2007-08-01" cite="http://mlb.mlb.com" title="Allegedly, steroids helped.">Barry Bonds</ins>.</p> </body>
22
</html>
The page is rendered as follows. The title text shows up when the user hovers the mouse over the text "Hank Aaron.":
Paragraphs, Headings and Text Conclusion

In this lesson of the HTML tutorial, you have learned to work with paragraphs, headings, and other text elements. You can now create a basic HTML page.
HTML Links
The ability to link from one page to another is what makes HTML hyper. Calling it Hypertext, however, is a bit of a misnomer, as images and other elements can also be linked.
Text Links
The tag for a link is perhaps the least intuitive of all the HTML tags. It is <a> and it comes from the word "anchor." You will see why later in the lesson. By itself, the <a> tag does nothing. To create a link, it requires the href attribute, which takes as a value the path to the file to which to link. The syntax is as follows: Syntax
<a href="path_to_file">Link Text</a>
For example:
<a href="bios/JohnLennon.html">John Lennon</a>
Note that <a> elements may not be direct children of the body element.
Absolute vs. Relative Paths

Absolute Paths
An absolute path shows the complete path to a file starting from the web root. To illustrate this, see the following directory tree:
Assume that the wwwroot folder is the web root. This means that when a user types http://www.servername.com/index.html, the index.html page within the wwwroot folder will be downloaded to the browser. The absolute path to the web root from a page on the same domain is simply a forward slash (/). So, a link on Company.html to index.html could be written like this:
23
<a href="/index.html">Home Page</a>
The same link could be placed on any page in any folder below the wwwroot folder or on any page in the wwwroot folder itself. Using an absolute path, a link to Company.html would include the about directory, like this:
<a href="/about/Company.html">About Our Company</a>
External Links
When linking to a file at a different domain you must identify the location of the domain using the domain name (or IP address) of the site. To illustrate, assume that the directory structure shown above is found at http://www.beatles.com. A link to Company.html from another site would be written like this:
<a href="http://www.beatles.com/about/Company.html"> About the Beatles</a>
Relative Paths
Relative paths can only be used to link to other files under the same web root. A relative path indicates where a file is relative to the file that contains the link. The folder (or directory) that contains the file being worked on is called the current directory. The relative path to another file that is also in the current directory is just the name of that file. For example, since Company.html and Contact.html are found in the same directory, they can link to each other simply by specifying the file name. The following shows a link that could be used in Contact.html to Company.html.
<a href="Company.html">About Our Company</a>
The relative path to a file in a subdirectory of the current directory must include the name of the subdirectory. For example, to link to Company.html from index.html you must first point to the about directory, like so:
<a href="about/Company.html">About Our Company</a>
The relative path to a file in a directory above the current directory should begin with ../ For example, the following shows a link to index.html from Company.html.
<a href="../index.html">Home Page</a>
Default Pages
The web server administrator can set up default page names to look for when a path ends with a directory name without specifying a file. Often these files are called index.html or Default.htm. In this case, the following two URLs would be identical, both loading index.html.
http://www.beatles.com http://www.beatles.com/index.html
Targeting New Windows

The target attribute is used to specify the browser window in which the linked page will open.
<a href="Company.html" target="newwin">Our Company</a>
If there is no open browser window with the specified target name, a new window will be opened with that name. As long as that window stays open, future links with the same target value will target that window. To force each link to target a brand new window, use "_blank" as the value of the target attribute.
Email Links
Email links are used to open an email client to start a new email message. The syntax is similar to the links we have seen thus far. The value of the href attribute begins with mailto: and ends with an email address. For example:
<a href="mailto:paul@beatles.com">Email Paul</a>
24 It is good practice to include the email address as the text of the link, so that people who are printing the page or whose setup does not support email links can see the actual email address. For example:
Email Paul at <a href="mailto:paul@beatles.com">paul@beatles.com</a>.
Exercise: Adding Links

In this exercise you will add links to index.html. The completed page should look like this:
1. Open Links/Exercises/index.html for editing. 2. Add the following links: Home: index.html Races: Races.html Resources: Resources.html Calculator: Calculator.html Running Log: RunningLog.html My Account: MyAccount.html Log out: Logout.html the most up-to-date information on running races: Races.html the best resources for runners: Resources.html 2. Add an email link to info@runnershome.com after the copyright. 3. Save your work and open your new page in a browser to test it.
o o o o o o o o o
Add links to Resources.html to external resources. 1. Open Links/Exercises/Resources.html for editing. 2. Add links to any useful resources for runners you can find on the web.
25
Anchors
Anchors are named locations to which a link can point. Anchors can be created with the <a> tag using the name attribute or with any tag using the id attribute.
Anchors with the name Attribute

Here is an example of creating an anchor with the <a> tag.
<a name="paul"></a>
As you can see, anchors are created using the <a> tag with the name attribute. To link to an anchor, use the pound sign (#) followed by the anchor name. For example,
<a href="#paul">Read about Paul</a>
You can also link to anchors on other pages.

<a href="about.html#paul">Read about Paul</a>
Or
<a href="http://www.beatles.com/about.html#paul">Read about Paul</a>
The file below shows illustrates the use of anchors.
Example: Anchors.html
<html> <head> <title>Anchors</title> </head> <body> <h1><a name="top" id="top"></a>Anchors</h1> <h2>Links to Anchors on Remote Pages</h2> <div> <a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.3">W3C anchors.</a> </div> <h2>Links to Anchors on This Page</h2> <div><a href="#winnie">Pooh Goes Visiting</a></div> <div><a href="#alice">A Mad Tea-Party</a></div> <div><a href="#naughtyboy">The Naughty Boy</a></div> <hr /> <h2>Anchors on This Page</h2> <p>Each title below has an anchor.</p> <h3><a name="winnie" id="winnie"></a>POOH GOES VISITING - A.A. Milne</h3> <p>Pooh always liked a little something at eleven o'clock in the morning, and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so exited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</p> ---- Code Omitted ---<hr /> <h3><a name="alice" id="alice"></a>A MAD TEA-PARTY - Lewis Carroll</h3> <p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'</p> ---- Code Omitted ---<hr /> <h3><a name="naughtyboy" id="naughtyboy"></a>THE NAUGHTY BOY - Hans Christian Andersen</h3> <p>Along time ago, there lived an old poet, a thoroughly kind old poet. As he was sitting one evening in his room, a dreadful storm arose without, and the
26
rain streamed down from heaven; but the old poet sat warm and comfortable in his chimney-comer, where the fire blazed and the roasting apple hissed.</p> ---- Code Omitted ---<div><a href="#top">Back to top</a></div> </body> </html>
You'll notice the <a> tag anchors use both the id attribute and the name attribute with the same value. Although this is not required, it is considered good practice.
Anchors with the id Attribute

Any tag with an id attribute can serve as an anchor and can be linked to.
Example: AnchorsIds.html
---- Code Omitted ---<h3 id="winnie">POOH GOES VISITING - A.A. Milne</h3> ---- Code Omitted ---<h3 id="alice">A MAD TEA-PARTY - Lewis Carroll</h3> ---- Code Omitted ---<h3 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h3> ---- Code Omitted ----
The behavior of these links is identical to those in the previous example.
name vs. id
The major advantage of using the <a> tag with the name attribute is that it's supported by older browsers. The advantage of using the id attribute is that it can be applied to any tag, so there is no need to explicitly create anchors.
The title Attribute

The title attribute can be used to provide more descriptive information about a link.
<a href="#winnie" title="A short story about Winnie the Pooh">Pooh Goes Visiting</a>
This is especially useful when the content of the link is not descriptive. For example, we'll see later how to make an image into a link. It might not be clear from the image itself where the link points. The title attribute can be used to make this more clear. Browsers usually show the title text as a tooltip and screenReaders might read it the title to a blind user.
HTML Links Conclusion

In this lesson of the HTML tutorial you have learned to create text links, to work with absolute and relative paths, to target new windows, to create email links and to create and link to anchors.
27
HTML Images
Modern browsers generally support three types of images: GIFs, JPEGs, and PNGs. The PNG and GIF are generally used for simple images such as drawing; whereas the JPEG format is used for more complicated images such as photographs.
Inserting Images
Inserting images in web pages is done by placing an img tag in the HTML code. The img tag's src attribute is used to reference an image file using a relative or absolute path. The syntax is as follows. Syntax
<img src="path_to_image_file" alt="alternative text"/>
The <img /> tag is an empty tag and should be closed with a shortcut close. The following page shows how to use the <img /> tag:
Example: Images/Demos/Images.html
<html> <head> <title>Images</title> </head> <body> <h1>Images</h1> <p><img src="http://www.google.com/images/logo.gif" alt="Logo" /></p> <hr/> <p><img src="Images/Pooh.jpg" alt="Pooh Bear" /></p> <hr/> <p><img src="Images/RunnersHome.gif" alt="Runners Home" /></p> </body> </html>
Making Images Accessible Alternative Text

To add alternate text for an image, use the alt attribute.
<img src="logo.gif" alt="Logo" />
Alternate text is displayed... When the user's browser does not support images. As the image is downloading. When the user hovers over the image with the mouse. Alternate text can also be used by screenreaders to describe an image for the visually impaired.
Long Descriptions
If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page. The longdesc attribute of the <img /> tag is used to point to that description. For example:
Example: LongDesc.html
<html> <head> <title>Long Description</title> </head> <body>
28
<h1>Long Description</h1> <p><img src="Images/BigMac.jpg" alt="Big Mac Nutrition Information" longdesc="BigMac.html" /></p> </body> </html>
The browsers don't do anything with the longdesc value, but modern screenreaders make use of it. Freedom Scientific, the makers of Jaws, one of the most popular screenreaders, say this about their support for longdesc: JAWS now supports the "Longdesc" attribute in HTML within Internet Explorer 5.x and 6. The "Longdesc" attribute allows a long description of graphics to be provided on a separate page. The "Longdesc" attribute contains the address of the descriptive page. After reading any Alt text for the graphic, JAWS announces there is a long description and the address of the page. Just press ENTER to open the page containing the long description in a new window.
Image Links
Creating image links is easy. Simply put an <a> tag around your image, like so...
<a href="index.html" title="Link to Home Page"><img src="images/logo.gif" /></a>
By default, most browsers will place a one-pixel border around a linked image. Exercise: Adding Images to the Page In this exercise, you will add an image to index.html. The resulting page is shown below.
29 1. Open Images/Exercises/index.html for editing. 2. Create an image called RunnersHome.gif which is similar to the shown above. 3. Add the image in the in index page with an alternate text "Runners Home Logo".
HTML Lists
There are three types of lists in HTML: unordered, ordered and definition lists.You will learn how to create all three.
Unordered Lists
Unordered lists are rendered as bulleted lists. Take a look at the following Example:
Example: BeatlesUnordered.html
<html> <head> <title>Beatles - unordered</title> </head> <body> <h1>Beatles</h1> <ul> <li>Paul McCartney</li> <li>John Lennon</li> <li>Ringo Starr</li> <li>George Harrison</li> </ul> </body> </html>
The <ul> tag starts an unordered list. Each list item is contained in <li></li> tags. The image below shows how this code would be rendered.
Nesting Unordered Lists

Unordered lists can also be nested. The browsers use indentation and different styles of bullets to display the nested lists. The following example shows how this works.
Example: BeatlesUnorderedNested.html
<html> <head> <title>Beatles - unordered and nested</title> </head> <body> <h1>Beatles Lead Singers</h1> <ul> <li>Paul McCartney <ul> <li>Lady Madonna</li> <li>Lovely Rita</li> <li>Eleanor Rigby</li>
30
<li>Can't Buy Me Love <ul> <li>John and Paul together</li> </ul> </li> <li>When I'm Sixty-Four</li> </ul> </li> <li>John Lennon <ul> <li>Norwegian Wood (This Bird Has Flown)</li> <li>All You Need Is Love</li> <li>Day Tripper</li> <li>Can't Buy Me Love <ul> <li>John and Paul together</li> </ul> </li> <li>Lucy In The Sky With Diamonds</li> </ul> </li> <li>Ringo Starr <ul> <li>Don't Pass Me By</li> <li>Yellow Submarine</li> </ul> </li> <li>George Harrison <ul> <li>Here Comes The Sun</li> <li>Roll Over Beethoven</li> </ul> </li> </ul> </body> </html>
Ordered Lists
Ordered lists are very similar to unordered lists. They are created with the <ol> tag and, by default, will display list items with numbers. Take a look at the following code:
Example: BeatlesOrdered.html
<html> <head> <title>Beatles - ordered</title> </head> <body> <h1>Beatles</h1> <ol> <li>Paul McCartney</li> <li>John Lennon</li> <li>Ringo Starr</li> <li>George Harrison</li> </ol> </body> </html>
Nesting Ordered Lists
31 Like unordered lists, ordered lists can be nested. However, unlike in some word processing applications, nested ordered lists will continue to be displayed using standard numbers.
Example: BeatlesOrderedNested.html
<html> <head> <title>Beatles - unordered and nested</title> </head> <body> <h1>Beatles Lead Singers</h1> <ol> <li>Paul McCartney <ol> <li>Lady Madonna</li> <li>Lovely Rita</li> <li>Eleanor Rigby</li> <li>Can't Buy Me Love <ul> <li>John and Paul together</li> </ul> </li> <li>When I'm Sixty-Four</li> </ol> </li> <li>John Lennon <ol> <li>Norwegian Wood (This Bird Has Flown)</li> <li>All You Need Is Love</li> <li>Day Tripper</li> <li>Can't Buy Me Love <ul> <li>John and Paul together</li> </ul> </li> <li>Lucy In The Sky With Diamonds</li> </ol> </li> <li>Ringo Starr <ol> <li>Don't Pass Me By</li> <li>Yellow Submarine</li> </ol> </li> <li>George Harrison <ol> <li>Here Comes The Sun</li> <li>Roll Over Beethoven</li> </ol> </li> </ol> </body> </html>
The resulting page is shown below
32
: As you can see, ordered lists can have nested unordered lists. The reverse is also true.
Start Attribute
The start attribute is used to specify what number the list should start on. It takes as a value any number. For example...
<ol start="3"> <li>Paul McCartney</li> <li>John Lennon</li> <li>Ringo Starr</li> <li>George Harrison</li> </ol>
Definition Lists
Definition Lists are not as widely used as unordered and ordered lists. The example below is taken from the W3C Recommendation . We've modified it to make it XHTML compliant.
Example: DefinitionList.html
<html> <head> <title>Definition List</title> </head> <body> <h1>Definition List</h1> <dl> <dt>Dweeb</dt> <dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em></dd> <dt>Hacker</dt> <dd>a clever programmer</dd> <dt>Nerd</dt>
33
<dd>technically bright but socially inept person</dd> </dl> </body> </html>
The <dl> element contains the definition list. The <dt> elements are the definition terms and the <dd> elements are the definition descriptions. The screenshot below shows how the code will be rendered.
Exercise: Creating Lists

In this exercise you will a mixture of both <UL> and <OL> tags to create a hotel menu. The Menu should include all categories of food items: Diner, Lunch, Breakfast, Snacks, and Other services.
HTML Tables
You create a wide variety of tables with only five tags: the <table> tag, which encapsulates a table and its elements in the HTML document's body content; the <tr> tag, which defines a table row; the <th> and <td> tags, which define the table's headers and data cells; and the <caption> tag, which defines a title or caption for the table. Each tag has one or more required and optional attributes, some of which affect not only the tag itself, but related tags. Tables are made up of one or more table rows, which contain one or more table cells. The tag for creating tables is <table>. The table row tag is <tr> and the two tags that can create table cells are <td> and <th>. Below is a simple table.
Example: TableHomeruns.html
<html><head><title>Home Run Hitters</title></head><body> <table> <caption>All-time Home Run Record</caption> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th></tr> <tr> <td>Hank Aaron</td> <td>755</td> <td>Braves</td></tr> <tr> <td>Babe Ruth</td> <td>714</td> <td>Yankees</td></tr> <tr> <td>Willie Mays</td> <td>660</td> <td>Giants</td></tr> </table></body></html>
The <th> elements are table header cells. By default, their content will be centered and bolded. The <td> elements are table data cells. By default, their content will be plain text and left aligned.
Adding a Caption
34 The table above has a caption, which is added by inserting the <caption> tag after the open <table> tag:
<table> <caption>All-time Home Run Record</caption> <tr>...
The image below shows how this table will be rendered in the browser.
Attributes
<table> Attributes
Attribute width border cellspacing cellpadding summary Description sets the width of the table in pixels or percentage sets the width of the border of the table sets the distance between cells in pixels sets the distance between cell content and the cell border in pixels used to provide a longer description of the table for screenreaders
<tr> Attributes
Attribute Description align aligns the content in the cells in the table row horizontally (left, center, or right) valign aligns the content in the cells in the table row vertically (top, middle, or bottom)
<td> and <th> Attributes

Attribute Description align aligns the content in the cells in the table row horizontally (left, center, or right) valign aligns the content in the cells in the table row vertically (top, middle, or bottom) colspan indicates the number of columns the cell should span rowspan indicates the number of rows the cell should span The table in the page below shows these attributes in use.
Example: TableHomeRunsFormatted.html
<html> <head> <title>Home Run Hitters</title> </head> <body> <table width="500" border="2" cellpadding="1" cellspacing="3"> <caption>All-time Home Run Record</caption> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th></tr> <tr> <td>Hank Aaron</td> <td align="right">755</td> <td>Braves</td></tr> <tr> <td>Barry Bonds</td> <td align="right">748</td> <td>Giants</td></tr> <tr> <td>Babe Ruth</td> <td align="right">714</td> <td>Yankees</td></tr> <tr> <td>Willie Mays</td> <td align="right">660</td> <td>Giants</td></tr> </table> </body></html>
This screenshot below shows how this table would be rendered:
35
Merging Cells
In HTML tables, all table rows must span the same number of columns and all table columns must span the same number of rows. To illustrate, take the following table, which has two rows.
Note that the second table row has only two cells; however, it spans all three columns. In HTML, this is accomplished by adding a colspan attribute to any table cell that spans more than one column. The following code would create a table like the one above.
<table border="1" width="100%"> <tr> <td>a</td> <td>b</td> <td>c</td></tr> <tr> <td>d</td> <td colspan="2">e</td></tr> </table>
Example: MergingCols.html
Spanning rows works in the same way.
Note that the second table column has only one cell; however, it spans both rows. This is accomplished with the rowspan attribute as shown in the code below.
Example: MergingRows.html
<table border="1" width="100%"> <tr> <td>a</td> <td rowspan="2">b</td> <td>c</td></tr> <tr> <td>c</td> <td>e</td></tr> </table>
Exercise: Creating Tables

Create a the table as shown below.
36
The <table> Tag attributes

The <table> tag has the following attributes. ATTRIBUTES Explanation BACKGROUND (Internet Explorer) BGCOLOR (Netscape) (Internet Explorer) bgcolor sets the background color of a table, rows, or individual cells. The background attribute, supported only by Internet Explorer, supplies the URL of an image that is tiled to fill the background of the table. The image will be clipped if the table is smaller than the image. By using this attribute with a borderless table, you can put text over an image contained within a document. BORDER Tells the browser to draw lines around the table and the rows and cells within it BORDERCOLOR, BORDERCOLORLIGHT (Internet Explorer) Supported by Internet Explorer only, these attributes set the color of the table borders, if displayed. BORDERCOLORDARK (Internet Explorer) The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table. CELLPADDING, CELLSPACING The cellspacing attribute controls the amount of space placed between adjacent cells in a table and along the outer edges of cells along the edges of a table. Values RGB or color names
Integer values RGB or color names
WIDTH You can make a table wider with the width attribute. The value of the width attribute is either an integer number of pixels or a relative percentage of the screen width. The width attribute can also be used with <td> or <th> tags.
37
HTML Forms
HTML forms are used for submitting data back to a script on the server for data processing. When a form is submitted, the data in the form fields is passed to the server in the form of name-value pairs. Server-side scripts, which can be written in several different languages, are used to process the incoming data and return a new HTML page to the browser. The page returned to the browser could be anything from a "Thank you for registering" message or a list of search results generated from a database query.
The process is as follows: 1. The user submits a form. The data is sent to the web server. 2. A script on the web server processes the form, possibly interacting with the file system, one or more databases, a mail server, or any number of other applications. 3. The script generates an HTML page, which the server returns to the client for display.
The <form> Tag

HTML forms are created using the <form> tag, which takes two main attributes: action and method. The action specifies the URL of the page with that processes the form. It is required. The method attribute has two possible values: post and get. A basic form tag is shown below:
<form method="post" action="Register.cfm">  </form>
38
Get vs. Post

The value of the method attribute is used determines how the form data will be passed to the server.
get
If get is used the data will be appended to the URL as part of a querystring. For example, if the form is filled out as follows:
When the user submitted the form, the URL for the new page would read (without the line breaks):
Register.cfm?email=ndunn@webucator.com&pw=foobar&flavor=hardChoc& sprinkles=on&whip=on&container=wafflecone& requests=I+want+a+really+big+cone%21&discount=20%2
You'll notice the file name is followed by a question mark, which is followed be several namevalue pairs (e.g, container=wafflecone) separated by ampersands (&). The get method is commonly used by search engines, because it allows the resulting page to be bookmarked.
post
When post is used, the name-value pairs are not sent as part of the querystring. Instead they are sent behind the scenes. This has the advantage of keeping the values hidden from anyone looking over the user's shoulder. Two other advantages of the post method are: 1. It allows for much more data to be submitted (i.e, larger forms). 2. It allows for files to be uploaded to the server. As a general rule, you should use post unless you want the user to be able to bookmark or share (e.g, via email) the resulting web page.
Form Elements
This section describes the different form elements that can be used to input data into a form. As you will see, many of these elements, but not all, are created with the input tag.
39 Note that input, other form controls, and label elements may not be direct children of the form element. They must be nested in other block-level elements.
Id and Name Attributes

Form fields (also called controls) take both the name attribute and the id attribute. They are used for different purposes. The name attribute is used to hold the value of the field. It is passed to the server as a variable. The id attribute is used by CSS and JavaScript to identify a specific element.
Labels
Form element labels should be put in <label> tags. Labels can be associated with form elements using two methods: Using the for attribute of the <label> to point to the id element of the form element. Wrapping the form element in the <label> tag. We'll show both methods in the first example, but only use the first method in the rest of the examples.
Text Fields
Text fields are created with the input tag with the type attribute set to text. They are used for single lines of text.
Method 1: <label>Email: <input type="text" name="email" id="email" value="" size="20" maxlength="40"></label> Method 2: <label for="email">Email:</label> <input type="text" name="email" id="email" value="" size="20" maxlength="40">
<input type="text" /> Attributes Attribute Description type must be set to "text" name variable name value initial value in the text field size width of the text field maxlength maximum number of characters that can be entered
Password Fields
Password fields are similar to text fields. The only difference is that the value entered is disguised so that onlookers cannot see it.
<label for="pw">Password:</label> <input type="password" name="pw" id="pw" size="10" maxlength="12">
<input type="password" /> Attributes Attribute Description type must be set to "password" name variable name size width of the password field maxlength maximum number of characters that can be entered
Submit and Reset Buttons

Submit and reset buttons are both created with the <input /> tag.
40
Submit Button
A form must have a submit button to be "submittable". Firefox and Internet Explorer both use "Submit Query" as the default text, but this can be changed with the value attribute. <input type="submit" name="submitbutton" id="submitbutton" value="Register" /> When a form has a submit button, it can be submitted either by clicking on the button or pressing the Enter key when an input element has focus. When a submit button is clicked, the name and value of that button are sent to the server (as a name-value pair). This can be useful in the event that a form has multiple submit buttons as the processing page could behave differently depending on which button was clicked.
Reset Button
A reset button is used to set all the form fields back to their original values. Firefox and Internet Explorer both use "Reset" as the default text, but this can be changed with the value attribute. <input type="reset" name="resetbutton" id="resetbutton" value="Clear" />
Hidden Fields
<input type="hidden" name="discount" id="discount" value="20%" />
Hidden fields are created with the input tag with the type attribute set to hidden. They are used to pass name-value pairs to the server without displaying them to the user. They are sometimes used in multi-page forms to keep track of variables from a form on a previous page. <input type="hidden" /> Attributes Attribute Description type must be set to "hidden" name variable name value initial value in the hidden field
Exercise: Creating a Registration Form

In this exercise, you will begin to create a registration form. The form will submit to a page on http://www.webucator.com, which will simply "dump" the values entered into the form back to you. The form should appear as follows
41
: 1. Open Forms/Exercises/RegistrationForm.html for editing. 2. Add a form to the page. The action page is http://www.webucator.com/ClassFiles/HTM101/Register.cfm. The method should be "post". 2. Add the following input elements: o text: name and id should be "username" o password: name and id should be "pw" o hidden: name and id should be "emailMe"; value should be your email. o submit button: value should be "Register" o reset button 3. When you are done, open the page in a browser, and fill out and submit the form. If successful, the processing page will display the values you entered andsend you an email.
o o
Checkboxes
Checkboxes are created with the input tag with the type attribute set to checkbox. The default value for a checkbox is "on". Although the value of a checkbox can be changed with the value attribute, there is usually no reason to do so, as the name-value pair only gets sent to the server if the checkbox is checked. In other words, the script on the server only needs to check for the existence of the variable name to see if the checkbox was checked or not.
Toppings: <input type="checkbox" name="sprinkles" id="sprinkles" /> <label for="sprinkles">Sprinkles</label> <input type="checkbox" name="nuts" id="nuts" /> <label for="nuts">Nuts</label> <input type="checkbox" name="whip" id="whip" /> <label for="whip">Whipped Cream</label>
<input type="checkbox" /> Attributes Attribute Description type must be set to "checkbox" name variable name value value of the checkbox checked indicate that checkbox is pre-checked
Radio Buttons
42 Radio buttons are created with the input tag with the type attribute set to radio. Radio buttons generally come in groups, in which each radio button has the same name. Only one radio button in the group can be checked at any given time. Each radio button in the group should have a unique value - the value to be sent to the server if that radio button is selected.
Cup or Cone <label><input type="radio" name="container" value="cup" /> Cup</label> <label><input type="radio" name="container" value="plaincone" /> Plain cone</label> <label><input type="radio" name="container" value="sugarcone" /> Sugar cone</label> <label><input type="radio" name="container" value="wafflecone" /> Waffle cone</label> You will notice that we used label differently this time. Instead of using the for attribute, we wrapped the radio button in the label tag. This is because the radio buttons don't include id attributes. <input type="radio" /> Attributes Attribute Description type must be set to "radio" name variable name value value of the radio button checked indicate that radio button is pre-checked
Exercise: Adding Checkboxes and Radio Buttons

In this exercise, you will add a checkbox and radio buttons to the registration form. At completion, the form should look like this:
1. Open Forms/Exercises/RegistrationForm.html for editing if you don't have it open already. 2. Add the following input elements: radio buttons: name gender and values should be "male" and "female" checkbox: name and id should be "terms" 2. When you are done, open the page in a browser, and fill out and submit the form.
o o
43
Select Menus
Select menus are created with the select tag. The size attribute determines how many options are
shown at once. By default, only one option can be selected; however, this can be changed by adding the multiple attribute to the select tag. The following tag would create a scrollable combo box that showed three options at a time and allowed multiple options to be selected.
<label for="flavor">Flavor:</label> <select name="flavor" id="flavor" size="3" multiple="multiple"> <option value="0" selected="selected"></option> <option value="choc">Chocolate</option> <option value="straw">Strawberry</option> <option value="van">Vanilla</option> </select>
The result would look like this: The select element must contain one or more option elements. The text between the open and close option tags appears in the select menu. The value of the value attribute is what gets passed to the server if that option is selected. The selected attribute is used to preselect an option. <select> Attributes Description
Attribute name variable name size number of options to appear at once multiple indicates that multiple options can be selected. value must be "multiple" <option> Attributes Attribute Description value value to send to server if option is selected selected indicate that option is pre-selected. value must be "selected"
Option Groups
Options can be arranged in groups using the <optgroup> tag. The label attribute is used to set the option group heading.
<label for="flavor">Flavor:</label> <select name="flavor" id="flavor"> <option value="0" selected="selected"></option> <optgroup label="Soft Flavors"> <option value="softChoc">Chocolate</option>
44
<option value="softStraw">Strawberry</option> <option value="softVan">Vanilla</option> </optgroup> <optgroup label="Hard Flavors"> <option value="hardChoc">Chocolate</option> <option value="hardStraw">Strawberry</option> <option value="hardVan">Vanilla</option> <option value="hardMint">Mint Chocolate Chip</option> <option value="hardCC">Cookies & Cream</option> </optgroup> </select>
Textareas
Textareas are created with the textarea tag. The cols and rows attributes indicate the number of columns and rows (in characters) that the textarea should span.
An initial value can be entered into the textarea by adding text between the open and close textarea tags. For example,
<textarea name="requests" cols="40" rows="6"> Initial value goes here. </textarea>
<textarea> Attributes Attribute Description name variable name cols number of columns to span in character width rows number of rows to span in character height
Exercise: Adding a Select Menu and a Textarea

In this exercise, you will add a select menu and textarea to the registration form. At completion, the form should look like this:
45
1. Open Forms/Exercises/RegistrationForm.html for editing if you don't have it open already. 2. Add the following input elements: select: name and id should be "referral". Options should be: i. "--Please choose--" with value of "0" ii. "Word of Mouth" with value of "wom" iii. "Other" with value of "other" iv. Option group with label of "Search Engine" and the following options: "Google" with value of "Google" "Yahoo!" with value of "Yahoo" "MSN" with value of "MSN" o textarea: name and id should be "comments". Be sure to include cols and rows attributes. When you are done, open the page in a browser, and fill out and submit the form.
Exercise
1. Create a web page that can be used to register students at CUEA. (Use the cuea registration form)
46
Colorful and Textured Backgrounds

Hey Put a bold
coLO
or textured pattern behind the text.
Objectives
After this lesson you will be able to: Create a solid color background for a web page. Calculate the hexadecimal code for a color value. Change the color of text and hypertext link items. Create a textured background from a graphic file. As we add different colors or even patterns, keep in mind that it should not interfere with the readability of text. With some modifications to the <body> tag, you can add a solid color background to your web page.
Color Representation: "Hex-Dec" and Color Basics

In a web browser, you have at your disposal many system colors to color text and backgrounds. Each color is identified by its Red- Green- Blue (RGB) values. RGB indicates three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets. Here is the tricky part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue. Here are some hexadecimal examples of different colors: Color
xx oo xx xx oo xx xx oo xx xx oo xx
Hex Code
FFCCCC 33FF66 663300 000077
Color
xx oo xx xx oo xx xx oo xx xx oo xx
Hex Code
3300FF AA0000 9900FF FFFF00
Name blue Maroon purple Yellow
47
xx oo xx xx oo xx EEEEEE 444444 xx oo xx xx oo xx 888888
Grey
black
000000
Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx
Name
aqua blue gray lime navy purple silver white
Color
xx oo xx xx oo xx xx oo xx xx oo xx xx oo xx
Name
fuchsia green olive red teal
The <font> Tag

The <font> tag lets you change the size, style, and color of text. It should be used like any other physical or content-based style tag for changing the appearance of a short segment of text. It has the following attributes: COLOR, SIZE, To control the color of text for the entire document, use the color the attributes in the<body> tag.
The size attribute

The value of the size attribute must be one of the virtual font sizes (1-7) described earlier, defined as an absolute size for the enclosed text or preceded by a plus or minus sign (+ or -) to define a relative font size that the browser adds to or subtracts from the base font size (see the <basefont> tag above). The browsers automatically round the size to 1 or 7 if the calculated value exceeds either boundary. In general, use absolute size values when you want the rendered text to be an extreme size, either very large or very small, or when you want an entire paragraph of text to be a specific size. For example, using the largest font for the first character of a paragraph makes for a crude form of illustrated manuscript.
<p> <font size=7>C</font>all me John.
Except for the extremes, use relative font sizes to render text in a size different than the surrounding text, to emphasize a word or phrase, for example
<p> Make sure you <font size=+1>always</font> sign and date the form!
The color attribute

The color attribute for the <font> tag sets the color of the enclosed text. The value of the attribute may be expressed in either of two ways: as the red, green, and blue (RGB) components of the desired color or as a standard color name. Enclosing quotes are recommended, but not required. The RGB color value, denoted by a preceding pound sign, is a six-digit hexadecimal number. The first two digits are the red component, from 00 (no red) to FF (bright red). Similarly, the next two
48 digits are the green component and the last two digits are the blue component. Black is the absence of color, #000000; white is all colors, #FFFFFF. For example, to create basic yellow text, you might use:
Here comes the <font color="#FFFF00">sun</font>!
Alternatively, you may set the enclosed font color using any one of the many standard color names as listed above. For instance, you could also have made the above sample text yellow with the following source:
Here comes the <font color=yellow>sun</font>!
The color attribute

The first way to add a style to you page is to simply declare it inside an HTML tag. The way to do this is to add the style=" " attribute to an html tag. The general form to add one style property looks like this:
style="property:value"
To help clarify this, let's look at an example. If you want the color of some text to look red, the style attribute would look like this:
style="color:red"
The style sheet property is "color". The value of the color is "red". Notice there is a colon in between color and red, not an equal sign, and there are no extra quote marks. Now, you just insert this into an HTML tag, such as the <FONT> tag. Remember to close the tag when you are through or you will have more red text than you bargained for! Here is the sample code:
<font style="color:red">The font inside will by red</font>
You can also apply more than one property in the style attribute. Place a semicolon after your first property and value, and add another. So if we want the text to be red and to be italic, we would do the following:
<font style="color:red; font-style:italic">I'm some red-hot italic text!</font>
Solid Color Backgrounds

The HTML format for adding a solid color background involves modifying the <body> tag to read:
<body bgcolor=#XXXXXX> where XXXXXX is the hexadecimal
representation (indicated by the # sign in front of it) of the
desired color. 1. Open any .html document using your text editor and view its source code. 2. Find the <body> tag and change it to:
<body bgcolor=#000000>
3. Save and Load your HTML file in your web browser If you did things correctly, your browser should have changed the background to a solid black. But you may have noticed that you cannot see your text! Why? Well, the default color for text is also black, so you now have black text on a black background!
49
Setting the Default text links and visited Links colors.

The TEXT, LINK, and VLINK attributes of the body tag can be used to set the default colors of the web site. As shown below.
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
where the XXXXXX values will determine: BGCOLOR = the color of the background (default is grey) TEXT = the color of normal body text (default is black) LINK = the color of an item that is a hypertext link (default is blue) VLINK = the color of a hypertext item recently visited (default is purple) You can now add some of these other color values by changing the tag to read:
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
This will provide a black background, pale yellow text, light aqua blue hypertext, and red hypertext to visited links. NOTE: the order of the items in the <BODY> tag does not matter
Textured Backgrounds
Solid colors add some variety to web pages -- but you can go even farther by adding a textured background. You use a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are: file size: Adding a background texture will require that an additional graphic file be downloaded. We suggest that the image files be less than 10k in size. readability: Be selective! Many background texture files are more distracting than enhancing for readability. Try to use background textures that are very light (with dark text) or very dark (with light text). Select for high contrast with the text and its background. effect: In the first web browsers that used backgrounds, the page would not appear until the background file was downloaded. This might mean for a slow connection, your reader might have to wait long for the background image to arrive before even seeing any content! However, later browsers download the background last so the page first is grey, then the text and graphics appear, and lastly the background arrives. REMEMBER! The load time for your pages will likely be slower (considerably for older modems) when your pages are read from a web server. The HTML format for adding a background image file is:
<body background="bgfile.gif">
where bgfile.gif is the name of the image file
Exercise
2. Create an image using paint and name it as image1.gif. Use the image to set the web page background using the image.
Applying Colors to the Page
50 Users can set default colors using browser preferences. The following table shows the colors that are initially set for Internet Explorer 6 and Mozilla (e.g., Netscape 6+ and Firefox). Color Background Text Link Visited Link Active Link Internet Explorer Mozilla System Color white System Color black blue blue purple purple unchanged red
These properties can be overridden with attributes in the <body> tag. The table below shows the attributes that correspond to the properties above. Property Background Text Link Visited Link Active Link Attribute bgcolor text link vlink alink
<body bgcolor="black" text="white" link="red" vlink="green" alink="orange">
<basefont>
The <basefont> tag is used to set a default font size, color and face for the page. The tag usually appears within the <head>, though this is not required by all browsers. The syntax is as follows:
<basefont size="5" color="darkblue" face="Comic Sans MS">
FRAMES AND FRAMESET
Frames
Frames are used to divide the browser's main display window into independent window frames, each simultaneously displaying a different document. Frames are supported by popular browsers. Microsoft for Internet Explorer, netscape , Mozila etc. An Overview of Frames You enable frames with a special frame document. Its contents do not get displayed. Rather, the frame document contains extension HTML tags that tell the browser how to divide its main display window into discrete frames, and what documents go inside the frames. The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. You can, however, direct one frame's document to load new content into another frame. That's done by attaching a name to a frame and targeting the named frame with a special attribute for the hyperlink <a> tag.
51
Frame Tags
There are three HTML tags used to create a frame document: <frameset>, <frame>, and <noframes>. In addition, Internet Explorer provides the <iframe> tag, which you may use to create inline, or floating, frames. A frameset is simply the collection of frames that make up the browser's window. Column- and row-definition attributes for the <frameset> tag let you define the number and initial sizes for the columns and rows of frames. The <frame> tag defines which document--HTML or otherwise--initially goes into the frames within those framesets, and is where you may give the frame a name to use for document hypertext links. Frames are placed into a frameset column by column, from left to right, and then row by row, from top to bottom, so the sequence and number of <frame> tags inside the <frameset> tag are important. The browser displays empty frames for <frame> tags that do not have a src attribute. It also displays empty frames if the <frameset> tag calls for more frames than the corresponding <frame> tags define. Such orphans remain empty; you cannot put content into them later, even if they have a target "name" for display redirection . Here is the HTML source that was used to create frame a is Example 1 <html> <head> <title>Frames Layout</title> </head> <frameset cols="20%,*"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset> </html> Example 2 <html> <head> <title>Frames Layout</title> </head> <frameset rows="20%,30%,*"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html"> </frameset> </html> <html> 20% 30% 20% 30% 50%
52
<head> <title>Frames Layout</title> </head> <frameset rows="20%,*" cols="65%,20%,*"> <frame src="frame1.html"> <frame src="frame2.html"> <frame src="frame3.html" name="fill_me"> <frame scrolling=yes src="frame4.html"> <frame src="frame5.html"> <frame src="frame6.html"> <noframes> Sorry, this document can be viewed only with a frames-capable browser. <a href = "frame1.html">Take this link</a> to the first HTML document in the set. </noframes> </frameset> </html>
Explanation
The order in which the browser fills the frames in a frameset goes across each row. Second, frame 4 sports a scrollbar because we told it to, even though the contents may otherwise fit without scrolling. The src attributes specify which web page will by loaded into the frame when the frames are loaded. The value of the attribute is the path to the web page to be loaded. (Scrollbars automatically appear if the contents overflow the frame's dimensions, unless explicitly disabled with the scrolling attribute in the <frame> tag.) Setting a linked web Page to display in a specified frame: The target and name attributes You cane name a frame using the name attribute in the frame tag. Once named, you can reference it as frame location in which to display a hypertext-linked document. To specify that a linked web page should be displayed in a named frame , you add a special target attribute to the anchor (<a>) tag of the source hypertext link. Thus we have away of restricting web pages to displayed in a particular frame only.
NESTED FRAMESETS
Frameset tags can be nested to produce any desired structure.
<html> <head> <title>Frames Layout</title> </head> <frameset cols="20%,*"> <frame src="frame1.html" name=listframe> <frameset rows="20%,30%"> <frame src="frame2.html" name=andvertframe> <frame src="frame3.html" name=contentframe> </frameset> </frameset> </html> ListFra me Link1 Link2 Link3 Link3
advertFrame
contentFrame
53
Exercise
<a href="new.html" target="fill_me">
Anyone who has opened more than one window on their desktop display to compare contents or operate interrelated applications knows instinctively the power of frames. One simple use for frames is to put content that is common in a collection, such as copyright notices, introductory material, and navigational aids, into one frame, with all other document content in an adjacent frame. As the user visits new pages, each loads into the scrolling frame, while the fixed-frame content persists. A richer frame document-enabled environment provides navigational tools for your document collections. For instance, assign one frame to hold a table of contents and various searching tools for the collection. Have another frame hold the user-selected document contents. As users visit your pages in the content frame, they never lose sight of the navigational aids in the other frame. Another beneficial use of frame documents is to compare a returned HTML form with its original for verification of the content by the submitting user. By placing the form in one frame and its submitted result in another, you let the user quickly verify that the result corresponds to the data entered in the form. If the results are incorrect, the form is readily available to be filled out again.
The <frame> Tag Attributes

The <frame> tag appears only within a <frameset>. Use it to set, via its associated src attribute, the URL of the document content that initially gets displayed inside the respective frame. It has the following attributes:

FRAMEBORDER MARGINHEIGHT MARGINWIDTH NAME NORESIZE SCROLLING SRC
The src attribute

The value of the src attribute for the <frame> tag is a URL of the document that is to be displayed in the frame. There is no other way to provide content for a frame. You shouldn't, for instance, include any <body> content within the frame document; the browser will ignore the frame tags and display just the contents of a <body> tag if it comes first, or vice versa. The document referenced by the src attribute may be any valid HTML document or displayable object, including images and multimedia. In particular, the referenced document may itself be composed of one or more frames. The frames are displayed within the referencing frame, providing yet another way of achieving complex layouts using nested frames. Since the source may be a complete HTML document, all the features of HTML apply within a frame, including backgrounds and colors, tables, fonts, and the like. Unfortunately, this also means that multiple frames in a single browser window may conflict with each other. Specifically, if each nested frame document (not a regular HTML document) has a different <title> tag, the title of
54 the overall browser window will be the title of the most recently loaded frame document. The easiest way to avoid this problem is to ensure that all related frame documents use the same title.
The name attribute

The optional name attribute for the <frame> tag labels that frame for later reference by the target attribute for the hypertext link anchor <a> tag and the <form> tag. This way, you can alter the contents of a frame using a link in another frame. Otherwise, like normal browser windows, hypertext-linked documents replace the contents of the source frame. The value of the name attribute is a text string enclosed in quotation marks.
The noresize attribute

Even though you may explicitly set their dimensions with attributes in the <frameset> tag, users can manually alter the size of a column or row of frames. To suppress this behavior, add the noresize attribute to the frame tags in the row or column whose relative dimensions you do not want users fiddling with. The noresize attribute is especially useful for frames that contain fixed images serving as advertisements, a button bar, or a logo. By fixing the size of the frame to contain just the image and setting the noresize attribute, you guarantee that the image will be displayed in the intended manner and that the remainder of the browser window will always be given over to the other frames in the document.
The scrolling attribute

The browser will display vertical and horizontal scrollbars with frames whose contents are larger than the allotted window space. If there is sufficient room for the content, the scrollbars disappear. The scrolling attribute for the <frame> tag gives you explicit control over whether the scroll bars appear or disappear. With scrolling="yes", the browser adds scroll bars to the designated frame even if there is nothing to scroll. If you set the scrolling attribute value to no, scrollbars will never be added to the frame, even if the frame contents are larger than the frame itself. The value auto, supported only by Netscape, works as if you didn't include the scrolling attribute in the tag; Netscape adds scrollbars as needed. To achieve auto behavior in Internet Explorer, simply omit the scrolling attribute altogether.
The marginheight and marginwidth attributes

The browser normally places a small amount of space between the edge of a frame and its contents. You can change those margins with the marginheight and marginwidth attributes, each including a value for the exact number of pixels to place around the frame contents. You cannot make a margin less than one pixel, or make it so large there is no room for the frame contents. That's because these attributes, like most other HTML ones, advise; they do not dictate to the browser. If your desired margin values cannot be accommodated, the browser ignores them and renders the frame as best it can.
The frameborder and bordercolor attributes

You may add or remove borders from a single frame with the frameborder attribute. Values of yes or 1 and no or 0 respectively enable or disable borders for the frame and override the value of the frameborder attribute for any frameset containing the frame.
55 Note that the browsers do react somewhat differently to border specifications. Netscape, for instance, removes an individual border only if adjacent frames sharing that border have borders turned off. Internet Explorer, in the other hand, will remove those adjacent borders, but only if they are not explicitly turned on in those adjacent frames. Our advice is to explicitly control the borders for each frame if you want to consistently control the borders for all frames across both browsers.
The <base> Default Target

It can be tedious to specify a target for every hypertext link in your documents, especially when most are targeted at the same window or frame. To alleviate this problem, you can add a target attribute to the <base> tag. The target attribute in the <base> tag sets the default target for every hypertext link in the current document that does not contain an explicit target attribute. For example, consider a table of contents document, where almost every link causes the document(web page) to be displayed in another window named "view_frame." Rather than include that target in each hypertext link, you should place the common target in the table of contents' <base> tag within its <head>:
<html> <head> <title>Table of Contents</title> <base target="view_frame"> </head> <body> <h3>Table of Contents</h3> <ul> <li><a href="pref.html">Preface</a> <li><a href="chap1.html">Chapter 1</a> <li><a href="chap2.html" >Chapter 2</a> <li><a href="chap3.html">Chapter 3</a> </ul> </body> </html>
Notice that we don't include any other target references in the list of hyperlinks, because the browser will load and display all the respective documents in the base target "view_frame."
The <noframes> Tag

A frame document has no <body>. In fact, it must not, since the browser will ignore any frame tags if it finds any <body> content before it encounters the first <frameset> tag. A frame document, therefore, is all but invisible to any non-frame capable browser. The <noframes> tag gives some relief to the frame-disabled. It supplies content for nonframe-compatible browsers Use the <noframes> tag only within the outermost <frameset> tag of a frame document. The content inside the <noframes> tag and its required end tag (</noframes>) is not displayed by any frame-capable browser, but is displayed in lieu of other contents in the frame document by browsers that do not handle frames. The contents of the <noframes> tag can be any normal HTML body content, including the <body> tag itself. Although this tag is optional, experienced HTML authors typically include the <noframes> tag in their frame documents with content that warns a frame-incompatible browser user that they're missing the show. And smart authors will give those users a way out, if not direct access to the individual documents that make up the frame document content.
56
Question 1. Discuss in details the difference between the <frame> and <noframe> tags. Include an example to illustrate their usage.
57
Inline Frames: The <iframe>tag

To this point, our discussion has centered around frames that are defined as part of a frameset. A frameset, in turn, replaces the conventional <body> of a document and supplies content to the user via its contained frames. Internet Explorer let you do things a bit differently: You also can define a frame that exists within a conventional document, displayed as part of that document's text flow. These frames behave a lot like inline images, which is why they are known as inline frames. They are defined using the <iframe>tag. It has the following attributes: ALIGN FRAMEBORDER HEIGHT MARGINHEIGHT MARGINWIDTH NAME SCROLLING SRC WIDTH The <iframe> tag is not used within a <frameset> tag. Instead, it appears anywhere in your document that an <img> tag could appear. The tag defines a rectangular region within the document in which the browser displays a separate HTML document, including scrollbars and borders. Most of the attributes for the <iframe> tag, including the frameborder, marginheight, marginwidth, name, scrolling, and src attributes, behave exactly as the corresponding attributes for the <frame> tag. Use the content of the <iframe> tag to provide information to users of browsers other than Internet Explorer. Internet Explorer ignores these contents whereas all other browsers ignore the <iframe> tag and therefore display its contents as if it were regular body content. For instance, use the <iframe> content to explain to non-Internet Explorer users what they are missing:
...other document content <iframe src="sidebar.html" width=75 height=200 align=right> Your browser does not support inline frames. To view this <a href="sidebar.html">document</a> correctly, you'll need a copy of Internet Explorer. </iframe> ...subsequent document content
In this example, we let the user know that they were accessing an unsupported feature, and provided a link to the missing content.
The align attribute

Like the align attribute for the <img> tag, this inline frame attribute lets you control where the frame gets placed inline with the adjacent text or moved to the edge of the document, allowing text to flow around the frame. For inline alignment, use top, middle, or bottom as the value of this attribute. The frame will be aligned with the top, middle, or bottom of the adjacent text, respectively.
58 To allow text to flow around the inline frame, use the left or right values for this attribute. The frame will be moved to the left or right edge of the text flow, respectively, and the remaining content of the document will be flowed around the frame. This behavior is exactly like that of images whose align attribute has been set to left or right.
The height and width attributes

Internet Explorer puts the contents of an inline frame into a predefined, 150 pixel-tall, 300 pixelwide box. Use the height and width attributes with values as the number of pixels to change those dimensions.
Using Inline Frames

Although you probably will shy away from inline frames for most of your web pages, they can be useful, particularly for providing information related to the current document being viewed, similar to the sidebar articles you'd find in a conventional printed publication. Unfortunately, a large component of your audience will not be able to view the inline frames, so make sure you include appropriate alternative content within the <iframe> and </iframe> tags to help those less fortunate viewers find the frame contents. Except for their location within conventional document content, inline frames are treated exactly like regular frames. You can load other documents into the inline frame using its name (see following section) and link to other documents from within the inline frame.
Crash Course in CSS

In this lesson of the CSS tutorial, you will learn... 1. 2. 3. 4. 5. 6. 7. 8. 9. To understand the benefits of Cascading Style Sheets. To use styles to redefine how elements are formatted. To create and use classes and ids. To use embedded style sheets. external style sheets, and inline styles. To specify the media types to which style rules should apply. To use <div> and <span> elements. To use the different units of measurement available in CSS. To understand how values are inherited. To import style sheets with @import.
Benefits of Cascading Style Sheets

In HTML 4.0, most HTML formatting elements have been deprecated, meaning that, although they are still supported by browsers, the World Wide Web Consortium (W3C) recommends that they no longer be used. Web designers are to use CSS instead. The major benefits of CSS are: 1. Cleaner code o Easier to maintain o Speedier download o Better for search engine optimization
59 2. Modular code o Style rules can be applied to multiple pages o Consistency of design o Easier to Maintain 3. Design Power o Precise control of position, size, margins, etc. 4. Division of labor o Developers develop / Designers design 5. Better Accessibility o No need to misuse tags (e.g, <blockquote> for formatting) o No need for invisible images for positioning o Users' style sheets override authors' styles
CSS Rules
CSS rules are statements that define the style of an element or group of elements. The syntax is as follows: Syntax
selector {property:value; property:value; property:value}
Each property:value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule. Syntax
p {color:darkgreen; font-family:Verdana; font-size:10pt}
This rule specifies that all paragraph text should be darkgreen and use a 10-point Verdana font.
CSS Comments
Comments in CSS begin with "/*" and end with "*/". See the example below.
p {color:red} /* All paragraphs should be red */
Selectors
Selectors identify the element(s) affected by the CSS rule. There are several different types of selectors, including type selectors, descendant selectors, class selectors, and ID selectors.
Type Selectors
Type selectors specify elements by tag name and affect every instance of that element type. Looking again at a previous example:
p {color:darkgreen; font-family:Verdana; font-size:10pt}
This rule specifies that the text of every <p> element should be darkgreen and use a 10-point Verdana font.
Descendant Selectors
Descendant selectors specify elements by ancestry. Each "generation" is separated by a space. For example, the following rule states that <b> tags within <p> tags should have red text.
p b {color:red}
Class Selectors
60 Almost all elements can take the class attribute, which assigns a class name to an element. Class names are created in style sheet with rules defined for class selectors. Class selectors begin with a dot and have arbitrary names. For example, the following rule creates a class called "warning," which makes the text of all elements of that class bold and red.
.warning {font-weight:bold; color:#ff0000}
Following are a couple of examples of elements of the warning class.

<h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p>
If the class selector is preceded by an element name, then that selector only applies to the specified type of element. To illustrate, the following two rules indicate that h1 elements of the class "warning" will be underlined, while p elements of the class "warning" should not be.
h1.warning {color:#ff0000; text-decoration:underline p.warning {color:#ff0000; font-weight:bold}
Because both rules indicate that the color should be red (#ff0000), this could be rewritten as follows.
.warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold}
ID Selectors
As with the class attribute, almost all elements can take the id attribute, which is used to uniquely identify an element on the page. ID selectors begin with a pound sign (#) and have arbitrary names. The following rule will indent the element with the "maintext" id 20 pixels from the left and right.
#maintext {margin-left:20px; margin-right:20px} <div id="maintext"> This is the main text of the page... </div>
Grouping
Selectors can share the same declarations by separating them with commas. The following rule will underline all i elements, all elements of the class "warning" and the element with the id of "important."
i, .warning, #important {text-decoration: underline}
The Cascade
Web designers can define style rules in three different places: 1. In an embedded style sheet. 2. In an external (or linked or imported) style sheet. 3. Inline in an element. In the event that rules conflict, rules specified later in the document take precedence.
Embedded Style Sheets

Embedded style sheets appear in the style element in the head of an HTML page. The code below shows a page with an embedded style sheet.
Example: EmbeddedStyleSheet.html
61
<html> <head> <title>Embedded Style Sheet</title> <style type="text/css"> .warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} </style> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> </body> </html>
As you can see, the <style> tag takes the type attribute, which is used to indicate that this is a CSS style sheet. This page will render as follows. In this exercise, you will add an embedded style sheet to EmbeddedStyleSheet.html. You will be adding several rules to a simple HTML file. Do not worry about learning the CSS properties and values at this point. This exercise is just to give you some practice creating a style sheet. 1. 2. 3. 4. Open EmbeddedStyleSheet.html in a browser. Open EmbeddedStyleSheet.html for editing. Add a style block in the head of the page. Don't forget to include the type attribute. Add a rule for the body element that contains the following property-value pairs: background-image:url('Images/Baseball.gif'); background-repeat:repeat-x; background-position:bottom; margin-left:50%; margin-top:20px; Add a rule for div elements that contains the following property-value pairs: o padding:10px; o border:10px groove red; o width:300px; o background-image:url('Images/YankeeStadium.gif'); o margin-left:-170px; Add a rule for h1 elements that contains the following property-value pairs: o text-align:center; o font-size: 12pt; o color:#000099; o margin-bottom:5px; o text-decoration:underline; Add a rule for table elements that contains the following property-value pairs: o margin:5px; o width:290px; Add a rule for th elements that contains the following property-value pairs: o margin:5px; Add a rule for td elements that contains the following property-value pairs: o padding-left:8px; o padding-right:8px; o border:1px solid #990000;
o o o o o
2.
3.
4. 5. 6.
62 background-color:#ffffcc; 7. Assign an id of "trHeader" to the first table row and add a rule for this id that contains the following property-value pairs: o text-decoration:underline; o color:#990000; 8. Assign a class called "centerCell" to all of the center table data cells and add a rule for this class that contains the following property-value pairs: o text-align:center;
o
Open to see how it looks
External Style Sheets

External style sheets are created in separate documents with a ".css" extension. An external style sheet is simply a listing of rules. It cannot contain HTML tags. Example:
.warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold}
Code Explanation The above CSS file can be included in any number of HTML pages. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet. Example:
<?xml version="1.0" encoding="utf-8"?> <html> <head> <title>External Style Sheet</title> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> </body> </html>
<link> Attributes Attributed Description href points to the location of the external style sheet rel must be set to "stylesheet" for linking style sheets type must be set to "text/css" for linking to cascading style sheets There is no limit to the number of external style sheets a single HTML page can use. Also, external style sheets can be combined with embedded style sheets.
Inline Styles
Inline styles are created by adding the style attribute to a tag. As with the class and id attributes, almost all elements can take the style attribute. The value of the style attribute is a list of one or more property-value pairs separated by semi-colons. The Example below illustrates how inline styles are used. Example:
<html> <head> <title>Inline Styles</title> </head> <body>
63
<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p> <ul style="margin-top:-20px; font-size:10pt"> <li style="list-style-type:square">Hello</li> <li style="list-style-type:circle">Hi</li> <li style="list-style-type:disc">Howdy</li> </ul> </body>/html>
Media Types
Styles can be defined for different media. For example, you may want to style a page one way for viewing with a browser and a different way for viewing in print. The media type is defined in the <link> tag for external style sheets and in the <style> tag for embedded style sheets. Syntax
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen"> <style type="text/css" media="all"> /* rules */ </style>
If the media is undefined then the style rules will apply to all media. Possible values for media are: all ,aural, braille , embossed , handheld, print ,projection ,screen ,tty ,tv The following Example illustrates how you can use CSS to design for different media.
Example: Media.html
<html> <head> <title>CSS Media</title> <style type="text/css" media="screen"> .warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} .printDisplay {display:none} </style> <style type="text/css" media="print"> .warning {color:#660000;} h1.warning {text-decoration:underline; font-size:1in;} p.warning {font-weight:bold; font-size:.5in;} .screenDisplay {display:none} </style> </head> <body> <h1 class="warning">WARNING</h1> <p class="warning">Don't go there!</p> <p class="printDisplay">This is the print version.</p> <p class="screenDisplay">This is the screen version.</p> </body></html>
As shown below, the screen output of the file above is different from the print output.
<div> and <span>

The <div> and <span> tags are used in conjunction with Cascading Style Sheets. By themselves, they do very little. In fact, the <span> tag has no visual effect on its contents. The only effect of
64 the <div> tag is to block off its contents, similar to putting a <br> tag before and after a section on the page. Like most tags, the <div> and <span> tag can take the class, id, and style attributes. It is through these attributes that styles are applied to the elements. The tags are used like any other HTML tags and can be nested within each other any number levels. Example: DivAndSpan.html
<html> <head> <title>Div and Span</title> </head> <body> <div style="position:absolute; left:0px; top:0px; font-family:Verdana; font-size:10pt; border-style:groove; border-width:30px; border-color:blue; padding:4px"> This text appears in the <span style="font-style:italic; color:red">upper-left hand corner</span> of the page.<br /> It also has a big blue groovy border around it. </div> </body> </html>
Exercise: Divs and Spans In this exercise, you will add class and id attributes to div and span tags to an already existing HTML page. The HTML page already contains an embedded style sheet, which you will not need to modify. There are no step by step instructions. Review the rules in the embedded style sheet and apply classes and ids as appropriate.
Units of Measurement
CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available. Unit Description Example px Pixels margin-top: 10px; pt Points font-size: 12pt; in Inches padding-top: .5in; cm Centimeters top: 5cm; mm Millimeters left: 45mm; pc Picas bottom: 12pc; em Ems font-size: 1.5em; ex Exs font-size: 1.5ex; % Percentage width: 80%;
Pixels (px)
The measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user's monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.
Points (pt)
Points should be reserved for print. There are 72 points in an inch.
65
Inches (in), Centimeters (cm), and Millimeters (mm)

Although these are the most common units of measurement in life, they should be avoided in Web design.
Picas (pc)
Picas should be reserved for print. There are 6 picas in an inch.
Ems (em)
An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font. Because em is a relative rather than absolute measurement, it is often used in Web design.
Exs (ex)
The "x-height" is the height of font's lowercase "x". Exs are used to set the size of content based on the size of the surrounding font.
The Inherit Value

Many properties take the value inherit. This specifies that the property value should be inherited from the parent element. If such a property is left undefined, the implicit value is inherit.
@import
The @import rule is used to import one style sheet into another. There are two syntaxes for using @import: Syntax
@import "styles.css" mediatypes; @import url("styles.css") mediatypes;
In the examples above, mediatypes would be replaced by a comma-delimited list of media types to which the imported style sheet applies.
66
CSS Properties List

A listing of the CSS properties
Quick Links

Background Properties Border Properties Classification and Positioning Properties Dimension Properties Font Properties Generated Content Properties List Properties Margin Properties Outline Properties Padding Properties Page Properties Table Properties Text Properties Other Properties
Background Properties
Property
backgroundattachment backgroundcolor backgroundimage
CSS Background Properties Description Possible Values

Declares the attachment of a background image (to scroll with the page content or be in a fixed position). Declares the background color.
Examples
backgroundposition
backgroundrepeat background
div { backgroundfixed attachment:fixed; } scroll div { backgroundattachment:scroll; } Valid color names, RGB div { background-color:green; } values, hexidecimal notation. div { color:#00FF00; } div { backgroundDeclares the background image:url(images/img.jpg); } URL values. image of an element. body { backgroundimage:url(img.jpg); } Lengths or percentages for the x and y positions, or one div { background-position:10px of the predefined values: Declares the position of a 50px; } top left, top center, ,top right background image. div { background-position:bottom center left, center center right; } center right, bottom left bottom center, bottom right div { background-repeat:repeatRepeat, repeat-x Declares how and/or if a x; } repeat-y background image repeats. div { background-repeat:no-repeat; no-repeat } Used as a shorthand Separate values by a space in div { background:green property to set all the the following order (those url(image.jpg) no-repeat fixed background properties at that are not defined will use center center; } once. inherited or default initial div { background:url(image.jpg) values): fixed; } background-color background-image
67
background-repeat background-attachment background-position
Border Properties
Property Description CSS Border Properties Possible Values Examples
div { border-topborder-top- Declares the color of Valid color names, RGB values, hexidecimal color:green; } color the top border. notation, or the predefined value transparent. div { border-topcolor:#00FF00; } div { border-topborder-top- Declares the style of None, hidden, dotted, dashed, , solid, double, style:solid; } style the top border. groove, ridge, inset, outset div { border-topstyle:inset; } div { border-topborder-top- Declares the width of Lengths or the following predefined values: width:2px; } width the top border. Thin, medium, thick div { border-topwidth:thin; } Separate values by a space in the following Used as a shorthand div { border-top:2px solid order (those that are not defined will use property to set all the green; } border-top inherited or default initial values): border-top properties div { border-top:thick border-top-width, border-top-style at once. double #00FF00; } border-top-color ,
Valid color names, RGB values, borderDeclares the color hexidecimal notation, or the predefined right-color of the right border. value transparent.
div { borderrightcolor:green; } div { borderrightcolor:#00FF00; }

div { border-rightstyle:solid; } div { border-rightstyle:inset; } div { border-rightwidth:2px; } div { border-rightwidth:thin; } div { border-right:2px solid green; } div { border-right:thick double #00FF00; }
borderDeclares the style of None, hidden, dotted, dashed, solid right-style the right border. double, groove, ridge, inset, outset borderDeclares the width of Lengths or the following predefined values: right-width the right border. Thin, medium, thick Separate values by a space in the following Used as a shorthand order (those that are not defined will use property to set all the border-right inherited or default initial values): border-right border-right-width, border-right-style properties at once. border-right-color borderbottomcolor borderbottomstyle
div { border-bottomDeclares the color of Valid color names, RGB values, hexidecimal color:green; } the bottom border. notation, or the predefined value transparent. div { border-bottomcolor:#00FF00; } div { border-bottomDeclares the style of None, hidden, dotted, dashed, solid style:solid; } the bottom border. double, groove, ridge, inset, outset div { border-bottomstyle:inset; }
68
borderbottomwidth Lengths or the following predefined values: Declares the width of thin the bottom border. medium thick Separate values by a space in the following Used as a shorthand order (those that are not defined will use property to set all the inherited or default initial values): border-bottom border-bottom-width properties at once. border-bottom-style border-bottom-color div { border-bottomwidth:2px; } div { border-bottomwidth:thin; } div { border-bottom:2px solid green; } div { border-bottom:thick double #00FF00; }
borderbottom
div { border-leftborder-left- Declares the color of Valid color names, RGB values, hexidecimal color:green; } color the left border. notation, or the predefined value transparent. div { border-leftcolor:#00FF00; } div { border-leftborder-left- Declares the style of None, hidden, dotted, dashed, solid style:solid; } style the left border. double, groove, ridge, inset, outset div { border-leftstyle:inset; } div { border-leftborder-left- Declares the width of Lengths or the following predefined values: width:2px; } width the left border. Thin, medium, thick div { border-leftwidth:thin; } Separate values by a space in the following Used as a shorthand div { border-left:2px solid order (those that are not defined will use property to set all the green; } border-left inherited or default initial values): border-left properties div { border-left:thick border-left-width, border-left-style, border-leftat once. double #00FF00; } color Valid color names, RGB values, hexidecimal notation, or the predefined value transparent. Separate the color for each border by a space, declaring the colors for the borders in the following order: border-top-color, border-right-color div { border-color:green border-bottom-color, border-left-color red blue olive; } Declares the border Undeclared values work as further shorthand div { border-color:green; } bordercolor of all four notation. If only one color value is declared, all div { border-color:green color borders at once. four borders will use that color. If two colors red; } are declared, the top and bottom borders will div { border-color:green use the first color while the right and left red blue; } borders will use the second color. If three colors are declared, the top border will use the first color, the right and left borders will use the second color, and the bottom border will use the third color. border-style Declares the border None, hidden, dotted, dashed, solid, double, div { border-style:solid style of all four groove, ridge, inset, outset dotted dashed double; } borders at once. Undeclared values work as further shorthand div { border-style:solid; } notation. If only one style value is declared, all div { border-style:solid four borders will use that style. If two styles dotted; } are declared, the top and bottom borders will div { border-style:solid use the first style while the right and left dotted dashed; } borders will use the second style. If three styles are declared, the top border will use the first style, the right and left borders will use the
69
second style, and the bottom border will use the third style. Lengths or the following predefined values: thin medium thick div { border-width:1px Undeclared values work as further shorthand 3px 5px 2px; } notation. If only one width value is declared, Declares the width of div { border-width:thin; } all four borders will use that width. If two all four borders at div { border-width:2px widths are declared, the top and bottom borders once. 4px; } will use the first width while the right and left div { border-width:2px borders will use the second width. If three 4px 5px; } widths are declared, the top border will use the first width, the right and left borders will use the second width, and the bottom border will use the third width. Used as a shorthand to declare the border Separate values by a space in the following div { border:1px double properties when all order (those that are not defined will use green; } four borders will inherited or default initial values): div { border:thin solid have the same border-width, border-style, border-color #00FF00; } appearance.
borderwidth
border
Classification and Positioning Properties

Property
clear
CSS Classification/Positioning Properties Description Possible Values

Declares the side(s) of an element where no previous Left, right,both floating elements are allowed to none be adjacent. URL values, and the following prefefined values: Auto, crosshair, default Declares the type of cursor to be pointer, move, e-resize displayed. ne-resize, nw-resize, n-resize, seresize, sw-resize, s-resize, w-resize text, wait, help None, inline, block, list-item, run-in, compact marker, table, inline-table Declares if/how the element table-row-group, table-header-group, displays. table-footer-group, table-row table-column-group, table-column table-cell, table-caption Declares whether a box should left float to the left or right of other right content, or whether it should not none be floated at all. visible Declares the visibility of boxes hidden generated by an element. collapse
Examples
div { clear:right; } div { clear:both; } div { cursor:crosshair; } div { cusrsor:url(image.csr); } div { cusrsor:url(image.csr), pointer; }
cursor
display
div { display:none; } div { display:inline; } div { display:marker; }
float
div { float:left; } div { float:right; } div { visibility:visible; } div { visibility:hidden; }
visibility
70
Declares the distance that the top content edge of the element is offset below the top edge of its Lengths, percentages, and the div { top:15px; } containing block. The position predefined value auto. div { top:2%; } property of the element must also be set to a value other than static. Declares the distance that the right content edge of the element is offset to the left of the right Lengths, percentages, and the div { right:15px; } edge of its containing block. The predefined value auto. div { right:2%; } position property of the element must also be set to a value other than static. Declares the distance that the bottom content edge of the element is offset above the Lengths, percentages, and the div { bottom:15px; } bottom edge of its containing predefined value auto. div { bottom:2%; } block. The position property of the element must also be set to a value other than static. Declares the distance that the left content edge of the element is offset to the right of the left edge Lengths, percentages, and the div { left:15px; } of its containing block. The predefined value auto. div { left:2%; } position property of the element must also be set to a value other than static. Declares the type of positioning Static, relative, absolute, div { position:absolute; } of an element. fixed div { position:relative; } Shapes, or the predefined value auto. Declares the shape of a clipped In CSS 2, the only valid shape is a div { clip:auto; } region when the value of the rectangle, using the following format div { clip:rect(2px, 4px, overflow property is set to a to specify the offset lengths from 7px, 5px); } value other than visible. each side of the box: rect(top, right, bottom, left) Declares how content that Visible, hidden, scroll div { overflow:hidden; } overflows the element's box is auto div { overflow:scroll; } handled. Lengths, percentages, and the Declares the vertical alignment following predefined values: span { verticalof an inline-level element or a baseline, sub, super align:middle; } table cell. top, text-top, middle, bottom td { vertical-align:top; } text-bottom Declares the stack order of the Integer values and the predefined div { z-index:2; } element. value auto. div { z-index:auto; }
top
right
bottom
left
position
clip
overflow
verticalalign z-index
Dimension Properties
Property
height
Description
Declares the height of the element.
CSS Dimension Properties Possible Values

Lengths, percentages, and the predefined value auto.
Examples
div { height:200px; } div { height:50%; }
71
div { maxheight:200px; } div { max-height:50%; } div { minheight:200px; } div { minheight:50%; } div { width:500px; } div { width:75%; } div { maxwidth:500px; } div { maxwidth:75%; } div { minwidth:500px; } div { minwidth:75%; }
Declares the maximum height of Lengths, percentages, and the max-height the element. predefined value auto. Declares the minimum height of the element. Declares the width of the element. Declares the maximum width of the element. Declares the minimum width of the element. Lengths, percentages, and the predefined value auto. Lengths, percentages, and the predefined value auto. Lengths, percentages, and the predefined value auto. Lengths, percentages, and the predefined value auto.
min-height width max-width
min-width
Font Properties
Property Description CSS Font Properties Possible Values Examples
Valid font family names or generic family names, i.e. Arial, Verdana, sansserif, "Times New Roman", Times, serif, Declares the name of the font etc. to be used. Previously set in font-family Font family names can be separated by a HTML via the face attribute in comma in the same declaration to allow a <font> tag. additional and/or generic family names to be used if the prefereed font is unable to be displayed. Lengths (number and unit type i.e. Declares the size of the font. 1em, 12pt, 10px, 80%) or one of the Previously set in HTML via following predefined values: font-size the size attribute in a <font> xx-small, x-small, small, medium, large, tag. x-large xx-large, smaller, larger
div { fontfamily:Arial; } div { font-family:Arial, Helvetica, sans-serif; }
div { font-size:70%; } div { fontsize:0.85em; } div { font-size:medium; } div { font-sizeadjust:0.54; } div { font-sizeadjust:0.46; }
font-sizeadjust
Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property Numeric value may return in CSS 3. Declares the aspect value
(font size divided by x-height). Normal, wider, narrower ultra-condensed extra-condensed condensed, semi-condensed semi-expanded expanded, extra-expanded ultra-expanded normal
Limited browser support: Was part of CSS 2, but not in CSS 2.1. This property font-stretch may return in CSS 3. Declares the stretch of the font face. font-style Declares the font style.
div { fontstretch:narrower; } div { font-stretch:ultraexpanded; } div { font-style:italic; }
72
italic oblique font-variant Declares the font variant. normal small-caps Normal,bold, bolder, lighter 100, 200, 300, 400, 500, 600, 700 800, 900 div { font-style:oblique; } div { fontvariant:normal; } div { fontvariant:small-caps; } div { fontweight:bolder; } div { fontweight:200; } div { font:italic smallcaps bold 1em 1.2em Arial } div { font:bold 0.8em Verdana }
font-weight
Declares the font weight (lightness or boldness)
font
Separate values by a space in the Used as a shorthand property following order (those that are not to declare all of the font defined will use inherited or default properties at once (except font- initial values): size-adjust and font-stretch). font-style, font-variant, font-weight font-size, line-height, font-family
Generated Content Properties

Property CSS Generated Content Properties Description Possible Values Examples
String values, URL values, and predefined value formats: counter(name) counter(name, list-styletype) Generates content in the document in counters(name, string) content conjunction with the :before and counters(name, string, list:after pseudo-elements. style-type) attr(X) open-quote close-quote no-open-quote no-close-quote counterDeclares the counter increment for Integers and the predefined increment each instance of a selector. value none. Declares the value the counter is set Integers and the predefined counter-reset to on each instance of a selector. value none. Declares the type of quotation marks String values and the quotes to use for quotations and embedded predefined value none. quotations.
div:before { content:"some text"; } div:after { content:url(page2.html); }
List Properties
Property
list-styletype
Description
Declares the type of list marker used.
CSS List Properties Possible Values
Examples
Disc, circle, square, decimal, decimal- ol { list-style-type:upperleading-zero, lower-roman, upperroman; } roman, lower-alpha, upper-alpha, ul { list-style-type:square; } lower-greek, lower-latin, upper-latin,
73
Hebrew, armenian georgian, cjk-ideographic hiragana, katakana, hiragana-iroha, katakana-iroha list-styleposition list-styleimage Declares the position of the inside list marker. outside Declares an image to be used as the list marker. URL values. ol { list-styleposition:inside; } ul { list-styleposition:outside; } ul { list-styleimage:url(image.jpg); } ul { list-style:disc inside url(image.gif); } ol { list-style:upper-roman outside; }
list-style
markeroffset
Separate values by a space in the following order (those that are not Shorthand property to defined will use inherited or default declare three list properties initial values): at once. list-style-type list-style-position list-style-image Declares the marker offset for elements with a value of Lengths and the predefined value auto. marker set for the display property.
li:before { display:marker; marker-offset:5px; }
Margin Properties
Property Description CSS Margin Properties Possible Values Examples
div { marginDeclares the top top:5px; } margin-top margin for the Lengths, percentages, and the predefined value auto. div { marginelement. top:15%; } div { marginDeclares the right marginright:5px; } margin for the Lengths, percentages, and the predefined value auto. right div { marginelement. right:15%; } div { marginDeclares the bottom marginbottom:5px; } margin for the Lengths, percentages, and the predefined value auto. bottom div { marginelement. bottom:15%; } div { marginDeclares the left left:5px; } margin-left margin for the Lengths, percentages, and the predefined value auto. div { marginelement. left:15%; } margin Shorthand property Separate values by a space in the following order (those div { margin:5px used to declare all that are not defined will use inherited or default initial 12px 4px 7px; } the margin properties values): div at once. margin-top { margin:5px; } margin-right div { margin:5px margin-bottom 10px; } margin-left div { margin:5px Undeclared values work as further shorthand notation. If 7px 4px; } only one length value is declared, all four margins will use that length. If two lengths are declared, the top and
74
bottom margins will use the first length while the right and left margins will use the second length. If three lengths are declared, the top margin will use the first length, the right and left margins will use the second length, and the bottom margin will use the third length.
Outline Properties
Property
outlinecolor
Description
Declares the outline color.
CSS Outline Properties Possible Values

Valid color names, RGB values, hexidecimal notation. none dotted dashed solid double groove ridge inset outset Lengths or the following predefined values: thin medium thick Separate values by a space in the following order (those that are not defined will use inherited or default initial values): outlinecolor, outline-style, outline-width
Examples
div { outlinecolor:green; } div { outlinecolor:#00FF00; } div { outlinestyle:solid; } div { outlinestyle:inset; }
outlinestyle
Declares the style of the outline.
outlinewidth
Declares the width of the outline. Used as a shorthand property to set all the background properties at once.
div { outlinewidth:2px; } div { outlinewidth:thin; } div { outline:green solid 2px; } div { outline:#00FF00 double thick; }
outline
Padding Properties
Property
paddingtop paddingright paddingbottom padding-
Description
Declares the top padding for the element. Declares the right padding for the element.
CSS Padding Properties Possible Values

Examples
div { paddingtop:5px; } div { paddingtop:15%; } div { paddingright:5px; } div { paddingright:15%; } div { paddingbottom:5px; } div { paddingbottom:15%; } div { padding-
Declares the bottom padding for the Lengths, percentages, and the predefined value auto. element. Declares the left Lengths, percentages, and the predefined value auto.
75
padding for the element. Separate values by a space in the following order (those that are not defined will use inherited or default initial values): padding-top, padding-right, padding-bottom, padding-left Shorthand property Undeclared values work as further shorthand notation. If used to declare all only one length value is declared, all four sides will use the margin that length. If two lengths are declared, the top and properties at once. bottom sides will use the first length while the right and left sides will use the second length. If three lengths are declared, the top side will use the first length, the right and left sides will use the second length, and the bottom side will use the third length. left:5px; } div { paddingleft:15%; } div { padding:5px 12px 4px 7px; } div { padding:5px; } div { padding:5px 10px; } div { padding:5px 7px 4px; }
left
padding
Page Properties
Property
marks orphans page page-breakafter page-breakbefore page-breakinside size widows
Description
CSS Page Properties Possible Values

crop cross Integers Indentifiers Auto, always, avoid, left, right Auto, always, avoid, left right Auto,avoid
Examples
@page { marks:crop; } @page { orphans:2; } More Information More Information More Information More Information More Information @page { widows:2; }
Declares the type of marks to display outside the page box. Declares the minimum number of lines of a paragraph that must be left at the bottom of a page. Declares the type of page where an element should be displayed. Declares a page break. Declares a page break. Declares a page break.
Lengths, and the following Declares the size and orientation of a predefined values: page box. Auto, landscape, potrait Declares the minimum number of lines of a paragraph that must be left Integers at the top of a page.
Table Properties
Property
bordercollapse borderspacing
Description
CSS Table Properties Possible Values
Examples
table { border-collapse:collapse; } table { border-collapse:separate; } table { border-spacing:5px; } table { border-spacing:5px 10px; }
Declares the way borders collapse are displayed. separate Declares the distance separating borders (if border-collapse is separate). Lengths for the horizontal and vertical spacing, separated by a space.
76
If one length is value is declared, that length is used for both the horizontal and vertical spacing. If two lengths are declared, the first one is used for horizontal spacing and the second one is used for vertical spacing. top Declares where the table bottom caption { caption-side:top; } caption-side caption is displayed in left caption { caption-side:right; } relation to the table. right Declares the way empty cells are displayed (if show table { empty-cells:show; } empty-cells border-collapse is hide table { empty-cells:hide; } separate). Declares the type of table table { table-layout:auto; } table-layout Auto, fixed layout. table { table-layout:fixed; }
Text Properties
Property Description CSS Text Properties Possible Values Examples
Valid color names, RGB values, hexidecimal notation. The predefined color names div { color:green; } color Declares the color of the text. are: div { color:rgb(0,255,0); } Aqua, black, blue , fuchsia div { color:#00FF00; } gray, green, lime, maroon navy, olive, purple, red silver, teal, white, yellow Declares the reading direction of the Ltr, rtl , ltr = left-to-right div { direction:ltr; } direction text. rtl = right-to-left div { direction:rtl; } Numbers, percentages, div { line-height:normal; } line-height Declares the distance between lines. lengths, and the predefined div { line-height:2em; } value of normal. div { line-height:125%; } A length (in addition to the div { letter-spacing:normal; } letterDeclares the amount of space default space) or the div { letter-spacing:5px; } spacing between text characters. predefined value of normal. div { letter-spacing:-1px; } Left, right, center, justify If used on a set of table cells, this property can be div { text-align:center; } Declares the horizontal alignment of text-align given a string value to div { text-align:right; } inline content. which the text of each row td { text-align:"."; } of the column will be aligned. div { text-decoration:none; } textNone, underline, overline Declares the text decoration. div { text-decoration:underline; decoration line-through, blink } Declares the indentation of the first div { text-indent:12px; } text-indent Lengths and percentages. line of text. div { text-indent:2%; }
77
A list containg a color followed by numeric values (separated by spaces) that specify: The color for the shadow text-shadow Declares shadow effects on the text. effect Horizontal distance to the right of the text , Vertical distance below the text Blur radius texttransform Declares the capitalization effects on the letters in the text. None, capitalize uppercase lowercase normalembed bidi-override Normal, pre, nowrap
div { text-shadow:green 2px 2px 7px; } div { text-shadow:olive -3px -4px 5px; }
div { text-transform:uppercase; } div { text-transform:lowercase; } div { unicode-bidi:embed; } div { unicode-bidi:bidioverride; } div { white-space:pre; } div { white-space:nowrap; }
Declares values relating to unicodebidirectional text. May be used in bidi conjunction with the the direction property. Declares how white space is white-space handled in an element. wordspacing Declares the space between words in the text.
A length (in addition to the div { word-spacing:normal; } default space) or the div { word-spacing:1.5em; } predefined value of normal.
Other Properties
Property Description Other CSS Properties Possible Values Examples
azimuth
cue-after cue-before
cue
elevation
Angle values in degrees (deg), or one of the following predefined values: Declares the angle that left-side, far-left, left , center- div { azimuth:90deg; } sound travels to the listener. left , center , center-right , div { azimuth:behind; } right , far-right right-side , behind , leftwards rightwards Declares an audio cue to URL values and the div { cue-after:url(sound.wav); } play after an element. predefined value none. div { cue-after:none; } Declares an audio cue to URL values and the div { cue-before:url(sound.wav); } play before an element. predefined value none. div { cue-before:none; } URL values and the predefined value none. Separate the values by a space div { cue:url(sound.wav) Shorthand proerty to set in the following order: url(sound2.wav); } both cue values at once. cue-before, cue-after. div { cue:url(sound.wav); } If only one cue value is declared, it is used for both before and after. Declares the elevation of a Angle values in degrees div { elevation:30deg; } sound. (deg), or one of the following div { elevation:higher; } predefined values:
78
Below, level, above, higher lower Declares the amount of time Time in milliseconds (ms) or div { pause-after:100ms; } pause-after to pause after an element. percentages. div { pause-after:20%; } Declares the amount of time Time in milliseconds (ms) or div { pause-before:100ms; } pause-before to pause before an element. percentages. div { pause-before:20%; } Separate the values by a space in the following order: Shorthand proerty to set pause-before, pause-after div { pause:200ms 100ms; } pause both pause values at once. If only one pause value is div { pause:100ms; } declared, it is used for both before and after. Frequencies in hertz (Hz) or Declares the average the following predefined div { pitch:120Hz; } pitch speaking pitch of a voice. values: x-low, low, medium, div { pitch:high; } high, x-high Number values between 0 and Declares a change in the 100 (lower values indicate a div { pitch-range:50; } pitch-range pitch range of a voice. flat voice while higher values div { pitch-range:99; } indicate an animated voice). URL value, followed by one or more of the following div { play-during:url(music.wav); } Declares a background keywords, separated by div { play-during:url(music.wav) play-during sound to be played while the spaces: repeat; } current element is spoken. Mix, repeat, Alternatley, one div { play-during:none; } of the following keywords: Auto, none Numeric values between 0 Declares the richness of the and 100 (lower values have div { richness:50; } richness voice in spoken text. less richness and higher div { richness:0; } values have more richness). Declares if/how text is normal div { speak:none; } speak spoken. none, spell-out div { speak:spell-out; } Declares how often table once th { speak-header:once; } speak-header header cells are spoken. always th { speak-header:always; } speakDeclares how numerals are digits div { speak-numeral:digits; } numeral spoken. continuous div { speak-numeral:continuous; } speakDeclares how punctuation is code div { speak-punctuation:code; } punctuation spoken. none div { speak-punctuation:none; } A number indicating the number of words per minute, Declares the speech rate of or one of the following div { speech-rate:50; } speech-rate spoken text. predefined values: x-slow, div { speech-rate:medium; } slow, medium, fast, x-fast, faster, slower Numeric values between 0 Declares the stress of the and 100 (lower values have div { stress:50; } stress voice on spoken text. less stress and higher values div { stress:0; } have more stress).
voice-family
volume
Declares the voice family Generic or specific voice of spoken text. family names.
Declares the median Numbers between 0 and 100, div { volume:50; }
79
percentages, or one of the following predefined values: Silent, x-soft, soft, medium, div { volume:silent; } loud x-loud
volume.
80
COURSE PRACTICAL ASIGNMENT Assignment Overview Today every organization must register its presence to the world over the Internet. People want others to know the business they do. They want to advertise their product. They do this by having their websites published for public access over the Internet. Required Your are therefore required to create a website for a particular school or any other organization that give as much details as possible to the world. Your websites should not have less than 20 web pages and should be organized using flames. It should make use of all the html features discussed in the course. (Tables, images, links, forms(all elements), frames, inline frames, list). Marks will be allocated as follows: 1. Correct number pages (10marks) 2. Use of all HTM features (20marks) 3. Originality (20marks) 4. Depth of information on the organization given by the website (10marks) 5. Navigability (the ease of moving from one page to another) (10marks) 6. Use of CSS enhanced formatting (10marks). 7. Presentation (20 marks) You will be expected to explain your work.

Web Development Using HTML

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Web Development Using HTML

Caricato da

Copyright:

Formati disponibili

1

CHAPTER 1: Exploring the Internet

Main page In site 1

Main page In site 2

Services offered by the Internet

Connecting to the Internet

To connect to the Internet need

Using the web

Entering a web address

DNS Dynamic Update

Looking up a DNS name or IP address

To view the contents of the DNS cache

Clearing the Contents of the DNS Cache

Prevent viruses: Using Antivirus

Checking If Your Computer has a virus

Web Development Using HTML

Cascading Style Sheets

Active Server Pages

The HTML Skeleton

Content that appear In the browser

The <head> Element

The <body> Element

The order of attributes is not important.

Empty vs. Container Tags

<tagname att1="value" att2="value" />

Blocks and Inline Elements Block-level Elements

XHTML vs. HTML

The corrected line looks like this:

Some XML Stuff The XML Declaration

The XHTML Namespace

lang and xml:lang

According to the W3C, these attributes may be helpful in:

Introduction to HTML Conclusion

Breaks and Horizontal Rules

Exercise: Creating an HTML Page

The page is rendered as follows:

The page is rendered as follows:

Code Explanation The page is rendered as follows:

Paragraphs, Headings and Text Conclusion

Absolute vs. Relative Paths

Targeting New Windows

Exercise: Adding Links

Anchors with the name Attribute

You can also link to anchors on other pages.

<a href="http://www.beatles.com/about.html#paul">Read about Paul</a>

The file below shows illustrates the use of anchors.

Anchors with the id Attribute

The behavior of these links is identical to those in the previous example.

The title Attribute

HTML Links Conclusion

Making Images Accessible Alternative Text

<html> <head> <title>Long Description</title> </head> <body>

Nesting Unordered Lists

Nesting Ordered Lists

The resulting page is shown below

Exercise: Creating Lists

<td> and <th> Attributes

This screenshot below shows how this table would be rendered:

Spanning rows works in the same way.

Exercise: Creating Tables

The <table> Tag attributes

Integer values RGB or color names