A Quick Overview of Web Development

7/31/2019 A Quick Overview of Web Development

1/69

A Quick Overview of Web Development

In this lesson of the HTML tutorial, you will learn...

1.

About client-side web development languages.2. About server-side web development languages.Web development involves a combination of client-side programming and server-sideprogramming.

Client-side Programming

Client-side programming involves writing code that is interpreted by a browser such as InternetExplorer 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, CascadingStyle Sheets (CSS) and Macromedia Flash.

HTML

HyperText Markup Language (HTML) is the language behind most Web pages. The language ismade 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 fromcontent. Rules defining color, size, positioning and other display aspects of elements are definedin the HTML page or in linked CSS pages.

JavaScript(see footnote)

JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validateforms, pop up new windows, and create dynamic effects such as dropdown menus and imagerollovers.

Dynamic HTMLDynamic HTML is not a language in and of itself, but rather refers to code that uses JavaScriptto manipulate CSS properties on the fly.

Ajax
http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote110116704http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote110116704


2/69

The termAjax was originally an pseudo-acronym for "Asynchronous JavaScript And XML,"(seefootnote) but is now used much more broadly to cover all methods of communicating with aserver using JavaScript. As we will see, Ajax(see footnote) is not always asynchronous and doesnot always involveXML.

The main purpose of Ajax is to provide a simple and standard means for a web page tocommunicate 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, accordingto Adobe's website, more than 97% of computers connected to the internet have Flash Playerinstalled. Flash Player is a plug-in to Internet Explorer and other Web browsers. It enablesbrowsers to display dynamic graphical Web pages that can be visually more fluid than pages thatbuilt 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 makemovies more interactive.

Server-side Programming

Server-side programming involves writing code that connects Web pages with databases, XMLpages, email servers, file systems and other systems and software accessible from the Webserver. The most common server-side languages and programming frameworks are Perl,ColdFusion, Active Server Pages, Java (in many flavors), ASP.NET and PHP.

Perl

Perl was the first server-side language to become popular in Web development. Originallyderived from C, its relative simplicity and strengths in file and text manipulation and the fact thatit is open source made it a good choice for writing CGI scripts. Although Perl is still widelyused, it is not as popular a choice for new Web projects as some of the other server-sidelanguages discussed below.

ColdFusion

ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-sidelanguages. It is tag-based, which makes it look a lot like HTML and easier for client-sideprogrammers to understand than some of the other choices. Because of the relative ease withwhich it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusioncode is compiled to Java bytecode, which means the pages run quickly. Web developers canaccomplish virtually any required task using the ColdFusion Markup Language (CFML).
http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote117211000http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote117211000http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote133925632http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote133925632http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote117211000http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote117211000


3/69

However, as ColdFusion can easily be integrated with Java applications, developers have thechoice of using Java to extend ColdFusion applications.

Active Server Pages

Microsoft Active Server Pages (ASP) is a framework that allows developers to write server-sidepages in many scripting languages; however, VBScript and JScript are the only commonly usedchoices. ASP became popular quickly and sites with pages ending in .asp are now all over theWeb. It is not as simple as ColdFusion, but it has the huge advantage of being built in toMicrosoft Internet Information Server (IIS). Although still commonly used, ASP has beenreplaced by Microsoft with ASP.NET, an architecture that is much more similar to Java's than totraditional ASP's.

JavaServer Pages

As with ColdFusion MX, pages written using JavaServer Pages (JSP) are compiled into Javaservlets. JSP pages are made up of tags (as in ColdFusion) and scriptlets (as in ASP). It hasreplaced 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 theyrun faster than traditional ASP pages do. ASP.NET pages can be written in many languages, butthe 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 proprietarylanguages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn andruns on almost all commonly used Web servers. A nice feature is that it can be integrated withboth 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 codeframeworks (scaffolding) from the outset. Often shortened to Rails, or RoR, Ruby On Rails is anopen source project written in the Ruby programming language and applications using the Railsframework are developed using the Model-View-Controller design pattern."(see footnote)
http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote136486944http://www.learn-html-tutorial.com/WebDevOverview.cfm#fnidFootnote136486944


4/69

A Quick Overview of Web Development

Conclusion

This lesson has provided a general overview of the different languages and frameworkscommonly used in Web development.

Footnotes

1. The word "JavaScript" is a proprietary name for Netscape's version of ECMAScript.Microsoft's version of this language is called JScript.

2. Ajax: A New Approach to Web Applications -http://www.adaptivepath.com/publications/essays/archives/000385.php

3. Although it is not uncommon to see the term written in all capital letters (AJAX), it isbecoming standard to write it asAjax.4. http://en.wikipedia.org/wiki/Ruby_on_Rails

To continue to learn HTML go to the top of this page and click on the next lesson in this HTMLTutorial's Table of Contents.

Introduction to HTML


1. To create a simple HTML page.2. About HTML elements and attributes.3. The difference between HTML and XHTML.4. To create the skeleton of an HTML document.5. About whitespace and HTML.6. To output special characters in HTML.

HyperText Markup Language (HTML) is the language behind most Web pages. The language ismade up of elements that describe the structure and format of the content on a Web page.

HTML is maintained by the World Wide Web Consortium (W3C). As of this writing, the latestversions are HTML 4.01 and XHTML 1.0. See http://www.w3.org/TR/html4/andhttp://www.w3.org/TR/xhtml1/for the specifications. In this lesson, we will address thedifferences between HTML and XHTML. The rest of the course covers XHTML, but forsimplicity, we'll usually refer to it as HTML.
http://www.adaptivepath.com/publications/essays/archives/000385.phphttp://en.wikipedia.org/wiki/Ruby_on_Railshttp://www.learn-html-tutorial.com/WebDevOverview.cfm#menuHeadinghttp://www.w3.org/TR/html4/http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/xhtml1/http://www.w3.org/TR/html4/http://www.learn-html-tutorial.com/WebDevOverview.cfm#menuHeadinghttp://en.wikipedia.org/wiki/Ruby_on_Railshttp://www.adaptivepath.com/publications/essays/archives/000385.php


5/69

Getting Started

We'll begin with a simple exercise.

Exercise: A Simple HTML Document

Duration: 5 to 15 minutes.

In this exercise, you will create your first HTML document by simply copying the text shownbelow. 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 forthis exercise.

2. Save the file as HelloWorld.html in the HTMLBasics/Exercises folder.3. Type the following exactly as shown:4. 5. 6. Hello world!7. 8. 9. Hello world!10.

11.Save the file again and then open it in your browser by navigating to the file in your foldersystem and double-clicking on it. The page should appear as follows:

Where is the solution?

The HTML Skeleton

