HTML Tutorial

HTML

Welcome to HTML
This is Section #1 in a series of seven that will calmly introduce you to the very basics of HyperText Mark-up Language. I suggest you take the Sections one at a time over seven days. By the end of the week, you'll easily know enough to create your own HTML home page. No really. You will. I say that because many people scoff at the notion that they can actually learn this new Internet format. I'm still amazed that the best-selling line of computer books calls its readers "Dummies." And people seem to revel in that title. Some of the smartest people I know love to proclaim themselves "Dummies" regarding every aspect of computers. Strange. I think you'll do a whole lot better at your next cocktail party by handing out your home page address rather than laughing about how dumb you are about the Internet.

If I Can Do It. You Can Do It.
Before Hand. At the beginning of this you know nothing about HTML, some computer knowledge. You wouldn't be looking at this page without having some knowledge.

1. A computer (obviously)

2. A browser like Netscape Navigator, Microsoft Internet Explorer, or Opera. If you're looking at this page, you obviously have one. I would also suggest using a browser that supports images.

3. A word processor. If you have access to Windows "Notepad" or "Word Pad" programs or the MAC "Simple Text" 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. More on that in a moment.

Q. Must I be logged onto the Internet to do this? More specifically, will learning this throw my cost for on-line way up?
A. Neither. 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. I've never used one.

Q. Is this going to require I learn a whole new computer language like Basic or Fortran or some other cryptic, God-awful, silly-looking', gothic extreme gobbledygook?
A. Your must be kidding to ask a question like this or you must really love computers. Don’t you? "No" is the answer. HTML is not a computer language. Allow me to repeat that in bold....HTML is not a computer language!

