-
Introduction to HTML
This document is a guide to coding a HTML page. These instructions are designed for someone that does not have any prior knowledge of HTML. HTML stands for HyperText Markup Language. Hypertext is text that is linked to other sources on the web or the text that can be clicked on in a web page. A mark up language controls how a document should be displayed. This language is used to construct web pages. The web page is constructed with the text and tags. The tags are the code of HTML. Code is the instructions to the computer. HTML code is embedded in the text of the document that being displayed on the World Wide Web. HTML code tells a computer how to display a web document. It should be noted that HTML is more of a structural organization language than an exact layout method for web pages.
-
What is a tag?
An HTML tag is the code of HTML that gives specific instructions on how to display the contents of a web page. The instructions can be made more specific through the use of the tag's attributes. A tag is embedded within the text of the document. A tag resembles: <TAG>text</TAG>. The <TAG> starts the command and </TAG> closes the command. A closing tag is just like a opening tag but has an / before the tag. What is between them is contained within the tags. Tags work in pairs. The text and other tags can be contained within tags. Not all tags need the closing tag. These tags are called stand-alone tags. Stand-alone tags do not contain other tags.
There are four types of tags: page, block level, inline and structural. Page tags are required on all web pages. Without these tags of the Internet browsers would not display an HTML page. Structural tags are the main divisions of the web page that control how the page is laid out. These tags can contain other structural, block level, and inline tags. Block level tags are the major divisions of the contents of the page. Blocks are the groupings of the page. Block tags can contain other block tags and inline tags. Inline tags are the tags that affect the text or display inline of the text. They only affect what is contained in the tag. Inline tags may contain other inline tags.
-
What is an attribute?
An attribute is additional instructions added to the beginning tag of the tag pair. It allows the user to be more specific and use different modifications of that tag. An attribute is present with a tag even if it is not in the code of the page. If an attribute of a tag is not coded on the web page then the browser will the attribute to the default. The default of an attribute is used unless different setting is instructed by the code of the web page. An attribute can be added to a tag by placing the attribute name separated by a space in the opening tag. An equal sign and value of the attribute follow the attribute name. The attribute value should be surrounded by quotes. It should look like <TAG attribute=value>.
-
-
Basic Structure of a web page
A web page consists of two divisions, the header and body. The header contains the server and behind the scenes information of a web page. This information consists of Meta information, the page title and scripting programs. The body is the part the web page that is displayed in a web browser's main window. The information contained in the body is the contents of the web page and the tags governing the content display.
Page tags are the tags that every web page must have. These tags are <HTML>, <HEAD>, <TITLE>, and <BODY>. Every web page must begin with <HTML> and end with </HTML>. These tags tell the web browser what the file is and how to display it. This tag pair contains all other tags of the web page. The <HEAD> tag pair denote the header section of the web page. The <TITLE> must be contained within the header of the web page. The title is the name of the web page and it is displayed in the blue line at the top of the web browser. Also, the title is the name that a bookmark will display if someone bookmarks the page. After the <HEAD> tag comes the <BODY>. The body tag pair denotes the body division of the web page. Everything in between this tag pair is displayed in the browser window. A proper web page will look as follows:
<HTML>
<HEAD>
<TITLE>What you want your title to be.</TITLE>
</HEAD>
<BODY>
Contents displayed in the web browser.
</BODY>
</HTML>-
Page tags
<HTML>
Requires closing tag.
Purpose: Lets the browser know that the file is an HTML document. Begins and ends the coding of a web page.
Attributes: None
<HEAD>
Requires closing tag.
Purpose: To denote the head section of a web document and contain the title.
Attributes: None
<TITLE>
Requires closing tag.
Purpose: Gives title to a web page. This title is text displayed in the blue line at the top of the browser. Also it is the text of the bookmark if the web page is bookmarked.
Attributes: None
<BODY>
Requires closing tag.
Purpose: To denote the body section of a web page. Contain the contents of a web page displayed in a web browser's main window.
Attributes: background- is the URL of an image file that becomes a tiling background. This image replaces the bgcolor as the background of the web page.
bgcolor- is the hexadecimal value color of the background of the page. Default is white or gray depending on the browser.
Text- is the hexadecimal value of the color of normal text of the page. Default is black.
Link- is the hexadecimal value of the color of unvisited links of a web page. Default is blue.
Vlink- is the hexadecimal value of the color of visited links of a web page. Default is purple
Alink-is the hexadecimal value of the color of links just clicked on. Default is red.
-
-
General tags
These are the tags that go between the opening <BODY> and closing </BODY> tags to tell the browser how to display the web document. This is not a complete list of HTML 4.0. It is meant as a reference to new web page developers. If you wish to learn more about HTML 4.0, there are many good books out on the market. It should be noted that when creating a web page, the browser ignores more than one space between words and thus renders many spaces as one space in the document. Also the browser ignores carriage returns except in the <PRE> tag. Each tag belongs to certain tag type and for further information refer to section 1-A of this document.
<A>
Requires closing tag.
Tag type: Inline.
Purpose: To provide an anchor to link to and to link to other sources on the web. This tag creates hyperlinks. The text it contains is underlined and made the hyperlink color of the page.
Attributes: name-provides a name that can be linked to so that another link can link to that specific point in the document.
Href- The URL that this link points to.
Example:This is the code that generates a link.
<A HREF="http://hsc.usf.edu/is/index.html"> This is a link to the Information Services homepage.</A>
This is what the code generates.
<B>
Requires closing tag.
Tag type: Inline
Purpose: To bold text that is contained within the tag pair.
Attributes: none
Example:This is the code that generates a bolded text.
<B> This is some bolded text.</B>
This is what the code generates.
This is some bolded text.
<BLOCKQUOTE>
Requires closing tag.
Tag type: Block
Purpose: To denote a block of text as a block of quoted text. This text is indented on both margins to denote that it is a citation.
Attributes: cite- A URL value of the source where the quote came from.
Example:This is the code of a block of quoted text.
This is text proceeding the blockquote.
<BLOCKQUOTE>The humans, I think, knew they were doomed. But where another race would surrender to despair, the humans fought back with even greater strength. They made the Minbari fight for every inch of space. In my life, I have never seen anything like it. They would weep, they would pray, they would say goodbye to their loved ones and then throw themselves without fear or hesitation at the very face of death itself. Never surrendering. No one who saw them fighting against the inevitable could help but be moved to tears by their courage... Their stubborn nobility. When they ran out of ships, they used guns. When they ran out of guns, they used knives and sticks and bare hands. They were magnificent. I only hope, that when it is my time, I may die with half as much dignity as I saw in their eyes at the end. They did this for two years. They never ran out of courage, but in the end...they ran out of time.
<BR> -Centauri Emperor: Londo Mollari- Babylon 5 Movie: In The Beginning</BLOCKQUOTE>
This is text after the block quote.This is what the code generates.
This is text proceeding the blockquote.
The humans, I think, knew they were doomed. But where another race would surrender to despair, the humans fought back with even greater strength. They made the Minbari fight for every inch of space. In my life, I have never seen anything like it. They would weep, they would pray, they would say goodbye to their loved ones and then throw themselves without fear or hesitation at the very face of death itself. Never surrendering. No one who saw them fighting against the inevitable could help but be moved to tears by their courage... Their stubborn nobility. When they ran out of ships, they used guns. When they ran out of guns, they used knives and sticks and bare hands. They were magnificent. I only hope, that when it is my time, I may die with half as much dignity as I saw in their eyes at the end. They did this for two years. They never ran out of courage, but in the end...they ran out of time.
-Centauri Emperor: Londo Mollari- Babylon 5 Movie: In The BeginningThis is text after the block quote.
<BR>
Does not require closing tag.
Tag type: Inline
Purpose: Acts as a carriage return within a paragraph or other block structure. It stops text at the current line and forces the browser to display what comes after the tag on the next line.
Attributes: clear- Will start the text on line just following after a floating block of text if that floating block is on the side of the value put in the attribute. The values for this attribute are left, right, all and none. The default value is none.
Example:This is the code that generates a line break.
<P> This is a paragraph full of line breaks.<BR>
A line break<BR> is an interesting thing. It acts a carriage return. That is what a line break<BR> does. </P>This is what the code generates.
This is a paragraph full of line breaks.
A line break
is an interesting thing. It acts a carriage return. That is what a line break
does.
<CENTER>
Requires closing tag.
Tag type: Structure
Purpose: To center all the content within the tag pair.
Attributes: none
Example:This is the code that generates centered text.
<CENTER>This is some centered text</CENTER>
This is what the code generates.
This is some centered text
<DL>
Requires closing tag.
Tag type: Structure
Purpose: This tag defines a definition list. This is a list used to display a glossary or dictionary. This pair defines the boundaries of the list. Putting the list elements <DT> and <DD> between the tag pair forms the definition list.
Attributes: None
Example:This is the code that generates a definition list.
<DL>
<DT>Definition Term
<DD>A definition term is a term that is being defined in a definition list.
<DT>Definition of Definition Term
<DD>This is the accompanying definition of a definition term in a definition list.
</DL>This is what the code generates.
- Definition Term
- A definition term is a term that is being defined in a definition list.
- Definition of Definition Term
- This is the accompanying definition of a definition term in a definition list.
<DT>
Does not require closing tag.
Tag type: Block
Purpose: This is the definition term tag. It defines what is being defined in a definition list. The word being described is put after the tag. Typically, this is the word being defined. For this tag to work it must be contained within a pair of <DL> tags. It is usually accompanied by the <DD> tag. This tag is terminated by another <DT> tag, a <DD> tag, a closing </DT> or the closing </DL> tag.
Attributes: None
Example: See the <DL> example.
<DD>
Does not require closing tag.
Tag type: Block
Purpose: This term definition tag. It is the definition to the preceding term of the <DT> tag contained in a definition list. The definition tag must be located between a pair of <DL> tags. This tag indents all the content following it. This tag is terminated by another <DD>tag, a <DT> tag, a closing </DD> or a closing </DL> tag.
Attributes: None
Example: See the <DL> example.
<DIV>
Requires closing tag.
Tag type: Structural
Purpose: This tag marks a division of the document. It is used to mark chapters or other logical divisions of the web page. It does not display its self on the web page unless the align attribute is used.
Attributes: align- this attribute has the values left, right, center. The default is left. This is justification of the text in relation to the browser window.
Example:This is the code that generates a right justified division.
<DIV ALIGN="RIGHT">This is the text in the division. </DIV>
This is what the code generates.
This is the text in the division.
<EM>
Requires closing tag.
Tag type: Inline
Purpose: This tag places emphasis on the content in between the tag pair. Typically this is displayed as italicized text.
Attributes: None
Example:This is the code that generates emphasized text.
<EM>This is the text that is emphasized.</EM>
This is what the code generates.
This is the text that is emphasized.
<FONT>
Requires closing tag.
Tag type: Inline
Purpose: This tag is used to control font styles, size, and color. This tag must have an attribute to function.
Attributes: Size- Determine the size of the font contained in between the tags. The value can be 1-7 or a relative size increase, such as +3, or decrease, such as -2. The base size for text is 3. Your relative sizes may not decrease or increase the size beyond the 1-7 size limit. Size 1 is the smallest size of font and size 7 is the largest size of font.
Color- This is the hexadecimal value of the color the text will be. The default is color of document text set by the body tag. This is normally black.
Face- This is a comma separated list of font names you wish the text to be displayed in.
Example:This is the code that generates different font types.
<FONT FACE="Arial" SIZE="4">This is text that is size four and in arial font.</FONT> <BR>
<FONT FACE="Courier" SIZE="-1">This is text that is size two and in courier font.</FONT> <BR>This is what the code generates.
This is text that is size four and in arial font.
This is text that is size two and in courier font.
<H1><H2><H3><H4><H5><H6>
Requires closing tag.
Tag type: Block
Purpose: These tags are the Header tags. You use these tags to title sections and mark the divisions. They are displayed with a line before and after them. Also, they bold the text and the size of the text varies with the number. <H1> is the largest text and <H6> is the smallest text.
Attributes: align- This is the justification of the text relative to the screen. The values are center, left and right. The default is left.
Example:This is the code that generates different header types.
<H1>This is a header one.</H1>
<H2>This is a header two.</H2>
<H3>This is a header three.</H3>
<H4>This is a header four.</H4>
<H5>This is a header five.</H5>
<H6>This is a header six.</H6>This is what the code generates.
This is a header one.
This is a header two.
This is a header three.
This is a header four.
This is a header five.
This is a header six.
<HR>
Does not require closing tag.
Tag type: Block
Purpose: This tag puts a horizontal rule on the page. Basically, this is a line that divides the page.
Attributes: width- The length in percentage or pixels of the line. If using percent make sure the % sign follows a number 1-100. The default value is 100%
Align- the justification of the line compared to the screen. The values are left, right and center. The default is Center.
Example:This is the code that generates a horizontal rule.
<P>This is a paragraph before the horizontal rule.</P>
<HR>
<P>This is a paragraph after the horizontal rule.</P>This is what the code generates.
This is a paragraph before the horizontal rule.
This is a paragraph after the horizontal rule.
<I>
Requires closing tag.
Tag type: Inline
Purpose: This tag italicizes the text that it contains.
Attributes: None
Example:This is the code that generates italicized text.
<I>This is the text that is italicized.</I>
This is what the code generates.
This is the text that is italicized.
<LI>
Does not require closing tag.
Tag type: Block
Purpose: the tag denotes one item in a ordered or unordered list. It must be between a pair of <OL> or <UL> tags to function. It is displayed as indented with a bullet, letter or number of the list.
Attributes: Value- This sets the value of the number or letter of the item that will be displayed with this list item for an ordered list. This attribute will only be used for an list item of an ordered list.
Type- This sets the style of the list item. The values are different for the ordered lists and unordered lists. For unordered lists the values are disc, square, and circle. The default is disc. For ordered lists the values are 1 (for numbers), a (for lower case letters), A (for upper case letters), i (for lower roman numerals), and I (for upper roman numerals). The default is numbers.
Example: See the <OL> and <UL> examples.
<P>
Requires closing tag.
Tag type: Block
Purpose: This tag pair encapsulates a single paragraph. It displays the paragraph with one line before and one line after as separators.
Attributes: align- this justifies the paragraph to the screen. The values are right, left, or center.
Example:This is the code that generates three different paragraphs.
<P>This is paragraph one.</P>
<P>This is paragraph two.</P>
<P>This is paragraph three.</P>This is what the code generates.
This is paragraph one.
This is paragraph two.
This is paragraph three.
<PRE>
Requires closing tag.
Tag type: Block
Purpose: This tag is for formatting text exactly as it is typed. Any thing between this tag pair will appear on the web document exactly as typed. It is used when formatting is critical.
Attributes: None
Example:This is the code that generates preformatted text paragraphs.
<PRE> This is preformatted text it allows what is typed to appear exactly as it was typed </PRE>This is what the code generates.
This is preformatted text it allows what is typed to appear exactly as it was typed
<STRONG>
Requires closing tag.
Tag type: Inline
Purpose: This tag denotes text needing strong emphasis placed on it. It is usually displayed as bolded text.
Attributes: None
Example:This is the code that generates strongly emphasized text.
<STRONG>This is the text that is strongly emphasized.</STRONG>
This is what the code generates.
This is the text that is strongly emphasized.
<OL>
Requires closing tag.
Tag type: structure
Purpose: This tag denotes an ordered list. It contains <LI> tags so that the list will display properly. The <OL> displays the list by separating itself with blank lines from the other text.
Attributes. Type- This sets the style of the list items. The values are 1 (for numbers), a (for lower case letters), A (for upper case letters), i (for lower roman numerals), and I (for upper roman numerals). The default is numbers.
Start- This sets the value of the number or letter of the item that will be displayed with this list item for an ordered list.
Example:This is the code that generates an ordered list and an alphabetical ordered list.
<OL>
<LI>This is the first list item.
<LI>This is the second list item.
<LI>This is the third list item.
</OL>
<OL TYPE="A">
<LI>This is the first list item.
<LI>This is the second list item.
<LI>This is the third list item.
</OL>This is what the code generates.
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the first list item.
- This is the second list item.
- This is the third list item.
<UL>
Requires closing tag.
Tag type: structure
Purpose: This tag denotes an unordered list. It contains <LI> tags so that the list will display properly. The <UL> displays the list by separating itself with blank lines from the other text.
Attributes: Type- This sets the style of the list items. For unordered lists the values are disc, square, and circle. The default is disc.
Example:This is the code that generates two types of unordered lists.
<UL>
<LI>This is the first list item.
<LI>This is the second list item.
<LI>This is the third list item.
</UL>
<UL TYPE="CIRCLE">
<LI>This is the first list item.
<LI>This is the second list item.
<LI>This is the third list item.
</UL>This is what the code generates.
- This is the first list item.
- This is the second list item.
- This is the third list item.
- This is the first list item.
- This is the second list item.
- This is the third list item.
<IMG>
Does not require closing tag.
Tag type: Inline
Purpose: This tag is used to import images into a web document. This task is accomplished by linking to the image file using the image tag.
Attributes: SRC- This is the URL of image file to display on the web page.
ALT- text that will be displayed if a browser does not load the image
Align- The possible values are left, right, top, middle and bottom. Left and right set the image floating on the left or right of the screen and all the text will wrap around the image. Top, middle and bottom tell where the line of text will appear next to the inline image.
Example:This is the code that generates two graphics.
<P>
<IMG SRC="images/codehtml_test.gif" ALIGN="TOP">This text aligned the top to the graphic.
</P>
<P>
<IMG SRC="images/codehtml_test.gif" ALIGN="BOTTOM">This text aligned the bottom to the graphic.
</P>This is what the code generates.
This text aligned the top to the graphic. This text aligned the bottom to the graphic. -
How color works
Many web authors like to add color to their web pages. Color can be added to a web page using hexadecimal code in attributes that modify color. Hexadecimal code is a base 16 numbering system to represent color value. A color value is its mixture of the primary colors red, green and blue. Hexadecimal digits go from 0-F with A through F representing 10-15. Just like base 10 numbers, which is the decimal system people use normally, the second number represents multiple of the first. The second digit is multiplied by sixteen. You can transfer the following numbers in base 16 to base 10.
Base 16 The conversion Base 10 22 (2×16)+2 34 A3 (10×16)+3 163 BF (11×16)+15 191 0C (0×16)+12 12 To form a color you mix the three to two-digit hexadecimal values to make the color. The first number represents the amount of red. The next number is the amount of green and the last number represents the amount of blue. So a hexadecimal value for a color would look like "A3F5CC". This would be the color that is the mixture of 163 red, 245 green and 154 blue. The colors go least amount at 00 to full at FF. This is a range of 0-255. White is FFFFFF and black is 000000. You can find the hexadecimal values for many different colors on the web.
Here are some sites that give you hexadecimal values for colors.
-
Special Characters
Sometimes there is a need for symbols that are part of HTML or not on the keyboard to be in a web document. To put these special characters in a document you will need to type the code for the symbol or the symbol name. This code may take multiple space in the code but will only take up one space on the display. This is a listing of symbols and codes to help put in these special characters. This is not an exhaustive list.
Here is an example.
This is code with a special symbol.
Copyright © <a href="http://www.usf.edu">University of South Florida</a>
This is what the code generates.
Copyright © University of South Florida
Description Code Entity name =================================== ============ ============== quotation mark " --> " " --> " ampersand & --> & & --> & less-than sign < --> < < --> < greater-than sign > --> > > --> > Description Char Code Entity name =================================== ==== ============ ============== non-breaking space   --> --> inverted exclamation ¡ ¡ --> ¡ ¡ --> ¡ cent sign ¢ ¢ --> ¢ ¢ --> ¢ pound sterling £ £ --> £ £ --> £ general currency sign ¤ ¤ --> ¤ ¤ --> ¤ yen sign ¥ ¥ --> ¥ ¥ --> ¥ broken vertical bar ¦ ¦ --> ¦ ¦ --> ¦ &brkbar; --> &brkbar; section sign § § --> § § --> § umlaut (dieresis) ¨ ¨ --> ¨ ¨ --> ¨ ¨ --> ¨ copyright © © --> © © --> © feminine ordinal ª ª --> ª ª --> ª left angle quote, guillemotleft « « --> « « --> « not sign ¬ ¬ --> ¬ ¬ --> ¬ soft hyphen ­ --> ­ --> registered trademark ® ® --> ® ® --> ® macron accent ¯ ¯ --> ¯ ¯ --> ¯ &hibar; --> &hibar; degree sign ° ° --> ° ° --> ° plus or minus ± ± --> ± ± --> ± superscript two ² ² --> ² ² --> ² superscript three ³ ³ --> ³ ³ --> ³ acute accent ´ ´ --> ´ ´ --> ´ micro sign µ µ --> µ µ --> µ paragraph sign ¶ ¶ --> ¶ ¶ --> ¶ middle dot · · --> · · --> · cedilla ¸ ¸ --> ¸ ¸ --> ¸ superscript one ¹ ¹ --> ¹ ¹ --> ¹ masculine ordinal º º --> º º --> º right angle quote, guillemotright » » --> » » --> » fraction one-fourth ¼ ¼ --> ¼ ¼ --> ¼ fraction one-half ½ ½ --> ½ ½ --> ½ fraction three-fourths ¾ ¾ --> ¾ ¾ --> ¾ inverted question mark ¿ ¿ --> ¿ ¿ --> ¿ capital A, grave accent À À --> À À --> À capital A, acute accent Á Á --> Á Á --> Á capital A, circumflex accent   -->   -->  capital A, tilde à à --> à à --> à capital A, dieresis or umlaut mark Ä Ä --> Ä Ä --> Ä capital A, ring Å Å --> Å Å --> Å capital AE diphthong (ligature) Æ Æ --> Æ Æ --> Æ capital C, cedilla Ç Ç --> Ç Ç --> Ç capital E, grave accent È È --> È È --> È capital E, acute accent É É --> É É --> É capital E, circumflex accent Ê Ê --> Ê Ê --> Ê capital E, dieresis or umlaut mark Ë Ë --> Ë Ë --> Ë capital I, grave accent Ì Ì --> Ì Ì --> Ì capital I, acute accent Í Í --> Í Í --> Í capital I, circumflex accent Î Î --> Î Î --> Î capital I, dieresis or umlaut mark Ï Ï --> Ï Ï --> Ï capital Eth, Icelandic Ð Ð --> Ð Ð --> Ð Đ --> Đ capital N, tilde Ñ Ñ --> Ñ Ñ --> Ñ capital O, grave accent Ò Ò --> Ò Ò --> Ò capital O, acute accent Ó Ó --> Ó Ó --> Ó capital O, circumflex accent Ô Ô --> Ô Ô --> Ô capital O, tilde Õ Õ --> Õ Õ --> Õ capital O, dieresis or umlaut mark Ö Ö --> Ö Ö --> Ö multiply sign × × --> × × --> × capital O, slash Ø Ø --> Ø Ø --> Ø capital U, grave accent Ù Ù --> Ù Ù --> Ù capital U, acute accent Ú Ú --> Ú Ú --> Ú capital U, circumflex accent Û Û --> Û Û --> Û capital U, dieresis or umlaut mark Ü Ü --> Ü Ü --> Ü capital Y, acute accent Ý Ý --> Ý Ý --> Ý capital THORN, Icelandic Þ Þ --> Þ Þ --> Þ small sharp s, German (sz ligature) ß ß --> ß ß --> ß small a, grave accent à à --> à à --> à small a, acute accent á á --> á á --> á small a, circumflex accent â â --> â â --> â small a, tilde ã ã --> ã ã --> ã small a, dieresis or umlaut mark ä ä --> ä ä --> ä small a, ring å å --> å å --> å small ae diphthong (ligature) æ æ --> æ æ --> æ small c, cedilla ç ç --> ç ç --> ç small e, grave accent è è --> è è --> è small e, acute accent é é --> é é --> é small e, circumflex accent ê ê --> ê ê --> ê small e, dieresis or umlaut mark ë ë --> ë ë --> ë small i, grave accent ì ì --> ì ì --> ì small i, acute accent í í --> í í --> í small i, circumflex accent î î --> î î --> î small i, dieresis or umlaut mark ï ï --> ï ï --> ï small eth, Icelandic ð ð --> ð ð --> ð small n, tilde ñ ñ --> ñ ñ --> ñ small o, grave accent ò ò --> ò ò --> ò small o, acute accent ó ó --> ó ó --> ó small o, circumflex accent ô ô --> ô ô --> ô small o, tilde õ õ --> õ õ --> õ small o, dieresis or umlaut mark ö ö --> ö ö --> ö division sign ÷ ÷ --> ÷ ÷ --> ÷ small o, slash ø ø --> ø ø --> ø small u, grave accent ù ù --> ù ù --> ù small u, acute accent ú ú --> ú ú --> ú small u, circumflex accent û û --> û û --> û small u, dieresis or umlaut mark ü ü --> ü ü --> ü small y, acute accent ý ý --> ý ý --> ý small thorn, Icelandic þ þ --> þ þ --> þ small y, dieresis or umlaut mark ÿ ÿ --> ÿ ÿ --> ÿ -
Linking in web pages
The World Wide Web is made by the linking of web pages. Hypertext is created by the links to other sources on the Internet. There are two tags that create links to other sources.: <IMG> and <A>. The <IMG> tag links to an image file that is displayed on the web page. The <A> (anchor) tag links to other documents or other anchors in the same document. Links to another part of the same document are called internal links.
To link to a document in the HREF or SRC attributes a URL is put as the value to these attributes. The value can be an absolute URL, such as http://www.hsc.med.usf.edu/is, or relative URL, such as /is/index.html.
The relative link uses the current web page's URL as the base to link to another document on the same computer. So to link to another web page that is in the same directory; all that would have to be typed would be "page2.html". The directory of the computer can be navigated easily if it is known. To move down a directory in the relative link, type the name of the directory followed by a forward slash (/) and the name of the file. Example: "direcotrydown/page2.html". To move up a directory you need to type two periods together followed by forward slash and the file name. Example: "../page2.html". If your web pages are on the same computer then it is recommended that use relative URL's to link those pages.
Written By Kenneth Fly, HSC IS Webmaster April 1998