At its simplest, an HTML page contains what can be thought of as a skeleton - the main structureof the page. It looks like this:

Code Sample: HTMLBasics/Demos/Skeleton.html


6/69

The Element

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

Title of the page (). Browsers typically show the title in the "title bar" at the top of thebrowser window.

Meta tags, which contain descriptive information about the page () Script blocks, which contain javascript or vbscript code for adding functionality and interactivity

to a page ()

Style blocks, which contain Cascading Style Sheet rules (). References (or links) to external style sheets ().

The Element

The element contains all of the content that appears on the page itself. Body tags will becovered thoroughly throughout this manual.

Whitespace

Extra whitespace is ignored in HTML. This means that all hard returns, tabs and multiple spacesare condensed into a single space for display purposes.

Code Sample: HTMLBasics/Demos/Whitespace.html

Whitespace ExampleThis is a sentence on a single line.

Thisisa

sentence withextra whitespace

throughout.

Code Explanation


7/69

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 thebeginning and end of elements. The syntax is as follows:

Element content

Attributes

Tags often have attributes for further defining the element. Attributes come in name-valuepairs(see footnote)

This is not allowed in XHTML.

Note that attributes only appear in the open tag, like so:

Element content

The order of attributes is not important.

Empty vs. Container Tags

The tags shown above are called container tags because they have both an open and close tag

with content containedbetween them. Tags that do not contain content are called empty tags.The syntax is as follows:

or

Blocks and Inline Elements

Block-level Elements

Block elements are elements that separate a block of content. For example, a paragraph (

)element is a block element. Other block elements include:

Lists ( and ) Tables ()
http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote110029680http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote110029680


8/69

Forms () Divs ()

Inline Elements

Inline elements are elements that affect only snippets of content and do not block off a section ofa page. Examples of inline elements include:

Links () Images () Formatting tags (, , , etc.)(see footnote) Phrase elements (, , , etc.) Spans ()

Important: Inline elements cannot be direct children of the body element. They must becontained 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 thatHTML is fairly flexible; whereas, XHTML has strict rules.(see footnote)

DOCTYPE Declarations

The DOCTYPE declaration goes at the beginning of the document and is used to indicate whichversion 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.
http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote117977304http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote130768840http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote130768840http://www.learn-html-tutorial.com/HTMLBasics.cfm#fnidFootnote117977304


9/69

Strict

The strict versions of HTML and XHTML do not allow use of tags and attributes that have beendeprecated.(see footnote) The strict versions do not support framesets.

XHTML Strict

HTML Strict

Transitional (Loose)

The transitional (or loose) versions of HTML and XHTML allow for the use of deprecated tagsand attributes. The transitional versions also do not support framesets.

XHTML Transitional

HTML Transitional

Frameset

The frameset versions of HTML and XHTML are the same as the transitional versions, exceptthat they also support frames.

XHTML Frameset

HTML Frameset

Closing Tags

HTML 4.0 allows some closing tags to be omitted. For example, in HTML, list item () tags

do not require a matching close tag ().

In XHTML, all tags must be closed. Empty tags are closed by adding a forward slash before thefinal angle bracket of the tag:


10/69

Note the space before the forward slash. Though this is not required by XHTML, it may helpolder browsers from getting confused.

In HTML 4.0, the forward slash is not required:

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 arerequired. Either single quotes or double quotes may be used.

Nesting

In both HTML and XHTML, tags should be nested properly. Proper nesting requires nested tagsto be closed in reverse order from which they were opened. Another way to say this is that eachelement must be completely contained by its parent element. For example, the following line ofcode uses improper nesting:

sometext

The corrected line looks like this:

sometext

Some XML Stuff

The XML Declaration

XHTML documents are, by definition, XML documents. This means that they follow the rules ofXML. Although not required, it is good practice to include an XML declaration in your XHTMLdocuments. If included, the XML declaration must be at the very beginning of the document. TheXML declaration looks like this:

For best results, it is best to define the encoding in a meta tag as well. We'll cover meta tags laterin the manual. For now, note that you should include the following tag within the head tag:


11/69

The XHTML Namespace

In XHTML documents, the html tag must contain an xmlns declaration for the XHTMLnamespace, which indicates that the document must conform to the rules defined in the XHTMLnamespace. The syntax is shown below:

Special Characters

Special characters (i.e, characters that do not show up on your keyboard) can be added to HTMLpages using entity names and numbers. For example, a copyright symbol () can be addedusing 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 languagecontained within an element. The W3C recommends that both lang and xml:lang be included inthe html tag of all XHTML documents, like so:

According to the W3C, these attributes may be helpful in:(see footnote)

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

Introduction to HTML Conclusion

In this lesson of the HTML tutorial, you have learned the basics of HTML. You should

understand how an HTML page is structured, know the major differences between HTML andXHTML and understand the basic syntax of HTML tags.

Footnotes

1. In HTML (without the X) some tags have attributes that don't take a value, like so:Element content


12/69

2. Many formatting tags have been deprecated in HTML 4.0 and XHTML 1.0. Although theones listed here are not deprecated, their use is discouraged as the same effect can beaccomplished with CSS.

3. HTML is a SGML-based; whereas XHTML is XML-based. XML and SGML are bothmeta-languages (languages for defining other languages). XML applies stricter rules than

SGML does.4. Deprecated tags are tags that the W3C has indicated may eventually be removed from thespecification because of new and better ways of accomplishing the same thing. Most ofthese tags are for formatting; the W3C recommends using Cascading Style Sheetsinstead. See http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2 for a listof deprecated tags.

5. http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1To continue to learn HTML go to the top of this page and click on the next lesson in this HTML Tutorial's

Table of Contents.

Paragraphs, Headings and Text


1. To add paragraphs to the page.2. To use HTML headings.3. To separate sections with breaks and horizontal rules.4. To create quoted text.5.

To create preformatted text.6. To use phrase elements.

7. To use non-deprecated formatting elements.8. To note document version changes.

This lesson discusses how properly markup text. With just a few exceptions, it does not discusshow to change the formatting or display of these elements. This is a task for CSS, which is notcovered in this lesson.

Paragraphs

Paragraph text should be contained in

tags as shown in the following example:

Code Sample: Text/Demos/Paragraphs.html
http://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2http://www.learn-html-tutorial.com/HTMLBasics.cfm#menuHeadinghttp://www.learn-html-tutorial.com/HTMLBasics.cfm#menuHeadinghttp://www.w3.org/TR/html401/appendix/changes.html#h-A.3.1.2


13/69

Paragraphs

Pooh always liked a little something at eleven o'clock in the morning, andhe was very glad to see Rabbit getting out the plates and mugs; and whenRabbit 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'tbother about the bread, please.'

