Chapter 5: An Introduction to HTML HTML is the acronym for the language of the web, hypertext markup language. HTML is merely a set of commands (called "tags") in a text file, which tell a Web browser how to present data. HTML tags are always surrounded by angle brackets (< and >) in the form , where "TAG" is related to a specific command, and are always closed with a . The angle brackets (< >) allow your browser to distinguish between specific commands and simple text to be displayed on the page. These tags tell the browser how to display the text that is enclosed between the and the . To understand what tags do, consider how you might get a browser to display a word in bold font. This is easy to achieve; simply surround the word with and tags. Hence this word is bold because it is in the raw HTML as bold and this tells the browser to display it as bold. Actually, the tags refer to HTML elements. An element is a fundamental component of the structure of a text document. There are special elements that need to be in every page. All pages need to start with and end with tags. This startup tag informs the browser that it is about to receive a set of commands. The page is then divided into a HEAD and BODY section. The head section starts with a tag and ends with a tag, and holds among other information the page title, that appears on the browser title bar when the page is displayed. The HEAD section also holds most of the scripts (e.g. JavaScript) that will be used in the page. The title is enclosed in TITLE tags, as . Then comes the BODY tag, where the content of the webpage will be placed; all visible information (text and images) that you want to display, i.e. the information you want viewers to see, will appear between the BODY tags. The BODY tag has the format This is the visible content of my page. Because you should include these tags in each file, you might want to create a template file with them. Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them. Thus, a typical webpage will have the following basic structure: Welcome to my webpage. This is my nice webpage. Is it not beautiful? I think it is really beautiful because it is the first webpage that I made. Don't you think that I am cleaver?  Some elements may include an attribute, which is additional information that is included inside the body tag. For example, you can specify the alignment of images (top, middle, or bottom) by including the appropriate attribute with the image source HTML code. Example: Note: 1. HTML is not case sensitive thus is the same as . 2. The attribute is always xxx= and the attribute value "xxx" in inverted commas. 3. There are no spaces between the attribute and its value. Now we are about to become practical. In the next page you will start doing some exercises in HTML authoring using the built-in tools of KEWL. Meet Your HTML Tutor Now you can launch the KEWL HTML tutor, and use it to type a typical webpage upon which you will then build your HTML knowledge. You should keep the HTML tutor application open throughout this tutorial. If you accidentally close it, you can launch it from any page by using the link to Launch HTML Tutor as it appear alongside. Launch the HTML tutor now, and move to the next page. If you loose track of your windows, look at the launch bar on the bottom of your computer screen. You should see two icons representing the KEWL course, and the HTML tutor. Click on these icons on the launch bar to switch between the tutor and the course page. Paragraphs Unlike documents in most word processors, carriage returns in HTML files aren't significant. So you don't have to worry about how long your lines of text are (better to have them fewer than 72 characters long though). Word wrapping can occur at any point in your source file, and multiple spaces are collapsed into a single space by your browser. To indicate paragraph, use the

tag. A browser ignores any indentations or blank lines in the source text. Without

tags, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained on the next page.) For example:

Level-one heading

Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!

And this is the second paragraph.

To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the

tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file). NOTE: The

closing tag can be omitted (this is one of the few exceptions to the general rule of having a start < > tag and an end tag). This is because browsers understand that when they encounter a

tag, it implies that there is an end to the previous paragraph. Using the

and

as a paragraph container means that you can align a paragraph by including the align=alignment attribute in your source file. For example, the following codes produce the following visible effects.

This is a centred paragraph.

produces this: This is a centred paragraph.

This is a left aligned paragraph.

produces this: This is a left aligned paragraph.

This is a right aligned paragraph.

produces this: This is a right aligned paragraph.

The text of this paragraph is stretched to the limits of the horizontal space and is only really obvious when you have constructed a long enough sentence or paragraph to show the effect.

produces this: The text of this paragraph is stretched to the limits of the horizontal space and is only really obvious when you have constructed a long enough sentence or paragraph to show the effect. Forced Line Breaks The
tag forces a line break with no extra (white) space between lines. Using

elements for short lines of text such as postal addresses results in unwanted additional white space. For example: International Ocean Institute of South Africa
Botany Department, UWC
Modderdam Rd, Bellville
The output is: International Ocean Institute of South Africa Botany Department, UWC Modderdam Rd, Bellville Heading HTML has six levels of headings, numbered 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged

