Quiz Num 1
Take this short quiz to see what you may already know about HTML.
The largest heading size is
The definitive resource for current Internet standards is
the World Wide Web Consortium
Which of the following is not a function of the <meta> tag
to specify the font colors that will be used on the page
The <p> tag tells the browser
to start a new paragraph
All HTML documents should begin with
an <html> tag
The <br> tag
forces a line break in your text
For example. which is denoted by a "/" in front of the tag's name.the background color for the document is blue <p align=center> -.create a link whose URL reference is yahoo. Browsers differ in how strictly they enforce closing tags and. (XML is case sensitive and most recommendations are to use lowercase tags in XML.com
. Typically. 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. In general. Attributes are specified as: "attribute-name=attribute-value". <b> and </b> mark the beginning and the end of content to be displayed as bold. for example <b> (bold) and <h3> (header level 3). 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. for some tags in some browsers. Here are some examples: • • • <body bgcolor="blue"> -.
The <hr> tag
puts a horizontal rule in your document
HTML Basics -.center align the paragraph <a href="http://www. Netscape browsers are more stringent about requiring closing tags.) Tags consist of a keyword or abbreviation enclosed in < and > characters. it will be better to get in the habit of using lowercase.7.yahoo. tags can be put inside the affected text of another tag (nested) although nesting must kept in the proper order. while Internet Explorer is much more lenient. Many people prefer to use all uppercase for tags to make them more visible. as XML comes along. Tags are not case sensitive. Most tags have a matching ending tag. explicit use of an end tag is not required.com"> -.Part One HTML Tags HTML tags specify the markup codes the browser uses to format the Web page. However.
they have deprecated a number of tags.this means that the tag has been removed from the standard.
Note. that since millions of Web pages have already been written to earlier standards in which many of these tags were still included. Because style sheets allow much greater control over formatting. which is no longer needed now that style sheets allow full control over font. I'll sometimes use two terms to indicate the state of certain tags with respect to the standards:
deprecated -. browser support is generally quite good for all deprecated tags and many obsoleted ones as well. usually because there is another way to specify that particular formatting. Deprecated tags are generally supported for a time by the browsers to insure compatibility with older HTML sources.this is the next step beyond deprecated.
. and other text characteristics. You should avoid using tags that have been obsoleted. As we go through the various HTML tags. however. color.Notice that attribute values are sometimes enclosed in quotes and sometimes not. The browsers don't require quotes. An example of this is the <font> tag. but there are times they would get confused without them. You can always put them in to be safe. obsoleted -.
HTML Document Structure
All HTML documents should start with an <html> tag and end with a </html> tag. one without the <html> tags and without any indication of the head and body section. The body section is enclosed between <body> and </body> tags and contains the user-visible document content. The head section is enclosed between <head> and </head> tags and contains information used to specify title.
How can you make sure a Web site will display exactly as you designed it. which is enclosed between <title> and </title> tags. 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. style. The head section can also contain information that informs search engines of keywords and Web servers of page update and expiration dates. to be all body. no
matter who accesses it?
Use XML instead of HTML.
1. Browsers generally consider a "tag-less" HTML file. although this isn't generally enforced on most browsers to allow older pages missing these tags to be displayed. The most common content in the head section is the title. Most HTML documents have two parts: the head section and the body or content section. and scripting information for the document. that is. what is displayed in the browser window itself.
the Federal Bureau of Investigation.
The definitive resource for current Internet standards is
the Federal Communications Commission.
Specify the optimal monitor size for viewing the page. People will ridicule your Web site if you use the tag.
3. video cards.
the World Wide Web Consortium. there's no way to make sure.
the International Internet Society.
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. The tag should never be nested inside another tag.Specify which browser should be used to view the page.
Your site will crash if you use the tag. and browsers.
Since people use different monitors. networking speeds.
When designing a Web site in HTML.
the <font> tag.Part Two
the <head> tag.
HTML Basics -. style. which of the following is the most
important to consider?
exact placement of graphics and text
using interactive graphics
adding lots of audio files
the <b> tag.
The title. and scripting information for an HTML document goes in
the <body> tag.4.
An example looks like <meta http-equiv="refresh" content="1. such as <meta name="keyword" content="hobbies.html"> to specify that the page expires as of the specified date. which is used to link to an external style sheet. This tag is often used to redirect a page that users may have bookmarked to a new main page within a Web site. etc. which may be used by the browser. the <style> tag. less frequently used tags that appear in the document header that I won't be covering here. < and > are character entities that allow the browser to render special characters.specifies the title of the document. which are used by search engines to help index and categorize the page. and the <link> tag.mysite.
The most common uses of <meta> are: • • to specify some keywords. Most HTML references (including HTML: The Definitive Guide) offer a detailed discussion of these. which specifies CSS styles for the document.
. typically displayed in the browser's title bar. This tag is used to override the browser's page caching to guarantee a "fresh" page is downloaded if the expiration date has passed. search engines.the <meta> tag is used to give additional information about the document.The <head> Tag The <head> tag is used to encapsulate several other document header tags. 17 Oct 1999 17:00:00 GMT">
This tag accepts the following attributes: • • • • • • • •
background="image-name" .0 defines 16 basic colors.specifies the default color for an active (currently being followed) link class="style-name" . Most often this value is specified in hexadecimal in the form "#rrggbb" where "rr" is a red value between 00 and ff.specifies the background color text="color-name" | "#rrggbb" .--actual color names and hexadecimal values:
HTML 4.specifies the default color for a hypertext link vlink="color-name" | "#rrggbb" . green.specifies the default color for an already visited link alink="color-name" | "#rrggbb" . but current browsers have gone well beyond this.
HTML Basics -. and "bb" is a blue value between 00 and ff. and blue (in that order).HTML Basics -. green.specifies the default color for text link="color-name" | "#rrggbb" .loads the specified image as the page's background bgcolor="color-name" | "#rrggbb" . topmargin. backgrounds.specifies a named style to be used for the document style="style-properties" .Part Two The <body> Tag The <body> tag is used to denote the visible content of the document that is displayed in the browser window. bgproperties. etc.). supporting over 200 named colors and variants within those colors. etc. such as leftmargin. This gives the page designer 256 possible values of each of red." that is.To maintain compatibility with older systems that typically have only 256 colors available. a standard color map has been
.specifies style properties to be used for the document
And here's another one. but not required unless you are using style sheets. and blue values.</p>
<div> Tag The <div> tag is used to divide your HTML document into sections or divisions. Divisions are often used in conjunction with style sheets and scripting simply as a content collection mechanism. such as: Here's a paragraph. although it accepts the same align attribute. Browsers typically insert a blank line plus some extra space before the start of a new paragraph. a text color of some blue (rendering it dark). There are 216 colors in this color map representing all combinations of the values 00. 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. and ff for each of red. HTML Basics -. a link color of a darker green. and a visited link color of purple.Part Two Paragraphs and Divisions: The <p> Tag The <p> tag tells the browser to start a new paragraph. an active link color of full red. 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">. and blue.defined using specific combinations of red. 99. which is a mix of red and blue. That is. You can specify paragraph alignment via the align attribute. or RIGHT. It does not imply any special formatting/spacing (as does <p>) other than starting on a new line. which takes arguments of LEFT. Use of </p> to end the paragraph is recommended. HTML Basics -. cc.Part Two
. using: <p align=right>This text will be right justified. CENTER. green. green.
Thus. 66. 33.
used to present code samples <dfn> . If you are creating a very large site with many pages. cite may also be used in future browsers to collect citation information for searching. often used when creating outline-style documents or to specify a content section heading line. where "X" is a number between 1 and 6) is used to specify a heading level. bolder font with extra space above and below. (Or you can override or enhance this via style sheets.used for citations and typically rendered in italics such as PC Week.used to show a sample of text out of its normal context <strong> . Content-based tags all take the align attribute. <code> . <h1> is the largest heading size and <h6> the smallest.0 list includes: • •
<abbr> .used to emphasize text. Here's the HTML for some examples: • • • <H1>This is at H1 level</H1> <H2>Here's a heading at H2</H2> <H6>Finally. but it might be used to assist in creating a glossary or index <em> . etc. The full HTML 4. such as the Enter key <samp> . Text between the start header/end header tags is typically rendered in a larger.used to indicate text/letters that are present on a keyboard. you have a better chance of consistency throughout your pages. The advantage in using these tags is consistency across multiple documents. This page uses a style sheet.used to emphasize text.) The strength of content-based tags is that they can be easily associated with a type of content/text. the browser defines the font styles used to render headings.specifies an abbreviation such as temp <acronym> . similar to the <em> tag although in this case rendered
• • • • • •
. generally italics are used <kbd> . as well as the class and style attributes used in style sheets. here's H6</H6>
By default.the text is an acronym such as HTML <cite> .used to define special terms or phrases. The browser determines how text enclosed in content-based style tags is rendered. It may not change the formatting. But by using the <acronym> tag to note this type of text.Header Tags The header tag (<hX> </hX>. it may be difficult to remember that all acronyms (for example) are to be rendered italicized. Content-based style tags are not all completely supported by today's browsers. which overrides the default to change the text font and color. HTML Basics -.Part Two 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.
italicized text <u> -. It is often difficult to remember just exactly how and when you've used these in other pages on your site.strike through text. perhaps the biggest drawback with use of physical styles is consistency.text one size bigger <small> . See Table 4-1 in HTML: The Definitive Guide to see how each browser renders each tag. and so on.superscripted text <sub> . Although this tag is used widely. but they are still frequently used.text one size smaller
As you might infer from our discussion of content-based tags. often used to indicate a deletion (also deprecated) <sup> . Style sheets also help solve this problem.subscripted text <tt> .underlined text (deprecated as of HTML 4. italic.Part Two Physical Style Tags There are nine physical style tags in HTML that allow you to explicitly specify bold. It has been proposed that some of these be deprecated and replaced by style sheets. HTML Basics -.text in monospaced font <big> .0 since style sheets allow you far greater control over the fonts used to render page content.in bold • <var> . HTML Basics -.Part Two Handling Fonts You can explicitly set certain aspects of how text is rendered via the <font> </font> tag. The <font> tag
.used in code examples to specify a variable
Note that all content-based style tags require ending tags. All of these tags require the use of a corresponding closing tag. The nine physical style tags are: • • • • • • • • •
<b> -.bold text <i> -. The specified font attributes apply to content until a </font> is encountered (though <font> tags may be nested). it is deprecated as of HTML 4.0) <s> & <strike> -.
FACE="font-name" . for example "Arial" or "Comic Sans MS"FACE="Comic Sans MS" . although it too is deprecated as of HTML 4. For example.
Test what you learned in Part Two by taking this short quiz. it is up to the browser to define the meaning of each size. The Definitive Guide.font size. And both major browsers give the user control over the default font size.sets the font size to 5<font size=-2> -.This is a font called "Comic Sans MS"
You can set the default font for an entire document via the <basefont> tag. blue.
1.sets the font size to 2 less than what it currently isNote that the font size is not points.the name of the font face. so the exact font size used is a combination of browser and user preferences. For example:<font size=5> -.accepts the following attributes: •
size=value . pixels. a value from 1 to 7 where 1 is the smallest and 7 is the largest (exactly opposite of the header tag). within the
<body> tag <meta> tag
To help search engines at the bottom of the in the
index your document. or any other common font measure. <basefont> takes the same attributes as described above for the <font> tag.the font color.
HTML specifies colors for
The <head> tag should appear within the <title> tag
after the <html> tag and before the after the <body> tag 2. 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. The size attribute can also be used to increment/decrement the current size.0. The default base font size is 3. either a color name or RGB value (see Appendix F. and green
in a letter to the W3C 3.
Which of the following is a content-based style tag? <b> <cite> <i> <sub>
HTML Basics -.a named character entity such as <. Content-based style tags require you to think of the type of content rather than how it should look. and yellow
blue. (>). which allow display of the format of HTML tags (for example.
. and purple 4. But what if you simply want to display these characters rather than having the browser interpret them? Or. You might have figured out by now that many of these pages include the use of the < and > entities.black. Two great examples of this are the < and > characters. which are normally interpreted by the browser as the start and end of a tag.Part Three Special Characters Special characters are a way to include characters in your content that are normally treated as special by the browser. Without this.
yellow. (<) or >. and blue
Everything you include within a will be
document's <body> tag centered
will be assigned a hexadecimal value
will be displayed in the browser window
will be deprecated
5. such as © and ½? In HTML. the ampersand (&) character is used to insert a character entity and the semicolon (. (Note that not all numeric values are recognized. .)
Appendix E in HTML: The Definitive Guide lists all character entities specified by the HTML standard. for example ·. white. red. looks like this · (a middle dot). red. Character entities can be specified in one of two formats: • •
&name.a numeric character entity with nnn the ASCII numeric value. what if you want to include non-standard characters.) is used to terminate it. <body>). &#nnn. .
the spirit of HTML was to specify document content rather than format. Style sheets can be used for much greater control over format and appearance when such control is required.the browser would attempt to interpret the tag rather than displaying it.Part Three Spacing and Layout Normally. the browser typically knows better than you do how best to render content. left justified). making it equivalent to <div align=center>. leaving that up to the browser.) If you specifically want simply to break a line.
. you can use <br> to do it. All line breaks and spaces specified are honored. by default. HTML Basics -. However. there are several basic HTML tags that allow you similar control. etc. You use this tag to center text (which is. (Note that since you don't know your user's exact display environment. Normally the browser flows your content in whatever way it sees fit unless you specify segmentation via paragraph tags.
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. 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.
The <br> Tag The <br> tag is used to force a line break. The <center> tag also forces a line break.
by default.Part Three
Ordered and Unordered Lists Here are the tags used to create lists and elements within lists: • • • <ol> .The <blockquote> Tag All text within the <blockquote> and </blockquote> tags is set off from the regular document content. it is most
There are several attributes that can apply to these tags:
.an individual list element for either list type (no closing tag required.
The <address> Tag The <address> and required </address> tags tell the browser that the enclosed text is an address.ordered list. Inc. normally with indented left and right margins. The browser may render it in a special way or somehow otherwise use this information. HTML Basics -. numeric <ul> . Gates • Microsoft. For example:
• William H.unordered list typically rendered with some type of bullet symbol <li> .
they typically are a list of terms with a definition for each term.specifies that the line is to be rendered flat rather than 3D width=n or width=x% -.
Definition Lists Definition lists are similar to entries you might find in a dictionary or encyclopedia. but is often helpful to improve readability. Note that you often see the HTML source also indented.instruction sequences/steps.definition term <dd> .Lists can be nested--placed inside other lists. key points of a presentation Ordered Lists . without numbers or bullets.the <hr> Tag Horizontal rules are useful in breaking up a long single page into multiple sections.specifies the height of the line in pixels (the default is 3) noshade -. The browser renders the list. indenting each term's definition below it. Attributes can be used to tailor the line's appearance. In its simplest form. That is.definition
Using Lists Here is are list types and their uses: • • • Unordered Lists . The tags used in definition lists are: • • • <dl> . for example: • • •
size=n -.Part Three Rules -. assigning numbers to items for later reference Definition Lists . the <hr> tag places a single medium-width horizontal line in the document.glossaries. Browsers use indentation to indicate nesting.link collections. lists of name/value pairs
HTML Basics -.delimits the definition list <dt> . This is not required.specifies the width of the line either in pixels or in percentage of the total window width
Which browser is more stringent about Internet Explorer The <br> tag is deprecated and
.specifies the alignment of the line color=#rrggbb | color-name -. requiring closing tags? Netscape 4. a definition list. ?gt! /gt/ an ordered list. If #markername is specified. The HTML standard states that only text.
Take what you learned in this OpenUW course by taking this final quiz. target="window-name" -. 3.
1. the most common of which are: • • name="markername" -. The anchor tag supports several attributes.Part Three Creating Hyperlinks -.tells the browser which window is to be used to load the page. If target="_blank" is specified. This form is most often used in multi-frame environments where "window-name" is the name of another frame.
a delimited list. the browser attempts to load the URL specified by that anchor tag. a new browser window is opened to display that page. Typically it is best to allow the browser to determine how links will be rendered. 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. the current window is used. and headings are allowed between the <a> and </a> tags. images. line breaks. the 3D effect is lost by specifying color)
HTML Basics -.• •
align=left | center | right -.
Which of the following is the appropriate character entity for the symbol >? #gt.The <a> Tag Anchor tags are used to create links between documents. which can be used as the destination for another anchor tag.when a user clicks on text or an image that is surrounded by an anchor tag. an 2. although most browsers support other tags as well. href="URL" or href="URL#markername" -.create a label called markername at the current location.specifies the color of the line (IE only. By default. >.
You'd most likely format a collection of links in unordered list.
should no longer be used. Each item in an ordered list (<ol>) a dash a
usually starts with number
a small photograph
use of anchor tags to create a hyperlink? <a="newpage.
flows the text together. Horizontal rules do not appear in
must always measure 3 pixels high.html">Click here</a> 8. 7.
can be rendered either
flat or with a 3-D effect.html">Click here</a> here</a>
forces a line break in your text. can be used instead of the <hr> tag. 6. Netscape automatically centers the text.
makes the browser render text exactly as it appears in the HTML source code. 5.
signifies a broken link.
Which of the following shows the correct <a>Click here</a> <a link="newpage. The <pre> tag
should appear between the <head> tag and the <body> tag. need a closing tag.