HTML INTRODUCTION AND LAYOUT

HTML is the language behind the Internet. The first and most important step while learning how to become a web designer is learning HTML. Im not going to tell you that learning HTML is as easy as falling off a fence, but as far as computer languages go, HTML is a super easy one. Trust me on this. Or, dont. This is America. Im into freedom. Do what you want.

Viewing the HTML for any Web Page

Want to check out some HTML? You can view the source code behind any web page. First, youll have to be connected to the Internet using the Internet Explorer or Netscape. (For the purposes of this book, we will assume you are using the Microsoft Internet Explorer. Its a little more friendly toward web designers. You can get the Internet Explorer and its updates at www.microsoft.com/windows/ie/default.htm)

Go ahead and get yourself on the Internet. Ill wait.

To view HTML for any web page, click:

VIEW> SOURCE

This is HTML. Scroll through, take a look. It all looks like bunch of junk to you right now, doesnt it? When you are done with this section of the book, you are going to understand all this stuff.

Try this:

Can you highlight text just like you would in Microsoft Word? Can you copy and paste the text? It looks like you can What does this mean? Can you just copy someone elses code and use it in your web page? Yup. You do have to be careful about breaking copyright laws, though. Well talk about copyright laws later in this chapter, but right now its really useful to know that you can look at the HTML behind any web page by clicking VIEW-> SOURCE. Viewing the code will help you figure out how someone made the cool page youre looking at.

 

HTML, what does it mean?

Lets start learning HTML and lets start at the beginningthe word itself.

Like many computer terms, HTML is an acronym each letter stands for something. In HTML  "HT" stands for "Hyper Text". Its text. Its hyper. Its shooting all over the Internet, back and forth really quicklyhypertext. The "ML" stands for "Mark-up Language".  A markup language is a computer language that is pretty much written in plain English. For example, if you want the background color of your page to be red, the code that you use is BGCOLOR="RED". BG stands for "background". Thats about as hard as it gets.

 

HTML Generators

HTML is pretty easy, but very important to learn. You may have heard that there are programs that create HTML code for you. Those programs are called HTML generators, the best known of which is Macromedias Dreamweaver. Most web designers use HTML generators, but they still have to have a very good understanding of HTML.

Why, do I have to bother learning all this stuff if theres a program that will do it for me?

Good question.

Heres why: The HTML generators assume that you know HTML. Their buttons are labeled in HTML terms. The way they work will often make no sense to those un-versed in HTML. Even if you did figure out how to use the generator programs, the Internet grows faster than HTML generators do. Sometimes a generator wont or cant dont do everything you want it to do. Youll have no choice but to get into HTML and tinker with the code. If you dont understand HTML, youre going to have no clue how to approach complicated problems. Youll be stuck. Aside from all of this, a professional web designer is just plain expected to know HTML. You will work with clients, production managers, and other web designers, who will know HTML. Theyll talk HTML to you and theyll use HTML terms. If you dont what theyre talking about, they will consider your skills sub par.

How Does HTML Work?

HTML is not actually read by the computer. The browser Internet Explorer or Netscape, reads it. This is why HTML works the same on a MAC or a PC, as well as on a UNIX based machine. A program can be set up to read code no matter what kind of computer its running on. Pretty smart, huh?

 

HTML Tags

HTML works with little codes called tags.

An HTML code or "tag" is always kept in little brackets called carrots.

< > are carrots.

Check out your keyboard. The carrots are found on the same key as the comma and the period.

My if my name was an HTML tag, it would be kept in carrots, and would look like this:

<dave>

How tags work:

Remember that an HTML tag is a command telling the browser (Internet Explorer or Netscape) to do something. If something is in carrots, your computer will know that its an instruction to do something, like make a word bold or set up a hyperlink. For example, if I want to make something bold I would use this tag:

          <b>

The bold tag is <b>. Pretty easy, huh? Most of HTML tags are just this easy. In fact, if you totally forgot what HTML tag you had to use to make something bold, and you just had to guess, it would be pretty easy to guess "<b>".