And for a long time after that he said nothing...until at last, humming tohimself 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 triedvery hard to look in the direction of the larder. 'As a matter of fact,' saidRabbit, '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 thereany 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. 'WellGood-bye, I must be going on.'
---- Code Omitted ----
Code Explanation

This page will be rendered as follows:

Heading Levels

HTML supports six levels of heading. The tags are , , , , and ,descending in importance from to . Headings are block elements.

Code Sample: Text/Demos/Headings.html

Heading LevelsHeading Level 1

Paragraph following heading level 1.

Heading Level 2


Heading Level 3


Heading Level 4


Heading Level 5


Heading Level 6


14/69


The screenshot below shows how they are formatted by default:

Breaks and Horizontal Rules

The
tag forces a line break. The tag creates a horizontal rule across the page. Thecode below shows how they are used:

Code Sample: Text/Demos/BRandHR.html

Breaks and Horizontal Rules

Sometimes
it is desirable
to break text across lines.

And to separate text with horizontal rules.

Code Explanation

The screenshot below shows how they appear by default:

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 in the Text/Exercises directory.2. Write code to make the page look like the one in the screenshot above.3. Save your work and open your new page in a browser to test it.

Use special characters instead of the dashes to make more interesting bullets. Try


15/69


Quoted Text

The and elements are used to designate quoted text. Both elements can takethe cite attribute, which is used to reference the source. is a block-level element,while is an inline element. See the example below:

Code Sample: Text/Demos/Quotes.html

Quotes

The Declaration of Independence

The Declaration of Independence begins with the following paragraph:

When in theCourse of human events it becomes necessary for one people to dissolve the

political bands which have connected them with another and to assume amongthe 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 ofmankind requires that they should declare the causes which impel them to theseparation.

The second paragraph, which beginsWe hold thesetruths to be self-evident, that all men are created equal...is morewidely known.

Code Explanation

Most browsers indent blockquotes from both the left and right. They are supposed to wrap text

nested in tags with quotes.(see footnote)Firefox renders this page as follows:

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 (

tags).
http://www.learn-html-tutorial.com/Text.cfm#fnidFootnote134500880http://www.learn-html-tutorial.com/Text.cfm#fnidFootnote134500880


16/69

Preformatted Text

Occasionally it is desirable to output content as it is laid out in the code, whitespace and all. The 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. Thecode below shows how is used.

Code Sample: Text/Demos/Pre.html

Preformatted Text

Your First HTML PageHello world!Hello world!

Code Explanation

The page is rendered as follows:

Phrase Elements

Phrase elements provide structural information about the content they contain. The mostcommon phrase elements are and .(see footnote)Both elements indicate that theelement content should be emphasized. indicates stronger emphasis than . Mostbrowsers bold content and italicize content. The code below illustrates how thesetags can be used:

Code Sample: Text/Demos/EmAndStrong.html


17/69

EmphasisEmphasis

This isimportant.

This isreally important.

Code Explanation


Formatting Elements

In HTML 4.0 and XHTML, most formatting tags have been deprecated. The five that remain areshown in the table below:

Non-deprecated Formatting Tags

Tag Description

Bolds text

Italicizes text

Renders teletype text

Increases font size

Decreases font size

The example below shows how they are used:

Code Sample: Text/Demos/Formatting.htmlNon-deprecated formatting tags


18/69

Non-deprecated formatting tags

BoldItalicizedTeletypeBig font

Small font

Code Explanation


All of these effects can be created with CSS. We recommend you avoid these tags in favor ofCSS.

Documenting Changes

Sometimes it is necessary to document changes in your HTML pages. This is especially commonwhen drafting legal documents. The specification provides and elements fordocumenting inserted and deleted content, respectively. Both elements take a cite attribute forpointing to a resource explaining the change and a datetime attribute for indicating the time anddate of the change.(see footnote) The title attribute can also be used to indicate a short reason forthe change. The example below shows how they are used:

Code Sample: Text/Demos/ChangeTracking.htmlChange TrackingChange Tracking

The baseball player with the most home runs isHank AaronBarryBonds.

Code Explanation


19/69

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 ConclusionIn this lesson of the HTML tutorial, you have learned to work with paragraphs, headings, andother text elements. You can now create a basic HTML page.

Footnotes

1. Firefox correctly adds the quotes, but as of version 7.0, Internet Explorer does not.2. Other phrase elements are discussed at

http://www.w3.org/TR/html401/struct/text.html#h-9.2.1.

3.

The format for datetime is YYYY-MM-DDThh:mm:ssTZD.To continue to learn HTML go to the top of this page and click on the next lesson in this HTML Tutorial's

Table of Contents.

HTML Links


1. To create basic text links.2. The difference between absolute and relative links.3. To create links that open in new windows.4. To create email links.5. To create links to specific locations on a page.

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 LinksThe tag for a link is perhaps the least intuitive of all the HTML tags. It is and it comes fromthe word "anchor." You will see why later in the lesson. By itself, the tag does nothing. Tocreate a link, it requires the href attribute, which takes as a value the path to the file to which tolink. The syntax is as follows:

Syntax
http://www.w3.org/TR/html401/struct/text.html#h-9.2.1http://www.learn-html-tutorial.com/Text.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Text.cfm#menuHeadinghttp://www.w3.org/TR/html401/struct/text.html#h-9.2.1


20/69

Link Text

For example:

John Lennon

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 typeshttp://www.servername.com/index.html, the index.html page within the wwwroot folder will bedownloaded to the browser. The absolute path to the web root from a page on the same domain issimply a forward slash (/). So, a link on Company.html to index.html could be written like this:

Home Page

The same link could be placed on any page in any folder below the wwwroot folder or on anypage in the wwwroot folder itself.

Using an absolute path, a link to Company.html would include the about directory, like this:About Our Company

External Links

When linking to a file at a different domain you must identify the location of the domain usingthe domain name (or IP address) of the site. To illustrate, assume that the directory structureshown above is found at http://www.beatles.com. A link to Company.html from another sitewould be written like this:

About the Beatles

See Links/Demos/Links.html for more examples of links with absolute paths.(see footnote)

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative pathindicates where a file is relative to the file that contains the link. The folder (or directory) that
http://www.servername.com/index.htmlhttp://www.beatles.com/http://www.learn-html-tutorial.com/Links.cfm#fnidFootnote136265288http://www.learn-html-tutorial.com/Links.cfm#fnidFootnote136265288http://www.beatles.com/http://www.servername.com/index.html


21/69

