HTML Courses For Beginners

Quiz Num 1
Take this short quiz to see what you may already know about HTML.
1. The largest heading size is
H1
2. The definitive resource for current Internet standards is
the World Wide Web Consortium
3. Which of the following is not a function of the <meta> tag
to specify the font colors that will be used on the page
4. The <p> tag tells the browser
to start a new paragraph
5. All HTML documents should begin with
an <html> tag
6. The <br> tag
forces a line break in your text

7. The <hr> tag
puts a horizontal rule in your document
HTML Basics -- Part One
HTML Tags
HTML tags specify the markup codes the browser uses to format the Web page. These tags are
embedded directly in with the Web content. You can think of HTML tags as the visible
equivalent to the information a word processor (such as MS Word) embeds in the document to
specify how a document appears and is to be printed.
Tags are not case sensitive. Many people prefer to use all uppercase for tags to make them more
visible. However, as XML comes along, it will be better to get in the habit of using lowercase.
(XML is case sensitive and most recommendations are to use lowercase tags in XML.)
Tags consist of a keyword or abbreviation enclosed in < and > characters, for example <b>
(bold) and <h3> (header level 3).
Most tags have a matching ending tag, which is denoted by a "/" in front of the tag's name. For
example, <b> and </b> mark the beginning and the end of content to be displayed as bold.
Browsers differ in how strictly they enforce closing tags and, for some tags in some browsers,
explicit use of an end tag is not required. In general, Netscape browsers are more stringent about
requiring closing tags, while Internet Explorer is much more lenient.
Typically, tags can be put inside the affected text of another tag (nested) although nesting must
kept in the proper order, for example:
<b>This is bold <i>and italic</i> then back to bold</b>
is rendered as:
This is bold and italic then back to bold
Many tags take attributes that give additional information about how the tag affects the content.
Attributes are specified as: "attribute-name=attribute-value". Here are some examples:
• <body bgcolor="blue"> -- the background color for the document is blue

• <p align=center> -- center align the paragraph
• <a href="http://www.yahoo.com"> -- create a link whose URL reference is yahoo.com
deprecated -- this
means that the tag
Notice that attribute values are sometimes enclosed in quotes and
has been removed
sometimes not. The browsers don't require quotes, but there are times
from the standard,
they would get confused without them. You can always put them in to be
usually because
safe.
there is another
way to specify that
As we go through the various HTML tags, I'll sometimes use two terms
particular
to indicate the state of certain tags with respect to the standards:
formatting.
Because style
sheets allow much
greater control
over formatting,
they have
deprecated a
number of tags.
Deprecated tags
are generally
supported for a
time by the
browsers to insure
compatibility with
older HTML
sources. An
example of this is
the <font> tag,
which is no longer
needed now that
style sheets allow
full control over
font, color, and
other text
characteristics.
obsoleted -- this is
the next step
beyond
deprecated. You
should avoid using
tags that have
been obsoleted.
Note, however, that since millions of Web pages have already been written to earlier standards in
which many of these tags were still included, browser support is generally quite good for all
deprecated tags and many obsoleted ones as well.
HTML Document Structure
All HTML documents should start with an <html> tag and end with a </html> tag, although this
isn't generally enforced on most browsers to allow older pages missing these tags to be
displayed.
Most HTML documents have two parts: the head section and the body or content section.
Browsers generally consider a "tag-less" HTML file, one without the <html> tags and without
any indication of the head and body section, to be all body.
The head section is enclosed between <head> and </head> tags and contains information used to
specify title, style, and scripting information for the document. The most common content in the
head section is the title, which is enclosed between <title> and </title> tags. The head section can
also contain information that informs search engines of keywords and Web servers of page
update and expiration dates.
The body section is enclosed between <body> and </body> tags and contains the user-visible
document content, that is, what is displayed in the browser window itself.
Here's a very simple example that includes all these tags:
• <html>
• <head>
• <title>This here is the title</title>
• </head>
• <body>
• And this stuff is considered the body of the page
• </body>
• </html>
Test For Part 1

