Web Publishing with HTML

Section One

What is HTML?
Well, as you may already know, it's HyperText Markup Language, a programming language that is used to create documents for the World Wide Web. HTML is what's known as a tag-based language. That is, HTML has a set of tags that are used around parts of a document (characters, words, paragraphs, etc.), to define those parts. In HTML, the tags are particular letters or words surrounded by pointy brackets (< >).

There are editing programs out there that will help you to create documents for the web, such as Macromedia Dreamweaver, Netscape Composer (which is part of the Netscape Communicator package), Microsoft FrontPage, etc., but none of them gives you the power that you get from knowing HTML. If you run into a roadblock with an editor and don't know why you're having a problem, you won't be able to fix it unless you know the basics of HTML.

Creating HTML files
You can create your HTML files in any ascii-based text editor, or any word processor that allows you to save as plain text. For example, on the Mac side, you can use Simple Text, or on the PC side, you can use Windows Notepad. You may also use something like Microsoft Word on either platform, but you MUST remember to save your document as plain text, and with a .htm or .html extension, or it won't work.

How do I name my files?
As a convention, filenames end in .html or .htm (because Windows 3.1 can't read long file names). There's no hard-and-fast rule that they HAVE to, but they should, except in special cases. Some web browsers will not display your pages properly if they're not saved with a .htm or .html extension (for example, mypage.html)

What are some of the parts of a book?
There's the title, byline, footnote, chapter, section, subheadings, references...

Most of these parts, and many more, have corresponding tags in HTML. The tags define two things. Most importantly, they define the structure of the document. That is, they tell you that this line is a title, or that that word should be emphasized. Of less fundamental importance, but probably of more importance to you right now, is that they determine what the document is going to look like.

Now, what do you mean by tags?
Tags are little bits of information inside pointy brackets, that tell the text that they surround what to do. Most tag sets have an opening tag and a closing tag. For example, the title of your document will be surrounded with title tags, like this:

<title>Jurassic Park</title>

The closing tag is the same as the opening tag, except that it has a slash at the beginning. The opening tag turns on the style or format, and the closing tag turns it off. For example, in the case above, <title> means, "This is where the title starts," and </title> means, "This is where the title ends."

The tags, together with the text that they surround, is called an "element". Thus, the "title element" includes both the tags and the words "Jurassic Park."

There are a few tags that are required in an HTML document, and they have to be in a particular order.

The tags are, in order:

<html>

<head>

<title>
</title>

</head>

<body>
</body>

</html>

All of these elements must be in your document, and they must appear in this order. (There's also the DOCTYPE element, which we'll talk more about later.) Of course, you'll have text between your TITLE tags, and you'll have text, images, and other tags between your BODY tags, but this is the basic skeleton of your document. You might want to copy it and paste it into your blank file as a starting point.

Another thing to be aware of is that each of these tags is only used once in each document. For example, you only use one BODY tag, but it surrounds almost all of your document (everything that's not in the HEAD).

Please note: Tags are not case sensitive. You can put them in all lower case, ALL UPPER CASE, or mIxEd CaSe. However, in the emerging web publishing standard (XHTML, which will replace the HTML standard), tags must be lower case (the only exception is when you are using URLs or filenames in attributes, which must be the actual case that they exist on the server; more about that later). It is a good idea to begin adopting that convention now.

How do I name my files?
Filenames must end in .html or .htm (with Windows 3.1--it can't read long file names). All your web-page files should end in .html, except in special cases. (Of course, this doesn't include add-on files like graphics...they would end in their normal . gif or .jpg extensions.) Special cases include pages that use server-side includes, cgi scripts, etc. We won't be discussing those here, so for our purposes, all of your web-page files should end in .htm or .html.

Let's make our first file.
To do so, start up your editor (use Simple Text on the Mac or Notepad in Windows). Then, put the required tags listed above into your empty file (you may cut and paste them between windows).

To give your page a title, type some words between the open TITLE tag and the close TITLE tag. For example, you could type:

<title>My First Web Page</title>

When a user views your page, the "title" of your page will appear in the title bar of the web-browser's window, up at the very top. (In Netscape, it appears in the blue bar at the top of the Netscape window. It does not appear in the body of the page.)

Then, put a paragraph of text between the BODY tags, such as:

<body>

<p>Here's the text for my first web page!</p>

</body>

(The <p> and </p> tell the browser that this should be treated as a paragraph.)

Save this page somewhere on your hard drive, and make a note of where you've saved it. (For the sake of convenience, you may simply want to save it to the desktop.) You may call it anything you wish, but for the sake of consistency, you may want to name it your first name, followed by the number one, for example:

mary1.html

View your page
There are several different ways to view the page you've just created. If you've saved it to the desktop, you can simply drag the icon from the desktop into the main window of your web browser, right where you're reading this text. (Once you do that, to get back to this page, you can simply hit the "Back" button on your browser.)

If you haven't saved the file to your desktop, you can choose "File" from your browser's menu bar, and then choose open file or open page. Browse your hard drive until you find where you saved the file, and then double-click on it. It should open into your browser window. Once you've mastered opening your files, it's time to move on to more HTML.

Now, let's jazz your page up a bit.
There are lots of tags that are available for use in HTML. Remember how before, we talked about defining the structure of your document? The basic HTML tags are based on that premise. For example, at the top of the body of your document, you will probably want to have some sort of headline. This would be the main heading, and probably deserves more emphasis than any other words on the page. Since this is the main heading, it receives a designation of <h1>. So surround the heading of your page wi th <h1></h1> tags.

As you divide your document into sections, you may want to use subheadings. To do this, simply substitute the number 1 in the <h1> tag with another number, 2-6. The headings get smaller as the numbers get larger. Try putting all six H tags, with text between the tags, into your new document. Then save the document, and reload it into your browser.

Whitespace can be a confusing issue when you're dealing with HTML. Each bit of whitespace (either using the space bar to create several spaces, using the tab key, or hitting return several times, among others) is actually seen as a single space. Even if you hit return to get five blank lines in your text editor, you're really only going to get one space when you view the page in your browser. There are tags that allow you to add whitespace and line breaks, which we'll talk about in the next paragraph. There are also some formatting tags that make designing a page easier. Lastly, there are some tags that create whitespace by default. For example, you'll notice that when you made the page with all of your H tags, each new heading started on a different line. That's because there's a line break "built in" to the H tags. In simpler terms, what that means is whenever your browser sees an H tag (either an H# or a close-H#), it's going to then put in a line break automatically. You cannot suppress this line break (at least not without using styles), so it goes to follow that you can't use an H tag within a paragraph.

You will need to force line breaks in order to separate paragraphs of text. The two tags you'll use most often are <p> and <br>. The <p> starts a new paragraph, and puts a line of whitespace between the new paragraph and the previous paragraph. The <br> tag bumps down to the next line, but does not put a line of whitespace before the line that follows. The <br> is especially useful for things like poems. <br> does not take a close tags, but in the new standard, should be represented as <br />

Try using the <p> and <br> tags in your document now. Be sure that when you make changes to your document, you save it, and then reload it into your browser, using the reload button/function. Then the changes will show up.

More Tags

<hr>
Inserts a horizontal rule line. Does not require a close tag. (However, in XHTML 1, the hr tag should be represented with a space and a trailing slash: <hr />

<pre>
Preformatted text--does not ignore whitespace, but prints in a distinct font (usually monospaced, like Courier). Also, has line breaks built into the open and close tags, so that preformatted text cannot be used in the same paragraph as normal text. This is commonly used for displaying quotations or computer input/output. Does require a close tag.

<blockquote>
indents the right and left margins of the paragraph, and puts space before and after the selection. Also has line breaks built into the open and close tags. Requires a close tag.

<center>
Centers all the material (text, image, table, etc.) between the open- and close-CENTER tags.

<b> . . . </b>
Boldface

<i> . . . </i>
Italics

<u> . . . </u>
Underline (users often may confuse underlined text with links)

Most of the stylistic elements above can (and in many cases, should) be represented using Cascading Style Sheets. For example, the CENTER element is deprecated, and browser makers will not be required to support it in new versions of their web browsers.

You don't need to use line breaks to create lists; there's a specific set of tags to use. There are many different kinds of lists in HTML; we'll cover the two most common here. To create a list, first you have to insert the tags that let the browser know that this is a list, and then you need to put, within the list tags, tags that tell the browser where each item in the list begins. Let's use, as an example, a bulleted list, also called an unordered list.

As I mentioned, first you need the list tag, which, for an unordered list, is <ul>. Then, each list item, including the first list item, should be preceded by an <li> tag. (You do not need to use a </li> tag.)

Here's an example:

<ul>
<li> First item in the list</li>
<li> Next item in the list</li>
<li> Final item in the list</li>
</ul>

Don't forget the </ul> tag. It's a common mistake, and will mess up the rest of your document.

An ordered list is similar to an unordered list, except that instead of adding bullets, the list items will be numbered. You create an ordered list in exactly the same way as you create an unordered list, except instead of the <ul> tag, you'd use an <ol> tag.

Try adding both an unordered list and an ordered list to your page now. Don't forget to save and reload when you're done making your changes.

Putting an image into your page is as easy as typing a URL into Netscape. The tag looks like this:

<img src="http://www.zzz.com/imagename.gif">

Note: An image element doesn't take an end tag, but as other elements without close tags, it will have to be "closed" with a space and a trailing slash.

IMG means image, and SRC means source. Thus, the source of the above image is a machine called "www.zzz.com", and the filename is "imagename.gif".

Go into the page you've made, and stick an image at the top of it. There's an image you can use at:

http://www.brown.edu/Facilities/CIS/CIS_Graphics/relax.gif

(Also, note the use of quotation marks in the tag. Be sure to use them both before and after the source of the image, as shown above.)

A few notes about images...
You can get images from many different places.

Hyperlinks or Anchors

Of course, one of the nicest things about web pages is that they let you zip to another place quickly and easily with internal references. To let you do this, you have to define two things, the place that you jump from, and the place that you jump to. You can jump from one document to another, or from one place in a document to a different place in the same document.

Let's start by looking at how to create links within the same document.

Say you want to allow people to jump immediately to the "Dogs" section of your document, from the top. First, you have to decide where the "Dogs" section of your document is...in other words, you must select a destination. Once you know where you want them to end up, go to that place in your document, and name that spot (this is your "anchor"). To do that, you'll add the following to your document:

<a name="DOGGIES">This is the first line of the section about dogs</a>

Now you need to create the clickable part at the top, the from part. So at the top you'd put in:

<a href="#DOGGIES">Go to the Dogs section of the document</a> (Note: HREF means "hypertext reference")

And voila. When you click on "Go to the Dogs section of the document", you're going to zip down to where name has been defined as "DOGGIES".

It doesn't matter what you choose to name your anchor and your link. I chose DOGGIES here, just to make it stand out a bit. The only thing that's important is that the name match in both places. If you use DOGGIES as the name (in the anchor), you must also use it in the link, and be sure that it's spelled exactly the same, with the same case (all upper, all lower, or mixed). Also, note that there is a pound sign (#) in the link section, where you use the A HREF tag, but there is no pound sign in the anchor. This is the way it must be, to work properly.

Using this same concept, you can link to other documents.

Say you want your users to be able to zip over to the Brown home page from your site. The place you want to point to is actually a different document in a different place. So to get there, you simply put the URL after the HREF command, like this:

<a href="http://www.brown.edu/">Go to the Brown Home Page</a>

You don't need to create an anchor (an A NAME= tag), because all of the destination information that is needed is in the URL. If there are named sections in the destination page (meaning, the person who created the destination page has put anchors into it), you can link directly to an anchor by appending

#anchorname

on the end, where anchorname is the name that the page's author has given to that anchor.

Now try adding a link from your page to another page on the web. To get the URL of the page you wish to link to, you can either type it in by hand, or you can copy it from Netscape's "Location" field, and then paste it into your document.

Images as links

The text that you include between the <a href...> and the </a> that is the content of the element. That's what shows up as a clickable area, underlined and in a different color.

But as you likely know, you can also click on an image that will take you someplace. The concept is essentially the same, but you substitute the text for an IMG tag. What you do is start the anchor (the A HREF tag) the same way you would if you were using text rather than an image. This is the destination that clicking will take you to.

<a href="http://www.clubmed.com/">

Then add the item you want to click on, which in this case is an image (instead of text)...remember how we put the image in before? Do it the same way.

<img src="http://www.brown.edu/Facilities/CIS/CIS_Graphics/relax.gif">

and then you have to close your anchor with </a> after the IMG tag.

So the whole command would look like this:

<a href="http://www.clubmed.com/"><img src="http://www.brown.edu/Facilities/CIS/CIS_Graphics/relax.gif"></a>

Miscellaneous tips

End of Section One

On to section two.

Valid HTML 4.0!