HTML

Introduction
A Word About Saving Files
Beginning HTML: Exercise 1
What The Codes On Your Page Mean
Using Colors: Exercise 2
Making Hyperlinks: Exercise 3
Using Images: Exercise 4
More Text Features

Introduction to HTML

Hypertext Markup Language, or HTML is a markup language not unlike the early codes used in word processing. Simply put, it is a language that tells browsers such as Internet Explorer and Netscape how to display a webpage: what background color to use, the format and color of the text, the placement of images, hyperlinks, etc. To create an HTML document, "codes," or marked-up text, are inserted into a regular text document so a web browser knows how to display a page. The codes (called tags) appear in angle brackets that do not show up on web pages, but instead instruct the browser as to how your page should appear on a screen. You can see the HTML tags for any page that you view over the internet. For instance, as you look at this particular page, go up to "View" and click on "Source" (in Netscape "Reveal Page Source"). You will then be looking at the HTML code for this page--the language your browser is "translating." If you have never looked at HTML tags before, the prospect of actually writing anything in this language can be rather daunting, as right now the language seems unfathomable. However, while the code for this page seems extremely complicated, HTML is actually an extremely simple language, it has to be because the secret to HTML is that is must be possible to read on any computer, no matter what operating system is being used--Mac, NT, Unix, or any flavor of Windows.

Think of HTML in this way: imagine trying to describe how you want a page to appear without being able to visually represent that page to the person–or computer, in this case–who must create that page. HTML is the language used to describe pages to a computer that must display them, but which cannot "see" how they should look. HTML is the backbone of the World Wide Web and soon may be the backbone of many computer software applications. In this workshop you may have opportunity to create some very basic pages in HTML using a text editor such as notepad. Text editors can be used to create HTML files as long as the file is saved as text only (ASCII).

Most people use WYSIWYG (what you see is what you get) HTML editors to create web pages and do not need to learn HTML. WYSIWYG editors (Dreamweaver, Microsoft FrontPage, Adobe PageMill, Symantec Visual Page, etc.) allow for quick and easy creation of web pages, and many will directly convert other electronic documents into web pages. However, we have found that even the best WYSIWYG editors will have problems creating some documents or displaying your pages as you wish them to appear. So it is good to know a few HTML basics to trouble shoot any glitches as well as to extend your work beyond the limitations of your editor.

HTML is easy to learn and use. The best way to start is to cruise the web and view the code of some of your favorite pages. In the menu of all browsers, you will find the command to view source or to see the page source. In both Internet Explorer and Netscape, this command is usually under the "View" menu. When you select "view | page source," you are allowed behind the scenes to see how the page was created with HTML. At first all of the coding will look like lots of nonsensical ramblings to you, but once you get the feel for HTML you will find many interesting things. One way people build pages is to "borrow" code from pages they view. Borrowing code is a standard practice on the web as long as you don't steal the content of web pages. Viewing the source may also tell you what editor was used to create the page (if one was used); thus helping you to find the best editor.

You can use any word processor to create HTML pages as long as you save your work as "text only" or "ASCII." Often people will use the simple word processors that come free with their computers to do this because they usually save in text only format automatically (Window users use Notepad while Mac users use Simpletext). Beyond saving as text only, it is also important to name your files properly. The general rule is to keep the file name simple and short, but the following guidelines will help you to name files properly:

1) Use lower case letters.
You can use upper case but since you must remember the exact way you named a file (where the upper case and lower case letters are), it is best to stay with all lower case. Those using Windows 3.1 will find that all files are saved in upper case. It is okay to do so, but you will need to remember your files are all upper case.

2) Use only numbers and letters.
While you can use other characters like the underscore (_) and hyphen (-), some characters like the apostrophe ('), colon (:), semicolon (;), and slash (/) can cause problems for the browser reading your files. To make you life easier, stick with the letters of the alphabet and whole numbers while avoiding any type of punctuation or decimal points.

3) Do not leave blank spaces in the file name.
This is a very important difference between regular file names and web page file names and probably one of the largest sources of problems for people first beginning to make web pages. If we created a web page and called it "my page.html," we would not be able to publish that page. The space following "my" would prevent any computer from reading the name of the file. Blank spaces in the file name make your page unreadable.

