CSci 130 HTML Document



INFO 130 HTML Document

The HTML component of the course should introduce students to the creation and editing of HTML documents. Following this section, they should be familiar with the common aspects of documents that they can edit the source when all does not appear as planned. They should also be comfortable enough with editing that the inclusion of JavaScript code does not pose a problem.

Creating a Basic Page

Students should be well versed in creating basic HTML documents using Page Composer, Microsoft Word, and Notepad. This should give them a good introduction to the basic tags, and show them how easy it is to insert images, links, and tables.

Basic HTML Document

The following is an example of the standard set of tags in a basic HTML document:

This gives a document with a title, heading, and two paragraphs. An interesting exercise is to create this document all three ways (Composer, Word, and Notepad) and compare the HTML.

Browsers

It must be stressed that all browsers do not display web documents in the same format. As well, two instances of the same browser may display a document differently. It all depends on the interpretation of the tags and the default settings of the browser involved. A good example is font size – one cannot rely on the exact formatting of a document in their own browser because a change in the default font size would change the format.

Tags

HTML tags are commands written between less than () signs, a.k.a. angle brackets, that indicate how the browser should display the text. There are opening and closing versions of many (but not all) tags, and the affected text is contained within the two tags. Both the opening and closing tags use the same command word, but the closing tag begins with the forward slash symbol (/).

Many tags have special attributes that offer a variety of options for the contained text. The attribute is contained between the command word and the greater than symbol. For a series of attributes of a single tag, simply write one after the other, with a space between them.

In some cases, you may want to modify text with more than one tag. There are two things to remember. First, not all tags may contain all other kinds of tags. Second, order is everything. Whenever a closing tag is used, it should correspond to the last unclosed opening tag. In other words, first A then B, then /B and then /A.

URLs

Uniform resource locator, or URL, is a fancy name for address. It contains information about where a file is and what a browser should do with it.

The first part of a URL is called the protocol. It tells the browser how to deal with the file that it is about to open. One of the most common protocols is HTTP, or Hypertext Transfer Protocol. It is used to access web pages.



The second part of the URL is the name of the server where the file is located, followed by the path that leads to the file or the file’s name itself. A URL ending in a trailing forward slash or a directory name refers to the default file in the directory specified by the path, usually welcome.html or index.html.

Other common protocols are HTTPS, for secure Web pages, FTP (File Transfer Protocol) for downloading files from the Net, Gopher, for searching for information, News, for sending and reading messages posted to newsgroups, and Mailto, for sending electronic mail.

A protocol name is generally followed by a colon and two forward slashes. Mailto and News are the major exceptions; these take only a colon. Always type protocols in lower case letters.

URLs can be absolute or relative. An absolute URL shows the entire path to the file, including the protocol, server name, the complete path, and the file name itself.



If you are referencing a file from someone else’s server, you have to use absolute URLs. You also need to use absolute URLs for other protocols as well.

A relative URL describes the location of the desired file with reference to the location of the file that contains the URL itself. The relative URL for a file that is in the same directory as the current file is simply the file name and extension. The relative URL for a file in a subdirectory of the current directory is created by typing the name of the subdirectory and following it with a forward slash and then the name and extension of the desired file.

images/picture.gif

To reference a file in a directory at a higher level in the file hierarchy, use two periods (..). You can combine and repeat the two periods and forward slash to reference any file on the same hard disk as the current file.

. . /. . / mypage.html

Generally, you should always use relative URLs. They are much easier to type and they make it easier to move pages between systems and directories – as long as the relative position remains the same.

Basic Elements of an HTML Document

All HTML documents must start with the tag and end with the tag. Although most closing tags are optional, it is a good idea to always include them. Most pages also contain a head and body. The HEAD section provides information about the page. To create a HEAD section, directly after the HTML tag, type . Create the HEAD section, including the TITLE, and type . After the final tag and before anything else, type . Follow this with the body of the Web page, and end it with . To create a title, after the tag, type the tag . Follow this with the brief title of the page, and then type . Note that a title cannot contain formatting, images, or links to other pages, nor should it contain any colons or backslashes. There must be one and only one TITLE tag in a HTML document.

Organizing the Page