. The syntax of the heading element is: Text of heading where y is a number between 1 and 6 specifying the level of the heading. Formatting Text In an HTML document, you add emphasis to a piece of text by surrounding it with formatting tags. You can change the font type, size, the colour, make it bold, italic, underline it, align it left, right or centre etc. Formatting Attributes:         for bold text for italic text for underlined text for emphasis for strong emphasis size to change font to Comic Sans MS to change the font colour to red Note here that colours have hexadecimal numbers and letters written 0-F. This will be covered next. The font tag may not be recognised in future version of HTML. It is therefore better to use StyleSheets instead of the tag. Example of the StyleSheets.  Note above that specific attribute values are always placed between inverted commas ("xxx") with no spaces in the entire attribute code. Hexadecimal Colour Values In HTML colours are represent by special numbers. eg. These are six-digit number and letter combinations which represent a colour by giving its RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, and FFFFFF is white (fully saturated with all three colors). These number and letter combinations are cryptic. Here are all 216 hexadecimal HTML color codes arranged by hue. FFF FFF 99C C00 CCF F00 99F F00 66F F00 33F F00 00C C00 33C C33 006 600 003 300 00F F33 00F F66 00F F99 00F FCC 00C C99 CCC 999 666 333 000 CCC 999 666 333 000 CC9 900 CCF 333 666 999 CCC F33 300 600 900 C00 CCF 99C 666 999 CCC F66 C33 633 933 C33 99F 66C 669 999 CCC F66 C33 900 966 C66 66F 339 66C 99F CCC F33 900 C00 F33 C99 33C 336 669 99C CCF C00 600 933 C66 F99 66C 00F 33F 66F 99F C66 F00 F33 F66 F99 336 009 339 669 99C 633 900 933 966 C99 00C 006 339 66C 99F C33 633 966 C99 FCC 33F 009 00C 33F 99F F66 933 C66 F99 FFF 66F 33C 009 66F 66C F99 C66 966 FFF CCC 66F 33C 33F 33C 339 FCC C99 FFF CCC 999 33F 00F 00C 009 006 FCC FFF CCC 999 666 009 9CC FFC C00 FFC C33 FFF F00 FFF F33 FFF F66 FFF F99 FFF FCC CCF FCC FF9 900 FFC C66 CC9 933 996 600 996 633 CC9 966 FFC C99 FF6 600 FF9 966 CC6 633 993 300 663 300 CC6 600 FF9 933 FF3 300 FF6 633 330 000 663 333 996 666 CC9 999 FFC CCC CCF FFF 99C CCC 669 999 336 666 003 333 33C CFF 00C CFF 339 9FF 006 6CC 003 366 006 699 339 9CC 66C CFF 009 9FF 99C CFF 669 9CC 336 699 003 399 336 6CC 669 9FF 006 6FF FFC CFF CCC CFF 999 9FF 666 6FF 333 3FF 000 0FF 336 6FF 003 3FF CC3 300 660 000 993 333 CC6 666 FF9 999 FF9 9CC CC9 9CC FF9 9FF CC9 9FF 999 9CC 666 6CC 333 3CC 000 0CC 003 3CC 990 000 CC3 333 FF6 666 FF3 399 CC6 699 996 699 FF6 6FF 996 6CC 993 3FF 666 699 333 399 000 099 CC0 000 FF3 333 990 033 CC0 066 993 366 993 399 FF3 3FF 663 399 660 0CC 330 099 333 366 000 066 FF0 000 CC3 366 CC3 399 990 066 660 033 990 099 FF0 0FF 330 066 660 099 993 3CC 663 3CC 000 033 FF3 366 FF6 699 FF6 6CC FF3 3CC CC0 099 663 366 CC6 6CC 990 0CC CC3 3FF CC6 6FF 996 6FF 663 3FF CC0 033 FF0 033 FF0 066 FF0 099 FF0 0CC 330 033 660 066 CC3 3CC CC0 0CC CC0 0FF 990 0FF 660 0FF 330 0FF 330 0CC Formatting tools in KEWL The current formatting features of the KEWL editor are pretty primitive as we assume that you will be creating content in another editor and pasting it into KEWL1. You can insert tags by clicking the buttons on the toolbar, but the tags are inserted at the end of all text in the window. We will eventually improve this feature, but basically, you would do better to develop your content in another editor such as Frontpage, and then paste the code into the edit window of KEWL. Note: The font and font size dropdown choices do not work in any of the Beta versions of KEWL. Blockquotes Use the

tag to include lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text. In the example: ….objectives involved in solving the problem as well as the objectives related to the process involved in finding an appropriate solution.

Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

--William Strunk, Jr., 1918 1 A WYSWYG editor is currently in development for KEWL based on features of Internet Explorer (it will not work with Netscape or other browsers). It will be available in Version 1.1 of KEWL and may be in place by the time you read this. 

the result is: ….objectives involved in solving the problem as well as the objectives related to the process involved in finding an appropriates solution. Omit needless words. Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. --William Strunk, Jr., 1918 Special Characters Sometimes you will need to use special characters that have special meaning to the HTML interpreter, such as the <, >, & and ". You need to use special key combinations, called escape sequences to represent these characters in HTML documents. They are: Use this text < > & " to display this character < > & " You use escape sequences to display non-ASCII characters, such as an "e" with an umlaut (ë). For a complete listing of these go to http://www.bbsinc.com/symbol.html Note: Escape Tags are case sensitive, unlike other HTML tags Lists HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow. Unnumbered Lists To make an unnumbered, bulleted list    start by opening the list with the

