JavaScript by Example (2nd Edition)

In order to write Web pages, you must learn at least some of what makes up the HTML language. There are volumes written on this subject. Here we will cover just enough to introduce you to HTML and give you the basics so that you can write some simple dynamic pages with forms and CGI scripts. See Appendix B for a succinct tutorial on HTML.

As previously stated, Web pages are written as ASCII text files in HTML. HTML consists of a set of instructions called tags that tell your Web browser how to display the text in the page. [2] When you type in the URL or click on a hyperlink in a page, the browser (client) communicates to the server that it needs a file and the file is sent back to the browser. The file contains HTML content that may consist of plain text, images, audio, video, and hyperlinks . It's the browser's job to interpret the HTML tags and display the formatted page on your screen. (To look at the source file for a Web page, you can use the View Document menu under View in the Netscape browser, or using Internet Explorer select the View menu and then select Source to see the HTML tags used to produce the page.)

[2] If you have ever used the UNIX programs nroff and troff for formatting text, you'll immediately recognize the tags used for formatting with HTML.

Creating Tags

The HTML source file can be created with any text editor. Its name ends in . html or . htm to indicate it is an HTML file. The HTML tags that describe the way the document looks are enclosed in angle brackets < >. The tags are easy to read. If you want to create a title, for example, the tag instruction is enclosed in brackets and the actual text for the title is sandwiched between the marker that starts the instruction, <TITLE> , and the tag that ends the instruction, </TITLE> . The following line is called a TITLE element , consisting of the <TITLE> start tag, the enclosed text, and the </TITLE> end tag. A tag may also have attributes to further describe its function. For example, a text input area may allow a specified number of rows and columns , or an image may be aligned and centered at the top of the page. The elements and attributes are case-insensitive.

<TITLE>War and Peace</TITLE>

When the browser sees this instruction, the title will be printed in the bar at the top of the browser's window as a title for the page. To put comments in the HTML document, the commented text is inserted between <!-- and --> .

Because HTML is a structured language, there are rules about how to place the tags in a document. These rules are discussed below.

A Simple HTML Document

The following HTML file is created in your favorite text editor and consists of a simple set of tagged elements.

Example C.5

(The HTML Text File) 1 <HTML> 2 <HEAD> 3 <TITLE> Hyper Test </Title> 4 </HEAD> 5 <BODY> 6 <H1>Hello To You and Yours!</H1> 7 <H2 ALIGN="center">Welcome 8 </H2> 9 <P>Life is good. Today is <I>Friday.</I></P> 10 </BODY> 11 </HTML>

EXPLANATION

  1. All of the text for the HTML document is between the <HTML> start tag and the </HTML> end tag. Although HTML is the standard language for creating Web pages, there are other markup languages that look like HTML; The HTML element identifies this as an HTML document. You can omit these tags and your browser will not complain. It is just more official to use them.

  2. Between the <HEAD> tag and </HEAD> tag information about the document is inserted, such as the title. This information is not displayed with the rest of the document text. The <HEAD> tag always comes right after the <HTML> tag.

  3. The <TITLE> tag is used to create the title shown at the top of the browser window.

  4. This is the closing tag for the <HEAD> tag.

  5. The main part of the document appears in the browser's window, and is enclosed between the <BODY> start tag and </BODY> end tag.

  6. A level 1 heading is enclosed between the <H1> and </H1> start and end tags.

  7. This is a level 2 heading. The ALIGN attribute tells the browser to center the heading on the page.

  8. This is the end tag for a level 2 heading.

  9. The <P> starts a new paragraph. The string Friday will be printed in italicized text. </P> marks the end of the paragraph.

  10. This tag marks the end of the body of the document.

  11. This tag marks the end of the HTML document.

Figure C.2. The HTML document from Example C.5, as displayed in Internet Explorer.

Table C.4. Simple HTML tags and what they do.

Tag Element

Function

<!-- text -->

Commented text; nothing is displayed.

<BASE HREF="http://www.bus.com/my.html">

Where this document is stored.

<HTML> document </HTML>

Found at the beginning and end of the document, indicating to a browser that this is an HTML document.

<HEAD> headinginfo </HEAD>

First element inside the document. Contains title, metatags , JavaScript, and CSS. Only the title is displayed directly.

<TITLE> title of the document </TITLE>

Title of the document; displayed outside the document text in a window frame or top of the screen. Can be placed in the bookmark list.

<BODY> document contents </BODY>

Contains all the text and other objects to be displayed.

<H1> heading type </H1>

Creates boldface heading elements for heading levels 1 through 6. The levels elements are: H1, H2, H3, H4, H5, and H6. The largest, topmost heading is H1.

<P> text </P>

Paragraph tag. Marks the beginning of a paragraph. Inserts a break after a block of text. Can go anywhere on the line. Ending paragraph tags are optional. Paragraphs end when a </P> or another <P> (marking a new paragraph) is encountered .

<B> text </B>

Bold text.

<I> text </I>

Italic text.

<TT> text </TT>

Typewriter text.

<U> text </U>

Underlined text.

<BR>

Line break.

<HR>

Horizontal shadow line.

<UL>

Start of an unordered (bulleted) list.

<LI>

An item in a list.

<LI>

Another item in a list.

</UL>

The end of the list.

<OL>

Start of an ordered list.

<DL>

Descriptive list.

<DT>

An item in a descriptive list

<DT>

Another item in a descriptive list.

</DL>

End of the descriptive list.

<STRONG>

Bold text.

<EM>

Italic text.

<BLOCKQUOTE> text </BLOCKQUOTE>

Italicized blocked text with spaces before and after quote.

<A HREF SRC=" URL ">

Creates a hotlink to a resource at address in URL on the Web.

<IMG SRC=" URL ">

Loads an image into a Web page. URL is the address of the image file.

Related

Категории