contains the file being worked on is called the current directory. The relative path to another filethat is also in the current directory is just the name of that file. For example, since Company.htmland Contact.html are found in the same directory, they can link to each other simply byspecifying the file name. The following shows a link that could be used in Contact.html toCompany.html.

About Our Company

The relative path to a file in a subdirectory of the current directory must include the name of thesubdirectory. For example, to link to Company.html from index.html you must first point to theabout directory, like so:

About Our Company

The relative path to a file in a directory above the current directory should begin with ../ Forexample, the following shows a link to index.html from Company.html.

Home Page

See Links/Demos/Links.html for more examples of links with relative paths.

Default Pages

The web server administrator can set up default page names to look for when a path ends with adirectory 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.comhttp://www.beatles.com/index.html

Targeting New Windows

The target attribute(see footnote) is used to specify the browser window in which the linked pagewill open.

Our Company

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 willtarget that window. To force each link to target a brand new window, use "_blank" as the valueof the target attribute.

See Links/Demos/Links.html for more examples of links with targets.

Email Links
http://www.learn-html-tutorial.com/Links.cfm#fnidFootnote110153304http://www.learn-html-tutorial.com/Links.cfm#fnidFootnote110153304


22/69

Email links are used to open an email client to start a new email message. The syntax is similarto the links we have seen thus far. The value of the href attribute begins with mailto: and endswith an email address. For example:

Email Paul

It is good practice to include the email address as the text of the link, so that people who areprinting the page or whose setup does not support email links can see the actual email address.For example:

Email Paul at [email protected].

See Links/Demos/Links.html for more examples of links with email links.

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:

o Home: index.htmlo Races: Races.htmlo Resources: Resources.htmlo Calculator: Calculator.html (should target "newwin")o

Running Log: RunningLog.htmlo My Account: MyAccount.html

o Log out: Logout.htmlo the most up-to-date information on running races: Races.htmlo the best resources for runners: Resources.html

3. Add an email link to [email protected] after the copyright.4. Save your work and open your new page in a browser to test it.

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.


Anchors


23/69

Anchors are named locations to which a link can point. Anchors can be created with the tagusing 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 tag.

