|
HTML has come a long way from its humble beginnings.
However, despite the fact that you can use HTML (and
its derivatives) for much more than serving up static text
documents, the basic organization and structure of the HTML document remains the same. Before we dive into the specifics of various elements of HTML, it is important to summarize what each element is, what it is used for, and how it affects other elements in the document. This chapter provides a high-level overview of a standard HTML document and its elements. Subsequent chapters will cover each element and technology in detail. Specifying Document Type One attribute of HTML documents that is frequently overlooked is the Document Type Definition (DTD). This definition precedes any document tags and exists to inform client browsers of the format of the following content—what tags to expect, methods to support, and so forth. The <!DOCTYPE> tag is used to specify an existing DTD. The DTD contains all the elements, definitions, events, and so on associated with the document type. A DOCTYPE tag resembles the following: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
This tag specifies the following information:✦ The document’s top tag level is HTML (html). ✦ The document adheres to the formal public identifier (FPI) “W3C HTML 4.01 Strict English” standards (PUBLIC “-// W3C//DTD HTML 4.01//EN”). |
C 2H2A P T E R
✦✦✦✦ In This Chapter Specifying the Document Type HTML, Head, and Body Tags Styles Markup for Paragraphs Markup for Characters Special Characters Organizational Elements Linking to Other Pages Images Comments Scripts Putting it All Together ✦✦✦✦ |
|
20
Part I ✦ Understanding (X)HTML
|
|
✦ The full DTD can be found at the URL http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd.
The Overall Structure: HTML, Head, and Body All HTML documents have three, document-level tags in common. These tags, <html>, <head>, and <body>, delimit certain sections of the HTML document. The <html> tag The <html> tag surrounds the entire HTML document. This tag tells the client browser where the document begins and ends. <html>
... document contents ...
</html>
Additional language options were declared within the <html> tag in previous
versions of HTML. However, those options (notably lang and dir) have been
deprecated in HTML version 4.0. The language and directional information is
routinely contained in the document type declaration (<!DOCTYPE>).
The <head> tag The <head> tag delimits the heading of the HTML document. The heading section of the document contains certain heading information for the document. The document’s title, meta information, and, in most cases, document scripts are all contained in the <head> section. A typical <head> section could resemble the following: <head>
<link rel=“stylesheet” type=“text/css” href=“/styles.css”>
<title>Title of the Document</title>
<meta name=“description” content=“Sample Page”>
<meta name=“keywords” content=“sample, heading, page”>
<script language=“JavaScript”>
function NewWindow(url){
fin=window.open(url,“”,
“width=800,height=600,scrollbars=yes,resizable=yes”);
}
</script>
</head>
Cross-
Reference
Most <head> level tags are covered in detail in Chapter 3. JavaScript scripting
is covered in more detail in Chapters 15 and 28.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
21
|
|
Most of the content within the <head> section will not be visible on the rendered
page in the client’s browser. The <title> element determines what the browser
displays as the page title—on Windows machines, the document title appears in the
browser’s title bar, as shown in Figure 2-1.
Document title Figure 2-1: In Windows, the document’s <title> appears in the browser’s title bar. The main, visual content of the HTML document is contained within <body> tags. Note that with HTML version 4.0, most attributes of the <body> tag have been deprecated in favor of specifying the attributes as styles. In previous versions of HTML, you could specify a bevy of options, including the document background, text, and link colors. The onload and onunload attributes of the <body> tag, as well as global attributes such as style, are still valid. However, you should specify the other attributes in styles instead of within the <body> tag, such as in the following example: <html>
<head>
<title>Document Title</title>
<style type=“text/css”>
body{background:black;color:white}
|
|
22
Part I ✦ Understanding (X)HTML
|
a:link { color: red }
a:visited { color: blue }
a:active { color: yellow }
</style></head> <body> ... document body... </body> </html>
Cross-
Reference
Styles are covered in detail in Chapters 16 and 24.
Styles
Styles are a relatively new element for HTML, but they have revolutionized how HTML documents are coded and rendered. Styles are the main basis behind the “extensible” in XHTML—they allow Web authors to create new styles to present their content in a variety of custom, but consistent formats. At their root, styles are simply an aggregation of display attributes, combined to achieve a particular result. Those familiar with styles in word processing will have little trouble understanding HTML styles. Note Styles are typically presented in the context of cascading, as in the Cascading Style Sheet (CSS) standard. The CSS standard defines a method where several styles sheets (lists of style definitions) can be applied to the same document— repeated style definitions supercede previously defined styles, hence the cascade. You’ll find more information on styles, style sheets, and CSS in Chapter 16. For example, suppose you needed to highlight particular text in a document that needed to be deleted. The text needs to be displayed in red and as strikethrough. You could surround each section of text with <font> and <del> tags. However, that approach has two distinct disadvantages: ✦ The <font> tag has been deprecated and should not be used. ✦ If you later change your mind about the color or decoration (strikethrough), you would have to find and change each set of tags. Instead, define a style for the elements that contains the desired text attributes. The following HTML code snippet defines such a style and uses it to highlight a sentence later in the document: <html>
<head>
<style>
|
|
Chapter 2 ✦ What Goes Into a Web Page?
23
|
|
.redline{color:red;text-decoration:line-through;}
</style>
</head>
<body>
<h1>An Early Draft of the Declaration of Independence</h1>
<p>When in the Course of human events, it becomes necessary
for one people to dissolve the political bands which have
connected them with another, and to assume among the 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 of mankind requires that they should
declare the causes which impel them to the separation. <span
class=“redline”>This document declares those
causes.</span></p>
</body>
</html>
This code results in the output shown in Figure 2-2.
Figure 2-2: The “redline” style is applied to applicable text via the <span> tag. Note Styles can also be applied directly to many HTML tags using the style attribute. For example, to apply the red and strikethrough attributes to an entire para- graph, you could use the following code: <pstyle=“color:red;text-decoration:line- through;”> sample paragraph </p> However, using styles in this manner removes many of the easily modified advantages gained by using styles. If you later needed to change the text attributes, one edit in the <style> section of the document would affect the change throughout the document. But what if you had several documents that used the style? You would still have to edit each document to make the style change. Luckily, HTML’s style implementation allows for external style sheets that can be applied to multiple documents—then you only have to change the external style sheet. |
|
24
Part I ✦ Understanding (X)HTML
|
|
The following code defines site-styles.css as an external style sheet in the
current HTML document:
<html>
<head>
<LINK rel=“stylesheet” href=“site-styles.css”
type=“text/css”>
</head>
<body> ...
The contents of the site-styles.css document would be the definitions that you
would have placed between the <style> tags. For the preceding redline example, the
contents of this file could simply be the following:
.redline{color:red;text-decoration:line-through;}
Cross-
Reference
There are many more attributes that can be applied to text and other objects
via styles. You’ll find more details on styles in Chapter 16.
Block Elements: Markup for Paragraphs
As with most word processors, HTML includes several tags to delimit, and hence, format paragraphs of text. These tags include the following: ✦ <p>—Formatted paragraphs ✦ <h1> through <h6>—Headings ✦ <blockquote>—Quoted text ✦ <pre>—Preformatted text ✦ <ul>,<ol>, <dl>—Unnumbered, ordered, and definition lists ✦ <center>—Centered text ✦ <div>—A division of the document Each of the block elements results in a line break and noticeable space padding after the closing tag. As such, the block elements only work when used to format paragraph-like chunks of text—they cannot be used as inline styles. More detail about each of these tags is covered in the following sections.
Cross-
Reference
You’ll find more details on block elements and their formatting in Chapter 4.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
25
|
|
Formatted paragraphs
The paragraph tag (<p>) is used to delimit entire paragraphs of text. For example, the following HTML code results in the output shown in Figure 2-3: <p>The quick brown fox jumped over the lazy dog. The quick
brown fox jumped over the lazy dog. The quick brown fox
jumped over the lazy dog. The quick brown fox jumped over the
lazy dog.</p>
<p>The quick brown fox jumped over the lazy dog. The quick
brown fox jumped over the lazy dog. The quick brown fox
jumped over the lazy dog.</p>
Figure 2-3: Paragraph tags break text into distinct paragraphs.
As with most tags, you could define several formatting elements (font, alignment, spacing, and so on) of the <p> tag. For example, you can center a paragraph by adding an align attribute to the <p> tag: <p align=“center”> The quick brown fox jumped over the lazy
dog. The quick brown fox jumped over the lazy dog. The quick
brown fox jumped over the lazy dog.</p>
However, such formatting has been deprecated in favor of specifying formatting via
style sheets. The following is an example of using style sheets to achieve the same
results as the align attribute:
<html> <head> <style type=“text/css”> p.center{text-align:center} </style> </head> <body> <p class=“center”> The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</body>
</html>
|
|
26
Part I ✦ Understanding (X)HTML
|
|
Using either of the preceding methods results in the paragraph being center-justified
in the browser.
Headings HTML supports six levels of headings. Each heading uses a large, usually bold character-formatting style to identify itself as a heading. The following HTML example produces the output shown in Figure 2-4: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”> <html>
<body><h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Plainbodytext:Thequickbrownfoxjumpedoverthelazydog.</p> </body> </html>
Figure 2-4: HTML supports six levels of headings.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
27
|
|
The six levels begin with Level 1, highest, most important, and go to Level 6, the
lowest, least important. Although there are six predefined levels of headings, you
probably will only find yourself using three or four levels in your documents. Also,
because there is no limit on being able to use specific levels, you can pick and
choose which levels you use—you don’t have to use <h1> and <h2> in order to be
able to use <h3>. Also, keep in mind that you can tailor the formatting imposed by
each level by using styles.
Cross-
Reference
Styles are covered in Chapter 16.
Quoted text
The <blockquote> tag is used to delimit blocks of quoted text. For example, the following code identifies the beginning paragraph of the Declaration of Independence as a quote: <body>
<p>The Declaration of Independence begins with the following paragraph:</p>
<blockquote>
When in the Course of human events, it becomes necessary for
one people to dissolve the political bands which have
connected them with another, and to assume among the 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 of mankind requires that they should
declare the causes which impel them to the separation.
</blockquote>
</body>
The <blockquote> indents the paragraph to offset it from surrounding text, as
shown in Figure 2-5.
Figure 2-5: The <blockquote> tag indents the paragraph.
|
|
28
Part I ✦ Understanding (X)HTML
|
|
List elements
HTML specifies three different types of lists: ✦ Ordered lists (usually numbered) ✦ Unordered lists (usually bulleted) ✦ Definition lists (list items with integrated definitions) The ordered and unordered lists both use a list item element (<li>) for each of the items in the list. The definition list has two tags, one for list items (<dt>) and another for the definition of the item (<dd>). The following HTML code results in the output shown in Figure 2-6. <html>
<body>
<ol>A basic ordered list
<li>First ordered item
<li>Second ordered item
<li>Third ordered item
Figure 2-6: A sample list in HTML.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
29
|
|
Note
</ol>
<ul>Unordered list
<li>First unordered item
<li>Second unordered item
<li>Third unordered item
</ul>
<dl>Definition list
<dt>First definition item
<dd>First definition
<dt>Second definition item
<dd>Second definition
<dt>Third definition item
<dd>Third definition
</dl>
</body>
</html>
Because of the amount of customization allowed for each type of list, you can create
many substyles of each type of list. For example, you can specify that an ordered list
be ordered by letters instead of numbers. The following HTML code does just that,
resulting in the output shown in Figure 2-7.
<html> <body> <olstyle=“list-style:lower-alpha;”>Abasicorderedlist(lower-casealpha) <li>First ordered item
<li>Second ordered item
<li>Third ordered item
</ol>
</body>
</html>
Figure 2-7: Using various list styles, you can customize each list in your document. The list
shown uses the list-style lower-alpha.
Older versions of HTML allowed various list options to be specified in the list tag(s). However, current versions of strict HTML and XHTML formats specify that all list options be contained within styles. |
|
30
Part I ✦ Understanding (X)HTML
|
|
Preformatted text
Occasionally, you will want to hand format text in your document or maintain the formatting already present in particular text. Typically, the text comes from another source—cut and pasted into the document—and can be formatted with spaces, tabs, and so on. The preformatted tag (<pre>) causes the HTML client to treat white space literally and not to condense it as it usually would. For example, the following table will be rendered just as shown below: <pre>
+---------------+-------------------+
| name | value |
+---------------+-------------------+
| newsupdate | 1069009013 |
| releaseupdate | Wed, 8/28, 8:18pm |
| rolfstatus | 0 |
| feedupdate | 1069009861 |
+---------------+-------------------+
</pre>
Divisions
Divisions are a higher level of block formatting, usually reserved for groups of related paragraphs, entire pages, or sometimes only a single paragraph. The division tag (<div>) provides a simple solution for formatting larger sections of a document. For example, if you need a particular section of a document outlined with a border, you can define an appropriate style and delimit that part of the document with <div> tags, as in the following example: <html>
<head>
<style>
.bordered{border-style:solid;}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<div class=“bordered”><p>This is a paragraph delimited with
the defined div style which includes a border.</p></div>
</body>
</html>
This code results in the output shown in Figure 2-8.
Cross-
Reference
For more information on how to format blocks of text with the <div> tag, see
Chapter 16.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
31
|
|
Figure 2-8: <div> tags are used to delimit large sections of text.
Inline Elements: Markup for Characters The finest level of markup possible in HTML is at the character level; just as in a word processor, you can affect formatting on individual characters. This section covers the basics of inline formatting. Basic inline tags Inline formatting elements include the following: ✦ Bold (<b>) ✦ Italic (<i>) ✦ Big text (<big>) ✦ Small text (<small>) ✦ Emphasized text (<em>) ✦ Strong text (<strong>) ✦ Teletype (monospaced) text (<tt>) For example, consider the following sample paragraph, whose output is shown in Figure 2-9. <html>
<body>
<p>This paragraph shows the various inline styles, such as
<b>bold</b>, <i>italic</i>, <big>big text</big>, <small>small
text</small>, <em>emphasized text</em>, <strong>strong
text</strong>, and <tt>teletype text</tt>.</p>
</body>
</html>
Note that several inline tags, such as strikethrough (<strike>) and underline (<u>)
tags, have been deprecated in the current specifications. Even the font tag (<font>)
|
|
32
Part I ✦ Understanding (X)HTML
|
|
Figure 2-9: Inline elements can affect words or even individual characters.
has been deprecated in favor of spanning styles (see the Spanning section later in this chapter). As for the strikethrough and underline tags, they have been replaced by delete (<del>) and insert (<ins>), which are used for revisions (delete for deleted text, insert for inserted text).
Cross-
Reference
More information on inline elements is contained in Chapter 4.
Spanning
Spanning tags (<span>) are used to span inline styles across multiple characters or words. In effect, the <span> tag allows you to define your own inline styles. For example, if you need to specify text that is bold, red, and underlined, you could use code similar to the following: <html>
<head>
<style>
.emphasis{color:red;text-decoration:underline;
font-weight:bold;}
</style>
</head>
<body>
<p><span class=“emphasis”>This text is emphasized</span>,
while this text is not.</p>
</body>
</html>
The <span> tag allows you to apply the stylistic formatting inline, exactly where you
want it.
Special Characters (Entities) Some special characters must be referenced directly instead of simply typed into the document. Some of these characters cannot be typed on a standard keyboard, such as the trademark symbol (TM) or copyright symbol (©); others could cause the HTML client confusion (such as the angle brackets, < and >). Such characters are commonly referred to as “entities.” |
|
Chapter 2 ✦ What Goes Into a Web Page?
33
|
||
|
Entities are referenced by using a particular code in your documents. This code
always begins with an ampersand (&) and ends with a semicolon. Three different
ways to specify an entity exist:
Cross-
Reference
You’ll find more information on entities in Chapter 9.
Organizational Elements
Two HTML elements help organize information in a document: tables and forms. Tables allow you to present data in column and row format, much like a spreadsheet. Forms allow you to present (and retrieve) data using elements common to GUI interfaces—elements such as text boxes, check boxes, and lists. |
|
34
Part I ✦ Understanding (X)HTML
|
|
Tables
HTML tables are very basic, but can be very powerful when used correctly. At their base level, tables can organize data into rows and columns. At their highest level, tables can provide complicated page design—much like a page in a magazine or newspaper, providing columns for text and sections for graphics, menus, and so on. Tables have three basic elements and, hence, three basic tags:
Cross-
Reference
Tables are covered in detail in Chapter 10. Using tables for page layout is covered
in Chapter 11.
|
|
Chapter 2 ✦ What Goes Into a Web Page?
35
|
|
Figure 2-10: Eleven rows and two columns of data in a table.
Figure 2-11: This document uses invisible tables to achieve its layout.
|
|
36
Part I ✦ Understanding (X)HTML
|
|
Figure 2-12: Making the table borders visible shows just how many tables are
involved in laying out the page and how they help constrain the layout.
Forms HTML forms provide a method to use standard GUI elements to display and collect data. HTML forms provide the standard litany of GUI elements, including text boxes, check boxes, pull down (also referred to as drop-down) lists, and more. In addition to providing basic GUI elements, HTML forms also provide a rudimentary method of collecting data and passing that data to a data handler for validation, storage, comparison, and so on. A typical HTML form resembles the following code, the output of which is shown in Figure 2-13. <html>
<body>
<form>
<!-- Text field -->
<b>Name:</b> <input type=“text” name=“name” size=“40”>
<br><br>
<!-- Radio buttons -->
<b>Age:</b>
<input type=“radio” name=“age”> < 20
<input type=“radio” name=“age”> 21 -- 30
<input type=“radio” name=“age”> 31 -- 40
<input type=“radio” name=“age”> 41+
|
|
Chapter 2 ✦ What Goes Into a Web Page?
37
|
<br><br>
<!-- Select list -->
<b>What is your favorite ice cream?</b>
<select name=“icecream”>
<option name=“chocolate”>Chocolate
<option name=“strawberry”>Strawberry
<option name=“vanilla”>Vanilla
</select>
<br><br>
<!-- Check boxes -->
<b>How may we contact you for more information?</b><br>
<input type=“checkbox” name=“phone”>Phone<br>
<input type=“checkbox” name=“mail”>Mail<br>
<input type=“checkbox” name=“email”>Email<br>
<input type=“checkbox” name=“no”>Do not contact me<br>
</form>
</body>
</html>
Figure 2-13: Form elements provide standard GUI controls for displaying and collecting
data.
The preceding example form is very simple, it shows only some basic elements, and has no handler to process the data that is collected by the form. Real-world forms can be quite complex and usually require validation scripts to ensure the data collected is valid. However, this simple form illustrates the amount of control you can assert over data and format using HTML.
Cross-
Reference
Forms are covered in detail in Chapter 13.
Linking to Other Pages
The main advantage to the World Wide Web is the ability to link to other documents on the Web. For example, if you had a page that detailed local zoning laws, you might |
|
38
Part I ✦ Understanding (X)HTML
|
|
Cross-
Reference
More information on links and anchors can be found in Chapter 7.
want to include a link to a local government site where additional information could
be found. A link typically appears as underlined text and is often rendered in a
different color than normal text.
For example, a link might appear in a browser as follows: More information can be found here. The word here is linked to the other document—when the user clicks the word, the user’s browser displays the specified page. Create links by using the anchor tag, <a>. At its simplest level, this tag takes one argument—the page to link to—and surrounds the text to be linked. The preceding example could be created with the following code: More information can be found
<a href=“http://www.whitehouse.gov”>here</a>
The href, or Hypertext REFerence attribute of the anchor tag, specifies the protocol
and destination of the link. The example specifies http:// because the destination
is a Web page to be delivered via the HTTP protocol. Other protocols (such as
ftp:// or mailto:) can also be used where appropriate.
Additional attributes can be used with the anchor tag to specify such things as where the new document should be opened (for example, in a new browser window), the relationship between the documents, and the character set used in the linked document. You can also use a variant of the anchor tag to mark specific places in the current document. A link can then be placed elsewhere in the document that can take the user to the specific place. For example, consider this HTML code: For more information see <a href=“#Chapt2”>Chapter 2</a>
. . . More HTML . . .
<a name=“Chapt2”>Chapter 2</a>
In this example, the user can click the Chapter 2 link to move to the location of the
Chapter 2 anchor. Note that the href link must include the hash symbol (#), which
specifies that the link is an anchor instead of a separate page.
Images
One of the great innovations the World Wide Web and HTTP brought to the Internet was the ability to serve up multimedia to clients. The precursors to full-motion video and CD quality sound were graphical images, in the Web-friendly Graphics Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) formats. |
|
Chapter 2 ✦ What Goes Into a Web Page?
39
|
|
Cross-
Reference
You’ll find more information on images in Chapter 6.
You can include images in HTML documents by using the image tag (<img>). The
image tag includes a link to the image file as well as pertinent information used to
display the image (for example, the image size). A typical image tag resembles the
following:
<img src=“/images/tmoore.jpg” alt=“A picture of Terri”
width=“100” height=“200”>
The preceding example would result in the image tmoore.jpg being displayed at
the location in the document where the tag appears. In this case, the image is in the
images directory of the current server and will be displayed without a border,100 pixels wide by 200 pixels high. The alt attribute is used to provide a textual equivalent for browsers that cannot display graphics (or whose users have configured them not to). Images can also be used as navigation aids—allowing the user to click certain parts of an image to perform an action, display another document, and so on. For example, a map of the United States could be used to help a user select their state—clicking a state would bring up the applicable page for that state. Navigational images are commonly referred to as image maps and require a separate map of coordinates and geometric shapes to define the clickable areas.
Comments
Although HTML documents tend to be fairly legible, there are several advantages to adding comments to your HTML code. Some typical uses for comments include aiding in document organization, document specific code choices, or marking particular document sections for later reference. HTML uses the tag <!– to begin a comment and –> to end a comment. Note that the comment can span multiple lines, but the browser will ignore anything between the comment tags. For example, the following two comments will both be ignored by the browser: <!-- This section needs better organization. -->
and
<!-- The following table needs to include these columns:
Age
Marital Status
Employment Date
-->
|
|
40
Part I ✦ Understanding (X)HTML
|
|
Scripts
HTML is a static method of deploying content—the content is sent out to a client browser where it is rendered and read, but it typically doesn’t change once it is delivered. However, there is a need in HTML documents for such things as decision-making ability, form validation, and, in the case of Dynamic HTML (DHTML), dynamic object attribute changes. In those cases (and more), client-side scripting can be used.
Cross-
Reference
For more information on client-side scripting, see Chapter 15.
Note
Client-side scripting languages, such as JavaScript, have their code passed to the
client browser inside the HTML document. It is the client’s responsibility to interpret
the code and act accordingly. Most client-side scripts are contained in the <head>
section of the HTML document, within <script> tags, similar to the following
example:
<html>
<head>
<script language=“JavaScript”>
function MiscWindow(w,h,url){
opts = “width=”+w+“,height=”+h;
opts = opts+”,scrollbars=no,resizable=yes”;
fin=window.open(url,“”,opts);
}
</script>
</head>... In most cases, the document needs to include events to run the script(s). These events can be embedded in elements (via onmouseover or similar attributes), tied to links, called via form elements, or run upon the document being loaded or unloaded (via onload and onunload attributes in the <body> tag). There are methods to run scripts automatically, that is, without a corresponding event. However, such methods are typically thought of as bad form—it is much better practice to always tie a script’s execution to an event.
Putting it All Together
As you can see, the standard HTML document is a fairly complex beast. However, when taken piece by piece, the document becomes just like any other HTML document. The following HTML listing shows how all of these pieces fit together. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”> <html>
<head><meta ... meta tags go here ... > <title> title of the page/document goes here</title> |
|
Chapter 2 ✦ What Goes Into a Web Page?
41
|
|
<LINK rel=“stylesheet” href=“external style sheet name”
type=“text/css”>
<style> ... any document specific styles go here ...
</style>
<script>
... client-side scripts go here ...
</script>
<body>
... body of document goes here, paragraphs modified by
block elements, characters, words and sentences modified by
in line elements ...
</body>
</html>
All HTML documents should have a <DOCTYPE> specification, <html> and <body>
tags, and at least a <title> within the <head> section. The rest of the elements are
strictly optional, but help define the documents’ purpose, style, and ultimately its
usability, as you will see in the following chapters.
Summary You have seen what basic elements make up an HTML document. Although the amount of elements may seem daunting at first, you will quickly learn what purpose each element serves, how it affects other elements in the document, and how to best use each element to construct the best HTML document for your purpose. As you read about the elements in more detail—within the next few chapters—try to match their capabilities against your needs. From here, you should read Chapters 3 through 24 to extend your understanding of the various elements of HTML. Alternatively, jump to specific chapters that cover elements that interest you, or that you don’t completely understand. (Follow the various cross-references in each section in this chapter to find the relevant chapter to the specific element you wish to learn more about.) ✦✦✦ |
No comments:
Post a Comment