4) Web Pages must end with .html or .htm.
Unix and Mac users tend to use .html while PC users tend to use .htm (because Windows 3.1 would only allow three letter extensions). Contact the administrator for the web server where your pages will be published to see which is the recommended practice. For MSU students using the MSU AFS space, either is fine, but ".html" is preferred. For most servers, either is usually fine, but remember what you use and establish a consistent system that you can remember. The proper way to name our example file above, then, would be "mypage.html" There are other possible extensions for web pages, but we will talk about those later.

5) All graphic files must end with the proper extension. The two most common graphic files used on the web are .gif and .jpg (or .jpeg) files. We will talk more about files names for graphics later but the same guidlines apply (except #4).

6) Keep file names short. While longer ones are fine, the file name does become part of the URL, or web page address. The longer the file name, the longer the URL. Long files names also lead to more typos and more memory problems on the part of your web page user.

Before we begin HTML, one more point of confusion should be noted. When using many computer applications to add images, the images often become part of the file. For example, if you add an image to a Power Point presentation or a Microsoft Word file, it becomes part of the file. If you want to show the image, all you need to do is to open the Power Point or Word file. However, when you add an image to a web page (an HTML file), it does not become part of the file.

As we will see, the HTML calls for images and tells a computer where the images should appear on a web page each time the page is viewed. In order to view the image, you must keep the image in the same folder (directory) as the HTML file (unless you change paths, which we will discuss later). When we get to the section on images, we'll discuss this a bit more. For now, remember that your HTML and any images you add to your web page are all separate files. They look like one file on the screen, but they are just a team of files working together to appear as one file.

Confused yet? If you are, that's fine. Most people are. So far, we have only discussed how HTML works without actually doing anything with HTML. If you really feel lost, you may want to read through the Introduction section again before moving on to your first hand-made HTML page.

A Word About Saving Files

Now is a good time to stop and further discuss saving your files. An html document should be saved with the .html extension. You can also use .htm but make sure you are consistent, otherwise you will be in for some real headaches as you create hyperlinks and try to remember the extension you used for a specific page. The full file name should be one word with no blank spaces. Let's say that again, as many folks get into trouble right here: The full file name for any HTML file should be one word with no blank spaces. Blank spaces in a file name render the file unreadable to servers, and therefore anyone who wants to view your page. There are some special characters that are off limits for use in file names as well, but if you stick with the 26 letters of the Roman alphabet and whole numbers you will avoid trouble. We also strongly recommend that you use only lowercase letters. For example, the file name for our test page could be (test1.html).