HTML provides for up to six levels of headers in a Web page. Since headers can be used to compile a table of contents of your Web pages, be consistent as possible when applying them. In the BODY section, type , where n is a number from 1 to 6, depending on the level of header. If desired, the attribute ALIGN=direction may be used, where direction is left, right, or center. Type the contents of the header, and type , where n is the same number above. Note that the smaller the level number, the more prominently the header is displayed. Also, headers have an automatic line break.

Starting a New Paragraph

HTML does not recognize the carriage returns in a file. To start a new paragraph, use . The ALIGN=direction attribute may be added to align the text in the paragraph. A may be used to end the paragraph, but is not required.

Creating a Line Break

When a new paragraph is started with the P tag, most browsers insert a large amount of space. To begin a new line without so much space, use a line break. To insert a line break, type . Note there is no closing BR tag.

Text Formatting

HTML provides two ways to emphasize text: with logical markers and with physical markers. Logical markers allow the browser to choose how to view important text while physical formatting appears how the designer intended. To emphasize text logically, type or . Text formatted with EM generally appears in italics, and that in appears in bold. To emphasize text physically, type or , for bold and italic, respectively. It should be noted that not all browsers display physical emphasis.

If your are displaying computer codes, URLs, or other text that is offset from the main page, you can format it with a monospaced font. There are several markers that use a monospaced font as their principal attribute: CODE (computer code), KBD (keyboard input), SAMP (sample text), and TT (typewriter text), only the last of which is considered physical formatting (and is used most often).

Usually, the browser decides where to divide each line of text, depending on window size. Preformatted text lets the designer maintain the original line breaks and spacing. To use preformatted text, type and around the text that includes the necessary spaces, returns, and line breaks. Note that you can insert additional formatting (like STRONG and EM) within preformatted text, but it should be done after the text is set up for spacing.

The BASEFONT tag changes the size of all of the body text, but has no effect on headers. The FONT, BIG, and SMALL tags can be used to change the size of individual characters. Type where n is a number from 1 to 7. The default is 3. To change the font size of a few letters, use . You may also use +n or –n to denote a value relative to the BASEFONT value. The BIG and SMALL tags were meant to change the relative size of a given word or phrase, but unfortunately not all browsers display the effect.

Creating Images

Presently, the two most widely used formats for images on the web are GIF and JPEG. GIF, or Graphics Interchange Format, uses a lossless compression scheme, which does not lose any quality. JPEG, or Joint Photographic Experts Group format, is a compression scheme ideal for photographs and other natural color images. JPEG is lossy compression, which may eliminate some colors or resolution. Most programs that let you save images in JPEG compression allow you to control the ratio between data loss and image compression.

Using Images

All kinds of images can be placed on a web page. Type . To provide alternative text when the page is displayed with a text-only browser, add the attribute ALT=”text”. To specify the size, use WIDTH=x HEIGHT=y. To position the image, use the attribute ALIGN=position, where position is either left, right, or center. Left and right will cause the following text to be wrapped around the side of the image. To stop text from wrapping, type to stop flowing text until there are no more images aligned to the left margin; type to stop flowing text until there are no more images aligned to the right; or type to stop flowing text until there are no more images on either margin.

To use background images, in the BODY tag at the beginning of the HTML document, use the attribute BACKGROUND=”image.location”.

Common icons found on the web are contained in a special directory on the server. Use to include them in a document. For a list of the icons, point your browser to stfx.ca/icons. The relative location for the icons is just “/icons/name.gif”.

Adding Horizontal Rules

A horizontal rule is a line across the screen to separate two sections of a document. It is created using the tag, with optional atttributes SIZE=n, where n is the height in pixels, WIDTH=w, where w is the width in pixels, or as a percentage of the documents width, and ALIGN=direction, where direction is left, right, or center.

Links and Anchors

A link is an underlined string of text that, when clicked, takes you to another page. To create a link, type , type the string, and type . The text “Click here” or “here” should be avoided. Instead, use key words already in the text to identify the link.

An anchor is a marked location on a page that can be accessed directly. To create an anchor, type , type the words or images that are to be referenced, and type . To create a link to an anchor on the same page, type . To link to an anchor on another document, type .

Lists

An ordered list is perfect for step-by-step instructions. To create an ordered list, type . If desired, the attribute TYPE=x may be added, where x represents the symbols that should be used in the ordered list: A for capital letters, a for small letters, I for capital roman numerals, i for small roman numerals, and 1 for numbers, which is the default. As well, the attribute START=n may be added, where n is a numeric value representing the initial value of the list item. List items are written as (no closing LI tag). The list is ended with the tag.

