| Faculty Resource Centre | Courses Index | | |
Page 22
of 29
pages. Chapter: 5: KEWL Resources  |
Basic Information on HTML CodingAn 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 <TAG>, where "TAG" is related to a specific command, and are always closed with a </TAG>. 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 <TAG> and the </TAG>. 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 <B> and </B> tags. Hence this word is bold because it is in the raw HTML as <B>bold</B> and this tells the browser to display it as bold. Learn HTML 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 <HTML> and end with </HTML> 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 <HEAD> tag and ends with a </HEAD> 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 <TITLE>This is my page</TITLE>. 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 <BODY> This is the visible content of my page</BODY>. 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:
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.
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 <P> tag. A browser ignores any indentations or blank lines in the source text. Without <P> tags, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained on the next page.)
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 <P> 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 </P> 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 <P> tag, it implies that there is an end to the previous paragraph. Using the <P> and </P> as a paragraph container means that you can align a paragraph by including the align=alignment attribute in your source file.
Forced Line Breaks The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements for short lines of text such as postal addresses results in unwanted additional white space. For example: The output is: International Ocean Istitute of South Africa Task: Experiment with both of these using the HTML tutor. Task 1 - an HTML Page Using the HTML Tutor, create a page like the example "My First Webpage" below and experiment with the title and body content. Save this basic structure as the rest of the tags you will learn will be inserted between the <BODY></BODY> tags. Remember, any visible information on your page will always appear between the BODY tags.
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 <H1>. The syntax of the heading element is: <Hy>Text of heading </Hy> 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 center etc. Formatting Attributes:
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. <font color="#FFAAOO"> 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.
Task 2 - Formatting Text Now that you have the basic structure, insert some paragraph tags between the <BODY></BODY> tags. Experiment using the <B>bold</B> and <I>italics</I> tags, changing the font and changing the text alignment.
Formatting Text in KEWL The formatting features of the KEWL editor are pretty primitive. 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 <BLOCKQUOTE> 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. <BLOCKQUOTE>
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:
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
Below is a sample three-item list: <UL> <LI>apples <LI>bananas <LI>grapefruit </UL>The output is:
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 <OL> instead of <UL>. The items are tagged using the same <LI> tag The following HTML code: produces this formatted output:
Task 3 - Making a List Launch the HTML Tutor once again and experiment making various kinds of lists, as shown in the example.
Now make a numbered list: Eg. The winners were:
Line breaks in KEWL In the KEWL editor, you do not need to type in <BR> 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 <BR> on display . In fact, this is the default setting at present, and you have to uncheck it if you want to use <P> and <BR> tags. Horizontal Rules The <HR> 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 <address> 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: Images - Bitmap and Vector Images Computer graphics fall into two main categories: - bitmap images and 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.
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.
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. 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 1-inch-by-1-inch image with a 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
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 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 colors 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 provides 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. 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. 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"
And here is the visualization of the procedure that has been performed above. 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". 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 - a file on your local system 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” is a hyperlink. When the site visitor clicks it, the HTML Primer page at the site is displayed. <A href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document: 1. start the anchor with <A (include a space after the A) Here is a sample hypertext reference in a file called linked.htm:
Task: Using your HTML tutor, try this yourself, linking to a file called htmledit/yourlink.htm Relative Pathnames Versus Absolute Pathnames A hyperlink can be absolute or relative:
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: <A href="AtlanticStates/NYStats.html">New York</A> 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: <A href="../US.html">United States</A> 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) 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. Create a hyperlink to a bookmark 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: <A name="bookmark1"></A> 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: <A name="bookmark1">Chapter 1 - Learning to create bookmarks</A> 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 <A href="xxx">, and the following closing code </A>. 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: <A href="#bookmark1">Chapter 1</A> Web browsers usually underline text hyperlinks and display them in a different color, i.e., the text “Chapter 1” will be highlighted in a different colour and also underlined for example Chapter 1. PS. To get the full effect of this particular bookmark, scroll all the way to the bottom of the page so that the hyperlink to your bookmark "chapter 1" is close to the top of this page. When you click the hyperlink Chapter 1 above, the browser should load the bookmark as the first line. Try this now. 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: ….this is how to <A href="default.asp?pageno=91#bookmark1">create a hyperlink to a bookmark in another page</A> using HTML ….. 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. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
      |