As you can see, anchors are created using the tag with the name attribute. To link to ananchor, use the pound sign (#) followed by the anchor name. For example,

Read about Paul

You can also link to anchors on other pages.

Read about Paul

Or

Read about Paul

The file below shows illustrates the use of anchors.

Code Sample: Links/Demos/Anchors.html

AnchorsAnchorsLinks to Anchors on Remote PagesW3Canchors.

Links to Anchors on This PagePooh Goes VisitingA Mad Tea-PartyThe Naughty Boy

Anchors on This Page

Each title below has an anchor.


24/69

POOH GOES VISITING - A.A. Milne

Pooh always liked a little something at eleven o'clock in the morning, andhe was very glad to see Rabbit getting out the plates and mugs; and whenRabbit said, 'Honey or condensed milk with your bread?' he was so exited thathe said, 'Both' and then, so as not to seem greedy, he added, 'But don'tbother about the bread, please.'
---- Code Omitted ----A MAD TEA-PARTY - Lewis Carroll
There was a table set out under a tree in front of the house, and theMarch Hare and the Hatter were having tea at it: a Dormouse was sittingbetween them, fast asleep, and the other two were using it as a cushion,resting their elbows on it, and the talking over its head. 'Veryuncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, Isuppose it doesn't mind.'
---- Code Omitted ----THE NAUGHTY BOY - Hans ChristianAndersen
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 therain streamed down from heaven; but the old poet sat warm and comfortable inhis chimney-comer, where the fire blazed and the roasting apple hissed.
---- Code Omitted ----Back to top
Code Explanation

You'll notice the tag anchors use both the id attribute and the name attribute with the samevalue. 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.

Code Sample: Links/Demos/AnchorsIds.html


POOH GOES VISITING - A.A. Milne---- Code Omitted ----

A MAD TEA-PARTY - Lewis Carroll---- Code Omitted ----

THE NAUGHTY BOY - Hans Christian Andersen---- Code Omitted ----

Code Explanation

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


25/69

name vs. id

The major advantage of using the tag with the name attribute is that it's supported by olderbrowsers.

The advantage of using the id attribute is that it can be applied to any tag, so there is no need toexplicitly create anchors.

The title Attribute

The title attribute can be used to provide more descriptive information about a link.

Pooh GoesVisiting

This is especially useful when the content of the link is not descriptive. For example, we'll seelater how to make an image into a link. It might not be clear from the image itself where the linkpoints. The title attribute can be used to make this more clear. Browsers usually show the titletext 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 absoluteand relative paths, to target new windows, to create email links and to create and link to anchors.

Footnotes1. This page uses XHTML Transitional because it demonstrates the target attribute, which is

not permitted in XHTML Strict.2. The target attribute is deprecated in HTML 4.0, but no other method for targetting new

windows is provided. To be (X)HTML Strict compliant, you need to open new windowswith JavaScript or by using some other scripting technique.

To continue to learn HTML go to the top of this page and click on the next lesson in this HTML Tutorial's

Table of Contents.

HTML Images

http://www.learn-html-tutorial.com/Links.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Links.cfm#menuHeading


26/69

1. To add images to a website.2. To create image links.3. To make images accesible.

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 usedfor 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'ssrc attribute is used to reference an image file using a relative or absolute path. The syntax is asfollows.

Syntax

The tag is an empty tag and should be closed with a shortcut close. The following pageshows how to use the tag:

Code Sample: Images/Demos/Images.html

ImagesImages

Code Explanation

The page will render as follows:

Note that img elements may not be direct children of the body element.

Making Images Accessible


27/69

Alternative Text

To add alternate text for an image, use the alt attribute.

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.(see footnote)

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 theimage can be provided on a separate page. The longdesc attribute of the tag is used topoint to that description. For example:

Code Sample: Images/Demos/LongDesc.html

Long DescriptionLong Description

Code Explanation

The browsers don't do anything with the longdesc value, but modern screenreaders make use ofit. Freedom Scientific, the makers of Jaws, one of the most popular screenreaders, say this abouttheir 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 forthe graphic, JAWS announces there is a long description and the address of the page. Just pressENTER to open the page containing the long description in a new window.(see footnote)
http://www.learn-html-tutorial.com/Images.cfm#fnidFootnote131862560http://www.learn-html-tutorial.com/Images.cfm#fnidFootnote119332648http://www.learn-html-tutorial.com/Images.cfm#fnidFootnote119332648http://www.learn-html-tutorial.com/Images.cfm#fnidFootnote131862560


28/69

Image Links

Creating image links is easy. Simply put an tag around your image, like so...

By default, most browsers will place a one-pixel border around a linked image .(see footnote)

For examples of linked images, see Images/Demos/ImageLinks.html.

Exercise: Adding Images to the Page


In this exercise, you will add an image to index.html. The resulting page is shown below.

1. Open Images/Exercises/index.html for editing.2. Add the image called RunnersHome.gif in the Images/Exercises/Images directory, so that the

page appears as shown in the screenshot above.

o The alternative text should be "Runners Home Logo".o There is no need for a long description.


HTML Images ConclusionIn this lesson of the HTML tutorial you have learned to add images to a web page, to make thoseimages accessible, and to create image links .

Footnotes

1. If the tag also has a title attribute, then the value of the title attribute appears inplace of the alt text.

2. http://www.freedomscientific.com/fs_products/software_jaws401newfea.asp3. This border can be removed with CSS.To continue to learn HTML go to the top of this page and click on the next lesson in this HTML Tutorial's

Table of Contents.
http://www.learn-html-tutorial.com/Images.cfm#fnidFootnote136074864http://www.freedomscientific.com/fs_products/software_jaws401newfea.asphttp://www.learn-html-tutorial.com/Images.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Images.cfm#menuHeadinghttp://www.freedomscientific.com/fs_products/software_jaws401newfea.asphttp://www.learn-html-tutorial.com/Images.cfm#fnidFootnote136074864


29/69

HTML Lists


1. To create unordered lists.2. To create ordered lists.3. To create definition lists.

There are three types of lists in HTML: unordered, ordered and definition lists. In this lesson,you will learn how to create all three.

Unordered Lists

Unordered lists are rendered as bulleted lists. Take a look at the following code sample:

Code Sample: Lists/Demos/BeatlesUnordered.html

Beatles - unorderedBeatles

Paul McCartneyJohn LennonRingo StarrGeorge Harrison

The tag starts an unordered list. Each list item is contained in 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 style s(seefootnote) of bullets to display the nested lists. The following example shows how this works.

Code Sample: Lists/Demos/BeatlesUnorderedNested.html
http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote139403728http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote139403728http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote139403728http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote139403728


30/69

Beatles - unordered and nestedBeatles Lead Singers

Paul McCartneyLady MadonnaLovely RitaEleanor RigbyCan't Buy Me LoveJohn and Paul together

When I'm Sixty-FourJohn LennonNorwegian Wood (This Bird Has Flown)All You Need Is LoveDay TripperCan't Buy Me LoveJohn and Paul together

Lucy In The Sky With Diamonds

Ringo StarrDon't Pass Me ByYellow SubmarineGeorge HarrisonHere Comes The SunRoll Over Beethoven


31/69

Notice that the nested unordered lists are siblings to plain text. For example, the text "GeorgeHarrison" is a sibling of the unordered list that follows it. Only list items, not lists themselves,

can contain nested (child) lists. The resulting page is shown below:

Ordered ListsOrdered lists are very similar to unordered lists. They are created with the tag and, bydefault, will display list items with numbers. Take a look at the following code:

Code Sample: Lists/Demos/BeatlesOrdered.html

Beatles - orderedBeatles

Paul McCartneyJohn LennonRingo StarrGeorge Harrison

The image below shows how the code will be rendered.

Nesting Ordered Lists

Like unordered lists, ordered lists can be nested. However, unlike in some word processingapplications, nested ordered lists will continue to be displayed using standard numbers.

Code Sample: Lists/Demos/BeatlesOrderedNested.htmlBeatles - unordered and nested


32/69

Beatles Lead Singers

Paul McCartneyLady MadonnaLovely Rita

Eleanor RigbyCan't Buy Me LoveJohn and Paul together

When I'm Sixty-FourJohn LennonNorwegian Wood (This Bird Has Flown)All You Need Is Love

Day TripperCan't Buy Me LoveJohn and Paul together

Lucy In The Sky With DiamondsRingo StarrDon't Pass Me ByYellow SubmarineGeorge Harrison

Here Comes The SunRoll Over Beethoven

Code Explanation

The resulting page is shown below:

As you can see, ordered lists can have nested unordered lists. The reverse is also true.

Start Attribute(see footnote)
http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote118036376http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote118036376


33/69

The start attribute is used to specify what number the list should start on. It takes as a value anynumber. For example...

Paul McCartneyJohn Lennon

Ringo StarrGeorge Harrison

Definition Lists

Definition Lists are not as widely used as unordered and ordered lists. The example below istaken from the W3C Recommendation(see footnote). We've modified it to make it XHTMLcompliant.

Code Sample: Lists/Demos/DefinitionList.htmlDefinition ListDefinition List

Dweebyoung excitable person who may mature into aNerd or GeekHackera clever programmerNerdtechnically bright but socially inept person

Code Explanation

The element contains the definition list. The elements are the definition terms and the elements are the definition descriptions. The screenshot below shows how the code will be

rendered.

Exercise: Creating Lists

http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote118034232http://www.learn-html-tutorial.com/Lists.cfm#fnidFootnote118034232


34/69

In this exercise you will modify index.html so that the two list items under the text "RunnersHome is dedicated to providing you with:" will appear as a numbered list. You will alsochange the menu so that the items appear in as an unordered list. The page should appear like

this:

In addition, you will modify a new page called RunningTerms.html. The page uses a definition

list and should appear like this:

1. Open Lists/Exercises/index.html for editing.2. Change the list to a bulleted list as shown in the first screenshot above.3. Save your work and open your page in a browser to test it.4. Open Lists/Exercises/RunningTerms.html for editing.5. Modify the page so that it appears as shown in the screenshot above.6. Save your work and open your new page in a browser to test it.


HTML Lists Conclusion

In this lesson of the HTML tutorial you have learned to create unordered, ordered and definitionlists.

Footnotes

1. Both the indentation and the style of bullet can be controlled with CSS.2. The start attribute is deprecated, but unfortunately there is poor browser support for the

CSS property (counter-reset) that is supposed to accomplish the same task.3. http://www.w3.org/TR/html4/struct/lists.html#edef-DD


Table of Contents.

HTML TablesIn this lesson of the HTML tutorial, you will learn...

1. To add an HTML table to a web page.2. To merge table cells.
http://www.learn-html-tutorial.com/Lists.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Lists.cfm#menuHeading


35/69

Creating Tables

Tables are made up of one or more table rows, which contain one or more table cells. The tag forcreating tables is . The table row tag is and the two tags that can create table cells

are and . Below is a simple table.

Code Sample: Tables/Demos/TableHomeruns.html

Home Run Hitters

All-time Home Run RecordPlayerHome RunsTeamHank Aaron755Braves

Babe Ruth714YankeesWillie Mays660Giants

Code Explanation

The elements are table header cells. By default, their content will be centered and bolded.The elements are table data cells. By default, their content will be plain text and leftaligned.(see footnote)

Adding a Caption
http://www.learn-html-tutorial.com/Tables.cfm#fnidFootnote130761880http://www.learn-html-tutorial.com/Tables.cfm#fnidFootnote130761880


36/69

The table above has a caption, which is added by inserting the tag after the open tag:

All-time Home Run Record...

The image below shows how this table will be rendered in the browser.

Attributes(see footnote)

Attributes

Attribute Description

width sets the width of the table in pixels or percentage

border sets the width of the border of the table

cellspacing sets the distance between cells in pixels

cellpaddingsets the distance between cell content and the cell border in pixels

summary used to provide a longer description of the table for screenreaders

Attributes


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)

