Welcome to Web Building
How to use this website
This collection of webpages is meant to serve as a resource and an alternative to your printed textbook. By using hypertext (we'll talk about what that means in a bit), we can make these pages more useful than a plain paper textbook in many ways.
If you like, however, you may print these pages out for later review, since you may not always have access to the Web when you want to view these pages. However, if you read the pages offline, you won't be able to follow some of the hypertext links included here, so make sure you go through each chapter at least once online.
Each chapter has exercises for you to complete. Please do these exercises as you are reading the chapters. If you do this, you'll find that it is much easier to learn and remember.
Whenever you see HTML code demonstrated on the pages, you should try out the code for yourself. If you just read about it, it won't stick in your memory. Trying to do the examples will make the learning process easier. For this reason, you should always read the chapters for the first time while at your computer, so you can try the examples and exercises.
If you have any comments or questions, please let me know. Thanks!
What is the Internet?
The Internet isn't a massive powerful supercomputer like the WOPR in the movie War Games. There is no one who "runs" the Internet. The Net is a decentralized global network of computers that are all linked and use a common protocol (method of communicating), the Internet Protocol or IP.
For a long time (the Internet is more than 30 years old -- it's been around for a while), the network was supposed to be used for non-commercial purposes only -- primarily academic and military research. In the 1990s, however, the US government finally stepped out of the picture, and commercial Internet Service Providers stepped in.
This brings us to the current Internet: mostly commercial, world-wide, and mostly used for a lot of things that have nothing to do with serious academic or military research. I'll leave those to your imagination.
How big is it, then?
There are some websites that "map" the internet and can give you an idea of the scope of this network. There is one at http://www.mids.org/mmq/603/big/intrworld.html that gives you an idea where the largest amount of traffic occurs, and what parts of the world still weren't served by the Net as of July 1999. This is a fairly traditional map, showing the different continents. The Internet Mapping Project at http://www.cs.bell-labs.com/who/ches/map/gallery/ is a much more non-traditional way to view the Net, showing the links from Internet Service Providers (ISPs) to other ISPs. View one of these images close-up to get an idea how this works.
What about Web pages?
You'll notice I haven't mentioned the Web yet. This might seem like a strange omission, but there is a reason for it. The reason is (wait for it:
The Internet is not the Web (and vice versa).
Then why do people talk about them as if they're one and the same? Well, to be blunt -- for most peoples' purposes, there isn't much need to make a distinction between the Internet and the Web. But if you are going to be Web site designers, you'll need to know the difference.
See the next section for more on this.
What is the World Wide Web (WWW)?
A hypertext information system
As I mentioned in the last section, the WWW isn't the Internet, despite the references you'll often hear to "My page is up on the Net" or "I saw your page on the Internet."
What the World Wide Web is, is a hypertext information system. So what is hypertext? The encyclopedia definition says (among other things) that it is a "technique for organizing computer ... documents to facilitate the nonsequential retrieval of information."
What this means, in plain English, is that hypertext is a non-linear way to get information. If you are reading a hypertext document, you can skip around and jump from one point to another, jump to other topics, or dig deeper into a specific topic, depending on what you're interested in.
By the way, did you see all the examples of hypertext links in these last few paragraphs? All of those highlighted sections of text were hypertext links. You could click on them, if you so desire, to see where they lead you.
Here's another typical use of hypertext:
Let's say you're reading a sentence in an online novel: "The tabby cat lay sleeping on the veranda." If this novel makes use of hypertext, you might find that the words "tabby cat" are highlighted, like this:
"The tabby cat lay sleeping on the veranda."
If you so desire, you can select those words and find out, perhaps, more info on tabby cats. Or why the author chose a tabby cat instead of, say, an Irish setter puppy. In this case, clicking on the highlighted text "tabby cat" will show you a picture of the tabby cat that might have inspired the author to write this novel.
As you might have gathered by now, when I say hypertext I don't mean just text, of course. The WWW can handle many kinds of information. Text, images, sounds, moving images... you name it.
Distributed hypertext
The WWW uses distributed hypertext to provide information, and it uses the Internet as its "pathway," so to speak, to get the information to you. What this means is that the information doesn't have to be stored in one place. Information can be located -- distributed -- throughout any part of the web.
In the third paragraph above, the link "jump to other topics" links to a computer on Beacon Hill in Seattle, Washington -- but the link to "dig deeper into a specific topic" links to a computer in the United Kingdom. And this link is to a computer in Japan. It doesn't matter where the web server is located -- as long as it is connected to the Web. By clicking on all of those links, you just went on a virtual world tour -- in less than five minutes!
How does the WWW relate to the Internet, again?
Remember, in the last section I said:
The Internet is not the Web (and vice versa).
What the Internet is to the Web, essentially, is the road by which WWW information travels to you. Imagine that a Web site is a bus, or a car full of information. For that information to reach you, it has to travel on a road of some sort. Think of the Internet as the road that the Web information uses to get to you. (Remember that old Al Gore phrase, "The Information Superhighway"? Well, in some ways it wasn't that far off.) We'll come back to this highway metaphor in Chapter Five, when we talk about URLs.
What is HTML?
The simple answer
HTML is the language that Web pages are written in. HTML stands for HyperText Markup Language.
I know about hypertext, but... "markup language"?
To explain this, I need to give you a little more background information. Hold on; this part can be confusing at first!
"Markup" basically refers to the text that you insert into a document to indicate how the file should be displayed or printed. If you've used Word Perfect or some other word processors, you may have used a program mode called "Reveal Codes." With Reveal Codes turned on, you could see a whole bunch of little codes interspersed in your document's text. There might be a code that meant, essentially, "This is where a paragraph begins," or a code that meant "Put a line break here," or a code that meant "Make this text boldface." These codes are markup code. Usually, the codes are called "tags."
Here's an example of a word processor with the Reveal Codes feature turned on:
SGML
SGML (Standard Generalized Markup Language) has been created to be a standard description of how to define a document markup language. HTML (among others) is a language based on this specification.
The basic concept behind SGML is that all documents have a certain logical structure, which can be described without any reference to how that structure should look, physically. Markup tags are used to define the elements of the logical structure. For example, one element might be defined as a "Paragraph," and another might be defined as a "Heading."
In fact, the look of the document can and will change depending on what type of system it is being viewed on, what settings the user prefers, and so on. The visual appearance of the document is secondary to the textual content of the document. The importance here is to communicate the message and not to worry about whether it looks good.
(Perhaps this means that the designers of SGML weren't very visually-oriented -- because the look of a document often is part of the message. But hold that thought for a while -- we'll come back to it later.)
Why would you want to do this? Well, it allows you to separate a document's structure and content from its appearance. Appearance is fickle. Fashions and looks change. If you can redo the look of a document without changing the rest of the content, it saves you a lot of time and hassle.
Another benefit to this is that it makes documents more "portable" -- that is, they are usable in more ways. You can view them on different computer systems, print them out, and run them through a text reader for the blind or a Braille generator. Each system that processes marked-up documents will have its own way of processing the content. A phrase marked "Heading" might be displayed as boldface on a Mac, underlined and centered on an old DOS 386, spoken with a deep tone of voice on a text reader, or printed in red when run through a printer. Each system will diaply the text differently, but each system will also make it clear, one way or another, that the text is a "Heading."
This is useful for the Web, because the WWW itself was originally intended to be cross-platform, that is, viewable on any computer system. The beauty of the Web is that, in theory, a particular web page can be understood by a person running a brand-new PentiumIII, a person with an iMac, a person running a Unix workstation, or even a blind person with a text reading system. In practice, this doesn't always happen, and we'll get to that later on -- but the original intention of the WWW was to be platform non-specific -- anyone could make use of it.
HTML
HTML is based on SGML. HTML is the markup language that we use to make Web pages, to be displayed in a Web browser.
(A Web browser is a software program that reads Web pages and displays them to you. The most common Web browsers are Netscape Navigator and Microsoft Internet Explorer, but there are many others, including Lynx, Opera, WebTV, OmniWeb, and ICab. Browsers aren't just found on desktop computers -- you might have seen Web access on a cell phone, or a Palm Pilot handheld organizer.)
HTML tags are placed in a document, to describe the structure and appearance of the document. The Web browser then reads the document, and displays it as best it can, based on the HTML tags it finds there. As you might imagine, a page is going to look very different on a Palm Pilot or a cell phone than it does on an iMac. (Not to mention a text reader, which "displays" documents in an entirely different way.)
In the next section, I'll show you what HTML looks like.
Basic Syntax
What HTML looks like
Here's a sample of some typical, simple HTML code:
|
You might be surprised to know that you can view the code of any web page yourself, to see how it was done. It's very simple. In Netscape, just go to the View menu and select Page Source. In Internet Explorer, go to the View menu and select Source. When you view the source, you'll see something that looks like the source code above, though on many pages it will be more complicated than this.
Tag basics
Notice the items that look like this: <HEAD>, <BODY>, <TITLE>. These are tags. Tags are always contained within "angle brackets," the < and > characters.
Tags are case-insensitive, so there is no difference between <BODY>, <body>, and <Body>. But when you are writing HTML, it's a good idea to type your tags in all caps, like this: <BODY>. This will make it easier to read your code once your pages get longer and more complicated. It's hard to scan your pages for code errors when the tags are all lower-case -- they tend to blend right in with the rest of the text, and code errors become very difficult to find.
There is a newer markup language, the successor to HTML 4, called XHTML. One way that XHTML differs from HTML is that XHTML tags are case-sensitive, and all tags in XHTML must be lower-case. For now, you are learning HTML, and so you can go ahead and write tags the HTML way -- just be aware that you will probably be converting your pages to XHTML someday, and at that point you may need to change a few things.
Later in the course I'll mention a few other XHTML issues.
Compare the following simple XHTML code with the HTML code above; you'll see that they are quite similar.
|
Getting started
We're about to create your first Web page. The first thing to do is open a new file in a basic text editor. You don't need any expensive software to do this; a simple plain text editor will do. If you are using Windows, NotePad will work. On the Mac, SimpleText (in OS 8 or 9) or TextEdit (in OS X) will be fine. And on Unix, Pico is a good basic editor. However, it's usually nice to use an editor designed for HTML. On Windows, CodeEdit is one example, and there are many others. On the Mac, BBEdit is the best and used pretty much universally by Mac web designers.
Open a new file and save it. (Sometimes it won't let you save until you've actually typed something in the file. In that case, just type a letter or two, then go back and delete after you've saved.) When you are asked to type a name for your new file, make sure you give it a name that ends in .html. For example, mypage.html or helloworld.html. If you don't name the file this way, the page will not display correctly in your web browser. (In OS X TextEdit, you will need to go to the Format menu and choose Make Plain Text. Then when you save it, TextEdit will ask to append ".txt" to the file name; tell it not to append.)
Also, don't put any spaces in your file's name, and name the file in all lower case letters. This will make your life much easier when you get to the point of uploading your files to an actual working web server.
|
mypage.html
|
my page.html
|
Good:
Bad:
In the next section, we'll make your first page. Hang on, we're about to take off!
The first four tags
Start at the beginning with HTML
At this point, you should have an open, empty file in your text editor. It probably looks something like this, with just a blinking cursor waiting for you to type some code:
|
The very first thing you need to do when you're creating a page is to tell the browser what language the page is written in. This is easy to do. Just enter the tag <HTML> at the very beginning of the page.
This is what is called a container tag. Container tags come in two parts, for example: <HTML> and </HTML>. The first part is the opening tag and the second part is the closing tag. The two opening and closing tags contain and affect everything that is between them. So for example, if you have a container tag that makes text purple with polka dots and it's called PPD (there is no such tag -- it's just an example for purposes of illustration), <PPD>you might use it like this</PPD>. In this case, the words "you might use it like this" are contained within the PPD tags. Since the PPD tags make text purple with polka dots, the words "you might use it like this" would now be purple with polka dots. That is, if there really was such a thing as a PPD tag.
Since HTML is a container tag, you will also need to close the tag by placing a </HTML> at the very end of the page. Every single thing on this page will be contained by the HTML tag -- so everything else on the page must go between the <HTML> and </HTML>.
|
HEAD and BODY
Every web page has two main parts -- a head and a body. Just like a human, the page needs both a head and a body to function correctly.
The head of the page contains information about the page. The contents of the head generally don't display on the page itself; it's just information for web browsers and search engines to use.
The head is a container tag, too, so make sure that you include both parts!
|
After the head, you need to have a body. (Remember, you always need to have both. There's an exception, but it comes along much later.) Make sure that you close the HEAD tag (with </HEAD> before you open the body tag, and that the closing BODY tag comes right before the closing HTML tag.
|
Now we need to add some basic information to the head of the page. Every page must have a title. The title doesn't appear on the page itself -- it appears at the top of the window bar containing the page. Let's call this page "My First Page," and then we'll see where the title shows up.
|
Once you've done this, save your work. Then you'll need to use your web browser to view what you've done so far.
In your browser, go to the File menu, then select "Open". At this point a dialog box will pop up. It will look different depending on which browser you are using, and which operating system. You need to use this box to find the file you want to view. On a Mac, you'll see a list of files and folders. Just navigate through this list to find the file you just saved. On Windows, you'll see a little box that asks you to enter the name of the file you want to view. Instead, just click the button that says "Browse" or "Choose File". This will allow you to navigate through your directories to find the file you just saved. Once you find that file, open it.
Then, you will see the results of the code you just entered:
Notice that the title isn't on the page itself, but, rather, at the top of the window.
Our final step today is to place something on the page itself. Everything that will be seen on the actual page goes inside, or between, the BODY tags. Let's type something there now.
|
When you're done typing, save your work. Then open the page in your browser, just as we did previously. You should see something like this:
Notice that whatever you typed inside the BODY appears on the page itself. It's not very exciting yet, because we haven't learned how to format the text in any interesting way yet, but it is a real web page. Be proud of it!
Exercises
Exercise One
This quarter we're going to do some of the assignments and tests online, through eCollege.com.
We will make eCollege accounts in class during week one. If you haven't made your eCollege account yet, please create the account now (follow this link for instructions).
Once you're enrolled, and you've gone to the main class page, click on the Journal button (near the top of the page). Please enter the following assignment as a Journal entry.
Along with learning HTML tags and techniques this quarter, we'll also take some time to discuss web design issues and principles.
For your first exercise, think about what makes a good, well-designed web site. What are three things that you think a good web site should contain? Write at least one paragraph in your eCollege journal about each thing, describing it and analyzing its effect on the success of a website.
What I am looking for here is deep thought. I want to see that you've been thinking about what makes a well-designed website, and the reasoning behind your conclusions. I want to see depth in your writing.
Write this in essay form. Grammar, spelling, and general writing quality count. This should be at least the equivalent of one page of good writing, though more is OK.
This is due (journal entry submitted at eCollege.com) before class starts on Week 2.
When you've completed the survey, make sure you click the "Share Entry with Instructor" button at the bottom of the entry, and then the "Add Entry" button. Otherwise, I won't be able to read your assignment.
If you have any questions, just let me know. Thanks!
Make sure you bring a floppy disk to class with you on Week 2. You might want to save your work to bring home.
Questions for review
You don't have to turn these questions in -- just go over them. They are for your use when studying. You can also do these online in Self-Test 1.
- What is the relationship between the Internet and the Web?
- What is hypertext?
- What is distributed hypertext?
- What is a markup language?
- What is a Web browser?
- Name four Web browsers.
- How do you view the source code of a page?
- What do you call a tag that comes in two parts, like <P> and </P>?
- Which tag contains information about the page, but not information that appears on the page?
- Which tag contains the content of the page itself?