Академический Документы
Профессиональный Документы
Культура Документы
Take this short quiz to see what you may already know about HTML.
H1
an <html> tag
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:
is rendered as:
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:
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.
• <html>
• <head>
• <title>This here is the title</title>
• </head>
• <body>
• And this stuff is considered the body of the page
• </body>
• </html>
1. How can you make sure a Web site will display exactly as you designed it, no
Since people use different monitors, video cards, networking speeds, and
The tag has been removed from the standard because it is no longer
necessary.
People will ridicule your Web site if you use the tag.
important to consider?
the content
5. The title, style, and scripting information for an HTML document goes in
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:
• 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.
HTML Basics -- Part Two
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:
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:
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.
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.
You can specify paragraph alignment via the align attribute, which takes arguments of LEFT,
CENTER, or RIGHT, using:
<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.
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 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:
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.
HTML Basics -- Part Two
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:
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:
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
index your document, you can specify some keywords at the bottom of the
text and backgrounds using numeric values for red, blue, and green
black, white, and yellow blue, red, and purple yellow, red, and blue
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:
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.
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 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> </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 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> 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.
HTML Basics -- Part Three
Here are the tags used to create lists and elements within lists:
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.
Using Lists
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:
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:
1. Which of the following is the appropriate character entity for the symbol >?
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.