and Attributes


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 shouldspan
http://www.learn-html-tutorial.com/Tables.cfm#fnidFootnote124754008http://www.learn-html-tutorial.com/Tables.cfm#fnidFootnote124754008http://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#fnidFootnote124754008


37/69

and Attributes


rowspan indicates the number of rows the cell shouldspan

The table in the page below shows these attributes in use.

Code Sample:

Tables/Demos/TableHomeRunsFormatted.html

Home Run Hitters

All-time Home Run RecordPlayerHome RunsTeam

Hank Aaron755BravesBarry Bonds748GiantsBabe Ruth714Yankees

Willie Mays660Giants

Code Explanation
http://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCellshttp://www.learn-html-tutorial.com/Tables.cfm#MergingCells


38/69

This screenshot below shows how this table would be rendered:

Merging Cells

In HTML tables, all table rows must span the same number of columns and all table columnsmust 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 onecolumn. The following code would create a table like the one above.

Code Sample: Tables/Demos/MergingCols.html

---- Code Omitted ----abcde---- Code Omitted ----

Spanning rows works in the same way.

Note that the second table column has only one cell; however, it spans both rows. This isaccomplished with the rowspan attribute as shown in the code below.

Code Sample: Tables/Demos/MergingRows.html

---- Code Omitted ----abcce


39/69


Exercise: Creating Tables


In this exercise, you will create a table from scratch.

1. Open Tables/Exercises/Resources.html for editing. Modify the code so the page appears asshown below.

2. The links in the table should point to the following URLs.o Boston Marathon Homepage - http://www.bostonmarathon.como Runners Health - http://www.runnershealth.como Jack's Running Page - http://www.jacksrunning.como Race Runner - http://www.racerunner.org

3. Save your work and open your new page in a browser to test it.Where is the solution?

HTML Tables Conclusion

In this lesson of the HTML tutorial, you have learned to create and format HTML tables. Tablecode can be cumbersome to write and maintain. Although it is important to understand howtables are coded, in the long run, you may find it easier to use an HTML editor for creating largetables, even if you handcode everything else.

Footnotes

1. The display of tables (background colors, borders, column width, row height, etc.) can becontrolled with CSS.

2. Many of these attributes have CSS equivalents and are likely to go away in later versionsof HTML. The only attributes likely to stay are colspan and rowspan.


Table of Contents.

HTML Forms
http://www.bostonmarathon.com/http://www.runnershealth.com/http://www.jacksrunning.com/http://www.racerunner.org/http://www.learn-html-tutorial.com/Tables.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Tables.cfm#menuHeadinghttp://www.racerunner.org/http://www.jacksrunning.com/http://www.runnershealth.com/http://www.bostonmarathon.com/


40/69


1. How HTML forms work.2. The difference between the post and get methods.3. How to create form elements.4.

To use labels to make form elements more accessible.

How HTML Forms Work

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 toprocess the incoming data and return a new HTML page to the browser. The page returned to thebrowser 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 Tag

HTML forms are created using the tag, which takes two main attributes: action andmethod.

The action specifies the URL of the page with that processes the form. It is required. The methodattribute has two possible values: post and get. A basic form tag is shown below:

Get vs. Post

The value of the method attribute is used determines how the form data will be passed to theserver.


41/69

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

[email protected]&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 name-value 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 aresent behind the scenes. This has the advantage of keeping the values hidden from anyone lookingover 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.(see footnote)

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. Asyou will see, many of these elements, but not all, are created with the input tag.

Note that input, other form controls, and label elements may not be direct children of the formelement. 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 usedfor different purposes.

The name attribute is used to hold the value of the field. It is passed to the server as a variable.
http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote129000120http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote129000120


42/69

The id attribute is used by CSS and JavaScript to identify a specific element.

Labels

Form element labels should be put in tags. Labels can be associated with form elements

using two methods:

1. Using the for attribute of the to point to the id element of the form element.2. Wrapping the form element in the tag.

We'll show both methods in the first example, but only use the first method in the rest of theexamples.

Text Fields

Text fields are created with the input tag with the type attribute set to text. They are used forsingle lines of text.

Method 1:Email:

Method 2:Email:

Attributes


type must be set to "text"

name variable name

value initial value in the text field

size width of the text field

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


43/69

Password:

Attributes


type must be set to "password"

name variable name

size width of the password field

maxlengthmaximum number of characters that can be entered

Submit and Reset Buttons

Submit and reset buttons are both created with the tag.

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 bechanged with the value attribute.

When a form has a submit button, it can be submitted either by clicking on the button or pressingthe 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 aname-value pair). This can be useful in the event that a form has multiple submit buttons as theprocessing 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.


44/69

Hidden Fields

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 sometimesused in multi-page forms to keep track of variables from a form on a previous page.

Attributes


type must be set to "hidden"

name variable name

value initial value in the hidden field(see footnote)

Exercise: Creating a Registration Form


In this exercise, you will begin to create a registration form. The form will submit to a page onhttp://www.webucator.com, which will simply "dump" the values entered into the form back toyou.

The form should appear as follows:

1. Open Forms/Exercises/RegistrationForm.html for editing.2. Add a form to the page.

o The action page is http://www.webucator.com/ClassFiles/HTM101/Register.cfm.o The method should be "post".

3. 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 button4. 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.(see footnote)

http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote133919544http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote133919544http://www.webucator.com/http://www.webucator.com/ClassFiles/Register.cfmhttp://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote132674280http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote132674280http://www.webucator.com/ClassFiles/Register.cfmhttp://www.webucator.com/http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote133919544


45/69

Checkboxes

Checkboxes are created with the input tag with the type attribute set to checkbox. The defaultvalue for a checkbox is "on". Although the value of a checkbox can be changed with the valueattribute, 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: Sprinkles Nuts WhippedCream

Attributes


type must be set to "checkbox"

name variable name

value value of the checkbox