An unordered list is used if items have no particular order. To create an unordered list, type . If desired, the attribute TYPE=shape may be added, where shape represents the kind of bullet to be used with each item: disc for solid round bullet (the default), circle for empty round bullets, or square for square bullets.

Forms

One of the most powerful parts of the Web is the form. In conjunction with CGI scripts, forms let you collect information from the user and store it for later use. Creating a form is straightforward and is analogous to creating any other part of a Web page. The most unusual part of a form element is the concept of name/value pairs. Basically, when the information is sent to the server, it is sent in two parts: first an identifier, or name, and then the actual data. For example, in a text box with a name like Lastname where the user has typed MacDonald, the data will be sent to the server as Lastname=MacDonald. A simple prel script exists on Juliet to strip a form down into its elements and send them back to the user as a web page. It is independent of the form itself. In order to use it, the form is created using the following line just after the tag:

The rest of the form can be created as a standard HTML document. Use to complete the form, before the closing BODY tag.

For text boxes in a form, following the title to be used for the text box, type:

where s is the desired width of the box in characters (default 20) and m is the maximum length of the entry in characters (note: it is typical that m>s).

For text blocks, use:

where r and c identify the number of rows and characters of the shown block. Follow this by the default text to be include in the text area, if any, and then by . Users can enter up to 32,700 characters in the text area, and scroll bars will appear when necessary.

A set of radio buttons with the same name is used for a mutually exclusive selection, since only one may be active at a time. For each button in the set, type the following tag before typing the text that identifies the button for the user:

where value is the data that will be sent to the server if that particular button is checked. If desired, the attribute CHECKED may be added to one of the buttons to make it the default when the page is opened.

A set of check boxes allows multiple answers to be entered per set. Type the following tag before the text that identifies the check box for the user:

where value is the data that will be sent to the server if the box is checked. If desired, the attribute CHECKED may be added to any of the boxes to make it a default.

In order for the user to be able to submit the data, you should always have a SUBMIT button.

where submit message is the text that will appear in the button. The default message is “Submit Query”. The user should also have a way to reset a form: that is, start with a fresh form.

where reset message is the text that appears in the button. The default message is “Reset”.

A sample form and its submission may be found at:



Colors

The color of the background and text of a document can be defined using tags. Colors can either be defined with their values in hex (e.g. #FF0000 for red) or by the use of one of the sixteen predefined colors (Black, White, Silver, Gray, Red, Maroon, Lime, Green, Blue, Navy, Magenta, Purple, Yellow, Olive, Cyan, and Teal).

To modify the background color, use , where color is “#rrggbb” for the hex value, or one of the 16 predefined colors. To change the color or all of the body text, use the attribute TEXT=color in the BODY tag. To change the color of link that have not yet been visitied, use the attribute LINK=color in the BODY tag. For visited links, use VLINK, and for active links (when user clicks on it). use ALINK. For the color of a few letters, use .

Summary of tags: (note: closing tag required unless stated.)

Top of document, close at end.

Top of header, close before BODY.

Title of page, appears in HEAD, close at end of title.

After close of HEAD, close at end before HTML. Attributes: BGCOLOR, TEXT, LINK, VLINK, ALINK, BACKGROUND.

Heading (n=1 for largest, n=6 for smallest). Attributes: ALIGN.

New paragraph, no need to close. Attributes: ALIGN.

Line break, less space than , no close.

Usually italics.

Usually bold.

Force italics, not always visible.

Force bold, not always visible.

Computer code font.

Typewriter text font.

Preformatted text.

Changes base font of browser, no close.

Change font, close no necessary. Attributes: SIZE, COLOR.

Increase font size, close not necessary.

Decrease font size, close not necessary.

Insert image, no close. Attributes: SRC, ALT, ALIGN, CLEAR.

Horizontal ruler line, no close. Attributes: SIZE, WIDTH, ALIGN.

Link or anchor. Attributes: HREF or NAME.

Ordered list. Attributes: TYPE, START.

Unordered list. Attributes: TYPE, START.

List item, no close.

-----------------------

A Simple HTML Example

HTML is Easy to Learn

Welcome to the world of HTML. This is the first paragraph.

This is the second paragraph.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download