If you save it as test1.html in the web folder of your web space, then your URL (web address) will be, for example, (http://www.some server.edu/your directory name/test1.html).

You can make other folders on your Web space (say you make the folder practice and put the test.html file in it), then your URL will be (http://www.some server.edu/your directory name/practice/test.html).

Many web servers have a default file name of index.html or default.html. This means that if you name You should ask the server administrator which to use. When a viewer accesses your files on-line without specifying a file name, your default will appear.

Beginning in HTML: Exercise 1

Let's make a web page. You've had your introduction to HTML, you're feeling confident, and we'll make a simple web page to bolster that confidence a bit and get you rolling. The secret to HTML is in the tags.

Throughout this module, you'll find Exercises like the one below. You'll even learn how to make a box like the one in the exercise below. But first things first. Let's just make a page.

Copy the code in the gray box below into your text editor (Notepad or Simpletext--any word processor can be used but remember to save as "text only) and save as test1.html on your hard drive or floppy disk.

To copy the text below, select all of the text in the box with your mouse. Then, go to your File menu and select "Copy." While leaving this window open, start NotePad (on Windows machines, it's usually in "Start/Programs/Accessories/NotePad) or SimpleText (on a Mac, look first under your Apple Menu or conduct a search by selecting "File/Find" and typing SimpleText). Once you have a blank page open in either of these programs, go back to your File menu and select "Paste."

To save the document you create in your text editor, go to your File menu and select "Save As." When the window for naming the file appears, take note of where you save your file as you'll need this information shortly. Name your file "test1.html" without the quotation marks. We'll talk more about naming HTML files in a moment.

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#ffffff" TEXT="#000000"> Welcome to my first HTML page! </BODY> </HTML>

You will need to view the completed page using a browser (Netscape or Internet Explorer). This is a fundamental action in creating web pages and you need to understand what is happening here. To make a page in HTML, you use one program—your text editor. To view the HTML document as a web page you need to open the file in a web browser—usually Netscape or Internet Explorer.

So, to view the HTML document we just created as a web page, we need to open a web browser. Once you have Netscape or Internet Explorer open, go to the File menu of the browser and move your mouse down to the "open file in browser" (or something similar) selection. Click to choose that selection, and then find the HTML file on your computer disk and open it—this is the file you just saved (noting its location) in your text editor. This is the same action you would perform if opening a word processing document from within a word processor program. Once you have your program open (in this case, a web browser), open the file you have just created and it should appear in your window as a simple web page.

If you have copied carefully, it should look like the sample. If it does not, check to see if you have copied the code accurately. Note that in our example, we use ALL CAPS when typing the HTML tags. This is not required. You may type in all lowercase if you choose and the web browser will still display your pages. We only create HTML in ALL CAPS to make reading the HTML codes easier–you can quickly separate displayed text from HTML coding if the HTML is in all caps.

Click here to see what the above page should look like.

What the Codes on Your Page Mean

The <HTML> and </HTML> at top and bottom tell the browser that this is an HTML page. Everything in between, except the HTML tags, will show up on your page. You should notice two things. First, most tags are called containers. That is, one tag <TITLE> begins a command and another ends it </TITLE>. The second command of a container begins with a slash (/) in the angle brackets. (Some tags are not containers and will be discussed below). Think of these container tags as switches that need to be turned on for a desired effect, such as bolding some words, and then switched off to return to normal text. Second, HTML is not case sensitive, so you can mix upper and lower case commands. It is best, however, to establish a consistent system for yourself.

Now, let's examine each element in the HTML above and talk about what it does:

HEAD

The <head> and </head> tags tell your browser that it is the heading (be careful, adding stray elements to the heading can cause problems for your page). The only thing you need in the heading now is the title.

TITLE

The <title> and </title> tags put the title on the browser title bar (NOT on the web page--a common confusion). This is not your filename, this is the title for this page. For example, the page you are now reading has a title tag that reads: <TITLE>HTML</TITLE>. Thus, if you look at the very top of the window you're reading, you will see the page title: HTML

BODY

The <body> tag comes next and can contain many elements (we will call the things that appear in tags "elements"). In this case, the elements in the body tag tell the browser the color of the background, text, and links. Let's examine each part of the body tag used here more closely: <BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#5C4033" VLINK="#DB9370" ALINK="#CD3B22">.

BGCOLOR= sets the background color for your page.
TEXT= sets the text color for your page.
LINK= sets the color of each hyperlink on your page.
VLINK= sets the color for each visited link on the page so that when a user returns to your page, they can see quickly which links they have already followed, or visited.
ALINK= sets the color of an active link–the color briefly shown when the link is clicked.

The question many people ask at this point is usually "what color is "#ffffff" ? That's easy; it's white. Now, what color is 5C4033? That's harder. These colors are described using a hexidecimal system. More about the color descriptions follows.

An important note to remember is that all things (text and images) that appear on your page will be between the <body> tags.

Notice that when we have finished creating the page, we must close the BODY and HTML elements with the </BODY> and </HTML> tags.

Using Colors: Exercise 2

Right now your page has a white background and black text. However, you can change the colors on your test1.html page by changing the color elements (hex codes) in the body tag. The hex codes are the six digit elements in red:

<body bgcolor="ffffff" text="000000" link="0000ff" vlink="00005a">

This tells the browser to display the background (bgcolor) as white, the text as black, the links as blue and visited links (vlinks) as purple. You can now experiment with changing the colors of your page. Refer to color chart below and try changing the colors for your text and background--remember to choose colors that will contrast well!

White rgb=#FFFFFF Red rgb=#FF0000 Green rgb=#00FF00 Blue rgb=#0000FF Magenta rgb=#FF00FF Cyan rgb=#00FFFF Yellow rgb=#FFFF00 Black rgb=#000000 Aquamarine rgb=#70DB93 Baker's Chocolate rgb=#5C3317 Blue Violet rgb=#9F5F9F Brass rgb=#B5A642 Bright Gold rgb=#D9D919 Brown rgb=#A62A2A Bronze rgb=#8C7853 Bronze II rgb=#A67D3D Cadet Blue rgb=#5F9F9F Cool Copper rgb=#D98719 Copper rgb=#B87333 Coral rgb=#FF7F00 Corn Flower Blue rgb=#42426F Dark Brown rgb=#5C4033 Dark Green rgb=#2F4F2F Dark Green Copper rgb=#4A766E Dark Olive Green rgb=#4F4F2F Dark Orchid rgb=#9932CD Dark Purple rgb=#871F78 Dark Slate Blue rgb=#6B238E Dark Slate Grey rgb=#2F4F4F Dark Tan rgb=#97694F Dark Turquoise rgb=#7093DB Dark Wood rgb=#855E42 Dim Grey rgb=#545454 Dusty Rose rgb=#856363 Feldspar rgb=#D19275 Firebrick rgb=#8E2323 Forest Green rgb=#238E23 Gold rgb=#CD7F32 Goldenrod rgb=#DBDB70 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Grey rgb=#C0C0C0 Green Copper rgb=#527F76 Green Yellow rgb=#93DB70 Hunter Green rgb=#215E21 Indian Red rgb=#4E2F2F

Khaki rgb=#9F9F5F Light Blue rgb=#C0D9D9 Light Grey rgb=#A8A8A8 Light Steel Blue rgb=#8F8FBD Light Wood rgb=#E9C2A6 Lime Green rgb=#32CD32 Mandarian Orange rgb=#E47833 Maroon rgb=#8E236B Medium Aquamarine rgb=#32CD99 Medium Blue rgb=#3232CD Medium Forest Green rgb=#6B8E23 Medium Goldenrod rgb=#EAEAAE Medium Orchid rgb=#9370DB Medium Sea Green rgb=#426F42 Medium Slate Blue rgb=#7F00FF Medium Spring Green rgb=#7FFF00 Medium Turquoise rgb=#70DBDB Medium Violet Red rgb=#DB7093 Medium Wood rgb=#A68064 Midnight Blue rgb=#2F2F4F Navy Blue rgb=#23238E Neon Blue rgb=#4D4DFF Neon Pink rgb=#FF6EC7 New Midnight Blue rgb=#00009C New Tan rgb=#EBC79E Old Gold rgb=#CFB53B Orange rgb=#FF7F00 Orange Red rgb=#FF2400 Orchid rgb=#DB70DB Pale Green rgb=#8FBC8F Pink rgb=#BC8F8F Plum rgb=#EAADEA Quartz rgb=#D9D9F3 Rich Blue rgb=#5959AB Salmon rgb=#6F4242 Scarlet rgb=#8C1717 Sea Green rgb=#238E68 Semi-Sweet Chocolate rgb=#6B4226 Sienna rgb=#8E6B23 Silver rgb=#E6E8FA Sky Blue rgb=#3299CC Slate Blue rgb=#007FFF Spicy Pink rgb=#FF1CAE Spring Green rgb=#00FF7F Steel Blue rgb=#236B8E Summer Sky rgb=#38B0DE Tan rgb=#DB9370 Thistle rgb=#D8BFD8 Turquoise rgb=#ADEAEA Very Dark Brown rgb=#5C4033 Very Light Grey rgb=#CDCDCD Violet rgb=#4F2F4F Violet Red rgb=#CC3299 Wheat rgb=#D8D8BF Yellow Green rgb=#99CC32

In addition to changing the colors for the background and text, , you can also change the colors for any links you create. Note these are all elements that should be placed within the angle brackets of the opening body tag (if not present, you will get the default colors of blue and purple, which might not show up too well against your new background color). When you save the new file, call it test2.html. it should look something like this:

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="ff0000" TEXT="ffff00" LINK="32CD32" VLINK="cod9d9"> Welcome to my first HTML page! </BODY> </HTML>

Click here to see what this page should look like
You'll notice that the colors don't contrast quite well enough--this is something you'll need to pay attention to as you make your own choices!

Now that you have the basic page down, you are a web publisher. You don't need to learn much more about HTML except more tags to add more to your pages. In the next few sections we will show show you how to maker hyperlinks and insert images into your html pages. Remember, as you work with HTML, try to type the commands correctly. A typo can spell problems (not great ones, but it can cause a blank page or make things look strange). Be prepared to play and redo your html many times. The best thing to do is to save frequently and view your document with a browser. You can do this by going to the File menu of your browser and going to Open File in Browser to view your document. To save yourself many hours of grief and stress, please read the following note carefully:

Every time you view a web page, your computer is downloading the file onto your hard disk drive and into a cache. A cache is a place where files are temporarily stored for faster viewing the next time you want to see them. This cache can cause real grief for web designers. As you create your web page, view it frequently in a browser, but press the "Reload" key to see changes. In other words, when you edit your HTML file, save the changes you made, then open it in a browser window. To see new changes, press the reload button. If your changes still do not show, your browser is reading from its cache. To force it to read from the file again, hold down either the Command key (PC) or Apple key (Macs) to view your new page. If this still does not show your newest changes, hold down the same keys again but add the Shift key to the combination.

Hypertext Links: Exercise 3

Linking is one of the most important elements of web pages. Links allow you to move from page to page and to different parts of pages. There are three kinds of links: one, an absolute link where you specify a full URL (web address); two, a relative link where you specify another file in your web space (the file name); and three, a target link where you specify a location further on down your page (there is also an email link which we will discuss below).

Absolute Links

To make an absolute link, we'll use the MATRIX Education web site address as an example. Type the following tag on your test page:

<a href="http://matrix.msu.edu/education">MATRIX Education</a>

This makes the viewer see the words "MATRIX Education" hyperlinked to the address of http://matrix.msu.edu/education. "a href" is shorthand for "hypertext reference," and in this case our hypertext reference is "http://www.matrix.msu.edu." You can put any words you want between the tags--they will be hyperlinked. Hyperlinked means that you can click on the text and it will bring you to the designated URL of the link, in other words, you'll be at that page. Be sure to end your link with the </a> after the words you want hyperlinked. If you forget, all the following text will be hyperlinked to the URL, and will never stop until it hits another </a>. Anything that has a "<a>" will need a "</a>" to close of the hyperlinked text. The "a" is an anchor tag.

You have now created an absolute link, and our page now looks something like this:

Take a look at what this page should look like

Relative Links
Relative links are simply internal links to other pages within your site, usually an html page in the same folder as the page you are linking from. Before we make a relative link, though, we need to quickly make another html page to link to. So, repeat the steps from Exercise 1 to make another page, but this time give your page a different title and write some different text (if you feel creative experiment with the colors too!). When you've written the html for your second page, save the page as test2.html.

The HTML tags for your second page should look like the one below, but you'll notice some extra tags in there that we haven't seen yet. For instance, we have put the commands "<center> and </center> around the first line of text. This piece of text is now centered. However, we also inserted the command <p> which is a paragraph break (<b> is a line break). The <i> </i> commands around "This is fun!!!" will italicize that piece of text. Refer to "More Text Features" to find out more useful tags. If you want to add more formatting to your page, skip ahead to More Text Features.

Take a look at what this page should look like

Using Images: Exercise 4

The easiest way to add an image to your page is to find an image on the internet. We will worry about copyright later, but make a note of where you found the image (i.e. write down the specific URL). The best place to look for one is in image archives that often contain copyright free images. Once you have found an image you like, a photograph or graphic from the web, either click the right mouse button (PCs) or click and hold your mouse button (Macs) and a menu will pop-up giving you different choices. Choose the option that says, "Save Image/Picture as." This will allow you to save the image in a place you designate (the best place would be into the same folder as your html files). Be careful to note the exact name of the image (writing it down is useful) and remember where you saved it on your computer. The graphic's filename should end in one of two extension .gif or .jpg (or .jpeg). This extension tells the browser the format of the image. Although more formats can be used on the internet, these are the two most recommended.

After saving the image in the same folder (or directory) as your HTML document, add the following tag to your page (make sure it appears within the body tags of the page. The example we give here is for an mage named sparty.gif, but obviously your image will have a different name:

<img src="sparty.gif">

Your notepad document should now look something like this:

Take a look at what this page should look like
Where you place the tag will determine where your image will be on the page. The default position is on the left, but you can configure your image to be aligned in many different places on your page. You can use center tags <center> and </center> to center your image or text, and you'll notice that the insertion of <p> makes a paragraph break.

More Text Features

There are many ways to adjust the formatting of your html document. For instance, you may want to increase the size of the heading for your page. The header tags listed below will change to size of the text--simply put the tags around the text you wish to resize (and don't forget to end the command, or your entire body text will be in that size). As you can see, header tags change size and make text bold. Headers are good for titles but not regular text as they can conflict with other tags.

<H1>Header 1</H1>

<H2>Header 2</H2>

<H3>Header 3</H3>

<H4>Header 4</H4>

<H5>Header 5</H5>
<H6>Header 6</H6>

The pattern here is obvious. <H1> gives the text the largest size, <H6> the smallest.

Let's examine a few more:

If you want to center, use the <center></center> tags.

If you want to make things bold, use the <B></B> tags.

We also might want to add a paragraph of text. It is difficult to indent on web pages, so most people use business standard and have block paragraphs with no indentation. To make a paragraph, all you need is a <P> tag at the end of your paragraph and you get a "double spaced" effect for your text.

You can now see why HTML is called a mark-up language. We are quite literally "marking-up" the text with a language similar to editing marks on a paper. It is not unlike those old days when the editor would take a red pencil and "mark up" a text document to show how it should be formatted.

Try adding some more formatting tags to your test1.html page. In the example below you can see that we have centered the first line of text and image, and added another line of text in italics.

<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY BGCOLOR="#333ff" TEXT="FFFF99"> <b><center>Welcome to my first HTML page!</b></center><p> Here's a great link: <a href="http://matrix.msu.edu/education">MATRIX Education</a> <p> <i>This is Pretty Easy So Far!</i> <a href ="test2.html">Page Two</a><p> <center><img src="sparty.gif"></center> </BODY> </HTML>

Click here to see what this page should look like


Note that the <p> tag is not a container tag. (Well, ok, it really is, but closing it is not necessary.) It tells the browser to end the paragraph and skip a line. There are other tags like this: <br> creates a line break; <hr> creates a horizontal line on your page.
 

Try adding the following tags to text in the body of your page. Experiment and play; it really is the best way to learn.

<B>Bold</B>

<I>Italic </I>

<U>Underline</U>

<S>Strike Through Text</S>

<Q>"Quotation"</Q>

<BLINK>Blinking</BLINK>

Another way to change text size and the best method for longer text is to use font tags:

<FONT SIZE=1>Font Size 1</FONT>

<FONT SIZE=2>Font Size 2</FONT>

<FONT SIZE=3>Font Size 3</FONT>

<FONT SIZE=4>Font Size 4</FONT>

<FONT SIZE=5>Font Size 5</FONT>

<FONT SIZE=6>Font Size 6</FONT>


Don't be afraid to combine commands to add style to your pages. The following will center, bold, and change the color and size of the font:

<center><b><font color="red" size=6>Play time</font></b></center>


Below are more tags that can be used to make lists on your page. Note, HTML was made by people in the sciences so there is a heavy emphasis on headers, lists, and tables:

Unordered List (round bullet)
<UL>
<LI>First row
<LI>Second row
</UL>

Looks like this:
•First row
•Second row

Ordered List (numbered)
<OL>
<LI>First row
<LI>Second row
</OL>

Looks like this:
1. First row
2. Second row