checked indicate that checkbox is pre-checked

Radio Buttons

Radio buttons are created with the input tag with the type attribute set to radio. Radio buttonsgenerally come in groups, in which each radio button has the same name. Only one radio buttonin 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 .(see footnote)

Cup or Cone? Cup

Plaincone Sugarcone Wafflecone


46/69

You will notice that we used label differently this time. Instead of using the for attribute, wewrapped the radio button in the label tag. This is because the radio buttons don't include idattributes.

Attributes


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:

o radio buttons: name gender and values should be "male" and "female"o checkbox: name and id should be "terms"

3. When you are done, open the page in a browser, and fill out and submit the form .(see footnote)Where is the solution?

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 multipleattribute to the select tag. The following tag would create a scrollable combo box that showedthree options at a time and allowed multiple options to be selected.

Flavor:


47/69

ChocolateStrawberryVanilla

The result would look like this:

The select element must contain one or more option elements. The text between the open andclose option tags appears in the select menu. The value of the value attribute is what gets passedto the server if that option is selected. The selected attribute is used to preselect an option.

Attributes


name variable name

size number of options to appear at once

multiple indicates that multiple options can be selected. value must be "multiple"

Attributes


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 tag. The label attribute is used to set theoption group heading.

Flavor:




48/69

Mint Chocolate ChipCookies & Cream

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 closetextarea tags. For example,

Initial value goes here.

Attributes


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:

1. Open Forms/Exercises/RegistrationForm.html for editing if you don't have it open already.2. Add the following input elements:

o select: name and id should be "referral". Options should be: "--Please choose--" with value of "0" "Word of Mouth" with value of "wom" "Other" with value of "other" Option group with label of "Search Engine" and the following options:

"Google" with value of "Google"


49/69

"Yahoo!" with value of "Yahoo" "MSN" with value of "MSN"

o textarea: name and id should be "comments". Be sure to include cols and rowsattributes.

3. When you are done, open the page in a browser, and fill out and submit the form .(see footnote)Where is the solution?

HTML Forms Conclusion

In this lesson of the HTML tutorial, you have learned to create HTML forms. To process formdata, you need to know a server-side language, such as ColdFusion, PHP, or Active ServerPages. Sample scripts called IceCreamProcess.cfm, IceCreamProcess.php, andIceCreamProcess.asp can be found in the Demos folder. These scripts simply iterate back to theuser what he or she has ordered. Note that you will need to change the action of the form to see

how the scripts work.

Footnotes

1. Files can be uploaded to the server via the file input type. The tag syntax is: . File uploading is not covered in this lesson.

2. Although the user can't change the value, it could be changed programatically withJavaScript. For example, the discount might be calculated based on other options the userselected in the form.

3. You will need internet access to see the resulting page.4.

There is often no need to provide ids for radio buttons as they are not usually styled withCSS and any script code would most likely try to access the whole group and treat it as anarray, rather than try to access a single radio button.

5. You will need internet access to see the resulting page.6. You will need internet access to see the resulting page.


Table of Contents.

Crash Course in CSSIn this lesson of the CSS tutorial, you will learn...

1. To understand the benefits of Cascading Style Sheets.2. To use styles to redefine how elements are formatted.3. To create and use classes and ids.
http://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote121892704http://www.learn-html-tutorial.com/Forms.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Forms.cfm#menuHeadinghttp://www.learn-html-tutorial.com/Forms.cfm#fnidFootnote121892704


50/69

4. To use embedded style sheets, external style sheets, and inline styles.5. To specify the media types to which style rules should apply.6. To use and elements.7. To use the different units of measurement available in CSS.8. To understand how values are inherited.9. To import style sheets with @import.

Benefits of Cascading Style Sheets

In HTML 4.0, most HTML formatting elements have been deprecated, meaning that, althoughthey are still supported by browsers, the World Wide Web Consortium (W3C) recommends thatthey no longer be used. Web designers are to use CSS instead.

The major benefits of CSS are:

1. Cleaner codeo Easier to maintaino Speedier downloado Better for search engine optimization

2. Modular codeo Style rules can be applied to multiple pageso Consistency of designo Easier to Maintain

3. Design Powero Precise control of position, size, margins, etc.

4. Division of laboro Developers develop / Designers design

5. Better Accessibility(see footnote)o No need to misuse tags (e.g, for formatting)o No need for invisible images for positioningo 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 isas follows:

Syntax

selector {property:value; property:value; property:value}

Eachproperty:value pair is a declaration. Multiple declarations are separated by semi-colons.The selectordefines which elements are affected by the rule. Take a look at the following rule.