Remember that if youve got something in carrots its a command for the computer, and the command itself will never show up on the screen.

Your Computer Reads HTML Like You Read a Book

It is much easier to deal with HTML if you remember that HTML reads just like you do, from left to right and from top to bottom. If your computer is coming along and it reads this:

<b> Some cool words

It thinks: "Hmm Bold tag Okay, Im going to make everything after this "<b>" tag bold, so Ill put Some cool words on the screen and make them bold"

Closing a Tag

In the above example, the computer reads the bold tag, and says "Okay, everything after this is bold".

Unless you want to have the whole page in bold, youll need a way turn the bold tag off. Luckily, you can turn off a tag, and its really easy.

Using the same exact tag with a slash in front of it turns off almost every single tag.

For example, to turn off <b> you use: </b>.

Hard? No, Easy. Bold goes on, bold goes off.

A tag with a slash in front of it is called a closing tag.

So

<b> Some cool words. </b> Some other not so cool words.

Your computer will read the above HTML statement like this:

1. Look! A bold tag! Everything after this tag is bold, so Im going to put "Some cool words" on the screen and made them bold.
2. Oh! A closing bold tag! Everything after this is not bold, so Ill put "Some other not so cool words" on the screen and Ill make sure that theyre not bold.

Thats how HTML works. If words are in carrots its a "tag". A tag is a code instructing the computer to do something. Remember that tags never show up on the screen. Conversely, if a word is not in carrots, it will show up on the screen and will be affected by whatever tags you elect to use.

Are Tags Case Sensitive?

You may have noticed that Ive been using lowercase letters for my tags. You dont have to. Tags are almost never case sensitive. You can type <B> or <b> and itll do exactly the same thing. People sometimes use capitols just so they can easily tell the difference between what is a tag and what isnt.

However, XHTML is a language that may replace HTML in a few years. In most respects, XHTML is the same as HTML, but  there are a few new rules. For example, in XHTML all the tags must be in lowercase. Some web designers are training themselves to write code in lowercase to prepare for the XHTML switchover if it ever comes.

What program do I need to write HTML?

You dont need any super expensive fancy program to make HTML. Anything that you can type with will do. Anything. Microsoft Word, an E-mail program, whatever. For this book, were going to use the junkiest of all junky word processors the one that comes with your computer. On the PC we are going to use a program called "Notepad". The Mac has a similar program called Simple Text. 

What about these HTML editors Ive heard about?

By default, things show up justified to the top left.

You notice that "Super Cool Web Site" is in the top left corner. Later well learn ways to move text and images to any location on the screen.

The Title

We typed "Super Cool Web Site" in the body of our HTML. Remember that we also added a <title> while we were in the head? The title was:

<title>Our First Web Page</title>.

It may not be obvious at first, but the title can be found while viewing the web page. Can you find the title on the screen?

The title is kept in what is officially called the "Title Bar", in the upper left hand corner of the screen.

Notice that the title does not show up in the web page at all, it only shows up on the title bar.

The Title Also Shows Up in the Favorites/Bookmarks

1. Click the Favorites pull-down menu, ("Bookmarks" in Netscape)
2. Click Add to Favorites.

What shows up? "Our first Web Site!"

3. Dont add it to your favorites right now.
   Hit "Cancel".

So, the title appears at the top of the screen, and in the Favorites (or Bookmarks). Lucky PC users also get to see the title on the task bar (by the start button). 

You should also know that the title is one of the main things that search engines look for when trying to find a page. Well get more into search engines later, but if you have a page about music, you probably want to title your Web Site "Fabulous Music page", or "Great Music page", or at least something about musicnot "Daves Double Happy Yum Yum Page". A web page will work if you do not insert a title, but then again, who wants a working web page that no one can find?

So is the title important? Yes, it is.

Editing and Viewing Code "On the Fly"

You can switch back and forth between the HTML and your browser. That way you can view the updates as you make them. 

