BASIC HTML

HTML is a basically a computer language internet users use to customize or design their websites. In this tutorial we will be going over all the information your going to need to get started designing your own HTML webpage. So let's start this. Please remember if you have any problems or questions regarding this tutorial, you can email me and I will more than happy to help you out.

MATERIALS NEEDED/HOW TO USE THEM

Materials/Programs Needed For Edit Purposes Are:
 - An Operating Computer.
 - An HTML friendly text editor. If your operating system is Windows, Notepad will work as an editor.
I use Dreamweaver MX. It's easy to use and gives you all the anserws. To download a trial version
click on the prior Dreamweaver link.
 - A easy to remember file or space to save to Save your work. Until you upload to your server.
 - You DONOT HAVE TO BE ON THE INTERNET to create, edit or view your HTML document.
Your webbrowser will be your viewer. Online or off.
Now, you can begin creating your own web pages with HTML.

How To Use The Above Materials:
Now we need to get you familiarized with the software you will be using. In this tutorial that software will be Windows Notepad. For How To's on other software please refer to the dealers of that software.
 - Open Notepad. You can usually find this program by, clicking on your Starte button, then going up to Programs, over to Accessories, and it should be listed there.
 - Once opened, you should see a completely blank page.
 - Now type in the following text. We will be using it in just a sec.
Type the following:
<HTML>
<HEAD>
<TITLE>TUTORIAL TEST PAGE 1</TITLE>
</HEAD>
<BODY>
Hey LOOK AT ME, I created my first webpage!
</BODY>
</HTML>
Once that is finished,
 - Go to the "File" menu and click on "Save As" .
This will prompt you to create a name for your file.
 - In the box, type in test.html . At the bottom of the prompt you should see a space that says "Save file as Type" or "Save as Type". By default you are saving a .txt file. So be sure to add the .html when saving.
 - Now you may choose the drive, directory, and file you would like to save to, and then click on "Save". You can use this routine every time you create a new HTML file.
Now you are ready to view the results.
 - Find the file you just saved and Double Click on it. Your Webbrowser should open. (Even if your not online) Once the page is fully loaded and displayed, you will see something like this:

Hey LOOK AT ME, I created my first webpage!

I know, it's not much yet, but you really did create your first web page. Now onto Formatting.

BASIC FORMATTING

Now we are going to start talking about HTML tags. HTML tags will always begin with a less than sign, like this: <. The tags will also always end with a greater than sign, like this: >.
An example would be the tag used to underline text, .
You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag.
A closing tag will always be the same as the opening tag, but will have a forward slash before the command, like this: .
So, if you would like to underline the phrase "HTML Rules!", you would type the following in your text editor:

HTML ROCKS!

The result of this would be:
HTML ROCKS!

Not all HTML tags will require a closing tag.
An example would be the image tag, which will place an image on the page.
It looks like this:
<IMG SRC="your_image.jpg"> .
We will go over all the extra stuff later, this is just an example of a tag that requires no closing tag to follow it. Other examples would be a Line Break: , a Horizontal Line: <HR> , and a Paragraph: .
You also do not need or have to capitalize the tags. is the same as .
You can also use as much space between tags as you like.
An Example:
 I'm Underlined! 

Is the same as:

I'm Underlined!

Which is also the same as:


I'm Underlined!


