It appears that you're running an Ad-Blocker. This site is monetized by Advertising and by User Donations; we ask that if you find this site helpful that you whitelist us in your Ad-Blocker, or make a Donation to help aid in operating costs.

You will need the following for this lesson.1.) A text editor. (something like notepad, ***Not Like MS Word***)

2.) An Internet Browser.

3.) A basic desire to learn html.

So please open up your text editor and lets beguin!!!

Every html page starts with the tag. it must also end with the closeing html tag The next tag you will see in every html page is then . Both of these have closeing tags as well so your document looks like this so far.

Not so hard is it? Lets make a html page now shall we. Pull up note pad, or your text editor now. Okay in between the tags, type in My First Page!!! Now we will add another tag to this lesson. and of course This is where most of your code will go. For now we will simply type in Hello world between them. So your code should look like this now.

My First Page

Hello World

Now Click on >File >Save As > Use the drop down menu to get to desktop and save it as Lesson_1.html You should now have a icon on your Desktop that looks something like your browsers icon. You can double click on it, or click here to veiw your work. Notice in the upper left of the browser... Look it's what you typed in between the title tags. Hello world shold be in the white portion of the browser. Pretty neat hu? Now close notepad. I had you do this for a reason. You need to know how to ga back and make changes after you have closed Notepad. You can get back to the code a few ways. Open notepad click on > File > Open > Use the drop down menu to select desk top > Down at the bottom where it says File of type set that to All Files (*.*) Now see your Page? Double click on it. Right click on the icon on the desk top > Select Open with > Notepad (or other text editor) Double click on the icon then right click anywhere in the page and select veiw source. All of these will open your html code up for you again so you may edit it some more. Nifty hu? So lets do just that. Open your code back up in Notepad. In many tags in html you can add many different variables. This holds true for the tag.

What this dose is fairly simple

bgcolor="black" This made your back groung color black. text="white" This will make the default for your text color white. Link="red" This will make your links red. vlink="red" This will make your visited links red. For instance, somone clicks a link then comes back the link will still be red instead of purple. alink="red" This makes active links red. So once again here is your code at this point.

My First Page

Hello World

So edit and save your code again. Now take another look at what you have done so far. Go ahead, we will wait. If you see no changes, make sure you save with the same file name on desktop. If you did that, then hit refresh. Ready? Good lets continue! Next we will learn the

and tags along with an attribute. Just below type in

You should have Hello World

below that type in

Below that type in

And finaly below that type in Now we are getting somewhere

Dont for get to close the

Lets look at the code.

My First Page

Hello World

Now we are getting somewhere

Make the changes to your code save it to the same file, and take a look at what this has changed on your web page. The

tag starts a new paragraph, where the tag is a caraige return.

will place your text in the center. *Note-this also drops everything down a line You have 2 other options as well.

and

Cool but kinda basic right? Lets make the heading stand out, and learn another couple of tags and attributes.

Lets start with the tag. Now I would say the tag is one of the most important tags in a web page. You can put these anywhere in your code. They will decide, what color the text is, how big it will be, what style font it will be. There are 3 attributes for the font tag. Color Face Size

You would type them in something like this. Now they don't have to be in any speacial order, nor do you have to use them all!! You can use just one if you wanted to.

Color You can assign color for sections of text. Size Sizes run 1 thru 6. 6 is the largest, 1 is the smallest Face you can assign a font style to your text. I belive all the ones in note pad work. Just go to [edit] at the top. Then set font. There is a whole list to work with. But there are more. Play around to find what works and what dosen't.

So now that you understand the tag, lets use it. Right above Hello World Lets add . As I mentioned above requires a closing tag. So below Hello World type in . Lets look at the code shall we!

My First Page

Hello World

Now we are getting somewhere

Now save that and take a look at it. You should see Hello World a little different now. It should still be center, but blue and bigger!! Like a heading should be. If not check your code against the one on the lesson. Now lets look at the

