|
nicoletast89
Administrator
Inregistrat: acum 20 ani
Postari: 104
|
|
Learning HTML
Introduction
HTML (Hypertext Mark-up Language) is the primary language for formatting web pages. With HTML you describe what a page should look like, what types of fonts to use, what color text should be, where paragraph marks come and many more aspects of the document.
It is the job of the browser that requests the HTML file to format the page according to the various tags included in the HTML. Because there are so many different vendors of browsers, and each vendor has their own way of interpreting what a HTML tag should accomplish, a web page will look different in different browsers.
For instance, Lynx (A Popular Unix Based Browser) which only displays text for a web page will not have the capabilities to display many of the graphical features of a web page such as images, forms, tables, etc. - This doesn't mean Lynx is a bad browser, rather it means it was designed to operate a particular way on a particular platform.
All HTML documents are created by using a tags. Tags have beginning and ending identifiers to communicate to the browser the beginning and ending text that is to be formatted by the tag in question. There are some tags that do not have an ending tag for reasons that are obvious when used. This will become apparent as you become more familiar with HTML.
Most of the tags have an opening and a closing tag (you will become more familiar with this concept in this document). Each tag is enclosed with the "less than" (i.e. < and "greater than" (i.e. > sign. The closing tag usually looks the exact same as the opening tag with the exception of the "forward slash" (i.e. /) that identifies it is a closing tag.
The following are example's of tags that will be discussed further:
<p> </p>
<b> </b>
<i> </i>
In some instances, an opening tag may have property values which can "optionally" be set to further define what the tag is to accomplish. The Following is an example of a paragraph tag whereby alignment of the paragraph has been defined as Left Justified:
<p align="left">
2K Communications recommends using the Netscape® Navigator® Browser, or the Microsoft® Internet Explorer® web browser. These two browsers are HTTP 1.1 compliant, and have been keeping up to date with the latest HTML specifications, including the HTML 3.0 proposed specifications. This is not to say that other browsers are not up to standards, rather simply to comment these are known to be.
There are many web authoring tools to help you create your web pages. Netscape's Communicator Package, Microsoft FrontPage® 98, NetObjects Fusion are probably the easiest to use. There are many others web authoring tools on the market. Of course you can simply type the HTML tags into a document using your favorite word processor, and save it as a text file, and this document will show you how to do it.
Let's Proceed with Learning how to Publish HTML and Forms:
Beginning and Ending Tags
Every HTML document must be identified with beginning and ending tags. These tags tell the web browser where to start processing the HTML document for formatting, and when to stop.
Various tags that will be discussed include the Meta Tags, Background Tags (Used for setting Document, Color, Background Color/Image) as well as the Body tag as well as how to get the most out of them.
This section describes the basic components of the HTML Document, and what each of these tags mean.
Starting and Ending an HTML Document
Each HTML document must start with the HTML tag. This is a simple tag that communicates to the server, and the browser that this is "the beginning of an HTML document. This tag should be the first tag to appear within an HTML document with the exception to comments which may be placed anywhere in the document.
The HTML tag also has an associated ending tag which is identified at the end of the document. The Closing HTML tag communicates to the server, and to the browsers that the end of an HTML document has been reached.
The closing HTML tag must be the last tag in the document. The following is an example of the beginning and ending HTML tag (Shown in Red Letters).
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
There are no property settings for the Beginning and Ending HTML Tags
Each HTML document must start with the HTML tag. This is a simple tag that communicates to the server, and the browser that this is "the beginning of an HTML document. This tag should be the first tag to appear within an HTML document with the exception to comments which may be placed anywhere in the document.
The HTML tag also has an associated ending tag which is identified at the end of the document. The Closing HTML tag communicates to the server, and to the browsers that the end of an HTML document has been reached.
The closing HTML tag must be the last tag in the document. The following is an example of the beginning and ending HTML tag (Shown in Red Letters).
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
There are no property settings for the Beginning and Ending HTML Tags
Heading and Title Tags
The Heading tag is used to identify the start of information that applies to the document as a whole. Consider it to be similar to be a synopsis of what may be found within a good novel. Between the Opening
The title tag is used to give a title to your web page. Many browsers use the information displayed between the opening and closing title tag to place bookmarks, or display the name of the web page in the Window title of the browser (Windows based browsers).
In addition, many Robot (Spider) Search engines use the title tag to add a web site to their database, and use the text between the title tag as the title that will be displayed in their search engine. As you can see, careful naming of the title is important.
The following shows the title tag with a title identified between the opening and closing tag.
<html>
<head>
<title>This is the Title of my Web Page</title>
</head>
<body>
</body>
</html>
Note that the title tag's appear between an opening and closing heading tag. The <head> tag identifies the beginning of heading information. It has an associated closing tag of </head>. The heading opening and closing tag must come before the Body tag.
Meta Tags(Author, Description and Keywords)
Meta tags are used to communicate information about the web page. There are several different meta tags that are used for various purposes. We will discuss three meta tags in this document: The author, description, and keyword meta tags.
Meta tags do not have a closing tag, like most other tags. This is because the meta tag doesn't describe, or cause formatting to the text in a document. Rather it describes information about the document, or information that causes the browser to perform an action on a document.
The author meta tag is used to indicate who the author of the web page is.
The description meta tag has an important use when it comes to some search engines. There are many search engines that will index your site automatically. Some of these search engines allow for a short description to be placed in their web page. If the search engines is looking in your web page for a description meta tag, it will use this description in the search index.
The keyword meta tag has another important use when it comes to some search engines. When these auto robot search engines index your site, some will look for a keyword meta tag to use as index words. When someone uses their search engine and searches on a word that is in your keyword meta tame list, your site will be included in the output search results.
Each keyword should be separated by a comma. Capitalization is not important in the keyword meta tag.
These meta tags are not required in your document, and should only be used if you wish to help out the search engines or provide comments. The following example shows how these tags are coded:
<html>
<head>
<title>This is the Title of my Web Page</title>
<meta name="Author" content="Your name goes here">
<meta name="Description" content="My site is one of the best">
<meta name="Keywords" content="host,my,site,personal,web,page">
</head>
<body>
</body>
</html>
Many Meta Tags are useful for many different purposes. Meta Tags became a Catch-all for identifying information with no particular purpose (with exception to a very few select meta tags.
Many vendors of software that generates HTML will make use of their own custom Meta Tags to identify different pieces of information about the document. In these cases, the meta tags are only useful to that particular software.
Too many meta tags can be detrimental to your site being indexed appropriately by the Search Engines. Use Meta Tags Sparingly.
Body Tags
The body tag is used to identify the beginning of the main portion of your web page. All of the web page will be designed between the opening and closing body tag.
Between these two tags you will place all images, image maps, links, text, paragraphs, and forms. In the following example, I have placed one paragraph of text between the body tags.
<html>
<head>
<title>This is the Title of my Web Page</title>
</head>
<body>
This is a paragraph between the body tags, to provide an example of
what the text should look like!
</body>
</html>
Background Image
The parameter on the body tag that is used to identify a background image is, just like Background Colors, not an HTML 2.0 standard specification. The Background Image will replace the background color if the image loads successfully. If not, the background color is the color that will be used as a background to your web page. In addition, the background color will be set and used while the background image is loading.
The following modification to the <body> tag identifies a background image to be loaded. The example shows the Absolute URL:
<body text="#00FFFF" bgcolor="#000000" link="#FFFF00" vlink="#FF0000"
background="http://www.yourdomain.com/yourdirectory/background.gif">
In the example I just provided I included the complete URL. This is not necessary with 2K Communications Accounts. You can include the Parameter as a relative link, so long as the image file resides in the same directory as the HTML document that is referencing the image. The following shows the same URL as a relative link.
<body text="#00FFFF" bgcolor="#000000" link="#FFFF00" vlink="#FF0000"
background="background.gif">
Starting a Paragraph in HTML
Simply having a new line in your text file will not provide a new paragraph or new line. When a browser views the HTML, it actually appends each line together before processing the file. It also removes extra spaces. Let me append this to the last statement, Not all browsers follow appropriate standards. For instance one specific browser ignores the embedded code which means to insert a non-breaking space. The particular browser that I am speaking of actually displays this embedded code in the web page. If you see things like this in your web pages you access please don't blame those who created the web page, rather contact the vendor of your browser, or maybe even stop using that browser.
Back to starting a new paragraph. There are a few ways to start a new paragraph. There are also some formatting parameters to some of these tags as will be explained.
New Paragraph
To Begin a New Paragraph the <p> opening tag and </p> ending tags are used. these Paragraph tags also have parameters as part of the tag. These parameters allow you to Left Justify, Center, or Right Justify the text on the web page. Most web browsers have started supporting the parameter to the <p> tags, however, not all browser support them.
The following HTML paragraph tag allows for the left Justification of the paragraph. Please note that if the parameter is omitted, it will be defaulted to left justification. I provide it here for documentation purposes only!
<p ALIGN="left">This Paragraph will be Left Justified</p>
The following HTML paragraph tag allows for the Centering of a particular paragraph.
<p ALIGN="center">This Paragraph will be Centered on the Web Page</p>
The following HTML paragraph tag allows for the Right Justification of the Paragraph
<p ALIGN="right">This Paragraph will be Right Justified on the Web Page</p>
There is a Netscape extension tag that is used to center text. Some of the browser's that do not support the parameters on the Paragraph tag will support the extension <center> and </center> tags. For this reason, I try to make a habit of placing these tags around the Paragraph tags. Take a look at the following example:
<center><p ALIGN="center">This Paragraph will be Centered on the Web Page</p></center>
Line Breaks
One of the features of the paragraph tag is an extra line will be places between paragraphs for each paragraph tag use. The line break tag is used to indicate when to split a paragraph onto different lines. No Extra line will be placed between the text.
The line break tag does not have a closing tag. It simply has an opening tag of <br>. The following example is the previous example with a line break in the middle of the text.
<center><p ALIGN="center">This Paragraph will be <br>
Centered on the Web Page</p></center>
The following is an example of the above HTML Code:
This Paragraph will be
Centered on the Web Page
Unordered Lists
Un Ordered Lists present a list of items in a format that shows a bullet next to each item in the list. Take a look at the following example:
• List Item 1
• List Item 2
• List Item 3
The code for this is as follows:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
You can indent paragraphs by using the <ul></ul> tags. For instance the following paragraph will be indented one level:
<p><ul>This paragraph will be indented one level.</ul></p>
<p><ul><ul>This paragraph will be indented two levels</ul></ul></p>
<p><ul><ul><ul>This paragraph will be indented three levels</ul></ul></ul></p>
The Unordered lists really do not have anything to do with starting a paragraph, however it does relate to indenting paragraphs or creating a bulleted list (if no list item tags are used) so we have placed this under this heading.
Text Formats in HTML
There may be times when a special effect to text is desired. Such as bolded text, or italicized text, or larger text for titles. You can define super-script text, sub-script text. Maybe you want a certain piece of text to blink. Even colors may be defined for any piece of text. The flexibility is quite enormous.
This section describes the various HTML tags that are used to apply these different formats to text. Again, each of the tags discussed will have and opening tag, and a closing tag.
In order to facilitate the ease of this section, the following HTML will be used during this discussion.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<h1>This text is displayed with Heading #1</h1>
<p><i>This text is displayed as being italicized</i></p>
<p><b>This text is displayed as being in Bold</b></p>
<p><b><i>This text is displayed as being in Bold and Italicized</i></b></p>
<p>This <sup>word</sup> is Super-Script</p>
<p>This <sub>word</sub> is Sub-Script</p>
<p>This <strike>word</strike> is formatted with Strike-through</p>
<p>This <blink>word</blink> is Blinking</p>
<p><font COLOR="#00FF00">This text is in the color of Green</font></p>
</body>
</html>
Bold Text
To apply the BOLD format to text in your web page, you need to use the opening and closing Bold tags. These tags are <b>
to open the bold, and </b> to close the bold. The following example shows the Bold tags in green text
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><b>This text is displayed as Bold</b></p>
</body>
</html>
Underlined Text
This tag is represented by starting the text to be underlined with a <u> tag, and where the underlining is to stop, place a </u> tag.
Be aware that most browser underline the text that is part of a link, and using this tag could confuse a visitor to your web page as to whether the text is a link or not. I recommend using this tag sparingly.
The following example shows the use of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><u>This text is displayed as being underlined</u></p>
</body>
</html>
Italicized Text
The tags to format text to be Italicized are <i> and </i>. These tags can also be nested as you can see in the following example where each Italicized opening and closing tag have been defined as being green.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><i>This text is displayed as italicized</i></p>
<p><b><i>This text is displayed as Bold and Italicized</i></b></p>
</body>
</html>
Notice in the above example how we were able to make the Text Italicized and Bold. This is done by embedding one tag inside of another. First we set the Bold Tag, then we set the italicized tag inside the Bold Tag. This provides the results of both Bold and Italicized Text. You could continue to embed other text attribute tags within these, such as the Underline tag:
<p><b><i><u>This text is displayed as Bold, Italicized and Underlined<u></i></b></p>
Superscript
The opening and closing tags are <sup> and </sup>. These tags can also be nested within other tags (such as Bold, Italicized, Underline, etc. In the following example the super-script tags are shown in Pink text.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <sup>word</sup> is Super-Script</p>
</body>
</html>
Subscript
The tags to format text to be shown in Sub-Script are <sub> and </sub>. These tags can also be nested. In the following example the sub-script tags are shown in pink text.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <sub>word</sub> is Sub-Script</p>
</body>
</html>
Strikethrough
The tags to format text to be shown in Strike-Through are <strike> and </strike>. These tags can also be nested. In the following example the Strike-Through tags are shown in Pink text.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <strike>word</strike> is formatted with Strike-through</p>
</body>
</html>
Netscape Browsers also supports the <s> and </s> tags which do the same thing as the <strike> and </strike> tags, however, since not all browsers support the <s> and </s> tags, it is wise to stick with the standard when you are coding your HTML documents.
Strong
Strong is typically used emphasize a word, phrase or sentence. The effect is similar to Bold text. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><strong>This text is Emphasized</strong></p>
</body>
</html>
Blink
The tags to format text to be shown in Blinking format are <blink> and </blink>. These tags can also be nested. In the following example the Blink tags are shown in Pink text.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <blink>word</blink> is Blinking</p>
</body>
</html>
Citations
Citations are used for titles of books, magazines, movies, etc. The effect of the citation Tags (<cite> and </cite> is the same as Italics. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p> <cite>This is the Title of a Book</cite></p>
</body>
</html>
Samples Fixed Format Text
Samples are used for providing an example (or sample) of a literal. Formatting is removed and the text is displayed exactly in a Fixed font Format (similar to a typewrite font). The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p> <samp>This Text is in Fixed Font Format</samp></p>
</body>
</html>
Definitions
Definitions are to define a word. It will display in Italics in most browsers. There are a few browser which do not display in Italics. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>This <dfn>Word</dfn> is being Defined</p>
</body>
</html>
Code
Code is used for Computer Code Examples. If you have an example of a program you need to place on a web page, enclose it between the <code> and </code> tags. The Effect will be a fixed width font. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>Example Program Code<code>#!/usr/bin/perl</code></p>
</body>
</html>
Variable
Variable is typically used when an example is provided and a piece of the example should be replaced. For instance "telnet filename" The effect is different in different browsers. Typically values between the <var> and the </var> tag are shown as italicized text. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p>Telnet<var>filename</var></p>
</body>
</html>
Typewrite
Typewrite style provides a Fixed Width Font Effect. The following is an example of the usage of this tag:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><tt>This text will be a Fixed Width Font</tt></p>
</body>
</html>
Text Color
Another feature of the HTML language is the ability to apply color to text. Again the browser must be able to support this feature or it will either ignore the tags, or display the tags as text.
The following is an example of specify a particular piece of text in the color green.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<p><font COLOR="#00FF00">This text is Green</font></p>
</body>
</html>
As you can see this was accomplished with the use of the <font> tag, and the closing tag is the </font> tag. COLOR is a parameter to the <font> tag. It is used to identify the color that is to be used to display the text that is between the opening and closing Font Tag.
The following is an example of some of the COLOR codes (Hexadecimal Codes) that will be used with the COLOR parameter in a <font> tag.
Color Color Code
Red #FF0000
Turquoise #00FFFF
Light Blue #0000FF
Dark Blue #0000A0
Light Purple #FF0080
Dark Purple #800080
Yellow #FFFF00
Pastel Green #00FF00
Pink #FF00FF
Color Color Code
White #FFFFFF
Light Grey #FFFFCC
Dark Grey #808080
Black #000000
Orange #FF8040
Brown #804000
Burgundy #800000
Forest Green #808000
Grass Green #408080
Text Size and Fonts
Font Sizes, and Styles are not readily available in the HTML 2.0 specifications. A Font typestyle and Font size may make it into the HTML 3.0 specifications. Here we identify how you can make different text appear in different sizes.
The HTML tags to change the size of text include:
<h1>Heading Size 1 - This is the Largest Size</h1>
<h2>Heading Size 2 - Not quite as Large as Heading Size 1</h2>
<h3>Heading Size 3 - A Little Smaller than Heading Size 2</h3>
<h4>Heading Size 4 - A Little Smaller than Heading Size 3</h4>
<h5>Heading Size 5 - A Little Larger than the Smallest Heading Size</h5>
<h6>Heading Size 6 - The Smallest Heading Size</h6>
The following is the example HTML file with the heading codes in Pink.
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<h1>This text is displayed with Heading #1</h1>
</body>
</html>
Additionally you may specify a Font Tag which identifies to the browser which font to use for the text. NOTE: The font must be available on the users computer or the default font defined for the browser will be used. In the future, we hope fonts will be a downloadable object that can be embedded into the web page. Until then, it is best to stick with the basic fonts available.
The following is an example of setting the font type and size of font:
<html>
<head>
<title>Example of Formatting Text</title>
</head>
<body>
<font face="arial" size=1>This text is displayed with different font</font>
</body>
</html>
Notice in the above example, the font face is set to Arial. All Windows Computers are shipped with the Arial Font Pre-Loaded. It's a good bet that Arial will be available on the users Computer. A secondary, and even a tertiary font may also be defined in case the primary font is N/A. Simply add the fonts in a comma separated list as in the following example:
<font face="arial,helvetica,courier" size=1>Multiple Font Faces</font>
In the above example, if the Arial font is not found on the users computer, the Helvetica font will be used. If the Helvetica font is not found, the courier font will be used. Lastly, if the courier font is not found, the browsers default font will be used. There is no limit to the number of fonts you may place, however we recommend limiting it to two or three at the most.
Links, Images and Audio
Links to Other Pages, Graphics on your web page and sound all add to the effectiveness of a web site. The following will provide you with more details on how to code these HTML tags:
Standard HREF Links
The <a> and </a> tags are used to create links from one web page to another. The following is an example of a link to 2K Communications:
<a HREF="http://www.2kweb.net">This links to 2K Communications</a>
As you can see there is a parameter in this example named HREF. The value assigned to the HREF parameter indicates the URL that will be used for navigation when a person clicks on the text associated with the Link.
The associated text is the text after the <a HREF="..."> and the </a> tags.
To create a link that can be clicked on to start up the mail program associated with the browser, use the following link. Notice there is not a whole lot that is different from linking with the mailto: option and the http option.
<a HREF="mailto: ">Click here to e-mail our Sales Department</a>
Targets and Anchors as Links
A Target or sometimes called an anchor is a placeholder within an HTML document that may be used for linking. Rather than link to another document, you are simply creating a link within the same document.
Defining a target is quite simple. Instead of using the <A HREF> tag, you use a different parameter in the <A> tag so that the tag is a name tag (i.e. <A NAME=" "> - Take the following example where a target is defined as being "target":
<a NAME="target"></a>
After Defining the target, you can then link to that target. The following shows the code that links to the target we just defined:
<a HREF="#target">This is the text that is the link</a>
<a NAME="target"></a>
Notice the <a HREF> tag has a pound sign (i.e. #) before the name of the target
It tells the browser to look for a target rather than a URL
Let's get creative. Let's say in Document A you want to create a link to a target that resides in Document B. The URL for Document B is - within Document B is the following tag about 5 screens down on the page
<a NAME="target"></a>
In Document A, you create a link to that Target (anchor) by adding the following line:
<a HREF="http://yourdomain.com/index.html#target">Click here to go there</a>
Notice you simply appended the #target onto the end of the URL. This tells the browser to first retrieve the document found at and then after retrieving the document position the document to the target (anchor) #target
Adding an Image/Audio File
Images may be added to your web page as easily as links. The <img> tag is used to define an image. This tag does not have a closing tag. However, there are parameters defined for this tag. The following example adds an image to a Web Page:
<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't load">
The alt parameter is used to define a piece of text to be displayed for when the browser doesn't successfully load the image. This can happen if there is a problem with the internet traffic, or if one of the connections between the server and the client (browser) gets broken, or if the web surfer clicked on the stop button to stop loading the image.
In the previous example, I used the complete URL to the image file, however relative URL's can be used if the image file is stored in the same directory on the same server as the HTML document that executed the call to retrieve the Image file.
You can also specify the justification (i.e. Alignment) parameter as in the following example which will center the image (Remember to also use the <center> and </center> tags for those browsers that don't support the justification parameter in the <img> tag.
<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't load" ALIGN="center">
You can also right justify the image by simply using the value of "right" for the ALIGN parameter as in the following example:
<img src="http://www.2kweb.net/image-file.gif" alt="Text that displays if image doesn't load" ALIGN="right">
Client Side Image Maps
One of the main draw backs of the current ability to create image maps is the processing of the map coordinates resides on the server. Not only is this an in-efficient use of the server resources, but it is oftentimes cumbersome and the ability to create image maps is often times out of reach of the end users.
The use of client side image maps allows the coordinates for an image map to be placed within the HTML code, and places the burden of processing these coordinates on the browser, and thus making more efficient use of the distributed processing of server vs. client.
This section describes how to define client side image maps (currently only supported by Netscape® 2.x and Microsoft® Internet Explorer® 3.x browsers (There may be other browsers that support this feature, however I am not aware of them at the time of this writing))
A new attribute is defined oft he <IMG> tag as shown in the following example:
<img src="name-of-gif-file.gif" usemap="#map-name-goes-here">
The usemap tag is a pointer to a <map></map> tag location also to reside in the same HTML document. The following is an example of the <map></map> tags and the area coordinates defined within the <map> </map> tags.
<map NAME="map-name-goes-here">
<area coords="83,68 162,116" href="http://www.domain.com/dira/">
<area coords="172,67 273,115" href="http://www.domain.com/dirb/">
<area coords="280,67 377,116" href="http://www.domain.com/dirc/">
<area coords="23,120 95,166" href="http://www.domain.com/dird/">
<area coords="108,120 185,167" href="http://www.domain.com/dire/">
<area coords="195,120 302,166" href="http://www.domain.com/dirf/">
<area coords="310,119 375,166" href="http://www.domain.com/dirg/">
</map>
Notice the NAME attribute within the <map> tag directly relates to the USEMAP attribute defined in the <IMG> tag. - This is all there is to defining a client side image map. To create the coordinates, you will want to use a piece of software that will generate the coordinates for you.
In order to support both the Client side image map implementation and the server side
Embedding Midi/Wav Files
Midi Files and Wave Files may be embedded and automatically played when a user hits your web site using a couple of methods (again dependent upon the browser.) - Microsoft Internet Explorer supports embedding a background sound to a web page using the <bgsound> tag. See the following example:
<bgsound src="http://www.2kweb.net/sound.mid" loop=0">
This would appear to be the most logical way to embed a sound file. The only difference is I think this should be included in the <background> tag, but hey, who am I to tell everyone else how to do html right?
The Loop parameter identifies how many times through the midi file should be played. You can set this value to any number or to define an infinite loop, set the value to "-1" as shown in the following example:
<bgsound src="http://www.2kweb.net/sound.mid" loop=-1">
The following is the embed tag:
<embed src="http://www.2kweb.net/sound.mid">
As you can see there isn't a whole lot of differences between the two with the exception of the tag name. You can place both tags in your documents and both browsers will support playing the midi files.
NOTE: The same is true for embedding wave files. Simply use the <bgsound> or <embed> tags to link to the .wav file.
Frames
I guess the best way to learn frames is to simply do them. We'll discuss the various elements of a Frame Controller and setting up frames. In addition, we have provided four of the most commonly used types of framesets with an example of what the finished web page would look like. - So, let's get started.
The primary tag for creating frames is the <frameset> tag. Several elements within the frameset tag
The following is a frameset tag which is used to define a simple frame as shown in Example one:
<frameset cols="150,*">
</frameset>
The previous example indicates the browser window should be divided into two frames, the first column is 150 pixels wide, and the second column will receive the balance of available browser window space (identified by an Asterisk (i.e. *) as the second parameter to the "cols" attribute. - You can also define the column and row Width in Percentage values by simply adding a percent sign (i.e. %) after the number 150
Within the <frameset> tag we need to communicate to the browser what the source HTML Files will be for the left frame and the right frame. This is accomplished by including the <frame> tag:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
Each Frame is provided a name attribute. This is important for referencing the target when a link is created in one of the two frames. In the above example, the name of the frames are "left-frame" and "right-frame" and the HTML "src" is the URL (relative or absolute) to the HTML file to be displayed in the frame.
The above example is the HTML definitions (tags) that reside in what we will be calling the "Controller Frame" which is basically the main web page that will be linked to. When a web site visitor goes to the "Controlling Frame" the web page will be loaded by dividing the browser window (as specified by the "cols" attribute of the <frameset> tag) and loading two HTML web pages that are defined in the <frame> tag.
One last attribute can be added to support those who may visit your web site with browsers that do not support frames. This is the <noframes> and </noframes> tags. Between these two tags you will place the HTML code that should be displayed to the Web Site visitor if the do not have frames capable browser:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
We have used an example for the <noframes> of displaying the text "This page uses frames, but your browser doesn't support them" - We would never do this in a live web site we plan to design. It's the lazy way out. Simply create a web page for those that do not have frame capable browsers and place the code between the <noframes> and </noframes> tags (be sure to include the <body> tags). By doing this, you will be supporting all users the visit your web site, not just a select group.
Now, let's define some further attributes to the <frame> tag to identify some more behaviors such as removing the capability to resize the frame. To accomplish this, simply add the attribute "noresize" as shown in the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize>
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
Let's get a little more wild and define the target frame. The target is used in conjunction with links that may be placed in the frame. In our example, the target frame for the left frame will be the right frame. This means that links placed in the left frame will actually load the right frame with the linked web page. - see the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
Notice that we are targeting the <frame> "name" property for the right frame. - now if a link is placed in the left frame, when a web site visitor clicks on that link, the "linked to" page will be loaded in the right frame.
There will be times when you want to create a frame and remove the "Scroll bar" from the frame. This is accomplished by adding the attribute to the <frame> tag as shown in the following example:
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html" noresize target="right-frame">
<frame name="right-frame" src="right-frame.html" noresize scrolling="no">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
The easiest way to learn frames is to simply delve into the code. The following are specific example of frames:
Left/Right Frames
The Frames code for a Left and right Frame consists of three HTML files. First, is the Control HTML file which also contains the HTML for the web page to support browsers that do not support frames. Second is the Source for the Left Frame and finally the source for the right frame. Below is an example of the HTML for all three files to create this type of a frame:
Controller HTML File:
<html>
<head>
<title>Frames Control Web Page</title>
</head>
<frameset cols="150,*">
<frame name="left-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Left Frame HTML File (Save this file named left-frame.html):
<html>
<head>
<title>Left Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the left frame</p>
</body>
</html>
Right Frame HTML File (Save this file named right-frame.html)
<html>
<head>
<title>Right Frame Web Page</title>
<base target="main">
</head>
<body>
<p>This web page is the right frame.</p>
</body>
</html>
The Web page you will call is going to be the Controller Frame. The Controller frame will load up the other two web pages into the left and right frames based upon the src tag in the Control Frame HTML. In the above example, be sure all three web pages reside in the same directory and are named accordingly.
Top/Left/Right Frames
The Top/Left/Right frame is perfect for placing a banner at the top of the page and yet allows your web site visitors traverse your web site using the left an right frames. It's also good to place the title of your web site and keep the title visible throughout your entire site.
The Frames code for a Top, Left and right Frame consists of Four HTML files. First, is the Control HTML file which also contains the HTML for the web page to support browsers that do not support frames. Second is the source for the top frame. Third is the Source for the Left Frame and finally the source for the right frame. Below is an example of the HTML for all four files to create this type of a frame:
Controller HTML File:
<html>
<head>
<title>Controller HTML Page</title>
</head>
<frameset rows="64,*">
<frame name="top-frame" scrolling="no" noresize target="right-frame" src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Top Frame HTML File (Save this file named top-frame.html):
<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>
Left Frame HTML File (Save this file named left-frame.html):
<html>
<head>
<title>Left Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Left Frame</p>
</body>
</html>
Right Frame HTML File (Save this file named right-frame.html)
<html>
<head>
<title>Right Frame</title>
</head>
<body>
<p>This is the Right Frame</p>
</body>
</html>
The Web page you will call is going to be the Controller Frame. The Controller frame will load up the other two web pages into the left and right frames based upon the src tag in the Control Frame HTML. In the above example, be sure all four web pages reside in the same directory and are named accordingly.
Top/Left/Right/Bottom Frames
The Top/Left/Right/Bottom frame is perfect for placing a banner at the top of the page, footer and copyright statements at the bottom of the page and yet allows your web site visitors traverse your web site using the left an right frames. It's also good to place the title of your web site and keep the title visible throughout your entire site.
The Frames code for a Top, Left, Right and Bottom Frame consists of Five HTML files. First, is the Control HTML file which also contains the HTML for the web page to support browsers that do not support frames. Second is the source for the top frame. Third is the Source for the Left Frame. Fourth is the source for the Right Frame and finally the source for the bottom frame. Below is an example of the HTML for all five files to create this type of a frame:
Controller HTML File:
<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,*,64">
<frame name="top-frame" scrolling="no" noresize target="right-frame" src="top-frame.html">
<frameset cols="150,*">
<frame name="left-frame" target="right-frame" src="left-frame.html">
<frame name="right-frame" src="right-frame.html">
</frameset>
<frame name="bottom-frame" scrolling="no" noresize target="right-frame"
src="bottom-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Top Frame HTML File (Save this file named top-frame.html):
<html>
<head>
<title>Top Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>
Left Frame HTML File (Save this file named left-frame.html):
<html>
<head>
<title>Left Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Left Frame</p>
</body>
</html>
Right Frame HTML File (Save this file named right-frame.html)
<html>
<head>
<title>Right Frame</title>
</head>
<body>
<p>This is the Right frame</p>
</body>
</html>
Bottom Frame HTML File (Save this file named bottom-frame.html)
<html>
<head>
<title>Bottom Frame</title>
<base target="right-frame">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>
The Web page you will call is going to be the Controller Frame. The Controller frame will load up the other two web pages into the left and right frames based upon the src tag in the Control Frame HTML. In the above example, be sure all five web pages reside in the same directory and are named accordingly.
Top/Middle/Bottom Frames
The Top/Middle/Bottom frame is perfect for placing a banner at the top of the page and yet allows your web site visitors traverse your web site using the Middle and bottom Frames It's also good to place the title of your web site and keep the title visible throughout your entire site. The bottom Frame can be used for Hotlinks to various pages on your web site and the middle frame will store the actual site contents.
The Frames code for a Top, Middle and Bottom Frame consists of Four HTML files. First, is the Control HTML file which also contains the HTML for the web page to support browsers that do not support frames. Second is the source for the top frame. Third is the Source for the Middle Frame and finally the source for the bottom frame. Below is an example of the HTML for all four files to create this type of a frame:
Controller HTML File:
<html>
<head>
<title>Controller HTML File</title>
</head>
<frameset rows="64,70%,*">
<frame name="top-frame" scrolling="no" noresize target="middle" src="top-frame.html">
<frame name="middle-frame" target="middle-frame" src="middle-frame.html" >
<frame name="bottom-frame" scrolling="no" noresize target="middle-frame" src="bottom-frame.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Top Frame HTML File (Save this file named top-frame.html):
<html>
<head>
<title>Top Frame</title>
<base target="middle">
</head>
<body>
<p>This is the Top Frame</p>
</body>
</html>
Middle Frame HTML File (Save this file named middle-frame.html):
<html>
<head>
<title>Middle Frame</title>
<base target="bottom">
</head>
<body>
<p>This is the Middle Frame</p>
</body>
</html>
Bottom Frame HTML File (Save this file named bottom-frame.html)
<html>
<head>
<title>Bottom Frame</title>
<base target="middle">
</head>
<body>
<p>This is the Bottom Frame</p>
</body>
</html>
The Web page you will call is going to be the Controller Frame. The Controller frame will load up the other two web pages into the left and right frames based upon the src tag in the Control Frame HTML. In the above example, be sure all four web pages reside in the same directory and are named accordingly.
Coding Forms
Forms provide a means by which one can prompt the web surfer for information, and allow the surfer to enter the information into the web page. A program is required to process the information after the user enters it.
There are many different tags that facilitate the creation of Forms. For instance, you can create a simply text entry field to ask a web surfer for a name, or address, or any other piece of information that you can come up with.
You can provide choices where only one choice is valid. These are called radio buttons. A group of options are presented, and the web surfer clicks on one of the options.
Text Area fields provide multiple lines of text entry. This is often used in feedback forms to allow the Web Surfer to provide comments to the Web Program.
Combo Boxes present a list of valid values that can be chosen by the Web Surfer from a pull-down list.
Checkboxes are similar to
These tags are defined in greater detail on the following pages:
Text Entry Fields
Text Entry Fields allow the User to enter non formatted, and/or non validated text. For instance, if you we're doing a survey, and you wanted to give the Web Surfer the option of entering his or her name, you could use a text entry field. The following example shows the coding of a text entry field within the Form.
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</form>
The Tag is the Input Tag. The TYPE parameter identifies the type of input field. In our case the Type is "text" to identify a text entry field.
Other values for the TYPE parameter are "hidden" which tells the browser the field is not to be displayed, and the Web Surfer cannot enter any data into the field. This becomes handy for fields that must be provided to the CGI program in order for the CGI program to successfully process the data entered in the form.
Another input TYPE is the "password" type, which tells the browser to echo each entry in the field with the Asterisk (i.e*******).
The NAME parameter provides a field name that will be associated with the value is entered. This is important for the CGI (Common Gateway Interface) program to processes the data sent to it. In the case of the formmail.cgi program, the NAME will be used in the e-mail that is sent to your e-mail address.
The SIZE parameter tells the browser how large to make the Field. This is pretty self-explanatory.
The MAXLENGTH parameter tells the browser how many characters maximum is allow to be entered in the field.. You may have a SIZE of 20, and a MAXLENGTH of 40. In this situation, the form field accepts more data than can be displayed in the field. The fields will simply scroll as the Web Surfer types until the MAXLENGTH value is reached.
Text Area Fields
A Text Area Entry field allows multiple lines of entry to be entered by the Web Surfer. Typical uses are to provide comments the Web surfer can enter. The data will be sent back to the CGI program as one field identified by the NAME parameter. The ROWS and COLS fields are fairly self-explanatory. Take a look at the modified Form source as shown below:
<p ALIGN=Center>
<center>
<h1>Example of Form with Text Area Field</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>
<p>What Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>What Type of Computer do you have?
<input TYPE="radio" NAME="Computer-Type" VALUE="Pentium" checked>Pentium
<input TYPE="radio" NAME="Computer-Type" VALUE="486DX">486 DX
<input TYPE="radio" NAME="Computer-Type" VALUE="486SX">486 SX
</p>
<p>Comments: <br>
<textarea NAME="comments" ROWS="10" COLS="70" wrap="virtual">
This is text that can be defaulted into the text area field
</textarea>
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
Notice the "wrap" attribute defined in the <textarea> tag. This attribute sets automatic word wrapping when text is entered into the text area field. If you do not want word wrapping to occur, simply omit the "wrap" attribute.
Checkboxes
Checkboxes allow the web user to click on a box to toggle a value to either yes or no. Take a look at the following example:
<p ALIGN=Center>
<center>
<h1>Example of Form with Checkbox</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
The checked value at the end of the input tag identifies that value should be defaulted to a checked state. By omitting the checked value, the checkbox will not be checked. The reset button will re-initialize this value to a checked or non-checked state, depending upon the parameter identified in the tag.
Radio Buttons
Radio Buttons provide a mutually exclusive selection value. Only one button may be pressed. Pressing an alternate button in a Radio Button group will automatically remove the previous selection. To identify a group of radio buttons, all the radio buttons must be next to each other, and have the same value identified in the NAME parameter. Take a look at the following code modifications for the Form.
<p ALIGN=Center>
<center>
<h1>Example of Form with Radio Buttons</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>
<p>What Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>What Type of Computer do you have?
<input TYPE="radio" NAME="Computer-Type" VALUE="Pentium" checked>Pentium
<input TYPE="radio" NAME="Computer-Type" VALUE="486DX">486 DX
<input TYPE="radio" NAME="Computer-Type" VALUE="486SX">486 SX
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
The Checked value identified at the end of the first radio button identifies the radio button is to be checked as a default. The absence of any checked value will indicate no radio buttons will be defaulted!
Combo Boxes
Combo Boxes provide an efficient way for the Web Surfer to choose a value from a list of valid values. This is similar to Radio Buttons, except it is designed for larger lists. Take a look at the following form modifications to show the addition of a combo box to allow the Web Surfer to identify the country they live in.
<p ALIGN=Center>
<center>
<h1>Example of Form with a Combo Box</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>
<p>What Country do you Live in?
<select NAME="Country">
<option VALUE="USA">United States
<option VALUE="CA">Canada
</select>
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
Submit and Request Forms
If a Form has only one text entry field, a submit button is not required, simply pressing the enter key will submit the form to the Program identified in the beginning Form tag. However, if there are more fields, a Submit Button is required. The following example shows the addition of a Submit and Reset button.
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</form>
The Submit and Reset buttons are also coded with the input tag. The TYPE parameter identifies the field to be a button.
The value of "submit" tells the browser, when the button is pressed, send the form to the Web server for processing by the CGI program.
The value of "reset" tells the browser, when the button is pressed, reset the form to the default values. The default values can be either blank, or in some situations identifying a box to be checked, or a radio button to be selected. The VALUE parameter identifies the text that will appear on the button.
At this point, we have a full blown Form with 2 text entry fields. One for Name, and one for the password. Remember, the third field, "recipient" is a hidden field. To see what this tag would look like, press here.
Of course the Form isn't formatted very well. This brings me to the next point. You can embed other HTML tags inside the Form itself. The following is the modified Form code to make it formatted a little bit more like a form should be:
<p ALIGN=Center>
<center>
<h1>Example of Form with 2 Text fields</h1>
</center>
</p>
<form METHOD=POST ACTION="http://www.2kweb.net/cgi-bin/formmail.cgi">
<p>Person's Name:
<input TYPE="text" NAME="persons-name" SIZE="40" MAXLENGTH="40">
<input TYPE="hidden" NAME="recipient" SIZE="40" MAXLENGTH="40">
</p>
<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>
<p>
<input TYPE="submit" NAME="Request" VALUE="Submit This Form">
<input TYPE="reset" NAME="Clear" VALUE="Clear Form and Start Over">
</p>
</form>
Coding Special Characters
Special characters are those characters that can be inserted using a HTML code for which you cannot enter them via the keyboard or because of conflicting codes that are used in HTML. For instance, the less than sign is used in HTML to open every HTML tag. So to keep browsers from being confused when it encounters an less than sign (i.e. < the code used in HTML to represent a less than sign on the web page would be < instead of <.
Character HTML Code
" "
& &
< <
> >
¡ ¡
¢ ¢
£ £
¤ ¤
Â¥ ¥
¦ ¦
§ §
¨ ¨
© ©
ª ª
« «
¬ ¬
¬ ­
® ®
¯ ¯
° °
± ±
² ²
³ ³
´ ´
µ µ
¶ ¶
• ·
¸ ¸
¹ ¹
º º
» »
¼ ¼
½ ½
¾ ¾
¿ ¿
À ÃÂ? Á
 Â
à Ã
Ä Ä
Ã… Å
ÆÆ
Ç Ç
ÈÈ
É É
ÊÊ
Ë Ë
ÃŒ Ì
ÃÂ? Í
ÃŽ Î
ÃÂ? Ï
ÃÂ? Ð
Ñ Ñ
Ã’ Ò
Ó Ó
Ãâ€? Ô
Õ Õ
Ö Ö
Ã ×
Ø Ø
Ù Ù
Ú Ú
Û Û
Ãœ Ü
ÃÂ? Ý
Þ Þ
ß ß
àà
á á
â â
ã ã
ä ä
Ã¥ å
æ æ
ç ç
è è
é é
ê ê
ë ë
ì ì
àí
î î
ï ï
ð ð
ñ ñ
ò ò
ó ó
ô ô
õ õ
ö ö
÷ ÷
ø ø
ù ù
ú ú
û û
ü ü
ý ý
þ þ
ÿ ÿ
|
|