The browser doesnt automatically update your web page just because you changed the code, though. You have to tell it to go back and reload the page from the hard drive. If changes have been saved, theyll display!

First, well change something in the HTML code:

1.      Dont close the Internet Explorer. Go back to your HTML code.

Youll be going back and forth a whole lot from now on

As a shortcut, you can use Alt + Tab on your keyboard to switch between open programs.

Make sure that you are looking at the HTML for "firstpage.htm". Were going to make some changes and view them in the Internet Explorer.

2. Click right after where you typed "Super Cool Web Site"
3. Hit ENTER
4. Type:
    "By a super cool web designer"
5. Click File, click Save.
   Note that you dont have to add ".htm" this time. The new HTML file saves over the old HTML file. The computer assumes that you still want the ".htm" unless you tell it differently.
6. Now return to the Internet Explorer

Go ahead, hit "Refresh".

So, you can update the look of your web page by changing the HTML and then clicking "Refresh" in the browser!

The Break Tag

After we hit "Refresh" youll notice that "By a super cool web designer" appears next to your first name. When we wrote the HTML code, we hit enter after "Super Cool Web Site" and put "By a super cool web designer" on the next line! Whats Going on?

Remember that while youre typing HTML you dont have to ever hit "Enter". Actually, you can type all of your HTML in one big long string if you want to. It would work exactly the same as it would if you organized the code in a neat efficient style. People space out their tags for neatness and organization. If you want the text to go down a line, you need to use a tag. Its a very easy tag, called the "break" tag (as in line-break). It looks like:

<br>

The break tag doesnt need a closing tag. One <br> means go down one line.

The Paragraph Tag

Web designers also use a "paragraph" tag. This tag works pretty much like the <BR> tag, except that its only really supposed to be used for paragraphs of text. The paragraph tag makes sure that theres a space before and after a paragraph. The Paragraph tag looks like this:

<p> paragraph goes here </p>

Take some time to experiment with the <br> and <p> tag. Remember that you need to close your </p>, but not your <br>. When youre done:

1. Click File, Click Save
2. Click back into the Internet Explorer
3. Click Refresh

The Center Tag

So far weve got a web page, but youve got to admit its a pretty boring Everything is over on the left hand side. Everything is black and white. Were not winning any design awards, here. Blech.

Taoist philosophy states that harmony is achieved through centering things and bringing balance to life. Well then, lets learn how to center things on our web page.

Surprisingly enough, the tag used to center things is:

<center>

1. In your HTML, click right before "Super Cool Web Page"
2. Hit enter a couple of times for more space.
3. Type the <center> tag
4. Click after "Super Cool Web Page" and type the </center> tag
   If you dont close the tag, everything from here on will be centered!

5.      Click File> Click Save

**From this point on, the whole little operation of going to "File", clicking "Save", going back to Internet Explorer, and hitting "Refresh" will be referred as "file/save/refresh".

Remember, if ever get lost or accidentally close the Internet Explorer, you can always open any web page you have saved on your computer by utilizing the following steps:

1.      Open the Internet Explorer

2.      Click the FILE menu in your browser

3.      Click OPEN

4.      Click BROWSE

5.      Find the web page in your computer.

Checking Your Work

As a beginning web designer, it is a really good idea to check your work often. HTML gets really uppity if you type something wrong. If you used an apostrophe when you should have used a quotation mark, your page wont display correctly. If you used a comma instead of a period, your page wont work. If you typed <cener> instead of <center>, your page wont work.

Dont get discouraged if you often make errors. Its totally normal.

Basic Structure and Tag Review

So far we have the basic outline of an HTML page: the <HTML> tag, the <HEAD> tag, and the <BODY> tag. We also know about the <TITLE> tag, which is important if we want search engines to find our page. We know how to center text and make it go down a line.

Doing pretty good, huh?

The basic structure of all HTML pages is:

<html>
<head>
<title> Title Here </title>
</head>
<body>

</body>
</html>

Continue to text Formatting |