tag (ul - unnumbered list). enter the
• tag (li - list item) tag followed by the individual item; no closing tag is needed, although it is not wrong to include
tags. end the entire list with a closing tag. Below is a sample three-item list:
• apples
• bananas
• grapefruit
The output is:    apples bananas grapefruit Numbered Lists A numbered list (also called an ordered list, from which the tag is name derived) is identical to an unnumbered list, except it uses
instead of
. The items are tagged using the same
• tag The following HTML code:
  1. oranges
  2. peaches
  3. grapes
  produces this formatted output: 1. oranges 2. peaches 3. grapes Line breaks in KEWL In the KEWL editor, you do not need to type in
  tags if you just want to type text. The line spacings that you enter by pressing the ENTER key can be automatically converted to new lines. Just tick the red box labelled Convert new lines to
  on display . In fact, this is the default setting at present, and you have to uncheck it if you want to use

  and
  tags. Horizontal Rules The

  ---

  tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate sections of your document. For example, many people add a rule at the end of their text and before the
  information. You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example:

  ---

  displays as: Images - Bitmap and Vector Images Computer graphics fall into two main categories: - bitmap images and - vector graphics Understanding the difference between the two will help as you create and edit digital images. Bitmap Images Photoshop and other paint and image-editing programs generate bitmap images, also called raster images. Bitmap images use a grid of small squares known as pixels to represent images. Each pixel is assigned a specific location and color value. For example, a bicycle tire in a bitmap image is made up of a mosaic of pixels in that location. When working with bitmap images, you edit pixels rather than objects or shapes. The bitmap image on the right had been enlarged; see the loss of detail when compared to the image on the left. The two images appear the same size only because the enlarged image has been rescaled for the practical purposes of this exercise. A bitmap image is resolution-dependent - that is, it contains a fixed number of pixels to represent its image data. As a result, a bitmap image can lose detail and appear jagged if viewed at a high magnification on-screen or printed at too low a resolution. Bitmap images are the best choice for representing subtle gradations of shades and color - for example, in photographs or painted images. Vector Images Drawing programs such as Adobe Illustrator® create vector graphics, made of lines and curves defined by mathematical objects called vectors. Vectors describe graphics according to their geometric characteristics. For example, a bicycle tire in a vector graphic is made up of a mathematical definition of a circle drawn with a certain radius, set at a specific location, and filled with a specific color. You can move, resize, or change the color of the tire without losing the quality of the graphic. Vector images do not lose their detail or clarity no matter how much they are scaled. Note that the enlarged vector image has not lost its detail or clarity. A vector graphic is resolution-independent - that is, it can be scaled to any size and printed on any output device at any resolution without losing its detail or clarity. As a result, vector graphics are the best choice for type (especially small type) and bold graphics that must retain crisp lines when scaled to various sizes - for example, logos. Because computer monitors represent images by displaying them on a grid, both vector and bitmap images are displayed as pixels on-screen. Vector Markup Language (VML) Microsoft and others submitted VML in May 1998. Like PGML (Precision Graphics Markup Language), VML is an application of XML that describes a method for marking up vector graphics for the Web. Using text-based tags to define paths using connected lines and curves, VML uses a coordinate system based on the CSS2 (Cascading Style Sheet Level 2) model. VML is derived from the graphic model found in Microsoft Office's drawing tools. Vector Formatting For The Web VML defines markup formatting for vector graphics along with style information to assist in display and editing, compared to PGML. Vector graphics, on the other hand, record images as mathematical descriptions of lines and shapes. This means they're not locked into an exact pixel count. Web builders can currently create vector graphics with common illustration programs, such as Adobe Illustrator, but those graphics must be converted to raster format for native support in Web browsers. Vector formats are supported on the Web via plug-ins such as Flash. Why it is Important An official vector graphics standard would give a big boost to vector graphics on the Web, eliminating the need for proprietary plug-ins and fixing the problems of existing raster formats, such as the lack of scalability. Vector graphics are scalable because each image is recorded as a small instruction set and rendered on the user's computer. This means vector graphics can resize with browser windows, and they print better than static images do. Vector file sizes are also significantly smaller than traditional bitmap graphics, resulting in faster loading pages. They are easily editable since you can access each object within the image individually. Image Resolution The number of pixels displayed per unit of printed length in an image is usually measured in pixels per inch (ppi). An image with a high resolution contains more, and therefore smaller, pixels than an image of the same printed dimensions with a low resolution. For example, a 1inch-by-1-inch image with a The left 72 ppi image has fewer pixels and thus less detail than the adjacent 300 ppi image on the right resolution of 72 ppi contains a total of 5184 pixels (72 pixels wide x 72 pixels high = 5184). The same 1-inch-by-1-inch image with a resolution of 300 ppi would contain a total of 90,000 pixels (see the example below). Because they use more pixels to represent each unit of area, higher-resolution images usually reproduce more detail and subtler color transitions than lower-resolution images when printed. However, increasing the resolution of an image scanned or created at a lower resolution only spreads the original pixel information across a greater number of pixels and rarely improves image quality, so the idea is to rather scan or create the image at a higher resolution and then scale it down if necessary. Of course, this also depends on the end product. To determine the image resolution to use, consider the medium of final distribution for the image. If you’re producing an image for online display, the image resolution only needs to match the typical monitor resolution (72 or 96 ppi). However, using too low a resolution for a printed image results in pixelation — output with large, coarse-looking pixels. Using too high a resolution (pixels smaller than what the output device can produce) increases the file size and slows the printing of the image; furthermore, the device will be unable to print the image at the high resolution. Image Size To produce high-quality images using Photoshop (or any other graphics software), it is important to understand how the pixel data of bitmap images is measured and displayed. The display size of an image on-screen is determined by the pixel dimensions of the image plus the size and setting of the monitor. The file size of an image is proportional to its pixel dimensions. When preparing an image for a Web page that will be viewed on a variety of monitors, pixel dimensions (The number of pixels along the height and width of a bitmap image) become especially important. How large an image appears on-screen depends on a combination of factors: - the pixel dimensions of the image - the monitor size - and the monitor resolution setting. For example: The size of the "HTML Tutor" on the right of the screen is 150 X 150 ppi (pixels per inch). This image takes up roughly 20% of the horizontal screen space on a monitor set to 800 X 600 ppi. Choosing Image File Formats The two most common image file formats for the web are JPEG (Joint Photographic Experts Group) or GIF (Graphics Interchange Format). How do you know which format to choose for your images? There are several things you should consider before you decide which format to use: a) The type of image you are creating b) The file size c) The image quality you want d) The display time JPEG is the preferred format when saving images with broad tonal ranges, such as photographs or scanned images. The GIF format is considered the best choice for line drawings and graphics with few colours or sharp edges. To decide the best format for your images you have got to ask yourself, "Which format will give me the best image quality in the smallest file size and display on screen?" JPEG Format JPEG was created as a compression scheme specifically for computer graphics. JPEG supports up to 32-bit color (16.7 million colors) and is an excellent option for photos or scanned images. JPEG files provide high-quality images with a high level of compression (loses unnecessary information that does not impede visual perception). You can choose the display quality - from high quality to low quality reproductions. The higher the image quality, the larger the file size and vice versa. JPEG images do require some time to decompress when displaying onscreen but can be displayed progressively. Show example of compression. GIF file format The GIF format was developed as a cross-platform graphic standard and is supported by all graphical Internet Browsers. GIF supports up to 8-bit color (256 colors). Usually simple vector files look better when converted to GIF format if they contain hard outlines or small text objects. The GIF file provides loss less compression, which means that when you convert to GIF, the file information is stored with the image and the .GIF file looks almost exactly like the graphic you created. However, some color loss may occur in the compression. Because limited decompression time is required, a GIF file displays fairly quickly onscreen. PNG File Format PNG (Portable Network Graphics), is an extensible file format for the lossless, portable, well-compressed storage of raster images. Although the initial motivation for developing PNG was to replace GIF, the design provides some useful new features not available in GIF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16-bit colour (8.3 million colours). PNG is designed to work well in online viewing applications, such as the World Wide Web, so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms. Inserting images into your KEWL pages You can only insert images into your KEWL pages that are listed in the KEWL images folder. If the image is listed in the KEWL images folder, go straight to step 5 below. If you wish to insert an image that you've created or copied from elsewhere, you firstly need to import (or upload) this image into the KEWL images folder. To import (or upload) an image follow the procedure detailed below. Lets assume that the image you have created or copied is called "daisy.gif" Step 1. Create your new KEWL page following the procedure indicated earlier in this chapter. Enter the chapter no., the page title, and the HTML content (see the example here below) Step 2. Clicking on the "Insert image button" ( ) at the bottom of the "Page contents window" (see above), brings up the following "Insert an images tag window" (see below). Clicking the "Upload image Button" ( ) allows you to go straight to Step 3 below. Step 3. Next, click the "Upload image to site button ( "Upload image window" (see below). ). This will bring up the Step 4. Using the "Browse button" (see above), search your local hard drive or Network for the image "daisy.gif". In this example, the image was located in the following folder on my computer: C:\My Documents\temp\images\daisy.gif. Next, click the "save to images directory for MKC button". You can now view the list of uploaded images. Step 5. Clicking the "List uploaded images button" ( all images in the KEWL images folder. ) will bring up a window containing It is a good idea at this stage to keep open this window because you will have to type in the image file name in the "Insert an image tag window" which should still be open. This way, you won't have to memorize the name. Step 6. Type the image filename into the space provided along with all other information about the image such as, the alignment and any "alt" tags. Step 7. The only step left is now to insert the image into your KEWL page. This is done simply by clicking on the "Insert button" in the upper figure. The end result can be seen in the figure below. And here is the visualization of the procedure that has been performed above. Note that although the daisy is centred, it still appears to the left. This centred command is the placement of this image relative to text surrounding it, and not the placement of the image relative to the paragraph. Links to documents in your KEWL pages As with images, you can only put links to documents into your KEWL pages that are listed in the KEWL documents folder. If the document is listed in the KEWL documents folder, and, for arguments sake called "info.doc" the link address would be docs/info.doc. If you wish to link to a document that you've created or copied from elsewhere, you firstly need to import (or upload) this document into the KEWL document folder. To import (or upload) a document you must click on the link that says "Add a document to course document folder". This will take you to a window similar to the insert an image one. Using the "Browse button" search your local hard drive or Network for the document, "info.doc". Once you have saved it you can make a link to it within KEWL. Remember to have it open in a new window by specifying the target as "blank". Your link will look like this: docs/info.doc. What is a URL When you create a hyperlink, its destination is encoded as a URL (Uniform Resource Locator), such as http://www.botany.uwc.ac.za/courses/marbot.htm or file://ComputerName/SharedFolder/FileName.htm. A URL contains a web server or network location, path, and file name. A URL also identifies the protocol that will handle the file, such as HTTP, FTP, or FILE: Below are examples of protocols: file ftp http gopher WAIS news telnet - a file on your local system - a file on an anonymous FTP server - a file on a World Wide Web server - a file on a Gopher server - a file on a WAIS server - a Usenet newsgroup - a connection to a Telnet-based service The port number can generally be omitted. (That means unless someone tells you otherwise, leave it out.) Linking The chief power of HTML comes from its ability to hyperlink information. What is a hyperlink A hyperlink is a connection from one page to another destination such as another page or a different location on the same page. The destination is frequently another Web page, but it can also be a picture, an e-mail address, a file (such as a multimedia file or Microsoft Office document), or a program. A hyperlink can be text or a picture. When a site visitor clicks the hyperlink, the destination is displayed in a Web browser, opened, or run, depending on the type of destination. For example, a hyperlink to an AVI file opens the file in a media player, and a hyperlink to a page displays the page in the Web browser. For example, the words “NCSA's Beginner's Guide to HTML” could be a hyperlink. When the site visitor clicks it, the HTML Primer page at the site is displayed. This is how it would look in HTML. NCSA's Beginner's Guide to HTML HTML's single hypertext-related tag is , which stands for anchor. To include an anchor in your document: 1. start the anchor with ) so that the code reads 3. enter the text that will serve as the hypertext link in the current document 4. enter the closing anchor tag: (no space is needed before the end anchor tag) Relative Pathnames Versus Absolute Pathnames A hyperlink can be absolute or relative:   An absolute URL contains the full address. A relative URL has one or more missing parts. The missing information is taken from the page that contains the URL. For example, if the protocol and domain are missing, the Web browser uses the protocol and domain of the current page. It is common for pages in a web to use relative URLs containing only a partial path and file name. If the files are moved to another server, any hyperlinks will continue to work as long as the relative positions of the pages remains unchanged. For example, a hyperlink on Products.htm points to a page in the same folder; if both pages are moved to the same folder on a different server, the URL in the hyperlink will still be correct. You can link to documents in other directories by specifying the relative path from the current document to the linked document. For example, a link to a file NYStats.html located in the subdirectory AtlanticStates would be: New York This is a relative link because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the file. Pathnames use the standard UNIX syntax. The UNIX syntax for the parent directory (the directory that contains the current directory) is "..". (For more information consult a beginning UNIX reference text such as Learning the UNIX Operating System from O'Reilly and Associates, Inc.) If you were in the NYStats.html file and were referring to the original document US.html, your link would look like this: United States In general, you should use relative links because: 1. it's easier to move a group of documents to another location (because the relative path names will still be valid) 2. it's more efficient connecting to the server 3. there is less to type However use absolute pathnames when linking to documents that are not directly related. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to other documents (perhaps a reference to related software) should use full path names. This way if you move the user manual to a different directory, none of the links would have to be updated. Links to Specific Sections - Creating bookmarks Anchors can also be used to move a reader to a particular section in a document (either the same or a different document) rather than to the top, which is the default. This type of an anchor is commonly called a named anchor or bookmark because to create the links, you insert HTML names within the document. So, simply put, a bookmark is a location or selected text on a page that you have marked. You can use bookmarks as a destination for a hyperlink. For example, if you want to display a certain section of a page to the site visitor, add a hyperlink with the bookmark as its destination. If you simply create a hyperlink to the page, the beginning of the page is displayed in the Web browser, and the site visitor must then search for the relevant paragraph. Instead, adding a bookmark at the beginning of the paragraph provides a hyperlink to the bookmark. When the site visitor clicks the hyperlink, the relevant part of the page is displayed, rather than the top of the page. You can use one or more bookmarks to find locations on a page. For example, add a bookmark to each main heading on a page. When you are editing the page, you can quickly find each section by going to the corresponding bookmark. One (long) document can be time-consuming to move through when all you really want to know about is one bit of information. Internal hyperlinks can be used to create a "table of contents" at the top of a document. These hyperlinks move you from one location in the document to another location in the same document. You can also link to a specific section in another document. A hyperlink to a bookmark, also called an anchor, is indicated by a pound sign (#), which precedes the destination URL. In order to create a hyperlink to a bookmark, you first have to have created the bookmark. Firstly decide the location of, or the bit of text that is to serve as your bookmark. Hyperlinking text within the same document Once you’ve decided where you want to create a bookmark, or selected the text to which you want to assign the bookmark, write the following piece of HTML code: If your bookmark is a location, write only this code. If however, the bookmark is a selected piece of text, place this text between the HTML tags like you would any other HTML code remembering that all HTML code has an opening and a closing tag so that your selected text bookmark would read: Chapter 1 - Learning to create bookmarks Once you have created your bookmark, you are now ready to create a hyperlink to your bookmark. Remember a hyperlink has the following opening code , and the following closing code . Decide which piece of text will be hyperlinked to your bookmark. As stated above, a hyperlink to a bookmark is indicated by a pound sign (#), which precedes the destination URL. As the hyperlink is located in the same document as the bookmark, it is not necessary to repeat the URL. The hyperlink should read as follows irrespective of where the actual hyperlink occurs on your page: Chapter 1 Web browsers usually underline text hyperlinks and display them in a different colour, i.e., the text “Chapter 1” will be highlighted in a different colour and also underlined for example Chapter 1. Hyperlinking text in another document Since the hyperlink is located in a different file from the bookmark, the filename has to be specified. Using the same example as before the text “Chapter 1 - Learning to create bookmarks” is in the previous file called “default.asp?pageno=91” (note that this is a relative pathway) while presently we are working in a file called “default.asp?pageno=93”. Firstly decide which piece of text will serve as your hyperlink to the bookmark in the “default.asp?pageno=91” file. Assuming the piece of text reads, “this is how to create a hyperlink to a bookmark using HTML ….”, the hyperlink to this bookmark should read something like this: In this case, the hyperlink is firstly to the file “default.asp?pageno=91” and then to the bookmark “bookmark1”. When the site visitor clicks the hyperlink, the relevant part (i.e. the Chapter 1 - Learning to create bookmarks) of the page is displayed, rather than the top of the page. This hyperlink will appear as follows: this is how to create a hyperlink to a bookmark in another page using HTML …. PS. you will note that a new window opens. In this case, it is to prevent you from losing your place in this document. Hyperlinking Email addresses You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is: Name For example, enter: Ms Anna Scott to create a mail window that is already configured to open a mail window for Anna Scott. (You, of course, will enter another mail address!) This is OK for course content that is inside a database, but it is not a good idea to put mailto links in plain HTML WebPages. There are spambots that scan websites looking for exposed email addresses, and then they use them to build a database which is used to distribute spam emails. Hyperlinking images To recap, a text hyperlink is simply text, such as a word or phrase, that has been assigned destination URL. A picture hyperlink on the other hand is a picture that has been assigned a destination URL in one of three ways:    The entire picture can be assigned a default hyperlink. In this case, the site visitor can click any part of the picture to display its destination. An example of a picture with a default hyperlink is a button. Similarly, an image can be cut and placed in a table much like the “HTML Tutor” and each individual image can be assigned its own default hyperlink. Again in this case, the site visitor can click any part of each picture in a cell to display its unique destination. The picture can be assigned one or more hotspots, which are hyperlink regions on the picture. A picture that contains hotspots is called an image map. For example, an image map can be a picture that represents different parts of a Web site (such as the home page, a catalogue page, and so on). The site visitor clicks a certain area of the image map to display the corresponding page. We will not be showing you how to hyperlink a hotspot as this requires knowing the co-ordinates of the area to assign as the hotspot. This is often much easier accomplished with an HTML editor. Setting a Hyperlink for a Graphic You can set a default hyperlink for a graphic, such as a picture, animated GIF, or video. When a site visitor clicks the graphic, the Web browser displays the destination of the hyperlink. For example, you could hyperlink a thumbnail image to its larger counterpart. The code would read as follows: where is the opening tag for the hyperlink; is the image source code, and is the closing tag for the hyperlink. As with text hyperlinks, the opening and closing tags are on either side of the image source code. The above HTML code would produce something like this: The original image unlinked. Once the image is linked, it is surrounded by a blue line. To remove this line, simply set the border thickness to "0" Set at "0", the new source code will read . The entire hyperlink code can be seen above! Specifying the destination of a hyperlink If you want the destination of the hyperlink to show up in a specific frame, you have to specify the target frame. This is especially useful when your HTML page comprises a number of frames. If you have not set the target frame, the default frame is usually set for your hyperlink. Setting the target frame for a hyperlink is the same for text, images, audio files and document formats. The full impact of setting target frames can only really be grasped when working in frames. The following examples might therefore not appear all that different. Keep them in mind though when you eventually start creating pages using frames. Target Frame = Page Default (none) This hyperlink will appear in the default frame. In this particular case, the same frame of the current window. Target Frame = Same frame This hyperlink will appear in the same frame of the current window. Target Frame = Whole Page This hyperlink will appear at the top of the page replacing all frames in the current window. Target Frame = New Window This hyperlink will appear at the top of the page in a new window. Target Frame = Parent Frame This command is similar to the "Whole Page - Target Frame", but will only replace the parent frame set. External Images, Sounds, and Animations You may want to have an image open as a separate document when a user activates a link on either a word or a smaller, inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images. To include a reference to an external image, enter: link anchor You can also use a smaller image as a link to a larger image. Enter: The reader sees the SmallImage.gif image and clicks on it to open the LargerImage.gif file. Use the same syntax for links to external animations and sounds. The only difference is the file extension of the linked file. For example, link anchor specifies a link to a QuickTime movie. Some common file types and their extensions are: File Type Extensions File Type plain text HTML GIF image JPEG image TIFF image X Bitmap image PostScript file AIFF sound file AU sound file WAV sound file QuickTime movie MPEG movie Extension .txt .html .gif .jpg or .jpeg .tiff .xbm .ps .aiff .au .wav .mov .mpeg or .mpg Keep in mind your intended audience and their access to software. Most UNIX workstations, for instance, cannot view QuickTime movies. Background Graphics Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the background image. Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image. However you only have to create a small part of the entire background because, using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates it enough times to fill your window. This action is automatic when you use the background tag shown below. The attribute to include a background image is included in the statement as an attribute: Background Colour By default browsers display text in black on a gray background. However, you can change both elements if you want. Some HTML authors select a background color and coordinate it with a change in the colour of the text. Always preview changes like this to make sure your pages are readable. (For example, many people find red text on a black background difficult to read!) You change the colour of text, links, visited links, and active links using attributes of the tag. For example, enter: This creates a window with a black background (bgcolor), white text (text), and silvery hyperlinks (link). Note: the colour values are according to the colour's hexadecimal value - see page Hexadecimal Colour Values. Introduction to Tables Before HTML tags for tables were finalized, authors had to carefully format their tabular information within

   tags, counting spaces and previewing their output. Tables are very useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages. Think of your tabular information in light of the coding explained below. A table has heads where you explain what the columns/rows include, rows for information, cells for each row. In the following table, the first column contains the header information, each row explains an HTML table tag, and each cell contains a paired tag or an explanation of the tag's function.
  
  General Table Format The general format of a table looks like this:  start of table definition caption definition start of first row definition first cell in row 1 (a head) end of first row definition start of second row definition first cell in row 2
  
  
   
   caption contents 
   
   
   cell contents 
   
   
   
   cell contents 
   cell contents 
   
   
   
   cell contents 
   
   cell contents 
   
   
  
  last cell in row 2 end of second row definition start of last row definition first cell in last row ... last cell in last row end of last row definition end of table definition
  
  The  and  tags must surround the entire table definition. The first item inside the table is the CAPTION, which is optional. Then you can have any number of rows defined by the  and  tags. Within a row you can have any number of cells defined by the ... or ... tags. Each row of a table is, essentially, formatted independently of the rows above and below it. This lets you easily display tables like the one above with a single cell, such as Table Attributes, spanning columns of the table. Table Attributes The following attributes may be used in a table either in the table or tr or td tages NOTE: Attributes defined within  ...  or  ...  cells override the default alignment set in a  ... . Tables for Nontabular Information Some HTML authors use tables to present nontabular information because any HTML code can be included in table cells. Some authors, for example, use a table with no borders to create "one" image from separate images. Browsers that can display tables properly show the various images seamlessly, making the created collage seem like a single parts of which may be hyperlinked. The tutorial launcher image may look like a single image but it is not. Here is its code.
  
  An example of an image collage. 
   
    
   
  
  You will notice that there are tables with in tables and linked images with in tables but it all appears as one image in the browser. Here is the same HTML tutor image created from start to finish with the final collage in a table with cell borders put in so that we can see the outline of the table cells. The image in the last cell is hyperlinked to the "htmledit.asp" file. Using table borders with images can create an impressive display as well. Experiment and see what you like.
  
  Applets
  What is an applet? Applets are tiny programs written in the Java Programming Language by software developers. The source code they write can be thought of as an applet recipe, which goes through a tool known as a compiler which converts the source
  
  code into bytecode, resulting in the creation of the applet. This is what you weave into your web page. You specify the name of this file in the code attribute of the opening  tag. When you use the word CODE to identify the applet you are telling the browser the name of the applet bytecode file to look for. The  tag is a complex. Depending on the applet that you want to insert, and to what extent you choose to customize that applet, you can construct either a relatively simple or an exceptionally complex  tag. The  tag is a compound tag, which means it has several parts. You may include additional information related to the tag itself in attributes within the tag. However, not all the information is compulsory. The opening  tag's code attribute identifies the file that contains the applet. (download zip file etc…) The height and width attributes of the opening tag tell the browser how much space the applet requires in the web page. Eg:  Note: there are quotation marks surrounding the code attribute. This is because of its potential to comprise of strings of characters including spaces. Surrounding strings with quotes ensures that the browser knows exactly what to look for. Numeric values, such as height and width never have spaces in them and therefore do not require quotation marks. It is however a good idea to surround all numbers and strings with quotes as they can do no harm and prevent you from omitting quotes where you really do need them. The other important thing to remember is that case matters. If the code attribute is not typed correctly the browser will not be able to read it. Almost all applets are stored in files having a .class extension. When programmers create Java applets, the final step involves converting human readable java code into computer readable code (bytecode). Once converted, the resulting file has the .class extension. As a result the blahblah applet is actually stored in a file named blahblah.class. It is not imperative to include the .class extension unless it is anything other than .class.
  
  Thus this is the equivalent to the previous example. Eg:  code, height and width are known as required attributes because you cannot included applets in a web page without them. You can also include a number of optional attributes to control how an applet appears in your page. It is recommended that you specify these after the 3 required attributes in
  
  order to increase the readability of your HTML source code. Also after you begin adding optional attributes to the code, the opening tag can become quite difficult to read. To further increase the readability of your source code, place any optional attributes on their own line. Eg:  Optional Applet Attributes  ALIGN  This attribute specifies where your applet is placed on the page in respect to the text around it; it may have one of the following nine alignments: left, right, top, texttop, middle, abs middle, baseline, bottom and absbottom. eg.   CODEBASE  This specifies the URL for your applet, or where it is located if not in the same directory as your web page. The URL you supply for CODEBASE may point to a directory on your server or one on any other server on the web. eg.   HSPACE  This specifies the horizontal space surrounding your applet. eg.   NAME  This specifies the symbolic name of your applet allowing other applets embedded in the same page to locate your applet by name. You only use this attribute when other applets on a page communicate with one another - not a common feature. eg. 
  
  Eg: Applet Parameters The second major part of the  tag, applet parameters, is where you can really customize an applet. To make an applet look or act as you want it to, you use a special  tag that has two of its own attributes: name and value. Although not all applets are customizable, those that are allow you to supply information by using one or more  tags.
  
  Eg.  An applet may allow you to provide a sound track that plays in the background when the applet is running. You use the  tag to tell the applet the name of the sound file to use and where the file is located. Eg:  Here the name of the parameter is sndtrack. The value associated with this parameter, audio/moodphase5ive.au, is a relative URL (a partial URL pointing to a file or image located relative to the web page in which the applet itself appears) leading to a sound file. Some applets may also accept an absolute URL (Complete URL) for this parameter. Different applets may support any number of different parameters. To find out the names and values of the parameters of an applet one must consult the applet’s documentation as these are specific to a particular applet. It's not unusual, for example, to come across applets that support several different parameters, giving you great flexibility when it comes to configuring them. To supply more than one parameter, all you have to do is enter the parameters one after another. Some applets force you to supply parameters; others are written to supply default values, such as font and font size, if you leave the parameters out. It's all up to the programmer. Some applets support more than one value being associated with a given parameter name. In such cases you must consult your documentation to find out how you actually supply these values. It may be true that you can supply several values at once, but you have to separate each value from the others so as not to confuse the applet. Typically, you use the | character (sometimes called the pipe character):  Note: Although the | character is the most commonly used separator, programmers may choose to use a comma, or a colon, or a semicolon, even a space instead. The final part of the  tag brings the entire tag to a close. To properly form an  tag, you must balance the opening tag with a closing tag. When the browser sees , it knows that there is no more applet. Validate Your Code When you put a document on a Web server, be sure to check the formatting and each link (including named anchors). Ideally you will have someone else read through and comment on your file(s) before you consider a document finished. You can run your coded files through an HTML validation service that will tell you if
  
  your code conforms to accepted HTML specifications. If you are not sure your coding conforms to HTML specifications, this can be a useful teaching tool. Fortunately the service lets you select the level of conformance you want for your files (i.e. strict, level 2, level 3). If you want to use some codes that are not officially part of the HTML specifications, this latitude is helpful. The service offered by the W3C at (http://www.validator.w3.org) is a great place to start. This validator service lets you check a page for compliance with W3C standards by just entering your URL and hitting a button. You will see a list of errors that are in your page.
  
  
  
  						  
  					 
              
          
      
  
  	
  	
  	
  
  		
  		
  		
  Related docs
  
  
  HTML Color Codes 
  
  Views: 175  |  Downloads: 4
  
  
  HTML  Codes 
  
  Views: 202  |  Downloads: 6
  
  
  HTML Code 
  
  Views: 137  |  Downloads: 3
  
  
  List of HTML Codes 
  
  Views: 122  |  Downloads: 6
  
  
  HTML Background 
  
  Views: 224  |  Downloads: 3
  
  
  Background Code for Html 
  
  Views: 305  |  Downloads: 1
  
  
  HTML Codes for Myspace 
  
  Views: 123  |  Downloads: 2
  
  
  Cool Html Codes for Myspace 
  
  Views: 93  |  Downloads: 0
  
  
  HTML Coding for Background Music 
  
  Views: 86  |  Downloads: 2
  
  
  Free HTML Code 
  
  Views: 206  |  Downloads: 6
  
  
  HTML  Tags 
  
  Views: 106  |  Downloads: 4
  
  
  HTML Character Entities
  
  Views: 11  |  Downloads: 0
  
  
  HTML Code for Music 
  
  Views: 120  |  Downloads: 4
  
  
  HTML Basic Code 
  
  Views: 127  |  Downloads: 5
  
  
  Myspace HTMLl Codes 
  
  Views: 183  |  Downloads: 1
  
  
  HTML Guide 
  
  Views: 105  |  Downloads: 5
  
  
  
  		
  
  
  
  
  
  		
  Other docs by crisologa lapu...
  
  
  Federal Gambling Law
  
  Views: 102  |  Downloads: 0
  
  
  Amortization Formula Excel
  
  Views: 240  |  Downloads: 15
  
  
  Are Mortgage Rates Going Up
  
  Views: 147  |  Downloads: 0
  
  
  What are the Different Types of Mutual Funds
  
  Views: 99  |  Downloads: 5
  
  
  Military Pay Charts
  
  Views: 921  |  Downloads: 2
  
  
  How Do I Calculate Interest
  
  Views: 163  |  Downloads: 6
  
  
  Income Properties
  
  Views: 108  |  Downloads: 0
  
  
  Credit Card Application
  
  Views: 146  |  Downloads: 6
  
  
  Full Color Business Card
  
  Views: 108  |  Downloads: 2
  
  
  Check Status of Tax Refund
  
  Views: 53  |  Downloads: 0
  
  
  
  		
      
      
  	
  
  			
  			
  		
  		
  
  
  		
  		
  
  		  
  
  				
  
  					 
  
  					 
  
  						 
  
  									 
  About:
  									 
  What is docstoc? | Terms of Service | Privacy Policy | FAQs
  						 
  						 
  
  									 
  Links:
  									 
  docstoc blog | Top Docsters | Upload | DMCA Guidelines | RSS Feeds 
  						 
  						 
  
  									 
  StocBlogs:
  									 
  legalstoc.com | businessstoc.com | educationalstoc.com | technologystoc.com
  						 
  						 
  
  									 
  Contact:
  									 
  Contact Us | Suggest Features | Join Our Team
  						 
  						 
  
  									 
  Share:
  									 
  Embed Documents | Docstoc OneClick | Docstoc Sync | Docstoc Buzz
  						 
  						
  						
  
  						
  © Docstoc 2008. All rights reserved.