A basic HTML file will have the format below.
Read through to see if you can guess what the different tags will do:
(I'll explain them after the example.)

<HTML>
<HEAD>
<TITLE>BASIC FORMAT EXAMPLE</TITLE>
</HEAD>
<BODY>
Your site contents would be placed here.
</BODY>
</HTML>

To make sense of this, go through and find the pairs of opening and closing tags.
The first one we see is <HTML>.
This signals the beginning of an HTML file. The closing tag , </HTML>, is at the very end of the document.
And as you might have guessed, it signals the end of the HTML document. Everything in your HTML document (tags, text, images) should be between those two tags, as they are the beginning and end of your page.
The next tag we see is the <HEAD> tag.
This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the </HEAD> tag.
At this time, the only part of the HEAD section we will deal with is the TITLE tag.
The next tag just so happens the <TITLE> tag.
The title tag allows you to create a title for your page.
The title is only used for bookmarks, search engines, and as the name of the browser window. It will not show up on your web page unless you type it in the BODY section.(explanation will be given).
To end your title, use the </TITLE> tag.
For instance, in the example (above), the title is "BASIC FORMAT EXAMPLE ".
The next tag is the <BODY> tag.
This tag opens the section that will be displayed in the web browser or is the one that holds your site contents. This is where most of your work will be done.
To end the body section, use </BODY>.
The above example is a really plain example of a webpage.
When viewing this example the browser would display something like this:

Everything displayed on your page will be in here.

Cool but plain right. Now let's go over text tags and other tags to help give this webpage some life.

TEXT TAGS

Now time for personalizing your text and some of it's effects.
Here are a couple of tags you can work with as examples:

This is the tag for bold text.
Example:
I'M BOLD
Result:
I'M BOLD


Underlines text.
Example:
I'M UNDERLINED
Result:
I'M UNDERLINED


Makes text italic.
Example:
I'M ITALIC
Result:
I'M ITALIC

<STRIKE></STRIKE>
Places a strike through the text.
Example:
<STRIKE>STRIKAGE</STRIKE>
Result:
~~STRIKAGE~~

<CENTER></CENTER>
This centers the text.
Example:
<CENTER>I'M CENTERED</CENTER>
Result:

I'M CENTERED
You can also use more than one tag at a time. Say you wanted something in bold and italics.
To do this, just place both opening tags before the text.
Remember to close both tags afterwards like this:

Example:
I'M BOLD AND ITALIC
Result:
I'M BOLD AND ITALIC

Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and it will help also when the order of the tags does matter! (such as placing the </HTML> tag before the </BODY> tag).
Here's another way to look at working inside out. Or a better way of seeing what begins where and what ends where.
So it's goes as follows:



I'M BOLD AND ITALIC.



It does get rather complicated. But all you really need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things:
(Bold, Italic, and Underline)

Example:
THREE TAGS
Result:
THREE TAGS

But this would:
GIVE YOUTHIS
Give you This:
GIVE YOU THIS

As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "THIS" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page.
So let's do just that. Use the <CENTER> tag. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page.

Here is an example:
<CENTER>I'M IN THE MIDDLE</CENTER>
The Result Is:
I'M IN THE MIDDLE

You can also use it with one or more of the other tags above.
Example:
<CENTER>LOOK AT ME NOW!</CENTER>
Result:
LOOK AT ME NOW!
Now you may be wondering why everything is just on one line. In the next section, we'll go over how to make the text move to the next line with the line break tag. We'll also discuss how to use headings and paragraphs.

HEADINGS/PARAGRAPHS/LINE BREAKS

Heading tags:
These tags are good for creating titles or section headings.
Here are some examples:
<H1>LARGE HEADING</H1>
Will Give Us:

LARGE HEADING

Example:
<H2>HEADING 2</H2>
Result:

HEADING 2

Example:
<H3>HEADING 3</H3>
Result:

HEADING 3

Example:
<H4>GETTING SMALLER</H4>
Result:

GETTING SMALLER

Example:
<H5>EVEN SMALLER</H5>
Result:

EVEN SMALLER

Result:
Example:
<H6>VERY SMALL</H6>
Result:

VERY SMALL

Line Break:
The tag for a line break is .
When you insert this tag in your document, the contents will go to the next line. The tag does not need a closing tag afterward.
Here is an example:
END LINE NOW... COOL!
The result would be:

END LINE NOW...
COOL

Basically, a line break is like hitting the "enter" key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line.
So typing the following in your text editor will display only one line of text in the browser.
Example:
ONLY
SHOWS
ON ONE LINE
Result:
ONLY SHOWS ON ONE LINE

To make the above text appear on different lines, you will need to add before the word you wish to start the new line.

Example:
ONLY 
SHOWS 
ON ONE LINE
Result:
ONLY
SHOWS
ON ONE LINE

Paragraph Tag:
The paragraph tag is wrote like this, .
This tag will skip a vertical space after going to the next line, as though you had typed
 twice. This tag is good for skipping a line quickly and for knowing where you
wanted a new paragraph to begin.

Example:
This is some cool stuff.
 
This is the next line.

This is a new paragraph. Is this cool or what?
Result:
This is some cool stuff.
This is the next line.

This is a new paragraph. Is this cool or what?

The paragraph tag does not require a closing tag, but if you'd like to add one for your own reference, you place a where you would like the paragraph to end.

MANIPULATING FONT/SIZE/COLOR

In this part of the tutorial we will be going over how to change font faces, font sizes, and font colors.
Font Face:
Font face is the font being used. You can change the font of your text to any font you already have installed onto your computer.

To do this you would use the following code:
BN DRAGONFONT FACE
The result would be:
BN DRAGON FONT FACE

Font Size:
This is done with the following tag: TEXT TO CHANGE
"x" will be replaced by a number with a + or - sign in front of it. So let's say you wanted to make the font larger. You can use the tag with a +2, like this:
I'm a big sentence now!
This will give us the following:
I'm a big sentence now!
Likewise, you can make the font smaller in the same way, using the - sign.
Example:
Hey, I'm Small!
Result:
Hey, I'm Small!

Font Colors:
The code to change a font color is:
COLORED TEXT
Example:
ORANGE TEXT
Result:
ORANGE TEXT

Now to put all three attributes together, the code would look like this:
TEXT
Example:
I'M SO PREETY
Result:
I'M SO PREETY

LINKING TO OTHER PAGES

Links are the way visitors get around a webpage. A link can be Text, an image, an area, etc. It's hyperlink and if clicked the your webbrowser takes you to the location the clicked link was assigned to.
The basic synthax is:
<A HREF="HTTP://WHEREVER.COM" TARGET="TARGET">YOUR LINK TITLE</A>

Here's an example of this tag in action:
TRY ME
Basic synthax for image links is:
<A HREF="wherever.com" TARGET="target"><IMG SRC="your_image.jpg" WIDTH="width" HEIGHT="height" BORDER="border"></A>

Here's an example of this tag in action: