Brief Guide to HTML
Introduction
Tools
Tags
Headings
Separators
Document options
Text attributes
Lists
Combining tags (nesting)
Tables
Images
Links
Forms
Publishing your Web
U of C Web page policy
Style guides
Other HTML references
Appendix 1: Using Frames
Introduction
This is a brief introduction to creating Web pages using HTML. When you reach the end of this page, you should know how to create basic HTML Web pages. There is much more to HTML than what is presented here. We have included a list of other HTML references for your interest.
HTML is the language that all Internet browsers, like Netscape Navigator and Microsoft Internet Explorer, read when they look at Web pages. There are also many HTML editors you can use to create your Web pages. Using one of these means that you do not need to know HTML code yourself, as the editor creates the HTML code for you. However, if you prefer the "brute force" method and would like to know the code yourself, it is not hard to learn.
Tools
You can create HTML files in any text or word processing program. These include Notepad, Wordpad, Microsoft Word, pico on the Linux servers, or any other program you use to type text.
There are also HTML editors. Programs like Netscape Composer, Microsoft Front Page, Adobe GoLive, Hot Dog, and many others allow you to create HTML pages in a WYSICTWYG (What You See Is Close To What You Get) style.
To create raw HTML code, use a text processor like Wordpad.
Tags
An HTML document is a plain text document with <tags> embedded in it. These tags provide information about document formatting, links to other documents, images, embedded object references, form elements in a document and a variety of other things.
For instance, the <p> tag signals the start of a paragraph. The <p> tag can appear by itself, but you should generally try to close each tag. To do this, add a / after the <, and place the complete tag at the end of the section. For example, at the end of your paragraph, add a </p>.
Here are some basic tags that appear in every HTML document, listed in the order they would appear.
| <html> | The beginning of the HTML document |
| <head> | The beginning of the header section. Information in the header section is often information that affects the whole document |
| <title> | Precedes the title that appears in the browser title bar |
| </title> | Follows and completes the title that appears in the browser title bar |
| </head> | The end of the document's header section |
| <body> | The beginning of the main body of the document |
| </body> | The end of the body of the document |
| </html> | The closing tag in the HTML file. |
When you use an HTML-specific editing tool of some kind, most of these tags are automatically created for you. If you are using an HTML editor, create a new empty document in your editing tool, then find its View as HTML option to see what was created. If you are using a text editor to create the tags yourself, you should know that it does not matter if the tags are upper case or lower case letters.
Headings
HTML documents on the Internet vary greatly in their sophistication, depending on the purpose of the page and the knowledge of the page creator. An HTML document can be very simple and still be effective. One technique that people use often is header lines. Header lines split the page into meaningful divisions and subdivisions. You can have up to 6 levels of headings in an HTML document. This document uses the Heading 3 tag to highlight the title of each major section, and Heading 2 for the title of the document. Below you will see examples of the headings, and the code you would write to create them.
This is Heading 1 |
<H1>This is Heading 1</H1> |
This is Heading 2 |
<H2>This is Heading 2</H2> |
This is Heading 3 |
<H3>This is Heading 3</H3> |
This is Heading 4 |
<H4>This is Heading 4</H4> |
This is Heading 5 |
<H5>This is Heading 5</H5> |
This is Heading 6 |
<H6>This is Heading 6</H6> |
Type in a short outline for some information you use in your work, or feel free to use text from this document. Then apply the heading tags appropriately to each entry in the outline.
Separators
Besides using headers to structure your document, you can use various separators to guide the reader. The following is a list of separators, what the code looks like, and what you can expect to appear on your Web page when you use them:
| Paragraph Marker: <p> </p> |
<p> Here is the cow.</p> |
Here is the cow. It jumps over the moon. |
| Line Break: <br> |
<p>Here is the pig.<br> |
Here is the pig. |
| Horizontal Lines: <hr> |
<p>And here is the donkey. |
And here is the donkey. It brays like a mule.
|
Document options
The body tag was introduced before as a tag that should be in every HTML document. The body tag tells the Internet browser what part of the document it should display inside the window. Anything you type between the <body> and </body> tags will be displayed in the browser window. The <body> tag can contain parameters that affect the background wallpaper of the document (background), the background color (bgcolor) , the color of plain text (text), the color of links (link), the color of visited links (vlink) and the color of active links (alink). Below is a sample of a body tag that uses all of these parameters.
<body background="backgrnd.gif " text=" #000000" bgcolor=" #00CCCC" link=" #0000FF" vlink=" #FF00FF" alink=" #999999">
You have probably noticed that the commands that control colours are followed by a number sign and then a six-character string. This string is called a hex code. Every colour that is available to Internet browsers has been assigned one of these codes. The hex codes used above are black (#000000), turquoise (#00CCCC), blue (#0000FF), bright purple (#FF00FF), and grey (#999999). Check the Reference section below for a link to a complete chart of hex codes.
Text attributes
Certain tags affect the way text is presented on the screen. Below is a sample of the types of formatting, as well as a list of the tags.
| Bold Text | <b>Bold Text </b> |
| Italic Text | <em>Italic Text</em> or <i>Italic Text</i> |
| Underlined Text | <u> Underlined Text</u> Note that underlined text is easily confused with linked text. |
| Coloured Text | <font color="#FF0000">Coloured Text</font> |
| Fixed Width Text (or TypeWriter Style Text) | <tt>Fixed Width Text</tt> |
| SuperScript | <SUP> Super</SUP>Script |
| SubScript | <SUB> Sub</SUB>Script |
| <STRIKE> Strikethrough</STRIKE> |
The font tag will also prove useful to you. As you can see above, you can use it to change the colour of your text. You can also use it to change the specific font style of your text, as well as the size. When you change your font style, be careful that you have used a fairly common font, and that you have spelled the name correctly. If you've used a rare font, not many people will see your text as you intended it, and if you spell the name wrong, your text will not be formatted properly.
| Times New Roman | <FONT FACE="Times New Roman,Times">Times New Roman</FONT> |
| Size 7 | <font size=7> Size 7</FONT> |
| And all three put together! | <FONT FACE="Comic Sans MS" size=5 color="#FF6600">And all three put together!</FONT> |
Lists
HTML has several tags to simplify the creation of lists. There are two basic types of lists: unordered lists and ordered lists.
Unordered lists are useful if you want to accentuate a list of items that do not have to be in a particular order. These are like the bulleted lists you can create in your word processing documents. Below are two sample lists, and the matching code:
|
A basic list consists of three elements:
|
<p>A basic list consists of three elements: </p> |
|
here are also different types of bullets you can use:
|
<p>There are also different types of bullets you can use:</p> |
Ordered lists are like the numbered lists that you create in your word processor. These are useful for directions or any other list that needs to appear in a particular order. Below are two examples, and the accompanying code:
|
To create an ordered list:
|
<p>To create an ordered list:</p> |
|
Just like unordered lists, there are numbering variations in ordered lists:
|
<p>Just like unordered lists, there are numbering variations in ordered lists:</p> |
Combining tags (nesting)
By combining tags together, you can create more sophisticated documents. When you do so, the tags must be nested. Nesting means that the tag that is used first must be matched by its closing tag, which should come last, and that whatever tags are used in between must close before the end of the line. Take a look at the following line and its code as an example:
The first will be last and the last will be first.
<p><font color="#9933FF"><b>The first will be <u>last and the last</u> will be first.</b ></font></p >
In the above example, bold text is nested within a font tag, and underlining is nested inside of the bold tags. All of the tags are then nested within a paragraph tag. One of the most common errors people get is forgetting to close nested tags. MAKE SURE every tag you type has a matched closing!
Tables
An example of nesting that occurs throughout this document is the use of tables. Although you have not seen them, all the examples you have seen so far have been displayed inside tables. To create a table in HTML, you use the <table> and </table> tags. Inside of these tags, you nest rows using the table row tags: <tr> and </tr>. Inside of each row, you nest individual table cells using the table data tags: <td> and </td>. Finally, inside of each table cell, you can nest all of the formatting elements we have talked about so far. You can even nest tables inside tables!
Take a look at the following table and its code:
|
<table border=1> <tr><td>Color</TD><TD> Value</TD></TR> <TR><TD>Red</TD><TD> #FF0000</TD></TR> <TR><TD>Green</TD><TD> #00FF00</TD></TR> <TR><TD>Blue</TD><TD> #0000FF</TD></TR> </TABLE> |
There is a lot more to tables than we can possibly go into here. See the Reference section at the bottom of this page for more information about creating tables in HTML.
Images
Web pages are not just about text. Images play an important part as well. Check out the following image, and the accompanying code:
|
"Look!" she said. |
<p>"Look!" she said.</p> |
As with tables, there are many more things you can do with images in your Web pages. For more details, see the Reference section below.
Links
Embedded links are what makes the Internet different from a book or magazine. Links take you from the page you are on to a different one. You create links with the <a> tag. The tag <a href="pageone.html">Page One</a> produces the following link and contains the relative URL pageone.html. A relative link assumes that the file, in this case pageone.html, resides in the same directory as the document you are looking at. You can use relative links inside your own Web site.
The tag <a href="http://www.ucalgary.ca/index.html">The University of Calgary</a> containing the absolute URL http://www.ucalgary.ca/index.html and produces the following link: The University of Calgary. An absolute link has the advantage of not making assumptions about the relationship between the location of the starting HTML file and the location of the destination HTML file. The disadvantage is that when the target page moves, the link does not work, or is broken. You must use absolute links when you link to a page that is not inside your Web site.
Links contain a great deal of information, and it is important that you understand what the URL is telling you. We have broken down some URLs below to give you a better idea.
An absolute link like http://www.ucalgary.ca/index.html#departments or ftp://ftp.acs.ucalgary.ca/pub/micros/ms-dos/net_clients/n16e301.exe contains information about the following:
| Internet protocol used to open or connect to a resource | Address of the machine providing the resource | Directory containing the resource | Name of the resource file | Section within an HTML document to jump to |
|---|---|---|---|---|
| http | www.ucalgary.ca | / | index.html | departments |
| ftp | ftp.acs.ucalgary.ca | /pub/micros/ms-dos/net_clients/ | n16e301.exe | If omitted, the browser goes to the beginning of a document |
When you are following an absolute reference, you do not need to worry about where the file that contains the link is in relation to the other file. When you use relative links, you do need to worry about it. The following are relative links, and in each case some of the location information is missing. Let's assume these links are in the page http://www.ucalgary.ca/it/webtutorial/index.html.
| URL | Information supplied | Information omitted | Completed as |
|---|---|---|---|
| mountains.gif | the name of the file |
|
http://www.ucalgary.ca/it/ |
| images/mountains.gif |
|
|
http://www.ucalgary.ca/it/ tutorial/images/mountains.gif |
| /it/images/mountains.gif |
|
|
http://www.ucalgary.ca/it/ images/mountains.gif |
| #Definitions | a bookmark within the file |
|
http://www.ucalgary.ca/it/ tutorial/index.html#Definitions |
The advantage of relative links is that you can relocate a set of interlinked pages easily, but you must be careful about images and other links when you move them.
Another use of the <a> tag is to create internal bookmarks. You can use bookmarks to create a table of contents, like the one at the beginning of this page, or a link back to the top of the document, like the ones you have seen at the end of each section. There are two steps to creating bookmarks: first, you have to create the marker, and second, you have to link to it. To create a marker, type <a name="markername"></a>. For example, the marker for this section is <a name="Links"></a>. Next, link to the marker by typing <a href="http://www.ucalgary.ca/it/#markername"> Marker section</a>. The # character is very important. It tells your browser that the link is within the document it currently has loaded.
Another special use of the <a> tag is the mailto: command. When someone clicks a mailto link, a new message box will appear and they will be able to send you an e-mail. The format for a mailto link is: <a href=mailto:YourEmailAddress>Send me an e-mail!</a>, where you would replace YourEmailAddress with the e-mail address you would like your visitors to send to.
Forms
The tags we have seen up to now allow us to create HTML documents and then link them together with links so that other people can see them. If you want to get some information back from the people that see your site, you can use forms within the HTML document. Forms allow people to enter text or select from a set of choices. A single HTML document can contain no forms, one form or several forms.
A form begins with the <form> tag and ends with the </form> tag. In between, you create input elements that allow people to create information for you. One of these input elements is a Submit button that allows the user to say they are ready to submit some data to the server. When the data is sent, it must be processed by a program that sits on the server. Writing such a program is beyond the scope of this introduction, but there is a program on the server already that takes form-based input and mails it to a specified mailbox. This program is free for everyone to use. To reference to it, start your form with the following tag: <FORM ACTION="http://www.ucalgary.ca/cgi-bin/formresponse" METHOD="POST">. You can then create some user input fields.
<FORM ACTION="http://www.ucalgary.ca/cgi-bin/formresponse" METHOD="POST"><BR> To:<BR> <INPUT TYPE="text"NAME="USERNAME" VALUE="yourID"><BR> Subject:<BR> <INPUT TYPE="text" NAME="SUBJECT"><BR> From:<BR> <INPUT TYPE="text" NAME="FROM"><BR> Message:<BR> <TEXTAREA NAME="Content" COLS="30" ROWS="15"></TEXTAREA><BR> <INPUT TYPE=submit value="Send"></FORM>
Try entering input into your form and pressing the Submit button. Wait a few minutes, then check your e-mail.
If you do not want your e-mail address to be changeable and readable in the form, manually edit the HTML of the To: field to be:
<INPUT TYPE="hidden" NAME="USERNAME" VALUE="yourID">.
For more details, see the IT Utilities: User Forms page.
Publishing your Web
The easiest way to publish web pages is to put them in the public area of your Webdisk. Your website's URL will be http://people.ucalgary.ca/~username.
You can also put your web pages on the general purpose Linux servers. However, this requires some Unix skills. On Linux your website's URL will be http://www.ucalgary.ca/~username.
For institutional websites your URL will be the rather long http://www.ucalgary.ca/UofC/departments/yournamehere. Upon request, we can create a shortcut like http://www.ucalgary.ca/yournamehere
Please send your requests to www@ucalgary.ca
We can also create a domain name just for your site, giving you a URL like http://www.yournamehere.ucalgary.ca or even http//www.yournamehere.org
This takes a bit of setup so there is a charge for doing so, except for the official Web site of each faculty and department. For more information, please see the Customized Web Domain Names page.
U of C Web page policy
The University of Calgary does have a policy regarding the content of Web pages. Please read and follow it should you post your Web site on the U of C servers. If you cannot agree with it, there are many free Web site hosting services on the Internet.
Style guides
Just because you can do something in HTML does not mean that you should. For example, general consensus on the Internet is that the blink tag is not something you should be using in your Web pages. Here are some resources on Web page design and style you might find useful:
Yale C/AIM Web Style Guide
Top Ten Design Mistakes
Web Pages That Suck
You can also run searches on any of the major search engines for Web page design guides, and will get lots of feedback.
HTML Reference
There are many HTML reference pages out there. Here are a few:
The Bare Bones Guide to HTML
HTML Goodies
Web Monkey
World Wide Web FAQ
EchoEcho.com tutorials
Appendix 1: Using Frames
You can also use frames to structure your information. When you use frames, you will need a minimum of three pages: a page defining the frames, then one page for each frame containing the content. While frames can be useful, some older browsers cannot read them. Also, the current movement on the Web is away from frames. These are things to keep in mind when you are creating your Web site. The following is the HTML for constructing a framing page.
| <HTML> <HEAD> <TITLE>Frame Sample</TITLE> </HEAD> |
|
| <FRAMESET COLS="200,*"> | Starts a frameset and specifies that the first column is 200 pixels and the second column is variable width. In this instance the frames are in vertical columns. To create frames in horizontal rows, you would type <frameset rows="120,*">. Framesets can also be nested inside of framesets. |
| <FRAME NAME="outline" src="outline.htm"> | Defines the first frame with the name "outline," and sets the initial content as outline.htm |
| <FRAME NAME="lesson" src="framepg.htm"> | Defines the second frame with the name "lesson," and sets the initial content as framepg.htm |
| <NOFRAMES> Get a browser that supports frames to try this page. Until then, there is the no frame approach. <body> </body> </NOFRAMES> |
Provides content for browsers that do not support frames |
| </FRAMESET> | Closes the frameset |
| </HTML> | Closes the document |
The document shown in the left column is used to navigate the one in the larger column. This is possible because the links in the navigation document include a target tag that refers to the name of the other frame. Here is a sample of the HTML code:
<li><a href=" index.html#Tools" target=" lesson"> Tools</a></li >
<li><a href="index.htm#Tags " target="lesson">Tags< /a></li>