There are two things you need to make a working web page:
1. Server space.
2. An HTML text file.
You will need a browser to view any web page you create, and you should check any page before uploading it (sending it) to a server. But techniclly speaking you don't NEED a browser to create a web page.

1. SERVER SPACE. A server is simply a hard drive, like the one in your computer, but in order to be a server a hard disk doesn't need a processor and/or monitor and/or CD burner, etc., (all the stuff you need to have a full computer system). A server, like any other hard drive, just has data on it: it's for storage. To actually be a server, a hard drive simply needs to be accessible by you and your software. Almost every server on the web is simply the hard drives on somneone else's computer, elsewhere on the net (that's really all the internet is: everyone accessing stuff on everyone else's computers.) Anything that can have a text file on it can be a server. A floppy disk in a computer could be a 1.4 MB server.

2. HTML TEXT FILE. All web pages are very basic ASCII text files, like what you make simple text documents with. (Windows uses Notepad, Mac uses SimpleText with OS9 and TextEdit with OSX.) A browser reads the HTML text (code) differently than the a text reader does. If you open an html file with a text reader and it has the following sixteen characters you will see: <B>John Wayne</B> but if you open the same file with a browser you'll see only nine, and they'll look different: John Wayne.

The following is a naked skeleton of a html text file. All web pages have these basic tags to tell the browser what the different parts of the document are.


<HTML>

<HEAD>
<TITLE>
</TITLE> (the slash means that this is a close or end tag. More on them in just a sec.)
</HEAD>

<BODY>
</BODY>

</HTML>


That's one way we could set it up. And since a browser doesn't recognize carriage returns in a txt file here's another way you could set up the same file:


<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>

In the eyes of the browser the two are identical. As long as all the code is in the correct order it'll read it fine. The return key and the space bar are there to make things easier for programmers (you). The important thing to remember is that the browser will recognize no more than ONE CONSECUTIVE SPACE BAR OR CARRIAGE RETURN, and both will be treated like a SPACE BAR. If you want a carriage return there's a special tag for it (line break: <BR>) which we'll discuss momentarily.

Here's an explanation of those tags:
<HTML> this tag starts the HTML document. All basic web pages have this tag.
<HEAD> this tag starts HEAD section. Nothing in the HEAD section will appear in the actual browser window. Stuff that people want search engines to read (like keywords and such) but not display in the page, they put it in here. Also, code for scripting languages like VBScript and Javascript is placed in the head section.
<TITLE> this tag starts page title. For now, the title of your page is the only thing you need to put in your HEAD section. It's what you want the name of the page to be, and it appears not in the actual page field of the browser but the computer window frame itself. Check the source code of this page.

THAT'S SOMETHING I'M GOING TO ASK YOU TO DO OFTEN IN THIS TUTORIAL: Right-click in an open part of the page (or check the VIEW menu) and select SOURCE or VIEW SOURCE or VIEW SOURCE CODE. When you view source code you're looking at a web page the way a text reader would display it. It's a GREAT WAY TO LEARN ABOUT HTML CODE, what the different tags are, what they do, and where they should be placed. I still do it almost every day when I'm surfing the web.)

NOTE: In recent versions of some browsers "viewing source" has been made more difficult. In the current version of Safari (v6.0.2), right-clicking to show source code only works if you have made the Develop menu visible in the menu bar:
1. Safari menu > Preferences > Advanced (gear) icon.
2. Check the "show develop menu in menu bar" box. Close preferences window.
3. Develop menu > Show Page Source

</TITLE> this tag closes page title. As you may have inferred from the John Wayne example above, any tag with a slash "/" is a close tag. Close tags simply turn off an effect (or feature) that was "turned on" earlier in the document. Pay attention to them, they're just as important as open tags; If your page is all boldfaced (or all italicized, or all ANYTHING) it's probably because you told it to start boldfacing somewhere in the document but did not tell it to stop later on.
</HEAD> this tag closes HEAD section.
<BODY> this tag starts the body section. Everything happens in here. The code for anything you actually see on a web page goes here.
</BODY> this tag closes BODY section
</HTML> this tag closes your HTML document.

OTHER TAGS YOU'LL USE FREQUENTLY

<br> Line break. Works just like a carriage return. The tag is case-insensitive, which means the br can be lowercase or capitalized. Most tags can go either way. I'll try to let you know when something is case-sensitive.

<p> Paragraph tag. Works just like two carriage returns: double space. Again, it doesn't matter if the tags are capitalized or lowercase or both. (NOTE: Usually the only thing that is case-sensitive in HTML code is the name of a file that is referenced, either because the page uses the file (image) or the page links to it.)

<hr> Draws a horizontal line across the entire width of the page. As you can see, this document is peppered with them.

