If you've completed Lesson 1, you've already learned enough basic HTML to have a web page. But in my experience, most folks quickly want to learn more. That's what this lesson is about.
I try to encourage people to hold off on messing with colors until they start working with HTML editing software, but it's possible to do this with just html too.
Colors for the entire page can be adjusted in the <body> command, though there are other places where you can change the colors of things too. So here's how the beginning of a page with color commands added might look:
<html>
<head>
<title> My Homepage</title>
</head>
<body bgcolor="#000000" text="#123456" link="#555555" alink="#ag5545" vlink="#444444">
The part in bold above are commands that add colors. "bgcolor" controls the background color; "text" controls the color of the text on the page; "link" controls the color of the links; "alink" controls the color of the link when it is clicked by a reader; and "vlink" controls the color of the link after it is visited on the page. These colors are derived from something called "hex numbers:" different numbers control different colors. The best way to learn about this is to play with it a bit, and also to visit a site like the Dream Artists Hex Code Page.
Colors and backgrounds add a lot to a web site and they can be a lot of fun to play with of course. But be careful and remember that if you want people to actually read your web site, you need to have colors that help (not hinder) reading and surfing. You can read more about this on my comments on style.
Try it out! The only way to find out if you are doing this correct is to try it, so, working with the simple web page you started to develop in lesson one, give it a try.
One of the things you will also want to do soon (very soon, if you are reading this document because you are in one of my classes) is make links to other web pages that are a part of your site. I talk about this a bit more with the section on style, but simply put, you don't want to put all the information about yourself onto one web page. It's too much information, it's too cluttered, and it doesn't categorize the information (which helps make it easier to understand). Fortunately, linking to other documents within your site is very easy.
You will recall from lesson one that a simple link looks something like this:
<a href="http://www.emich.edu"> The EMU Homepage</a>
Which produces a link like this:
Now, let's say you have a homepage going and that page is called "index.html." From that main page, let's say you want to have a link to your resume. To do that, what you would do is:
There are lots of other HTML commands or "tags" you can use to control how your page looks. But first...
Before we Get to The Commands... "view source"
This might be an overstatement, but before the days of HTML editing software, I think just about everybody learned how to work with HTML by using the "view source" command to copy how others made their web pages. At least that's how I learned how to do it. The menu location of this varies, but in current versions of Netscape, look under the "View" menu item and select the item called "Page Source."
Depending on the computer you're working on (be it in the 312 Pray-Harold Lab, another lab on campus, your computer at home, etc.), trying to view the page source might give you a dialog box that asks if you'd like to save or delete the document. Go ahead and save it, but keep in mind that it will probably be saved automatically in a default location-- on most Macs, that's the desktop.
If you have to save the document before you can open it, go ahead and try to open it with SimpleText. If you're lucky, the file will automatically open in SimpleText (or NotePad if you're working on a PC). You might also have to "copy and paste" the code from the window where it is displayed into a software like SimpleText or NotePad.
When this works, what you realize is that the "source" is nothing but the HTML file. Now, this means two great things to the web writer working directly with HTML. First, it means that you can figure out how most of the stuff on the web works simply by looking at and playing with the code-- the machinery-- underneath. Second, you can "borrow" directly from the code to try and make the same things happen on your own web pages. Now, keep in mind I'm not suggesting that you plagiarize exactly, but writers have always learned how to write compositions of their own by copying others. Basically, that's what you're doing when you copy a nifty little HTML code from someone else and make it your own.
Keep in mind this is a very short list of some of the most important HTML commands-- there are a bunch of other ones, but if you've got these down, you can make a pretty sophisticated web page. Two places to go for information and similar "cheat sheet" lists of links are:
<html> While not essential, this is the first tag on a page that tells the browser that it's a web page.
<head>...</head> This is goes at the beginning of the document; between the two different "head" tags.
<title>Your Title Here</title> The most common head element that I know of, the title tags puts a title for your page in the bar at the top of your browser.
<body>...</body> This is for the "body" of your web page. For most web sites, this is where you'd put all of the other commands between these two commands.
<h1>Your Headline Here</h1> This makes headline-sized type. Headlines run from H1 (the biggest) to H6 (the smallest).
<p> This makes a paragraph return. Keep this in mind because HTML doesn't recognize paragraph returns as you would make them in a word processor. If you want your text broken up into chunks, you need to add those <p> tags.
<a href="http://www.the-address.com/filename.html">Link to document here</a> This is for making a link to another web site. The "http://www.the-address.com/filename.html" is the URL being linked to; the "Link to document here" is the text that will show up as a highlighted link; and the last part, </a> indicates where the link ends.
This command also works for linking between HTML Files in your own directory. Let's say your main page is called index.html; if you have another HTML file (maybe an essay for a class) called "paper.html", you can make a link from the index.html by putting in a command that looks like this:
<a href="paper.html">A link to my paper</a>
Keep in mind that to link from one HTML file from another like this, you need to have both HTML files in the same directory.
<b>Bold text</b> This makes the text between the commands bold.
<i>Italicized text</i> This puts the text between the commands in italics.
<center> text to be centered </center> This puts the text (or whatever, actually-- graphics, tables, lists, etc) in the center of the screen.
<blockquote> Insert your text here </blockquote>
With this command, you can indent text in from the left margin, which is useful for making blockquote in a longer chunk of text or by arranging the text in a particular way.
Here's an example of what blockquote would look like using the previous sentence:
With this command, you can indent text in from the left margin, which is useful for making blockquote in a longer chunk of text or by arranging the text in a particular way.
<ul>...</ul> This is the beginnings of making what is called an unordered list. It's a little confusing to explain, so let me try to demonstrate. The following HTML...
<ul>
<li>item number one
<li>item number two
<li> item number three
</ul>
...produces a list that looks like this:
<img src="graphic.gif"> This inserts a graphic into a web page where you put the command. Keep a few things in mind, though: