HTML Lesson 1
Lesson #1- This tutorial is for the beginner web designer.
You will not have to have any prior experience with web design to use this lesson. So you web savvy people, don’t be jerks and write me with mean or harsh criticism. I am doing my best to be a good teacher! So BE NICE. If you disagree with anything here, then please email me, and I will reference you with any additions I make.
TAGS – Tags are very important little things when it comes to developing a web site. They pretty much specify what the structure of your site will be.
All tags must have a < at the beginning of your tag and a > at the end of your tag. Pretty easy, huh? Well, the stuff that goes in between isn’t much harder to learn. Okay, so now that you know that you need those to thing with every tag, “WHAT DOES IT ALL MEAN, MAN?” Well those two little symbols specify open and close for your tags. so by typing <center>, your browser will know that the word “center” enclosed by the famous symbols(greater than, less than, carrots, angle brackets, whatever) is telling it to do something.
TAG NAME- The first word in a tag, is the tag’s name. With <Center> center is the tag name. ATTRIBUTES- Attributes are the garbage that goes after the tag name. <td align=left> tells the browser that td is the name and align=left is the attributes.
Just like the brackets. Almost all of the tags will need an open and a closing tag. So if I have a paragraph that I want centered, I would put two tags around it so my browser knows when I want to start and stop the centering. You do this by putting a / in the end tag. <center> text to be centered </center>
HTML DOCUMENTS Every document must contain four important sets of tags. It is kind of like a body with no arms and legs. You have your head and your body. Here is a basic start up page. You must start up with the words HTML so your browser knows what the heck you’re talking about.
<HTML>
<HEAD>
<TITLE>Home Page</TITLE>
</HEAD>
<BODY>
This is where you put of all your stuff for your page. Right in here.
</BODY>
</HTML>
So, lets start with the open HTML tag(<HTML>) that tells the browser that we are speaking in HTML so we have to put this first. Next, we have the start of our “HEAD”(<HEAD>). The HEAD is a “header” that contains all the information we want in our head. The head must contain our “TITLE” tags. The title tag is what gives you the TITLE of your page in the top bar of your browser such as “Welcome to Lunar Eclipse Ezine!”.
Because we opened our tags, we must CLOSE them. So since we finished what we wanted to say with our title tag, we must close the TITLE tag, as well as, the HEAD tag so we can move onto the BODY tags.
BODY The BODY tags (<BODY>) must contain everything you want to see in your web page. After you close your BODY tag, you must close your HTML tag, so your browser will know it is all over.
FORMAT Alright, now you have the guidelines. So, if you want to learn some neat stuff for your page( so it doesn’t put your viewer to sleep) you have to do some formatting.
CENTER- Make sure to put all the stuff to be centered in these tags.
<CENTER> WORD </CENTER>
BOLD- <B>WORD</B>
ITALIC- <I>WORD</I>
PARAGRAPH – To get a hard return between text paragraphs.
<P>BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH</P>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH.
BREAK- If you want to just break to the next line you would use the <br> tag. You don’t have to close this tag because there really is nothing to enclose.
LIST To list with dots before them you can use the lt;LI> </LI>tags. You must enclose the individual lines within the tags. You should get it to look like this.
Item One
Item Two
Item Three
Item Four
Make sure to always close your tags. Make sure to have all your information between your opening and closing body tags! These are just some of the basic tags. We will get into more later on, but don’t be afraid to look at the code of sites you like! To look at a code of a site, just go to your browser and choose view-source. Save the source to your hard drive, and play around. Practice makes perfect. Even with the new WYSIWYG(what you see is what you get) editors out there, you should know your basic HTML.
Author: Gina Hutchings
Copyright Lunar Media Inc
Chicago Web Design
