ArrowofDarkness

I think ... therefor I am ...


Quick and dirty Guide to Learning HTML

If you are reading this you have little or no HTML experience. I may have a small amount of experience, but at least it is solid. Open a text editor, Notepad is very easy and pre-installed so I'll use that. Ok, some basic stuff here, everything in HTML (to my knowledge, at least all that I'll will teach you will have) has "tags" these are < and >, very simple stuff. These tags are Usually opening, and closing tags. The closing tags are usually identical to the opening tags but with a / after the "<" and before the text (such as <HTML, and </HTML>) To start an HTML webpage first you must put 

<html>

at the top of the doc. , this shows that this it an HTML document, otherwise the web browser might read it as text, making that a very boring webpage. At the very, very bottom of notepad type

</html>

so the web browser knows that the HTML doc. is finished. Ok, you still with me? Take the Poll, then continue to the next post, (this is so I can see where you get lost, so I can fix it.)  

Are you lost? :(

Quick and Dirty Guide to HTML cont ...

ok, ready to go on? there are many ways to make a professional web page, through HTML, CSS or a WYSIWYG webpage editor. WYSIWYG is:

W-      What
Y-       You
S-        See
I-         Is
W-      What
Y-       You
G-       Get

It is simply, what you see on the screen is what people will see in their web browser, although you may say, hey, that seems easier than making a webpage out of HTML (plain old text). Well then you would be right. Though they are easier, and faster, and typically make more professional web pages, these WYSIWYG editors can cost you, as much as $400.00 to be exact. While big companys can afford this, and put good use to it, for the average user, plain old text (HTML) will do. (plus using HTML, you can control everything about your webpage!)

Ok, back to the lesson, you have

<HTML> 
                      and
</HTML>

now what? Well, there are serveral parts to an HTML doc. The "HEAD", the "BODY", and the, well, just closing everything up ...

the HEAD is mainly just the title, for now. Type

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE> ;title is well, this shouldn't need explaining, also remember to add the closing tags!
</HEAD> ;Closing the "HEAD" not much you will need to do with "HEAD" for a while ...

</HTML> ; Closing your first ever HTML doc. Congrats.


Hmm, not very pretty or informative, , I'll show you how to add some content next post but for now, take the poll!

Are you lost?

My HTML Quick and Dirty Guide Cont ...

Ok, you needed a break, that was alot of off subject reading you did, sorry .  I'll stick to HTML more, but first a little fact that I will start to do at the beginning of each lesson.

Fact: HTML is Case Insensitive which means you can TyPe LIke tHIs and it really doesn't matter ... It's just good practice to type in Upper-case, or Lower-case for the WHOLE doc.

Last Lesson you did

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>

<HTML>

It just displayed a title on the top part of the web browser. (If you didn't see it make sure you saved it as .htm ) not very informative, or attractive. Well now type in

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>


</BODY>
<HTML>

HINT: "BODY" is just the "MEAT" of the HTML document, (from some old HTML video we watched in school ) It contains almost all of the information of the HTML document. It can change the text different colors, change the background, and add pics! All in the "BODY".

Now you will have to add some text in you Web Page at one point or another ...  so just add

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>
<H1>Ha, I'm Learning HTML!!!</H1> ;Now this is the "Heading" of an HTML doc. Just like the Doc. of a letter.

</BODY>
<HTML>

now look at the Webpage, better, but not finished, now add

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>
<H1>Ha, I'm Learning HTML!!!</H1>
<P>This is where you add text, specifically a paragraph!</P>

</BODY>
<HTML>

;<H1> is the "Heading" of an HTML doc. Just like the Doc. of a letter.

Now look at it (remember to save in notepad, and then refresh your browser!) This is the begining of a Web Page, Take the poll, then take a break, and come back refreshed, you're doing great!

Next Post I'll teach you how to center text, Change the Background, and some other random stuff!

Are you lost?

Cont ... Again!

I hope you had a good long break, because you are about to learn ... well alot.

I'll give you three guesses on what we're doing next

  1. It is very simple ....
  2. You see them everywhere ...
  3. Maybe even right here? ...

You better have guessed lists! There are 2 types of lists you can do in HTML

There is Ordered (above), and Unordered (below)

*HTML Facts*

  • Browsers read an HTML document from TOP, to BOTTOM.
  • HTML is not a complete language

 

Ok, on to the lesson. I have promised you many things for this lesson, don't worry I'll tell you. Ok where did I leave off ...

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>
<H1>Ha, I'm Learning HTML!!!</H1>
<P>This is where you add text, specifically a paragraph!</P>

</BODY>
<HTML>

Ok, not hard stuff (yet) here is something thats very important!!!

 Instead of  <BODY>, try <BODY BGCOLOR=BLUE>

If you try this you will notice that the background turned Blue. You can replace the word blue with yellow, red, black, purple, orange. (Basically all of the primary colors!)But wait .... there's more! use <BODY BGCOLOR="#3300FF"> This is one example of a 6 digit hexidecimal color code. This is a very good site which hosts all of the possibilitys! http://www.loseralliance.com/html-color-chart.php

OK, you want a picture on your site? You want your text centered? Yes?, then type in

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Ha, I'm Learning HTML!!!</H1>
<P>This is where you add text, specifically a paragraph!</P>
<IMG SRC="YOUR FILE NAME.JPG, .bmp, .gif, ect"></CENTER>

</BODY>
<HTML>

I will trust you to tell which was which ...

Ok, now finally lists!!!!!

<HTML>
<HEAD>
<TITLE>My First Ever Web Page</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Ha, I'm Learning HTML!!!</H1>

<UL>This is an un ordered list
<LI>Remember when I said a while back that MOST HTML tags need close tags ...
<LI>Well, this is one ...
</UL>

Now that you know some decent HTML Skills make some little webpages from that, 'cause my next post might take a while ... lots of stuff ... so have fun!

Create a free website at Webs.com