My first web page

TECH

HARDWARE

CISCO

LINUX

HTML Tag and Attribute Reference

My First HTML Page
Required elements Text content Text Formatting Graphics Hypertext Links

HTML files are just plain text files and can be prepared using any text editor (such as Notepad or vi). Every HTML file requires some elements or tags. Tags are enclosed in angle brackets and should be in lower case e.g. <tag> and then include a forward slash to close the tag e.g. </tag>

Every HTML file must begin with:

<html> <head> <title>My first HTML page</title> </head> <body>

Where "My first HTML page" is the text that you want to appear in the title bar of the browser window. This will also be the way the page is listed in in the Bookmarks menu.

Every HTML file must end with:

</body> </html>

The content of the page goes in between the <body> and the </body> tags.

Save your HTML file by clicking on "File" then "Save As..." in Notepad. in the "Save As" dialog box change the file extension ".txt" to ".html" and click "Save".

You can view an HTML file in a Web browser (Fire Fox, Internet Explorer, etc.) by opening it with the Open command in the File menu or by double clicking it. When developing a Web page, it's convenient to keep the Web browser and the HTML file open in a text editor at the same time. If you want to make a change, click on the text editor window, edit the HTML text, Save it, then click on the Web browser window and click on the Reload button.

HTML Code in Notepad:	As shown in Web Browser:
`<html> <head> <title>My first HTML page</title> </head> <body> Hello World! </body> </html>`	`Hello World!`

Although, including the DOCUTYPE would be even better:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <title>My first HTML page</title> </head> <body> Hello World! </body> </html>

Text Content
Plain text content can be typed (or Copied and Pasted from a word processor) directly into an HTML file. It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words. For example:

HTML Code in Notepad:	As shown in Web Browser:
It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words.	It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words.

In order to force a line break, you must insert a <br> into the text, and to create a paragraph separation (white space between paragraphs) you must insert a <p> between the paragraphs.

Text Formatting
Text formatting options are controlled by pairs of tags which you use to surround the effected text, such as:

Effect	HTML Tag	What it looks like
boldface	`<b>example</b>`	example
italic	`<i>example</i>`	example
bold italic	`<b><I>example</i></b>`	*example*
larger font	`<font size="+1">example</font>`	example
larger font	`<font size="+2">example</font>`	example
smaller font	`<font size="-1">example</font>`	example
Large letter	`<font size="+3">E</font>xample`	Example
Color text	`<font color="red">example</font>`	example
Centering	`<center>example</center>`	example
Subscript	`H<sub>2</sub>O`	H₂O
Superscript	`cm<sup>2</sup>`	cm²
Symbol font	`<font face="symbol">example</font>`	example

Graphics
The icons and pictures on Web pages (rather than in a separate window) are called "in-line graphics". They are actually separate files, in either in GIF, JPG or PNG format, that are referred to on the page by an "img src" tag. This is simplest if the graphic files are stored in the same directory as the HTML file that refers to it. For example, <img src="smiley.gif" /> will display the GIF file "smiley.gif", if that file is in the same directory as the HTML file:

If the graphic file is in a subdirectory (folder), then the subdirectory name must be specified. For example, if the file "smiley.gif" is in a subdirectory called "images", then you must write: <img src="images/smiley.gif" />. Make sure the file and subdirectory names are exact, even with respect to capitalization. Do not use spaces in file names.

Graphics can be aligned on the left or the page by using the modified tag:
<img align="left" src="images/smiley.gif" />
This is illustrated by the image on the left of this text. Or you can align a graphic on the right of the page by using the tag:
<img align="right" src="images/smiley.gif" />,
as shown on the right.

Hypertext Links
Hypertext links (also called hyperlinks, "hot" links or jsut "links") are text or graphics items that act as "buttons" that the user can click on to display another Web page (or another portion of the same page). Text links are shown as underlined text on the Web page. For example, to create a link to another HTML page called "tags.html" that is stored in the same directory (folder), you might type:

HTML Code in Notepad:	As shown in Web Browser:
`<a href="index.html">Table of Contents</a>`	Table of Contents

You could also use:

Click <a href="index.html">here</a> for the HTML Reference Table of Contents

To Produce:

Click here for the HTML Reference Table of Contents

In either case, if the user clicks on the underlined text then "index.html" is displayed. The general template for a hyperlink is <a href=""></a>. You simply put the file name between the quotes "" and the link text (the text that you want to act as the hot link) between the > and the <.

If index.html is stored in a lower-level directory called "foo" (a subdirectory within the current directory), then the directory name must be specified like so: <a href="foo/index.html"> If index.html is stored in a higher level directory (one level up from the current directory), then you write: <a href="../index.html">

If the page that you wish to go to is located on another web site or in a completely different area of that same server, then you can specify the complete URL or "http address". For example:

My favorite search engine is <a href="http://www.google.com">www.google.com</a>.

Produces:

My favorite search engine is www.google.com.

Another useful type of hot link is the "mailto:" link, which is used to send email to a specified address. For example:

Click <a href="mailto:fake@fakehost.com">here</a> to send email to Fake McFakey.

Produces:

Click here to send email to Fake McFakey.

If you click on the link text, a "send mail" dialog box will be displayed with the "To:" address already filled out to fake@fakehost.com. This assumes that your browser has been properly configured (in Preferences/Mail and News) for email by specifying you email address and a valid mail server.

You can also have graphic hot links. Suppose you have a small GIF file, named "smiley.gif" and you want to make that picture a hot link so that clicking on it will display the Web Smileys Homepage, whose address is http://www.websmileys.com/. You do this by creating a hyperlink to http://www.websmileys.com/ and then placing a graphic tag <img src="smiley.gif" /> in the place where the link text would ordinarily go:

<a href="http://www.websmileys.com/"><img src="smiley.gif" /></a>

The result is that the graphic is displayed with a border, which indicates that it is a hot link. If the user clicks on the graphic, the link is activated and the specified site is displayed. You can click on the graphic to "go to" the Web Smileys Home Page. Then click the Back button to return to this page.

Largely pirated from http://www.inform.umd.edu/UMS+State/UMD-Projects/MCTP/Technology/handouts/html.html