<a href="NameOfFileHere.html">Clickable TextAsItShouldApprearOnPageHere</a>
Anchor tag. This tag is the one, Neo. It's the ghost in the machine. It makes the web what it is. It's the tag that creates hyperlinks. This tag + web browser = information revolution. In addition to the five A HREF characters, anchor tags will also contain the URL of the page (or image, or other file) you're linking to, surrounded by quotes. (View source code and look at some of the links on this page.)

<b> & </b> boldface tag
<i> & </i> italics tag
<u> & </u> underline tag. I don't recommend using underlining at all, on any web page. Almost all hyperlinks are naturally underlined, and when most people see underlining they think "link". So don't psych them out. Use bold, italics, and CAPS to highlight (or put a box around the text as I did above. It's a bit more complicated, so view source to see how that works.)

<IMG>... Image tag. You use this to place a graphic on your page. As with the anchor tag, there is more inside the tag than just the letters IMG. In fact, with the varying attributes you include inside the IMG tag, you have much control over how the thing presents on the page. Here's a rundown of image tag attributes: (VIEW SOURCE FOR EXAMPLES)

&nbsp; - Non-Breaking Space. If you want a gap of more than one space-bar between two characters, you have to use this. And mind that ampersand ("&") and semi-colon! (";") (For almost all "special characters" the character code starts with an ampersand and ends with a semi-colon.)

bgcolor. (not a tag but an attribute within the <BODY> tag). Notice that the background color of this page is white. It doesn't have to be, but if you want to print it (and you should) I'd leave it white. (View the source code. Look up in the <BODY> tag for the "bgcolor" attribute. You can use any of the following words for background coloration: aqua, black, blue, fuchsia, maroon, green, lime, navy, olive, purple, red, silver, orange, teal, violet, white (white), yellow, pink.
The BODY tag for a document that you want to have a beige background color might look like this:
<body bgcolor="beige">

<CENTER> & </CENTER> Centering tags

If you want text or images or tables or anything centered, put these tags before and after.


THOSE WERE THE BASICS.

What follows are some examples of what I've discussed, as well as some additonal HTML skills that can help you polish what you know. It's not laid out well and often redundant. FYI.

E-mail me with questions of course, and as always check source code to see what makes things happen. (See how "E-mail me" is a link, and when you click it, an e-mail window opens, pre-addressed? That's called a Mailto, and if you view the code you'll see that it's structured like any other hyperlink.... <a href="mailto:russillosm@gmail.com">E-mail me</a> )


LINKS

Here's a link to my page. Notice that all the text after the HREF tag, and before the /a tag, are included in the link. Links this long are unweildy; avoid using them.

code:
<a href="http://russillosm.com">Here's a link to my page. Notice that all the text after the HREF tag, and before the /a tag, are included in the link. Links this long are unweildy; avoid using them.</a>


This link to The Onion is a much better example of a link in the middle of a sentence.

code:
This link to <a href="http://www.theonion.com">The Onion</a> is a much better example of a link in the middle of a sentence.


GRAPHICS (I talked about images before, but it bears repeating.)

Here's a graphic so you can see the code for that:
CODE: <center><img src="a10icon.gif" width="32" height="32" alt="Steve's A-10"></center>

Steve's A-10

It's technically known as an image tag, but it's not just <IMG>. It's got a lot of other things, known as 'attributes,' buried in it. In this case the attributes are:

SRC - source, the actual title of the image. And this image must be located in the same folder/directory as html file

If you want to display an image that's not in the same folder/directory as the html text file, you must use the entire URL for the image, not just the filename. For instance if the image I want to display here...

Steve's A-10
...was not on my server but somewhere else on the internet, the image tag might look like this:

CODE: <center><img src="http://www.aircraftimages.com/a10icon.gif" width="32" height="32" alt="Steve's A-10"></center>

COOL TIP: Use this to load up your page with images without having to take up any of your server space! (Of course, you're at the mercy of someone else's server. If they delete the file, or shut off the server, or change the URL, or change the file name, the image won't load. Just like the image above, that isn't where the code is looking for it!

WIDTH - width of the image in pixels
HEIGHT - height of image in pixels.
ALT - text that is displayed in the image's place while the image is loading, or if it fails to load. With static (unclickable) images like these, ALT isn't really needed. But you never know when an image will not load, and if it's a big image—or on a remote server, as described in the COOL TIP above—you should use ALT as a courtesy to your visitors,


If you want an image itself to be a clickable link:

Simply create an anchor tag (link) and paste the entire Image Tag into the Anchor Tag where normally the clickable text would go.

EXAMPLE: say I want my little blue A-10 image to be a clickable link to my A-10 web page.

Here's a regular text link to the A-10 page:
Click Here for Steve's A-10 Page
CODE: <a href="http://russillosm.com/a10.html">Click Here For Steve's A-10 Page</a>

Here's the little blue A-10 image:
Steve's A-10
CODE: <img src="a10icon.gif" border="0" width="80" height="80" alt="A-10 Image">

And here's the two together, an image that you click:
Steve's A-10
CODE: <a href="a10.html"><img src="a10icon.gif" border="0" width="80" height="80" alt="A-10 Image"></a>

Notice that I didn't use the whole URL for that link. That html file ("a10.html") sits in the same directory (folder) on the server as this tutorial, so I can omit the server name and the directory name from the code. In fact, I keep every file on my site at what's called the root level (the main folder/directory on my site). This means the URL for any file or image or anything else on my site looks like this:
http://russillosm.com/a10.jpg
http://russillosm.com/tutorial.html
http://russillosm.com/a10installer.dmg

Some people like to put ALL their image files in a folder just for images, and all their html files in a diretory just for page files, so their URLs would look like this:
http://russillosm.com/images/a10.jpg
http://russillosm.com/pages/tutorial.html
http://russillosm.com/installers/a10installer.dmg

Some prefer to keep all files grouped by subject. They'd keep all files related to cats in a specific cat folder (in this example called "catfiles")
http://russillosm.com/catfiles/prettykitty.jpg
http://russillosm.com/catfiles/persians.html
http://russillosm.com/catfiles/breedchart.xls


MORE ABOUT IMAGE TAGS AND ATTRIBUTES

Notice in the code how you can specify the height and width of your images. If I want, I can make the same image appear much smaller (notice how this image is also a link. check out the code. And notice the BORDER attribute in the code. If you omit that, some browsers include a border around linked images. I'll do them side by side so you can see.):

Steve's A-10 Page with the pernicious blue border....         Steve's A-10 Page without.

code with: <img src="a10icon.gif" width="16" height="16" alt="Steve's A-10 Page" border=2>
code without: <img src="a10icon.gif" width="16" height="16" alt="Steve's A-10 Page" border="0">

And notice in the code what I used between the two tiny images above to separate them laterally...a bunch of nonbreaking spaces. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

I can make the same image appear much larger...

Holy Crap!

...just by changing the numbers in the code.
<img src="a10icon.gif" width="320" height="320" alt="Holy Crap!">


DIFFERENT FONT SIZES, COLORS & STYLES

Here's the simple code for making text bigger.

<font size="7">bigger</font>. <font size="4"><br>

Notice the <font> tag, and the SIZE attribute inside it. Number 1-7 works. The default is 3, most of this page is size 4 so it's easier to read. And don't forget to close the <font> tag with a font close tag ... </font> ... or everything after it will have that font style.

Changing font color is also a matter of adding an attribute into the <FONT> tag. COLOR="color". That's it. Use one of the color words listed here: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, orange, teal, violet, white (white), yellow, pink.

Code for Text color.
<font color="red">Code for Text color.</font>

And avoid using blue as a text color, for the same reason you should avoid using underlining as a highlighter: visitors will think it's a link.

Changing a font altogether is also controlled by the FACE attribute. Most browsers recognise three fonts:

  1. the Times or New York serif font. (This is the default font on most browsers but is otherwise obtained by including the FACE="times" attribute inside the <FONT> tag.)
  2. the Arial or Helvetica sans-serif font utilizes the FACE="arial" attribute.

    CODE: <font face="arial">the Arial or Helvetica sans-serif font utilizes the <b>FACE="arial"</b> attribute. </font>

  3. the Courier or Typewriter monospaced font utilizes the FACE="courier" attribute.

    CODE: <font face="courier">the Courier or Typewriter monospaced font utilizes the <b>FACE="courier"</b> attribute.</font>

  4. Notice the different tags for a numbered (ordered) list like this one: <OL> and </OL> (putting a list item tag <li> before each item) compared to the bulleted (unordered) list way back in the Image Tag discussion: <UL> and </UL> . (List items <li> do not need a close tag.)


    CLOSE TAGS

    I'll close with a reminder about close tags. If you forget to put that </center> tag in when centering something, everything that follows the initial <center> tag will be centered. Which ain't so bad, since centering is no big deal, but let's say you omit a close tag after trying to boldface something.....then everything will be bold for the rest of the document, and it looks like crap, and it screams "I'M SLOPPY AND/OR I DON'T KNOW WHAT I'M DOING AND/OR I DON'T CARE ENOUGH ABOUT WHAT I'M DOING (OR WHAT YOU THINK OF WHAT I'M DOING) TO MAKE A TWO-SECOND REPAIR. So pay attention to the close tags.

    In fact, do you see how this section about Close Tags as a little indented? It's because I neglected to close my ordered list after the words "do not need a close tag" at the end of #4 above. I started the list with a <OL> tag, but after #4 I didn't include a </OL> tag. So the browser thinks this Close Tags section is part of #4.

    Let me close it...


Hope this helped. Feel free to email me with questions or comments.
Steve

7JAN06