tag. Just above and below the tags add a tag. This will put a horizontal line above and under Hello World. But we can do more with this tag as well. You can set the width of the Line in pixels or Percent. Plus you can define what color it will be in the tag. Lets set the width to 50 pixels and the color to gray. One last note on this tag it requires no closeing tag. So it would look like. Below I included an example of with precent instead of pixels So here is your code now.

My First Page

Hello World

Now we are getting somewhere

Now save your work and take look at it. You should see a gray bar above and below Hello World. If not compare your code to the one above. Now the and tags will make text bold and itallic. Both require closing tags. You can use them anywhere withing the tags. I will use each on our code below in and example. This is and example of the tag

My First Page

Hello World

Now we are getting somewhere

This is and example of the tag

My First Page

Hello World

Now we are getting somewhere

Starting to look like that jiberish you used to see hu? But now it should make more sense to you. This concludes lesson one.

I rember when I was learning the basics. I wanted to get to the good stuff. Pictures and links and stuff that makes a web page a web page. Well thats where we are headed here. First rember the tag? Well there is another way to change the size of your text.

thru

These tags require closeing tags.

is the largest text, where

is the smallest. Kinda backwards from the tag hu? Now to the good stuff. First new tag we will learn is . IMG is short for image. Src is short for source. Easy as pie right! Good, lets learn to use it. You use this tag to place a picture in your page. To use it you must know the URL (webaddress) of your picture. You can use the pic on this page up top. Simpley right click on the picture. Click on > Properties > Highlight the web address > right click on the highlight > and click copy. Below "Now we are getting somewhere" in your code from Lesson one add Your code should look like the following

My First Page

Hello World

Now we are getting somewhere

Always rember to place the little quotation marks "" in where they need to go. The tag requires no end tag. Now update your code and take a look Now that we are working with pictures you can also add a backgroung image instead of a solid color. In the

tag you would take out the bgcolor statement. Now put in its place Background="any image file web address.gif or jpg" Next thing you need to know is how to make links. This is done with the tag. So lets add some links shall we? A wealth of knowledgeWhat this will do is make A wealth of Knowledge red. Because as you rember we made all links red in the tag. Everything between and tags is what is seen on your web page. I will do you one better. You can even use the tag in there. as well as

Did you notice I aded the and

tags? This will keep the words as a link but center them under the picture. This also makes the picture a link. Got it? Lets take another look at our code now. Code:

My First Page

Hello World

Now we are getting somewhere

Now update your code and take a look Pretty neat hu? I will tell you another trick. You can use what is known as hex values to define color. For example the hex value of this site background is #194B6E. Here is a site that will give you 216 web safe colors. Play with what you have learned for a while. Be creative. You just might surprise your self. This concludes leson 2 Next lesson Tables.

In this lesson we are going to cover some of the most used tags in HTML today. We are going to learn about tables. Now tables give you much better control over where things go on a page. How do they do this? Well they divide your page up into a grid. A table is made up of Cells and Rows. Cells are put in horizontaly, rows are put in verticly. Below is a diagram to explain. Row 1Cell 1 Row 1Cell 2 Row 2Cell 1 Row 2Cell 2

Get the general idea now? If not, don't worry by the end of this lesson you will be a table master. Now lets look at our code from the last lesson.

My First Page

Hello World

Now we are getting somewhere

Now onto tables!!! Here things get a little more tricky. But you can handle it right! To start a table you use the

and

tags. Each of these requires an end tag.

starts everything off.

stands for table row. Pretty simple right?

stands for table cell. This proves yet again that Netscape is on crack! Why it isn't no one seems to know. But it is

. So now that we have an idea how this works let me give you an example of the layout.

Row 1

Cell 1

Row 1

Cell 2

Row 2

Cell 1

Row 2

Cell 2

Looks like a lot hu? Don't worry about it. It's a peice of cake. Lets break it down. As I said earlier, the

tag started and stoped the table. That is easy enough, Then we had to start a row with the

tag. Then we could put in cellswith the

tag. You might have noticed that this has the same info as the diagram up top. I made that with a table. And so will you. The cells is where you put what you want your site visitor to see. Now in past lessons most tags had attributes that you could add to them to get more out of them. Table tags are no different. The

tag alone has quite a few you can add to change it. See the list below.

cellpadding Defines the amount of padding on the inside of the cell in pixels. i.e.

would leave 10 pixels of padding all the way around the inside of a cell cellspacing Defines the amount of padding in between cells in pixels i.e.

Puts 10 pixels in between each cell all the way around border Defines the thicknes of a border in pixels i.e.

would make a border around every cell 4 pixels wide. width Defines the width of the table as a whole usaly in percent. i.e

will make your table stretch to 100% of the screen width. align Defines where a table will be placed on the page. (similar to

) There are three options for this one. Left, Center, Right. i.e.

will set your table hoizontaly dead center of the page. valign Defines the verticle alignment. There are 3 options for this attribute as well. Top, Center, Bottom, i.e

would dissplay your table as high on the page as it possibly could. BGcolor Defines the Back ground color or the entire table or individual cells. Same as useing BGcolor in the tag. See Lesson 1

Now the

tag can use a few of these same tags. Below is a chart of the tags you will want to use with the

.

Align Defines where the row is place horizoltaly. options are Left, Right, Center, i.e.

this places the row center Valign Defines the verticle alignment of a row. Options include Top, Center, Bottom. i.e.

verticlely aligns the row center. Bgcolor Defines the Back Ground color for the row. i.e.

sets the background color to black for this row.

The

tag has the same attributes as the

. See chart below...

Align Defines where the row is place horizoltaly. options are Left, Right, Center, i.e.

this places the row center Valign Defines the verticle alignment of a row. Options include Top, Center, Bottom. i.e.

verticlely aligns the row center. Bgcolor Defines the Back Ground color for the row. i.e.

lol.. you forgot to show the niggers how to use meta tags, since they all want their kiddy sites to be seen through search engines! lol althought hey could view source of our main page and see the meta sources heh

Yea that is pretty much the basics man. There is more. Like Frames, IFRAMES, embeding flash, streaming music, and video Fonts, browser compatability, Write for other platforms, Many other tags not covered, then there is CSS DHTML XHTML XML and the list gose on.

Ok there is a problem with this thread in oder to see the tags that you guys are using you have to go into the source code. i think you should turn off HTML in the thread so that the tags can actually be seen on the page plus it would make it a little mroe readable. The reason being is because there are so many tags i the source code telling the text where to be that the tags that yo are trying to show on the page and the tags for the source code are intermingled and hard to be able to decipher.

Not only can you learn HTML, but there are several other languages that actually integrate with HTML there too. You can try the examples in realtime on the site itself, so playing around and tweaking is instant.

Plus, it is very important to have valid code and not use incorrect syntax or deprecated HTML. CSS will come into play too as there is very little to HTML and all the style remains in HTML.

I updated that snippet above; note though, it's not valid xHTML so I would not use it at all lol; breaks too many conventions to even bother listing really. Most applets will however give you their own buggy embedding code.

In my opinion the best way to learn HTML is a hands on approach. Start viewing the source code to web pages (Firefox: View->Page Source). Look for "tags" which will always be inside of a pair of < >'s. Try and figure out what that tag does and how it is represented on the page. I recommend turning of CSS Stylesheets at first, so you can see the page before it is "stylized". It's good web-practice to make your pages accessible as possible. Some browsers may not have "CSS" support on, and your web page could possibly look like ass. You should make your web page "usable" then go back and tweak the looks. That is to say, you can do things many ways, and they may (or may not) render to the same display.

You'll get the hang of it, its a very simplistic syntax. Notice all tags will start with a < followed by the name of the tag. and then they will eventually end with / followed by a >.

Many tags have the ability to contain text or even more tags. That is what you see with the paragraph tag:

Code:

<p>Page text</p>

Notice the name of the tag is repeated in those instances. (</p>).

Some tags will not have that, such as the image tag:

Code:

<img src="somepicture.jpg"/>

Notice that they (as well as the other tags) can have attributes (such as "src" , or source for refrencing a URL/file), that are specific to the tag itself, as defined by the specification... that is why you should always set which specification of HTML you are using, and you will see people exclaiming "XHTML Compliant"