Take what you learned in Part One by taking this short quiz.
1. How can you make sure a Web site will display exactly as you designed it, no
matter who accesses it?
Use XML instead of HTML.

Specify which browser should be used to view the page.
Specify the optimal monitor size for viewing the page.
Since people use different monitors, video cards, networking speeds, and
browsers, there's no way to make sure.
2. What does it mean if a certain HTML tag is "deprecated"?
The tag has been removed from the standard because it is no longer
necessary.
Your site will crash if you use the tag.
The tag should never be nested inside another tag.
People will ridicule your Web site if you use the tag.
3. The definitive resource for current Internet standards is
the Federal Communications Commission.
the International Internet Society.
the World Wide Web Consortium.
the Federal Bureau of Investigation.

4. When designing a Web site in HTML, which of the following is the most
important to consider?
exact placement of graphics and text
using interactive graphics
the content
adding lots of audio files
5. The title, style, and scripting information for an HTML document goes in
the <body> tag.
the <head> tag.
the <font> tag.
the <b> tag.
HTML Basics -- Part Two

The <head> Tag
The <head> tag is used to encapsulate several other document header tags. It
should appear after the <html> tag and before the <body> tag in your document.
The most common tags used within the header section are:
<title> -- specifies the title of the document, typically displayed in the browser's title bar. For
example, the <title> tag for this section could look like:
<title>The <head> Tag</title>
<meta> -- the <meta> tag is used to give additional information about

< and > are
the document, which may be used by the browser, search engines, etc.
character entities
that allow the
browser to render
special characters.
More on this later
in the course.
The most common uses of <meta> are:
• to specify some keywords, which are used by search engines to help index and categorize
the page, such as <meta name="keyword" content="hobbies, fishkeeping, salt water">
• to specify that the browser should refresh the page to anotherpage.html after 1 second.
This tag is often used to redirect a page that users may have bookmarked to a new main
page within a Web site. An example looks like <meta http-equiv="refresh"
content="1,http://www.mysite.com/anotherpage.html">
• to specify that the page expires as of the specified date. This tag is used to override the
browser's page caching to guarantee a "fresh" page is downloaded if the expiration date
has passed. An example looks like <meta http-equiv="expires" content="Sun, 17 Oct
1999 17:00:00 GMT">
Other tags commonly found in the document's header section are the <script> tag, which
indicates a section of JavaScript or VBScript in a document; the <style> tag, which specifies
CSS styles for the document; and the <link> tag, which is used to link to an external style sheet.
There are other, less frequently used tags that appear in the document header that I won't be
covering here. Most HTML references (including HTML: The Definitive Guide) offer a detailed
discussion of these.
The <body> Tag
The <body> tag is used to denote the visible content of the document that is
displayed in the browser window. This tag accepts the following attributes:
• background="image-name" - loads the specified image as the page's background

• bgcolor="color-name" | "#rrggbb" - specifies the background color
• text="color-name" | "#rrggbb" - specifies the default color for text
• link="color-name" | "#rrggbb" - specifies the default color for a hypertext link
• vlink="color-name" | "#rrggbb" - specifies the default color for an already visited link
• alink="color-name" | "#rrggbb" - specifies the default color for an active (currently being
followed) link
• class="style-name" - specifies a named style to be used for the document
• style="style-properties" - specifies style properties to be used for the document
Several of these individual parameters are becoming obsolete (deprecated) as style sheets gain
usage.
You'll also see two other groups of attributes used with the <body> tag:
• IE-specific attributes, such as leftmargin, topmargin, bgproperties, etc.

