Introduction to HTML 1: Introduction
 
 CS Home

Welcome to Introduction to Web Design

This is section #1 in a series of five that will introduce you to the very basics of HyperText Mark-up Language.

I am assuming at the beginning of this tutorial that you know nothing about HTML. I am assuming, however, some computer knowledge. To continue with , you will need...

  1. A computer
  2. A browser like Microsoft Internet Explorer, Firefox, or Safari.
  3. A text editor. If you have access to Windows "Notepad" or "WordPad" programs or the MAC "Simple Text" or" Text Wrangler" program, use that to get started.

If you have those three things, you can write HTML with the best of them. Now here are a few questions you probably have:

Q. I have a MAC (or PC) -- will this work on my computer?
A. Yes. HTML does not use any specific platform. It works with simple text.
Q. Must I be logged onto the Internet to do this?
A. No. You will write off-line.
Q. Do I need some sort of expensive program to help me write this?
A. No. You will write using just what I outlined above. You can buy those programs if you'd like, but they're not needed.
Q. Is this going to require I learn a whole new computer language like Basic or Fortran or something else?
A. No, HTML is not a programming language - it is a "Markup" Language.

What is HTML?

H-T-M-L are initials that stand for HyperText Markup Language and can be broken down as follows:
  • Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.
  • Text is what you will use - just plain English (or Spanish, or German, or ...)
  • Mark up is what you will do. You will write in plain English and then mark up what you wrote. More to come on that later.
  • Language because it's a language, really -- but the language is plain English.

Beginning to Write

You will write the HTML document in your text editor. When you are finished creating the HTML document, you'll then open the document in a browser, like Internet Explorer or Safari. The browser will interpret the HTML commands for you and display the Web page.
You can use Web Design programs that require no knowledge of HTML. These are called WYSIWYG - What You See Is What You Get - editors. Although these are easier to use initially, you will loose creative control and the ability to fix anything outside of the program.


Let's get into the programs you will use to write your HTML document. Keep this in mind: HTML documents must be text only. When you save an HTML document, you must save only the text, nothing else.
The reason I am pushing NotePad, WordPad, and Simple Text is that they save in text-only format without your doing any additional work. They just do it. But, if you're like me, then you will want to start writing on a word processor, like WORD, or WordPerfect. Maybe you're just more comfortable on it. If so, read this next part carefully.

The Text Editor

When you create a web page with a text editor you will need to follow a few steps:
  1. Write the web page as you would any other document.
  2. When you go to save the document (Here's the trick), ALWAYS choose SAVE AS.
  3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up: Usually at the bottom, you find where you will be able to change the file format.
  4. If you have a PC, save your document as HTML. Either one will work.
  5. If you have a MAC, save your document as TEXT - you will rename your document to .html later.

How To Name Your Document

What you name your document is very important. You must first give your document a name and then add a suffix to it. That's the way everything works in HTML. You give a name and then a suffix.

Follow this format to name your document:
  1. Choose a name. Anything.
  2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html".

Creating Your First HTML Document

  1. Open your editor and type the following (I will explain the syntax in the next section):

    <html>
    <head>
    <title>This is my Title</title>
    <head>
    <body>
    <h1> This is my first Web Page </h1>
    </body>
    </html>

  2. Save document by doing Save As and name it "your name".html, type Text.
Next we will view you saved document.

Opening the Document in the Browser

Once you have your HTML document on the floppy disc or your hard drive, you'll need to open it up in the browser as follows:
  1. Click on The Internet Explorer or Safari Desktop Icon
  2. Under the FILE menu at the very top left of this screen, you'll find OPEN, OPEN FILE, OPEN DOCUMENT, or words to that effect.
  3. Click on it. Some browsers give you the dialogue box that allows you to find your document right away or a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, navigate to your saved file.
  4. You might have to then click an OK button. The browser will do the rest.

One More Thing

If you are going to start writing HTML, I suggest you make a point of learning to look at other authors' HTML pages. What I mean is for you to look at the HTML document a person wrote to present the page you are looking at. Don't look at the pretty page, look behind it at the HTML document.
Let's say you run into a page that has a really neat layout, or a fancy text pattern, or a strange grouping of pictures. You'd like to know how to do it. It's kind of like when you see some landscaping you like, you're going to use the idea. Or if you see a room layout you like, you will use the idea to help yourself. That's the point of looking at another page's HTML document.
Here's how you look at an HTML document (known as the "source code"):
  1. When you find a page you like, click on VIEW at the top of the screen.
  2. Choose SOURCE from the menu.
  3. The HTML document will appear on the screen.

It's not going to look recognizable right now, but by the end of the class, it'll be readable and you'll be able to find exactly how a certain HTML presentation was performed.

 
 
 Home
 
Next