"But I Don't Wanna Learn HTML! I Just Wanna Make Web Pages!"
Well, you could do that. I know many who just use an HTML editing software and never learn any of the coding that goes into making a web page, and there are a lot of people who do indeed make web pages like this. But I wouldn't recommend skipping the process of learning at least a little HTML for a number of reasons:
Before going too far, you might want to print this page out. It's usually easier to follow the instructions if they're on paper first...
The first thing to remember is that all web pages are just plain text documents with some coding in
them-- Hypertext Markup Language, or HTML. HTML isn't actually a computer language per se; rather, it is a
coding system that uses basic commands to effect text, graphics, and the like on web pages.
For the most part, HTML makes the web work. I say "for the most part," because there are a few other things out there that do make web pages work, different sorts of scripting languages, Cascading Style Sheets, something called XML, etc. But never mind about all that; the focus here is on using simple tools to make simple web pages, and it doesn't get much more simple than HTML.
HTML has TWO very basic grammatical rules that are fairly easy to understand:
<title>This is the title command</title>
You might not know yet what the word "title" means in terms of an HTML command (though you can probably guess), but you can be assured that since it appears between the "<" and the ">," this is some sort of HTML command. Further, the item in the brackets that includes the slash is the one that "turns off" the command. In other words, the <title> is the beginning of the command; the </title> is the end of the command, sort of like a period in a sentence.
With HTML, writers write text and include codes for other things to happen-- links, graphics, etc. All of this may look complicated at first, but it's actually quite easy. In fact, one of the reasons why the web has grown so quickly is that HTML is easy enough to be learned by folks with some computer experience but no real programming experience.
Here's how it works:Step 1: Type this text EXACTLY as it appears below using some sort of ascii text editing software.
The key thing for doing this successfully is you need to work with a "plain text" editing software. If you are working on a MS Window-based computer, you want to use something like "NotePad;" every version of Windows has this application in the "Accessories" folder. If you are working on a "pre-OS 10" Macintosh computer, you want to use either "Simple Text" or "TeachText," depending on the version of the operating system. If you are using a Macintosh running a version of OS 10, you will want to use "Text Edit" or "BBEdit." In the Mac lab at EMU, we use a software called Taco, an excellent and freeware package. If you use "Text Edit," look under the "Format" menu and select "Make Plain Text" before you begin this exercise.
You can also use software like MS Word or WordPerfect, but if you do use a normal word processing software, make sure you save the document as "text only." If you don't save this as "text only," the exercise I describe here won't work right.
<head>Be careful about this! Typos could cause this to not work! And remember-- if you use something like MS Word or WordPerfect, you need to "save as" text only.
<title> This is the title of a web page</title>
<h1>Welcome to the super simple web page</h1>
Here's some plain text.<p>
Notice how there is a space separating this sentence from
the previous one? It's because of that p in brackets.
That's my homepage so far. Pretty neato, huh?
Step 2: Save this file as "index.html" or as "index.htm"Some older PCs will require you to save it as "index.htm"; that's okay because it will work as either "index.html" or "index.htm." But almost all newer computers (those running newer versions of the Windows or Macintosh operating systems) might try to complicate this by "hiding" the extension (the ".html" part) or by asking if you really want to include the extension or not. No matter what your computer tells you, be sure to include the ".html" part.
Also, while it isn't too important yet, there are a few rules you ought to know about naming your html files. First, you want to get in the habit of saving the files that will become the "main page" for your web site as index.html or index.htm since those are the default names for "homepages" on the web.
Second, all html files must be one word. This is not optional; these are the rules! You can't save HTML files the same way you save your run-of-the-mill word processing file. A few general rules:
- NO spaces-- not "my page.html" but "mypage.html"
- NO characters other than letters, things like the following: ";,?/&^" etc. The only punctuation you should have is the "." preceding the html.
- NO capital letters-- not "Index.html" but "index.html"
- WITH ".html" or ".htm" at the end-- without that little addition, it isn't an html file.
Also, make sure you remember where you save this file! We will talk about the options for doing this in the Mac lab at EMU. On your computer at home, I would encourage you to create a folder for your web work and to save everything having to do with your web site there.
Step 3: View your file in your browser.
How to do this varies with different browser software, but generally, look under the "File" menu, and select the "Open File..." or the "Open Page..." option. This will open a menu option like the one you get when opening any file from an application. Find the file you just saved ("index.html" or "index.htm"), and open it. With any luck, you'll get the beginnings of your web page.
If it worked, congratulations! You're halfway there! If it didn't work or it doesn't look like this page, then you did something wrong. You might want to go back and check...
Links to other documents are what makes the web go 'round and it's quite easy to do. Here's the basic command:<a href="http://www.westvalley.edu">http://www.westvalley.edu</a>
The part in the quotes, "http://www.westvalley.edu," is the URL or "address" of the web page to which you want to link. You can link to just about any page on the Web from the page that you are making, which is one of the key things that has made the Web the exciting hypertextual forum that it is. The part that says "West Valley College" is what will show up as a link when you look at this file in a web browser. The "</a>" part is important because it is a command that indicates the end of the link.
To add a link, go back to the HTML file you're working on (note that you have to do with this with the software you used to make the basic HTML file and not with a browser) and then add the link command somewhere in the body of your page.
Just remember that you've got to put it in the main body of your web page, which is any of the places between the commands <body> and </body>. If you put it between the <head></head> part (toward the top of your file), it won't work. Once you've inserted the link, save your file again so it will remember the changes and try to look at it on the Web. (You might have to push the "reload" or "refresh" button on your browser to make the changes show up on the browser). If you do this right, it should show up on your page, looking (and working) like this link:
There are two basic graphic formats for images on the Web: "gif" and "jpeg" (or "jpg"). There are also two basic ways of getting graphics for your web site. You can make them (and this is accomplished with software, a digital camera, and/or a scanner), or you can download graphics from other sites. Making your own graphics is a more advanced step-- for the time being, let's start with downloading something.
It depends a bit on the software you are using to save a graphic from the web, but most graphics available on the web can be downloaded with a few simple commands with most browsers. Don't change the name of the graphic and don't leave off the part that says ".gif" or ".jpeg" or "jpg"--that's what helps make this work.
You need to save this graphic in the same folder or directory as your index.html file! The easiest way to keep all of your web stuff together is to create a folder or directory on your computer where you can put your different html files and graphics together.
A word now about graphics like this: there are a variety of copyright and other issues that you should be aware of before you go out and randomly "borrow" graphics. We'll talk more about this in class as we progress through making web pages, but for the time being, realize that you shouldn't just take anything. This particular image came from one of the many free sources for clip art on the web.
Okay, having said that, take this graphic:
Make sure that you save this graphic as "dalitimewarp.gif" and in the SAME PLACE as you save your HTML file. This means in the same folder (if you are saving to the hard drive) or to a floppy diskette.
Now, to make this graphic show up on your web page, insert this command somewhere in your site:<img src="dalitimewarp.gif">
The "dalitimewarp.gif" part is where you would put the name of the graphic file you want to insert. Any graphic file that you download from the Internet should work for this command; for graphics that you create, you need to make sure that you save them in either "gif" or "jpeg" format.
To see if this all worked, do what you've done twice before: save the HTML file (and remember where you saved it!), open the HTML file in your browser, and see what it looks like.
No, really! If you can a) type up you text, b) add a few basic formatting commands, c) link to other documents on the web, and d) insert a few graphics here and there, then you can make a simple and satisfying web page. Oh sure, you'll want to do more, but this is plenty to get yourself started.
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:
<title> My Homepage</title>
<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 ZSPC Super Color Chart or the 4096 Color Wheel.
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.westvalley.edu">West Valley College</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 usually it's under the "View" menu item and it is usually called "Page Source" or just "Source."
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...
<li>item number one
<li>item number two
<li> item number three
...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:
If you have completed lesson 1 and have played around with lesson 2 a bit, you should have a web page in the works. But a web page is only accessible to other folks surfing the web if you upload the file to a server, which is a computer connected to the Internet that "serves" web pages to you when you (as a "user") surf the web, looking for web sites. Server access then is obviously very important: it's what allows an HTML file to really become a web page that can be accessed by everyone else on the world wide web.
- If you are working with FileZilla, it looks like this: (ws-ftp is similar)
The window on the left side (the one labeled "Local Files") is on your computer. In this case, this indicates what's in the folder "Web Page," which is in the "Documents" folder for the user "Steve Krause" and on the "C" drive. This is one of the many reasons why it is critical that you understand where you save files on your computer and how to create subdirectories on your computer. The window on the right indicates what is on the server. In this example, you see that there are several subdirectories (such as "howtohtml," which is where this web page is located) in this window; when you first set up your web site, the right window will only contain the directory titled "..," and this is a directory that you should ignore.
- To upload a file from your computer, select the file in the left window (your computer) and drag it into the right window (the server). You should see some indication of the process of this move in the window on the bottom of the screen.
To download a file to your computer, do just the opposite: select the file in the right window (the server) and drag it into the left window (your computer). Be sure to note what directory you are in on your computer.
It's that simple.
A Brief Guide to Understanding HTML Editing Software
So what is HTML Editing Software, Anyway?Long ago, when the web was but a young pup in the world (way back in the early 1990s!), all web pages were done the old fashion way: simple and reliable ascii text with the tags in brackets (just like what you did with lesson 1). It was tedious and time consuming and a little confusing to novice users, but that's the way it was and we liked it. And really, that's the way it still is with a lot of web designers: many folks still don't have any faith in the various editing software products now available.
But pretty soon, HTML Editing Software packages appeared. They came with the promise of being "WYSIWYG," and they have broken that promise time and time again...
Let's back up a step. "WYSIWYG" (pronounced "wiz-e-wig") is "What You See is What You Get." The easiest example of this is word processors. In the old OLD days of computers and word processing (back in the 80s!), it wasn't easy to get your text to show up as bold or in a different font or what-have-you. You had to insert strange little markers, and these little markers would do certain things, but you couldn't really see what you page would look like until you printed it out.
Nowadays, when you want to make text bold with even the most basic of word processors, you highlight the text and select an option in a menu that makes it "bold." Then it shows up on the screen as bold text. Furthermore, when you print the document out, it shows up as bold text on the paper. That's WYSIWYG: what you see on the screen (be it issues of fonts, layout, size, graphics, you name it) is what you will see on the page when you print it out.
So that's the promise of HTML editing software: making it as easy to create a web page as it is to create a document with a word processor. But, as we will discover as our story continues, it's a hard promise to keep.
What Kind of HTML Editing Software Is There?HTML Editing software basically breaks down into two categories: not free and free.
Here are a few examples that cost some money (between $100-300):
There are lots of other examples I could mention here, but these are softwares I'm sort of familiar with and that seem to be getting the most attention nowadays. Incidentally, the EMU Computer Store has considerable discounts on this software-- check there before buying.
Now, if you end up getting serious about making truly professional web sites, you'll want to invest some money and get familiar with one of the software packages I mention above (along with a lot of "helper" applications to handle graphics and the like). The free software tends not to be as good, but the price is right, and if you only want to use the web to make some fairly simple web sites (some text, graphics, and links that might take advantage of some things like tables) and you don't want to mess with web sites that access databases or what-have-you, you probably only need the free stuff.
There are a couple of different free HTML editing software tools out there (and it might be worthwhile checking out Yahoo's directory of HTML Editing Software page), but the one that I recommend is called "Mozilla Suite." Again, it's not the best HTML editing software available, but the price is certainly right and it is easy to use.
If you decide to download Mozilla, keep two things in mind. First, depending on the sort of connection you have to the Internet (modem connection versus a higher speed connection like a cable modem), it could take literally hours for the software to download to your computer. This is because Mozilla is a huge, HUGE file. If you don't have a DSL or cable modem connection to the internet, bring in a blank CD and Second, if you use a different browser to check your email, be careful about how you set up Mozilla-- it will want to "take over" your email and other functions from this software.
To use Mozilla to make web pages, you need to access the Composer function. The easiest way to do this is look under file, select "new" and then "blank page." This will open up a window where you can start making a web page. Composer works a lot like most word processors, and while there are a few somewhat difficult things about using it, it is pretty easy to figure out. Plus there's a reasonably helpful "help" file that comes with the software-- simply look under the menu "help" to use it.
The Downside of HTML Editing SoftwareAt this point, you might be asking yourself "So, what's the catch?"
Well, for a lot (maybe even most) web pages, there really isn't a catch: it works, especially if your page is relatively simple. I think Netscape Composer is a particularly good example because it seems pretty reliable and because the price it right-- free.
But there are a few problems with this that you should be aware of. First, there's the WYSIWYG problem. If you're trying to do something with an HTML document using HTML editing software that is a little more complicated or if you some very particular layout demands for your web site (this word has to go here, this picture must go there), you might be disappointed and even a bit confused with just the editors themselves. That's because the HTML WYSIWYG isn't quite there for HTML editors, at least not yet. It's probably better to think of HTML as "What You See Is What You Get Most But Not All Of the Time, and Even Then, It Has a Bunch of Junk HTML Tags In It." In other words, the way your web page looks while you are using an HTML editor might be quite a bit different than how it looks on the web. This can be quite frustrating and annoying.
Second, HTML editing software tries to do a lot of things to make putting a web page together "easier," but that also gives you less control. For example, I've had students who made web pages without any knowledge of HTML who were often confused why some graphics didn't work, why files were saved in strange places, and so forth. This "confusion" arises out of the software trying to do all the thinking for the user. In other words, I think in an effort to be "helpful," a lot of HTML editing software ends up being more trouble than it's worth.
And of course, HTML editing software isn't always available. Working with HTML (as I described it in the first three lessons) is as available on any computer, PC or Mac, brand new or (kind of) old.
These are all reasons why a little knowledge of HTML goes a long, long way. My experience has been that if you know a bit about how HTML basically works, you can usually avoid these problems. So with a little bit of knowledge, HTML editors can be a useful tool instead of a dependent (and not always workable) crutch.
"Are you saying we shouldn't use HTML editing software?"Heck no! I use HTML editing software for all of the web pages I make and I think there are great reasons for using HTML editing software:
- They're as easy to use as a word processor. Start typing and play around with the arrangement of things and you've got yourself a web page. Just that easy. Sure, it helps to read the instructions too, but if you're pretty comfortable with using a word processor, you'll have no problems picking up how to use an HTML editing software.
- The better software packages have a lot of neat features. For example, even the most recent freebie versions of Netscape Composer have a spell-check feature. For a bad speller like me, that's a good thing. Plus all of these softwares make it a lot easier to control colors, to place graphics, etc.
- They allow you to include more sophisticated features in your Web site. For example, most HTML editors make it easy to include tables, frames, and other features that can be kind of tricky to do with "raw HTML." Plus it is a lot easier to manipulate graphics with HTML Editing software.
- HTML editing software (like "raw HTML") are cross-platform. What I mean by this is you can work on a web page on your PC with Mozilla Composer, bring to school and use an HTML editing software like "GoLive" on a Mac to make further changes and edits, and then take it to a computer lab of PC computers and open the file in NotePad and make changes to the "raw HTML." And it will still work everywhere!
So like a good word processing software can make writing all sorts of things a lot easier, HTML editing software makes writing web pages a lot easier. Just keep in mind (especially those of you who skipped lessons 1, 2, and 3) a little understanding about how HTML actually works to effectively use HTML editors.top
Steve's Brief Guide To "Good Web Style"
The goal of this page is to point out a few VERY BRIEF things about "good" web style. I emphasize the "very brief" part of this description because trying to explain what makes for a good web site in the few words that are on this page is a little like trying to explain "good writing" in a few paragraphs. It's more complicated than that. But it's a start.
A Few Great Sites on Style and Other Things HTML
Here's a collection of links to get you started on your quest for "good web style" and for making your web sites more sophisticated and spiffy:
- Styleguides 100 Dos and Don'ts Probably the best place to start for simple web page production, this is just what the title suggests: a simple series of lists on classic dos and don'ts, some of them obvious, some of them less so.
- The Web Style Guide Well-written and incredibly complete, this version of the work by Lynch and Horton is one of the best and most complete guides to web style out there.
- IBM Eas of Use- Web design guidelines They say this is for "novices," but it is perhaps a bit more detailed than that, and it is also to me about that frequently used term "usability."
- The Eightfold Path to the Enlightened Web Site Kind of a cute little site with a little Eastern mysticism thrown in for good measure, but it has some "bad links" and other outdated information.
My Idea of "Good Web Style"
I don't want to say too much here about what I think counts as "good style" because I think the other sites that I list above do better than what I could do quickly here, and also because (since this site is for my students creating web sites) I don't want you to think about creating web pages only in terms of "what Steve likes." But I would like to offer a few ideas that I think count as some of the most "basic of basic rules" for good web design:
- The writing comes first. This is certainly a debatable issue, but I'd argue that the web is a textual interface where writers can publish writing in new and exciting ways. What I'm getting at here is you will want to include graphics, you'll want to take advantage of the hypertextual features of the medium, etc. But don't forget that your audience will want to not just look at your site; they'll want to read it. That means (to be simplistic about it) you need to have something to write and you need to write it well.
- Be sure to divide up things on your site into manageable chunks. Another way of putting this is to think in terms of Web sites, not Web pages. Web sites that break the text up into smaller chunks by dividing it up onto separate pages tend to be easier to read. Also, when you have a lot of text like this site does, bulleted lists like this one are usually easier to read.
- Use backgrounds that help readers read your writing, not ones that make it hard. If your background is a dark color, use a light color for your text; vice-versa if your background is a light color. Avoid using a patterned background with text because it's hard to read text in any color on a background with lots of different shades and textures.
- But don't forget the graphics and colors. "Text only" sites are boring-- you've got to do something to take at least some advantage of the graphic possibilities of the web by cleverly incorporating images, colors, backgrounds, etc. On this site (for example), I have some graphics, backgrounds, and arrangement issues to try and make the opening page interesting enough to encourage people to read further. I've also included graphics where I think they can help explain things within the text (like I do on some of the other pages on the site).
- You can break rules, but only if you know what rules you're breaking and why you're breaking them. Always remember that this web stuff isn't rocket science, nor is it particularly fixed. After all, the web's style is still rapidly evolving and is likely to continue to change, mostly as the result of improvements with the technology and experiments with the rules. But if you want to do something on your page that seems to be a "violation" of some of the style guidelines that you've researched, then you ought to have a reason for it.
Links to Other Helpful "How To HTML" Web Sites
Mine is not the only web site out there with information on how to make web pages with HTML. Here are a few links I hope you'll find helpful in learning how to make web pages. Just a few-- I'll add more links to this page one of these days...
A couple all-around good "how to" -type sites
- Keith Stanger's "Selected Resources for Learning HTML and Creating World Wide Web Pages" Keith is a librarian here at EMU and he has some of the best links and info about the internet you'll find anywhere available at his home page. His HTML resources page is VERY complete and a great place to go and find a wide variety of more info on how to html including his HTML / XHTML Slide Show
- HTML for the Conceptually Challenged A funny and straight-forward guide to making web pages.
- Joe Burns' HTML Goodies Page. Strangely enough, I've met Joe because he was getting his PhD at Bowling Green State University at the same time I was. Small world... Anyway, another great source for general info on working with HTML
- Webmonkey. A neat site with lots of tips and ideas for doing "fancy stuff" on your web site.
- Lynda Weinman's safe color page. She explains this better than I do, but basically, this is a guide to figuring out what colors work the best on the web.
- The Clip Art Searcher A helpful site for finding clip art for your pages.
- Yahoo's Clip Art Directory. A great place to get started looking for all sorts of icons and graphics.