• JavaScript event-handlers, which typically take the form of "on" plus some event action
(onclick, onmouseover, etc.).
Colors
You'll notice two forms of specifying colors for text, backgrounds, etc.--actual color names and
hexadecimal values:
• HTML 4.0 defines 16 basic colors, but current browsers have gone well beyond this,
supporting over 200 named colors and variants within those colors.
• HTML also supports a "color triplet," that is, a numeric value for red, green, and blue (in
that order). Most often this value is specified in hexadecimal in the form "#rrggbb" where
"rr" is a red value between 00 and ff, "gg" is a green value between 00 and ff, and "bb" is
a blue value between 00 and ff. This gives the page designer 256 possible values of each
of red, green, and blue, for a total of 65K colors.To maintain compatibility with older
systems that typically have only 256 colors available, a standard color map has been
defined using specific combinations of red, green, and blue values. There are 216 colors
in this color map representing all combinations of the values 00, 33, 66, 99, cc, and ff for
each of red, green, and blue.
Thus, the body tag <body text=darkblue link=darkgreen alink=red vlink=purple> could also be
written as <body text="#000066" link="#006600" alink="#ff0000" vlink="#ff00ff">.
That is, a text color of some blue (rendering it dark), a link color of a darker green, an active link
color of full red, and a visited link color of purple, which is a mix of red and blue.
Paragraphs and Divisions: The <p> Tag
The <p> tag tells the browser to start a new paragraph. Use of </p> to end the
paragraph is recommended, but not required unless you are using style sheets.
Browsers typically insert a blank line plus some extra space before the start of a
new paragraph, such as:
Here's a paragraph.
And here's another one.
You can specify paragraph alignment via the align attribute, which takes arguments of LEFT,
CENTER, or RIGHT, using:
<p align=right>This text will be right justified.</p>
<div> Tag
The <div> tag is used to divide your HTML document into sections or divisions. It does not
imply any special formatting/spacing (as does <p>) other than starting on a new line, although it
accepts the same align attribute.
Divisions are often used in conjunction with style sheets and scripting simply as a content
collection mechanism. This allows the page author to identify a specific block of content (useful
in conjunction with scripting) or to apply a specific style to a block of content.

Header Tags
The header tag (<hX> </hX>, where "X" is a number between 1 and 6) is used to specify a
heading level, often used when creating outline-style documents or to specify a content section
heading line. Text between the start header/end header tags is typically rendered in a larger,
bolder font with extra space above and below. <h1> is the largest heading size and <h6> the
smallest. Here's the HTML for some examples:
• <H1>This is at H1 level</H1>
• <H2>Here's a heading at H2</H2>
• <H6>Finally, here's H6</H6>
By default, the browser defines the font styles used to render headings. This page uses a style
sheet, which overrides the default to change the text font and color.
Content-based Style Tags
Content-based style tags require you to think of the type of content you are using rather than how
it should look. The advantage in using these tags is consistency across multiple documents. The
browser determines how text enclosed in content-based style tags is rendered. (Or you can
override or enhance this via style sheets.) The strength of content-based tags is that they can be
easily associated with a type of content/text. If you are creating a very large site with many
pages, it may be difficult to remember that all acronyms (for example) are to be rendered
italicized. But by using the <acronym> tag to note this type of text, you have a better chance of
consistency throughout your pages.
Content-based tags all take the align attribute, as well as the class and style attributes used in
style sheets. Content-based style tags are not all completely supported by today's browsers. The
full HTML 4.0 list includes:
• <abbr> - specifies an abbreviation such as temp

• <acronym> - the text is an acronym such as HTML
• <cite> - used for citations and typically rendered in italics such as PC Week; cite may
also be used in future browsers to collect citation information for searching, etc.
• <code> - used to present code samples
• <dfn> - used to define special terms or phrases. It may not change the formatting, but it
might be used to assist in creating a glossary or index
• <em> - used to emphasize text; generally italics are used
• <kbd> - used to indicate text/letters that are present on a keyboard, such as the Enter key
• <samp> - used to show a sample of text out of its normal context
• <strong> - used to emphasize text, similar to the <em> tag although in this case rendered
in bold
• <var> - used in code examples to specify a variable
Note that all content-based style tags require ending tags. See Table 4-1 in HTML: The
Definitive Guide to see how each browser renders each tag.
Physical Style Tags
There are nine physical style tags in HTML that allow you to explicitly specify
bold, italic, and so on. It has been proposed that some of these be deprecated and
replaced by style sheets, but they are still frequently used. All of these tags
require the use of a corresponding closing tag. The nine physical style tags are:
• <b> -- bold text

• <i> -- italicized text
• <u> -- underlined text (deprecated as of HTML 4.0)
• <s> & <strike> -- strike through text, often used to indicate a deletion (also deprecated)
• <sup> - superscripted text
• <sub> - subscripted text
• <tt> - text in monospaced font
• <big> - text one size bigger
• <small> - text one size smaller
As you might infer from our discussion of content-based tags, perhaps the biggest drawback with
use of physical styles is consistency. It is often difficult to remember just exactly how and when
you've used these in other pages on your site. Style sheets also help solve this problem.
Handling Fonts
You can explicitly set certain aspects of how text is rendered via the <font> </font> tag.
Although this tag is used widely, it is deprecated as of HTML 4.0 since style sheets allow you far
greater control over the fonts used to render page content. The specified font attributes apply to
content until a </font> is encountered (though <font> tags may be nested). The <font> tag
accepts the following attributes:
• size=value - font size, a value from 1 to 7 where 1 is the smallest and 7 is

the largest (exactly opposite of the header tag). The size attribute can also
be used to increment/decrement the current size. For example:<font size=5> -- sets the
font size to 5<font size=-2> -- sets the font size to 2 less than what it currently isNote that
the font size is not points, pixels, or any other common font measure; it is up to the
browser to define the meaning of each size. And both major browsers give the user
control over the default font size, so the exact font size used is a combination of browser
and user preferences.
• color="color-name" | "#rrggbb" - the font color, either a color name or RGB value (see
Appendix F.2 in HTML, The Definitive Guide.
• FACE="font-name" - the name of the font face, for example "Arial" or "Comic Sans
MS"FACE="Comic Sans MS" - This is a font called "Comic Sans MS"
You can set the default font for an entire document via the <basefont> tag. <basefont> takes the
same attributes as described above for the <font> tag, although it too is deprecated as of HTML
4.0. The default base font size is 3. For example, you would specify Arial as the default font face
at a size one larger than the default by including: basefont face="Arial" size="+1" after the
<body> tag of the document.
Test what you learned in Part Two by taking this short quiz.
1. The <head> tag should appear after the <html> tag and before the
<body> tag within the <title> tag after the <body> tag within the
<meta> tag 2. To help search engines
index your document, you can specify some keywords at the bottom of the
document by adding some JavaScript in a letter to the W3C in the
<meta> tag 3. HTML specifies colors for
text and backgrounds using numeric values for red, blue, and green
black, white, and yellow blue, red, and purple yellow, red, and blue
4. Everything you include within a
document's <body> tag will be assigned a hexadecimal value will be
centered will be displayed in the browser window will be deprecated
5. Content-based style tags require you to

think of the type of content rather than how it should look. Which of the following is
a content-based style tag? <b> <cite> <i> <sub>
HTML Basics -- Part Three
Special Characters
Special characters are a way to include characters in your content that are
normally treated as special by the browser. Two great examples of this are the <
and > characters, which are normally interpreted by the browser as the start and
end of a tag. But what if you simply want to display these characters rather than having the
browser interpret them? Or, what if you want to include non-standard characters, such as © and
½?
In HTML, the ampersand (&) character is used to insert a character entity and the semicolon (;)
is used to terminate it. Character entities can be specified in one of two formats:
• &name; - a named character entity such as < (<) or > (>).

• &#nnn; - a numeric character entity with nnn the ASCII numeric value, for example
· looks like this · (a middle dot). (Note that not all numeric values are recognized.)
Appendix E in HTML: The Definitive Guide lists all character entities specified by the HTML
standard.
You might have figured out by now that many of these pages include the use of the < and >
entities, which allow display of the format of HTML tags (for example, <body>). Without this,
the browser would attempt to interpret the tag rather than displaying it.
Spacing and Layout
Normally, the spirit of HTML was to specify document content rather than format, leaving that
up to the browser. Style sheets can be used for much greater control over format and appearance
when such control is required. However, there are several basic HTML tags that allow you
similar control.
The <br> Tag
The <br> tag is used to force a line break. Normally the browser flows your content in whatever
way it sees fit unless you specify segmentation via paragraph tags, etc. (Note that since you don't
know your user's exact display environment, the browser typically knows better than you do how
best to render content.) If you specifically want simply to break a line, you can use <br> to do it.
The <pre> Tag
The <pre> </pre> tag defines a segment of content that the browser renders exactly the same as it
is defined in the HTML source. All line breaks and spaces specified are honored. One typical use
of <pre> is to show a source code example:
The <center> Tag
The <center> tag has been deprecated but its use is still common. You use this tag to center text
(which is, by default, left justified).
The <center> tag also forces a line break, making it equivalent to <div align=center>.
The <blockquote> Tag
All text within the <blockquote> and </blockquote> tags is set off from the regular document
content, normally with indented left and right margins.
The <address> Tag
The <address> and required </address> tags tell the browser that the enclosed text is an address.
The browser may render it in a special way or somehow otherwise use this information. For
example:
• William H. Gates
• Microsoft, Inc.
Ordered and Unordered Lists
Here are the tags used to create lists and elements within lists:
• <ol> - ordered list, by default, numeric

• <ul> - unordered list typically rendered with some type of bullet symbol
• <li> - an individual list element for either list type (no closing tag required; it is most
There are several attributes that can apply to these tags:

Lists can be nested--placed inside other lists. Browsers use indentation to indicate nesting. Note
that you often see the HTML source also indented. This is not required, but is often helpful to
improve readability.
Definition Lists
Definition lists are similar to entries you might find in a dictionary or encyclopedia. That is, they
typically are a list of terms with a definition for each term. The browser renders the list, without
numbers or bullets, indenting each term's definition below it.
The tags used in definition lists are:
• <dl> - delimits the definition list

• <dt> - definition term
• <dd> - definition
Using Lists
Here is are list types and their uses:
• Unordered Lists - link collections, key points of a presentation

• Ordered Lists - instruction sequences/steps, assigning numbers to items for later reference
• Definition Lists - glossaries, lists of name/value pairs
Rules -- the <hr> Tag
Horizontal rules are useful in breaking up a long single page into multiple
sections. In its simplest form, the <hr> tag places a single medium-width
horizontal line in the document. Attributes can be used to tailor the line's
appearance, for example:
• size=n -- specifies the height of the line in pixels (the default is 3)

• noshade -- specifies that the line is to be rendered flat rather than 3D
• width=n or width=x% -- specifies the width of the line either in pixels or in percentage of
the total window width
• align=left | center | right -- specifies the alignment of the line
• color=#rrggbb | color-name -- specifies the color of the line (IE only; the 3D effect is lost
by specifying color)
Creating Hyperlinks -- The <a> Tag
Anchor tags are used to create links between documents. The HTML standard states that only
text, images, line breaks, and headings are allowed between the <a> and </a> tags, although
most browsers support other tags as well. Typically it is best to allow the browser to determine
how links will be rendered.
The anchor tag supports several attributes, the most common of which are:
• name="markername" -- create a label called markername at the current location, which

can be used as the destination for another anchor tag.
• href="URL" or href="URL#markername" -- when a user clicks on text or an image that is
surrounded by an anchor tag, the browser attempts to load the URL specified by that
anchor tag. If #markername is specified, the browser looks for a marker within the
specified page with that name and displays the page with the location of that marker at
the top of the screen.
• target="window-name" -- tells the browser which window is to be used to load the page.
By default, the current window is used. This form is most often used in multi-frame
environments where "window-name" is the name of another frame. If target="_blank" is
specified, a new browser window is opened to display that page.
Take what you learned in this OpenUW course by taking this final quiz.
1. Which of the following is the appropriate character entity for the symbol >?
#gt; > ?gt! /gt/ 2.
You'd most likely format a collection of links in an ordered list. an
unordered list. a definition list. a delimited list.
3. Which browser is more stringent about
requiring closing tags? Netscape Internet Explorer
4. The <br> tag is deprecated and

should no longer be used. signifies a broken link. flows the text together.
forces a line break in your text. 5.
The <pre> tag should appear between the <head> tag and the <body> tag.
makes the browser render text exactly as it appears in the HTML source code.
can be used instead of the <hr> tag. automatically centers the text.
6. Horizontal rules do not appear in
Netscape must always measure 3 pixels high. can be rendered either
flat or with a 3-D effect. need a closing tag.
7. Which of the following shows the correct
use of anchor tags to create a hyperlink? <a>Click here</a>
<a="newpage.html">Click here</a> <a link="newpage.html">Click
here</a> <a href="newpage.html">Click here</a>
8. Each item in an ordered list (<ol>)
usually starts with a bullet a small photograph a dash a

number

HTML Courses For Beginners

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Courses For Beginners

Transféré par

Droits d'auteur :

Formats disponibles

Quiz Num 1

1. The largest heading size is

2. The definitive resource for current Internet standards is

the World Wide Web Consortium

3. Which of the following is not a function of the <meta> tag

to specify the font colors that will be used on the page

4. The <p> tag tells the browser

to start a new paragraph

5. All HTML documents should begin with

6. The <br> tag

forces a line break in your text

puts a horizontal rule in your document

HTML Basics -- Part One

<b>This is bold <i>and italic</i> then back to bold</b>

This is bold and italic then back to bold

• <body bgcolor="blue"> -- the background color for the document is blue

Here's a very simple example that includes all these tags:

Test For Part 1

matter who accesses it?

Use XML instead of HTML.

Specify the optimal monitor size for viewing the page.

browsers, there's no way to make sure.

2. What does it mean if a certain HTML tag is "deprecated"?

Your site will crash if you use the tag.

The tag should never be nested inside another tag.

3. The definitive resource for current Internet standards is

the Federal Communications Commission.

the International Internet Society.

the World Wide Web Consortium.

the Federal Bureau of Investigation.

exact placement of graphics and text

using interactive graphics

adding lots of audio files

the <body> tag.

the <head> tag.

the <font> tag.

the <b> tag.

HTML Basics -- Part Two

<title>The <head> Tag</title>

<meta> -- the <meta> tag is used to give additional information about

The most common uses of <meta> are:

The <body> Tag

• background="image-name" - loads the specified image as the page's background

• IE-specific attributes, such as leftmargin, topmargin, bgproperties, etc.

HTML Basics -- Part Two

Paragraphs and Divisions: The <p> Tag

And here's another one.

<p align=right>This text will be right justified.</p>

HTML Basics -- Part Two

HTML Basics -- Part Two

Content-based Style Tags

• <abbr> - specifies an abbreviation such as temp

Physical Style Tags

• <b> -- bold text

HTML Basics -- Part Two

• size=value - font size, a value from 1 to 7 where 1 is the smallest and 7 is

<meta> tag 2. To help search engines

document by adding some JavaScript in a letter to the W3C in the

<meta> tag 3. HTML specifies colors for

4. Everything you include within a

document's <body> tag will be assigned a hexadecimal value will be

centered will be displayed in the browser window will be deprecated

• &name; - a named character entity such as < (<) or > (>).

#gt; > ?gt! /gt/ 2.