AN HTML SAMPLER

HTML--HyperText Markup Language, is the formatting code that enables browsers such as Netscape, Internet Explorer, Firefox, and Opera to present a web page the way you as the page's creator intend. HTML tells the browser where paragraphs begin and end, which words should be in bold or italics, where to put graphics, etc.

HTML codes or "tags" are placed within pointed brackets: < >. Many but not all tags come in pairs that start and end the function. The tags in the pair look the same except that the "end function" tag includes a forward slash ( / ). For example, <b> tells the browser to begin putting text in bold, while </b> tells the browser to stop doing so. Thus, if I wanted to put the words "Please pay attention" in bold, what I would write is <b>Please pay attention</b>.

All HTML documents start with the following obligatory tags:

<html>
<head>
<title>put your page's title here</title>
</head>
<body>

Here--after the <body> tag--is where you put the content of your web page. And at the very end, you close the document with

</body>
</html>

Here are some other useful tags:

<h1>A Big Header</h1>

<h2>You Can Make a Smaller Header </h2>

<h3>Sometimes Even This Size is Useful </h3>

<P>Normally, text will look like this. You begin a paragraph by telling the web browser that it's looking at a paragraph; to do that, you use the HTML tag <P>. Then just type what you want, and your browser will decide where to break the lines. Hitting Enter won't make the line break. If you want to make the line break, you have to use a line break symbol, which is <BR>.
As you can see, inserting <BR> is like hitting Enter or Return. It drops whatever comes after it to the start of the next line. When you get to the end of your paragraph, put the closing paragraph tag: </P>

Here are some other things you will need to know:

All HTML tags are surrounded by pointed brackets: < >
Because pointed brackets signal HTML commands, you can't use pointed brackets for anything else.
It's very easy to make lists of items, the way I've done here. This is an unordered list. It has no letters or numbers, just bullets marking each item.
<ul> is the HTML tag to use at the start of an unordered list. Each item in the list begins with the symbol for a list, <li>. You don't need a closing tag for <li>, but when you're done making the list, you should end it with </ul>, the closing tag for an unordered list

Your coding will thus look something like this:

<ul>
<li>first item on list
<li>second item on list
<li>third item on list
<li>fourth item on list
</ul>

It's just as easy to make an ordered list.

First, you type the code or tag for an ordered list, <ol>
Then, you start making your list of items. Each item starts with the tag for a list, <li>
You don't have to type in the numbers: if you use the tag for an ordered list, your web browser will automatically number the items.
When you finish listing all the items, you use the tag that tells your browser that you've finished with the list: </ol>.

A third kind of list is called a definition list. Instead of <ul> or <ol>, you use the tag <dl> (and the matching closing tag </dl>):

This is item one in a definition list. It starts with the tag <dt> (for "definition term").
This is item two. It also starts with the tag <dt>.: The nice thing about a definition list is that you can add commentary, as I'm doing here. The commentary is automatically indented. To add commentary to a definition list item, you start the line with <dd> (for "definition description").
This is item three. It needn't have commentary, but it can.
Another reason to choose a definition list is that you can add your own markers at the start--for example, here I've used a blue bullet.
I could start each item on the list with a blue bullet.
Or I could switch to red.
I needn't restrict myself to bullets.
I've started to amass a collection of tiny graphics to use in situations like this.
Here's another.

<CENTER><h3> Oops, almost forgot.... </h3></CENTER>

If you want to center some text, you can use the <center> and </center> tags. (This is an old way to center text. There are other ways that are now officially preferred, but <center> and </center> tags still work and are easy for beginners.)

Including Graphics

Let's say you've found some graphics that you'd like to include on your home page. Using WS_FTP, Fetch (for the Mac), or some other file transfer program, you've managed to upload them to the www directory on your gl account . Now what? How do you actually put them on a page? Well, let's suppose you have an image of a spider [spider graphic] that you want to include (now that you spin webs). To include this image, which, with great originality, you've called spider.gif, you use the HTML tag <img src="spider.gif" alt="spider graphic">. The "alt=" designation supplies a text description so that someone using a text-based browser, or surfing with images turned off, or using a browser that reads the web site's content aloud (for the visually impaired) will know what sort of image you've used.

spider graphic You may find that the image doesn't appear exactly where you expect it to. To some extent, you can control the placement of the image by adding an ALIGN attribute to the HTML tag. For example, if you want the spider all the way to the right, you should say <img src="spider.gif" alt="spider graphic" ALIGN=right>

If you want the spider in with your text, like this, try <img src="spider.gif" alt="spider graphic" ALIGN=absmiddle>. With absmiddle, the center of the image aligns exactly with the center of the text's letters. Other possibilities with ALIGN are top, texttop, middle, bottom, baseline, and absbottom. However, only top, middle, bottom, right, and left are recognized by all browsers at the moment. See the WebMonkey tutorial for more illustrations.

Adding Links to Other Sites

One more thing you'll need to know is how to add links from your web page to other sites. Let's say, for example, that you'd like to let people know about all the useful resources available on my Useful Links page. You know that the URL is http://research.umbc.edu/~korenman/links101b.html . How do you include a link to this page? The HTML tags you'll need are anchor tags: <a href=" "> and </a> The actual coding would look something like this

One highly recommended site is Joan Korenman's <a href="http://research.umbc.edu/~korenman/links101b.html">Useful Links page</a>.

(My text editor put href on a different line from the a that precedes it because the entire address wouldn't fit on one line; when you type the tag, just leave a space between a and href: <a href>; let your text editor position the parts.)

On your web site, the above HTML coding will look like this:
One highly recommended site is Joan Korenman's Useful Links page.

You can see that "Useful Links page" is underlined and appears in a different color from the rest of the text. If you put your mouse arrow over it, the arrow will become a hand--an indication that this is a hypertext link. If you click on it, you'll go to my Useful Links page.

One more thing: if you simply want to add a link to an HTML document that's in your www directory, you don't have to write out the entire address, just the file name. Thus, if I wanted to put a link to the Schedule of Assignments for FYS 101B, which I've called sched101b.html and which is located in the same directory as this file you're reading, I'd make a link that looks like this:<a href="sched101b.html">Schedule of Assignments</a>. I could write out the full address: <a href="http://research.umbc.edu/~korenman/sched101b.html"> , but it's not necessary. Either way, the coding will appear this way on my website: Schedule of Assignments.

IMPORTANT! Always be sure to put an identifying word or image between <a href=" "> and </a>; in the above example, the identifying words are "Schedule of Assignments." Without some word or image, the reader won't be able to see the link to click on it.

Now it's <font color=red>your turn</font>.

Return to Useful Links Page