What is HTML?
I am glad you asked. H-T-M-L is initials that stand for HyperText Markup Language (computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:

· 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. Real, honest to goodness English letters.

· 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 in the next Primer.

· Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie or Linda didn't flow correctly. Because it's a language, really -- but the language is plain English.

Beginning to Write:
You will actually begin to write HTML starting with Section 2. That's tomorrow if you follow the seven-day plan this was written for. Here, I want to tell you how you will go about the process. You will write the HTML document on the word processor, or Notepad, Word Pad, or Simple Text. When you are finished creating the HTML document, you'll then open the document in a browser, like Netscape Navigator or Internet Explorer. The browser will interpret the HTML commands for you and display the Web page. Now, some people who are already schooled in HTML are going to jump up and down and yell that you should be using an HTML assistant program because it makes it easier. That's true, but it also makes it harder to learn as the program does half the work for you. A time may come where your computer may go down or the web site may go down and you do not have any resources or software to replace and do the work of HTML for you then what? You just going to sit there and watch yourself lose customers and business? Take my word for it, use the word processor for a week, and then go to the assistant if you still want to use one. You'll be far better off for the effort. I have been writing HTML since it was formed and I still use Notepad for the bulk of my writing.

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, Word Pad, 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 Word Processor When you write to the word processor you will need to follow a few steps:
1. Write the 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 ASCII TEXT DOS or just TEXT. Either one will work.
5. If you have a MAC, save your document as TEXT.
6. When I started writing HTML, I saved pages by assigning every Web page its own floppy disc. It just helped me keep it all straight, but if you want to save right to your hard drive, do it. I only offer the floppy disc premise as a suggestion. Please remember: It is very important to choose SAVE AS EVERY time you save your document. If you don't, the program won't save as TEXT, but rather in its default format. In layman's terms -- use SAVE AS or screw up your document. You see, when you save your document in WORD, or some other word processor format other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other settings the page needs to be displayed correctly. You don't want all of that. You just want the text. Notepad, Word Pad, and Simple Text already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.

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. If you have a PC not running Windows 95, you are limited to eight letters, however.
2. Add a suffix. For all HTML documents, you will add either ".htm" or ".html".
(".htm" for PCs running Windows 3.1 and ".html" for MAC and Windows 95/98 Machines)

Example:
I am looking to name a document I just wrote on a PC running Windows 3.11 for workgroups. I want to name the document "test". Thus the document must be named "test.htm". If it was MAC or Windows 95/98 I would name it "test.html". Please notice the dot (period) before .htm and .html. And no quotation marks, I just put them in here to set the name apart.

Why do you keep harping on the fact that I must save in TEXT only?
You're just full of questions! You see, HTML browsers can only read text. Look at your keyboard. See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else. If you'd like to test this theory, then go ahead and create an HTML document and save it in WORD. Then try and open it in your browser. Go ahead and try it. You won't hurt anything. Remember that if you are using Notepad, Word Pad, or Simple Text, the document will be saved as text with no extra prompting. Just choose SAVE.

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. It's easy enough. Since you're using a browser to look at this Primer, follow along.
1. 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.
2. Click on it. Some browsers give you the dialogue box that allows you to find your document right away. Internet Explorer, and later versions of Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive (or the floppy disc for MAC users) and open your document. If you saved the file to your hard drive, get it from there.

Writing Your First Page
So, you really want to practice?... you're going to write your first HTML page using what you have learned above plus two other items. And these two items are important to every page you will ever write. Why? Because they will be on every page you ever write. You will start every page with this tag: <HTML> That makes sense. You are denoting that this is an HTML document. Your next tags will always be these: <TITLE> and </TITLE> See the very top of this page? I mean way up top. Above the FILE -- EDIT -- VIEW menus. The coloured bar up there. Right now it reads "Basic HTML: tags" That's the title of the page and that's what you are denoting here. Whatever you put between these two tags will show up in the title bar way at the top. Finally, you'll end every page you write with this tag: </HTML> Get it? You started the page with HTML and you will end the page with /HTML. That makes sense again. Here you go, Rise and Shine. I want you to play around with these commands. Just remember that HTML reads like you do, top to bottom, left to right. It will respond where you place the start tag and stop where you place the end tag. Just make sure your tags are within the < and > items. Here's a sample page to show you what I mean for you to do tonight:

<HTML>
<TITLE> My First html Page </TITLE>
This Is My First HTML Page!
I Can Write In Italic or Bold 
<HR>
Or I Can Write In Both 
<HR>
<TT>...And That Is It For Now But You Are Not Done Yet, It Just Started</TT>
</HTML>

You see I only used the tags I showed you on this page. Yes, it's a simple page, but you're just starting out. Always remember the start and end <HTML> and </HTML>. Notice the <TITLE> and </TITLE>. See how there's a beginning and end tag when I alter the text and that the P and BR commands are used to go to new lines?

TAG Example:
The tag for bold lettering is "B". That makes sense. Here's what the tags look like to turn the word "Robert" bold: Robert compare this (Robert) to this (Robert). Look At What's Happening:
1. is the beginning bold tag.
2. "Robert" is the word being affected by the tag.
3. is the end bold tag. Notice it is exactly the same as the beginning tag except there is a slash in front of the tag command.

Font Size Commands
You'd like a little more control over your text size. Well, here it is. The commands. Heading commands are great for right at the top of the page, but these font commands are going to end up as the workhorses of your pages. There are twelve (12) font size commands available to you: +6 through +1 and -1 through -6. As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small). Here are a few of them in action. There's no need to show all of them. You'll get the idea of their relative sizes. Follow this pattern to place one on your page.

This is +3
This is +1
This is -1
This is -6

Notice that this first command, is actually doing two things:
1. It's asking for a new font size...
2. then offering a number to denote the font size. This is what I like to call a command inside of a command. The technical HTML term is an "attribute". When you have that, you denote the attribute with an equal sign and enclose it within quotation marks. Look above. See the equal sign and the plus or minus number in quotes? That's what I'm talking about.

Centring Text
Since you've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen. That's what's known as the default. It just happens without your specifying any particular justification. Notice that this text is centred on the page. It's done by surrounding the text you want centred with simple <CENTER> and </CENTER> commands. Here's what it looks like:

<CENTER>
All text in here will be centred
</CENTER>

IMPORTANT:
Please keep in mind that Meta Tags are written in American English or known as Broken English. Example: British English spells Centre but Broken English spells Center

Creating A Hypertext Link
How to create a link to another page. It's a set tag format like any of the others you have seen so far. Once you learn the format, you can make as many links as you want to any other page you want. Example: What is below would create a link to the HTML Tutorials home page.
<A HREF="http://www.tarktech.com">Technology Within Your Hands</A>

Here's What's Happening
· A stands for Anchor. It begins the link to another page.
· HREF stands for Hypertext REFerence. That's a nice, short way of saying to the browser, "This is where the link is going to go."
· http://www.tarktech.com is the FULL ADDRESS of the link. Also notice that the address has an equal sign in front of it and is enclosed in quotes. Why? Because it's an attribute of the Anchor tag, a command inside of a command. Remember that from Section 3
· Where it reads "Technology Within Your hands" is where you write the text you want to appear on the page. What is in that space will appear on the page for the viewer to click? So, write something that denotes the link.
· /A ends the entire link command.

Links can be for a different web site, an email address or a link within your web site.

Site best viewed at 1068 by 786 pixels