p {color:darkgreen;
http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134108976http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134108976


51/69

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

The are several different types of selectors:

Type Descendant Child Class ID Attribute Universal

Selectors identify the element(s) affected by the CSS rule. There are several different types of

selectors, including type selectors, descendant selectors, class selectors, andID selectors.(seefootnote)

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

element should be darkgreen and use a 10-pointVerdana font.

Descendant Selectors
http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134114264http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134114264http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134114264http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134114264


52/69

Descendant selectors specify elements by ancestry. Each "generation" is separated by a space.For example, the following rule states that tags within

tags should have red text.

p strong{color:red;}

With descendant selectors generations can be skipped. In other words, the code above does notrequire that the tag is a direct child of the

tag.

Child Selectors(see footnote)

Child selectors specify a direct parent-child relationship

p > strong{color:red;}

In this case only tags that are direct children of

tags are affected.

Class Selectors

Almost all elements(see footnote) can take the class attribute, which assigns a class name to anelement. Class names are created in style sheet with rules defined for class selectors. Classselectors begin with a dot and have arbitrary names. For example, the following rule creates aclass 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.

WARNING

Don't go there!

If the class selector is preceded by an element name, then that selector only applies to thespecified type of element. To illustrate, the following two rules indicate that h1 elements of theclass "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;}
http://www.learn-html-tutorial.com/CrashCourse.cfm#fnfnChildSelectorhttp://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134117048http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134117048http://www.learn-html-tutorial.com/CrashCourse.cfm#fnfnChildSelector


53/69

Because both rules indicate that the color should be red (#ff0000), this could be rewritten asfollows.

.warning{color:#ff0000;}

h1.warning{text-decoration:underline;}

p.warning{font-weight:bold;}

Note that you can assign an element any number of classes simply by separating the class nameswith spaces like this:

Syntax

...

ID Selectors

As with the class attribute, almost all elements(see footnote) can take the id attribute, which isused to uniquely identify an element on the page. ID selectors begin with a pound sign (#) andhave arbitrary names. The following rule will indent the element with the "maintext" id 20 pixelsfrom the left and right.

#mainText {margin-left:20px;

margin-right:20px;}

This is the main text of the page...

Attribute Selectors(see footnote)

Attribute selectors specify elements that contain a specific attribute. They can also specify thevalue of that attribute.

The following selector affects all links with a target attribute.

a[target] {color:red;}

The following selector would only affect links whose target attribute is "_blank".
http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134121408http://www.learn-html-tutorial.com/CrashCourse.cfm#fnfnAttributeSelectorhttp://www.learn-html-tutorial.com/CrashCourse.cfm#fnfnAttributeSelectorhttp://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134121408


54/69

a[target="_blank"] {color:red;}

The Universal Selector

The unversal selector is an asterisk (*). It matches every element.

* {color:red;}

Grouping

Selectors can share the same declarations by separating them with commas. The following rulewill underline all i elements, all elements of the class "warning" and the element with the id of

"important."i, .warning, #important {text-decoration: underline;}

Precedence of Selectors

In the event that rules conflict:

The rule with the more specific selector takes precedence. In the event that two selectors have the same specificity, the rule specified later in the

document takes precedence.

Determining a Selector's Specificity

Imagine your selectors are stacked as follows with the ones on top having the highest specificity:

1. Declarations in the style attribute have no selector and have the highest precedence.2. Selectors with id attributes (e.g, h1#foo {}) have the next highest precedence.3. Selectors with other attributes (e.g., h1.foo and a[target]) or pseudo-classes (e.g, a:hover) have

the next highest precedence.

4. Selectors with element names (e.g, h1) but no other attributes have the next highestprecedence.

5. The universal selector (*) has the lowest precedence.To figure out the exact specificity, follow this process:


55/69

1. Start with 0,0,0,0.2. If the declaration is found in the style attribute, change the first digit to 1, giving you 1,0,0,0. In

this case, you have the highest possible specificity and can stop calculating.

3. For each time the condition in level 2 is met, add 1 to the second digit.o For example, for ol#foo li#bar add 2 (1 for each id), giving you 0,2,0,0.

4. For each time the condition in level 3 is met, add 1 to the third digit.o For example, for ol#foo li#bar a[target] add 1, giving you 0,2,1,0.

5. For each time the condition in level 4 is met, add 1 to the fourth digit.o For example, for ol#foo li#bar a[target] add 3 (1 for each element name), giving you

0,2,1,3.

When comparing two selectors' specificity, start with the left-most numbers. If one has a highernumber than the other, than it is more specific. If they are the same, look to the next number andso on.

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.

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.

Code Sample:

CrashCourse/Demos/EmbeddedStyleSheet.html

Embedded Style Sheet

.warning {color:#ff0000}h1.warning {text-decoration:underline}

p.warning {font-weight:bold}WARNING

Don't go there!


56/69

Code Explanation

As you can see, the tag takes the type attribute, which is used to indicate that this is a

CSS style sheet. This page will render as follows:

Exercise: Creating an Embedded Style Sheet


In this exercise, you will add an embedded style sheet toCrashCourse/Exercises/EmbeddedStyleSheet.html. You will be adding several rules to a simpleHTML file. Do not worry about learning the CSS properties and values at this point. Thisexercise is just to give you some practice creating a style sheet.

1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in a browser. It should look like this.

2. Open CrashCourse/Exercises/EmbeddedStyleSheet.html for editing.3. Add a style block in the head of the page. Don't forget to include the type attribute.4. Add a rule for the body element that contains the following property-value pairs:

o background-image:url('Images/Baseball.gif');o background-repeat:repeat-x;o background-position:bottom;o margin-left:50%;o margin-top:20px;

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

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

7. Add a rule for table elements that contains the following property-value pairs:o margin:5px;o width:290px;

8. Add a rule for th elements that contains the following property-value pairs:o margin:5px;

9. Add a rule for td elements that contains the following property-value pairs:o padding-left:8px;o padding-right:8px;


57/69

o border:1px solid #990000;o background-color:#ffffcc;

10.Assign an id of "trHeader" to the first table row and add a rule for this id that contains thefollowing property-value pairs:

o text-decoration:underline;o color:#990000;

11.Assign a class called "centerCell" to all of the center table data cells and add a rule for this classthat contains the following property-value pairs:

o text-align:center;12.Re-open EmbeddedStyleSheet.html in a browser. It should look like this:


External Style Sheets

External style sheets are created in separate documents with a ".css" extension. An external stylesheet is simply a listing of rules. It cannot contain HTML tags.CrashCourse/Demos/Stylesheet.css is an example of an external style sheet.

Code Sample: CrashCourse/Demos/StyleSheet.css

.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 tag, which goesin the head of an HTML page, is used to link to an external style sheet.

Code Sample: CrashCourse/Demos/ExternalStyleSheet.html

External Style Sheet

WARNING

Don't go there!

Attributes


58/69

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.

Exercise: Creating an External Style Sheet


In this exercise, you will extract the embedded stylesheet that you created in the last exercise to anew external style sheet.

1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in your editor and save it asLinkedStyleSheet.html.

2. Create a new file and save it as StyleSheet.css in the same directory.3. Move all the CSS rules from LinkedStyleSheet.html to StyleSheet.css.4. In LinkedStyleSheet.html, remove the style block and add a link tag that points to StyleSheet.css.5. Open LinkedStyleSheet.html in a browser. It should look the same as EmbeddedStyleSheet.html.


Inline Styles

Inline styles are created by adding the style attribute to a tag. As with the class and id attributes,almost all elements(see footnote) can take the style attribute. The value of the style attribute is alist of one or more property-value pairs separated by semi-colons. The code sample belowillustrates how inline styles are used.

Code Sample: CrashCourse/Demos/InlineStyles.html

Inline Styles

Common Greetings
http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134152200http://www.learn-html-tutorial.com/CrashCourse.cfm#fnidFootnote134152200


59/69

HelloHiHowdy

Code Explanation

This page will render as follows.

Exercise: Adding Inline Styles


In this exercise, you will add some inline styles to the page you have been working on.

1. Open CrashCourse/Exercises/LinkedStyleSheet.html and save it as InlineStyles.html.2. Add an inline style to the table data cell containing the word "Braves". The style should contain

the following property-value pairs:

o font-style: italic;o color: #ff0000;

3. Add an inline style to the table data cell containing the word "Yankees". The style should containthe following property-value pairs:

o font-style: italic;o color: #000033;

4. Add inline styles to the table data cells containing the word "Giants". The style should containthe following property-value pairs:

o font-style: italic;o color: #cc3300;

5. Open InlineStyles.html in a browser. It should look like this:

Media Types

Styles can be defined for different media

Documents

A Quick Overview of Web Development