|
|
Part 2 Tutorial
This is Part 2 of the Introduction to HTML tutorial. To review Part 1, visit the Introduction to HTML web page.
Basic Structure of an HTML Document
*Remember to include a Document Type Definition (DTD) at the beginning of your document. Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Title of Document</TITLE>
</HEAD>
<BODY>
The contents of our document are placed between the BODY tags.
</BODY>
</HTML>
Back to top
|
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Back to top
|
HTML has the capability of producing several different types of lists (e.g., unordered, ordered, and definition). Descriptions are provided below:
|
|
Unordered lists start with a <UL> tag followed by the list items one at a time, each preceded by a <LI> tag (and a closing </LI> tag). The list is ended by a </UL> tag.
|
|
HTML Code:
<UL>
<LI> Freshmen</LI>
<LI> Sophomores</LI>
<LI> Juniors</LI>
<LI> Seniors</LI>
</UL>
|
Displays in browser as:
- Freshmen
- Sophomores
- Juniors
- Seniors
|
|
Back to top
Ordered lists are similar except that they use the <OL> tag instead of the <UL> tag. The above list example is displayed below with numbers replacing the bullets.
|
|
HTML Code:
<OL>
<LI> Freshmen</LI>
<LI> Sophomores</LI>
<LI> Juniors</LI>
<LI> Seniors</LI>
</OL>
|
Displays in browser as:
- Freshmen
- Sophomores
- Juniors
- Seniors
|
|
Back to top
Changing List Style Properties
The list-style property allows you to change the bullet style of all items in an unordered list (UL) or the number style of all items in an ordered list (OL). By using the TYPE attribute, you can change the bullet style of your lists.
Use the circle, disc or square value to specify a new bullet style for unordered lists (view styles in browser).
*NOTE: The default bullet style is disc.
|
|
HTML Code:
<UL>
<LI> Freshmen</LI>
<LI> Sophomores</LI>
<LI> Juniors</LI>
<LI> Seniors</LI>
</UL>
|
Displays in browser as:
- Freshmen
- Sophomore
- Juniors
- Seniors
|
|
Back to top
To specify a number style for ordered lists, use the following (replacing the "a" in the HTML code below with the corresponding number or letter):
1 = Decimal (1, 2, 3)
a = Lower-alpha (a, b, c)
A = Upper-alpha (A, B, C)
i = Lower-roman (i, ii, iii)
I = Upper-roman (I, II, III)
|
|
HTML Code:
<OL type="a">
<LI>Freshmen</LI>
<LI>Sophomores</LI>
<LI>Juniors</LI>
<LI>Seniros</LI>
</OL>
|
Displays in browser as:
- Freshmen
- Sophomore
- Juniors
- Seniors
|
|
Back to top
Nesting Lists
A nested list is simply a list within a list. Nested lists allow you to create lists with several levels of items, such as a project outline. To create a nested list, add a new ordered or unordered list to an existing list on your web page. |
|
HTML Code:
<OL type="1">
<LI> Introduction</LI>
<OL type="a">
<LI>Program Overview</LI>
<LI>Mission Statement</LI>
<LI>Career Options</LI>
</OL>
<LI> Faculty</LI>
<LI> Introduction</LI>
<LI> Degree Requirements</LI>
<UL type="disc">
<LI>Prerequisites</LI>
<LI>Electives</LI>
</UL>
<LI> Contact Information</LI>
</OL>
|
Displays in browser as:
- Introduction
- Program Overview
- Mission Statementm
- Career Options
- Faculty
- Introduction
- Degree Requirements
- Contact Information
|
|
Back to top
Definition Lists display terms and their definitions. This type of list is ideal for a glossary. There are three main tags used for creating definition lists. The <DL> tag marks the beginning of a definition list, the <DT> tag marks the beginning of each term in the list, and the <DD> tag indicates the beginning of each definition in the list.
Example Code:
<DL>
<DT> HTML</DT>
<DD> This is an acronym for HyperText Markup Language.
HTML is a markup language used to create web pages.</DD>
<DT> HTTP (HyperText Transfer Protocol)</DT>
<DD> The Internet protocol used to manage communication
between web clients (browsers) and servers.</DD>
<DT> Internet </DT>
<DD> A worldwide collection of networks that began with
technology and equipment funded by the U.S. Department
of Defense in the 1970s that today links users in nearly
every known country, speaking nearly every known language.</DD>
</DL>
Displays in browser as:
- HTML
- This is an acronym for HyperText Markup Language.
HTML is a markup language used to create web pages.
- HTTP (HyperText Transfer Protocol)
- The Internet protocol used to manage communication
between web clients (browsers) and servers.
- Internet
- A worldwide collection of networks that began with
technology and equipment funded by the U.S. Department
of Defense in the 1970s that today links users in nearly
every known country, speaking nearly every known language.
Back to top |
The HTML standard provides character encoding for adding special characters to your web page. This lets you include characters that do not appear on your keyboard. When adding a special character, a numeric value or a named entity must be specified.
To display the character in the left column below, use either the numeric value or the named entity. *Named entities are preferable because numeric values may be interpreted differently on various platforms. |
Character
<
>
&
"
¢
©
®
|
Numeric Value
<
>
&
"
¢
©
®
|
Named Entity
<
>
&
"
¢
©
®
|
You can find a complete listing of all special characters at:
http://www.w3.org/TR/WD-html40-970708/sgml/entities.html
Back to top |
The benefit of validation cannot be overstated. No matter how HTML documents are created, they should be validated. Validation involves checking an HTML file to ensure that it meets the HTML specification and W3C standards for valid HTML. Validators can find numerous errors including proprietary attribute usage, missing quotes, improper nesting, tags used in inappropriate ways and tags that are not closed.
To validate your web page, use W3C's HTML Validation Service available online at:
http://validator.w3.org
You can enter the URL of your file or upload it directly and the HTML code will be checked against whichever DOCTYPE (Document Type Definition) you specify. Check the Web Design Group website at: http://www.htmlhelp.com/tools/validator/doctype.html for further information on selecting an appropriate DOCTYPE definition.
Back to top |
One of the toughest aspects of writing HTML is formatting your page for all users. One can never know what screen resolution, platform or browser the user will be using. The safest practice is to write HTML for all platforms, browsers and screen resolutions.
With basic HTML, platform and browser compatibility is not much of a worry. Virtually all platforms and browsers support the basic commands. When you get into advanced HTML such as CSS and DHTML, compatibility becomes more of an issue.
The biggest issue with basic HTML is screen resolution. Most users will be using one of the following screen resolutions: 640 x 480, 800 x 600, 1024 x 768, with 800 x 600 probably being the most common. The user's screen resolution is a big factor in how the page will look to them. If a page is formatted at 1024 x 768, a user with 640 x 480 would have to scroll a great deal. On the other hand, if a page is formatted at 640 x 480, the page would appear small in 1024 x 768.
In Windows 95/98, the display resolution can be changed by going into the Control Panel (Start | Settings | Control Panel) and double clicking the Display button. Once in the display dialog, click on the Settings tab on the far right. There you can move the slidebar where it says Screen Area to different resolutions, then click the Apply button.
On a Macintosh, go into Control Panels, Monitors and Sound, and you can change the screen size there.
Back to top |
Before you begin designing your web page, you should create a plan. Understanding the purpose of each page before you design is paramount. Use the following guidelines to assist you in your planning:
- Develop a list or outline of the information and/or features you wish to include. Once you have developed this, a flowchart will help you visualize how your pages will fit together.
- Sketch the basic layout of each web page before you begin to write the HTML code.
- Your home page is not always the first page a user sees when visiting a website. Keep this in mind as you develop a consistent set of links to assist in the ease of navigation within your web page(s).
- While a web page should be eye-catching, avoid inserting excessive graphics that might cause the page to take a long time to load.
Back to top |
Which option is best for you?
| HTML Coding Method |
Example |
Advantages |
Disadvantages |
| By Hand |
coding pages with Notepad |
- Greater control
- Can address bugs and new HTML elements quickly
|
- Slow
- Error Prone
- Requires extensive knowledge of HTML elements
- No direct viaual representation
|
| Translation |
"Save as HTML" from another tool like Microsoft Word |
- Quick
- Simplifies conversion of exsisting documents
|
- Produced HTML often is problematic (i.e., unnecessary, verbose code)
- Still requires editing to add links and clean up code
|
| HTML Editor |
NoteTab Pro
Homesite |
- Great deal of control
- Faster than hand editing
- Provides help addressing errors and writing HTML
|
- Slow
- Requires long knowledge of HTML
|
WYSIWYG Editors
(what you see is what you get) |
Dreamweaver
Frontpage |
- Works on visual representation of page
- Requires no significant knowledge of HTML
|
- May generate incorrect HTML
- Often generates extra, unnecessary code
- Precise control of layout often requires direct markup editing
|
Back to top
This concludes Part 2 of the Introduction to HTML tutorial.  Review Part 1
|
|
|
