HTML tags and examples Condensed form of course from my site...

[GM-University 0]

Well, I decided to try and help out some of the users here who might be unexperienced in HTML, so I condensed the begginer's HTML course at my website. Here it is...

 

Lesson 1

HTML means Hyper Text Markup Language. HTML is a very common language used for many websites, is the base for more complicated and powerful langauges like php, HTML can seem hard, but you will find it is one of the easiest langauges one can learn. The core of HTML is the tag, a tage is just a set of two arrows-like brackets created by hitting Shift and the comma key, or Shift and the period key. They look like this...

<

>

Tags start a change in the way a webpage looks with your basic starting tag, something like the bold tag which is like this

<b>

the text we want to be in bold would go after the <b>, but it will spread to the end of the page if we don't end the tag, to end a tag you begin the same tag you began with, but instead start it with a </, so the tag to end the bold effect would be

</b>

 

Lesson 2

In this lesson we will learn about some basic tags to change the way a body of text looks. We will start with a few of the most common tags.

We will begin with bold look at this sample and examine how the effectg is created (the word Text Here Will be what you want in bold)

<b>Text Here</b>

Simple right?

Ok, next we will learn how to make a break, which is the same as doing this...

A break is the equivilant to hitting enter, it is created like this

<br>

Simple right?

Ok, now you may wonder "how can I make an indent (or have a tab key effect) at the next line?" well, this is just as simple as the last tag, here is a indenting tag

<p>

Ok, now onto Italics italics are done in the same way as bolding text, we just change the b in <b> and </b> to an i like this

<i>Text Here</i>

Really simple huh?

Now, you are saying to yourself, "what do I do when the time comes where I need to underline my text?" well, we have the same job as we did with the italics, we just have to change those i's to u's like so

<u>Text Here</u>

 

Another thing we should consider doing is changing the size of our text, so we can make things stand out even more on our page. Here is how we do this, we need to define a size within our staring tag this time, but don't worry, it's very easy! look at this

<font size="1">Text Here</font>

Now it would be very bland and hard to read webpages if all we could use is size 1, so the creators of HTML gave us 7 sizes we could use, so where you se the "1" in our code we can instead use "2", "3", "4", "5", "6", or "7".

 

Lesson 3

Ok, now we are going to learn to add some cool things to our page.

Ok, we will start with the bullet, the bullet is a bit more compliated than what we have done so far, take a look here (<ul> begins the bullet series, </ul> ends it, and <li> creates an actual bullet)

<ul>
<li>Our First Bullet
<li>Our Second Bullet
<li>Our Third Bullet
</ul>

Notice how I hit enter after each bullet and after my starting tag, this is nessary or our bullets might not work in all browsers, some will work though...

"Now, how can we create a numbered list?" you are thinking it works the same way as a bullet, with different letters in the starting and ending tags, take a look

<ol>
<li>First number item
<li>Second number item
<li>Third number item
</ol>[html]
Do you know what start our list, and what tag ends it?  if you guessed the <ol> tag began it, and the </ol> ended it you are right.
But don't worry, if you want to use more than 3 items, or less in your lists feel free to, just add another <li> tag after the last one you used, or get rid of some <li> tags, just make sure they stay after your starting tag, and before your ending tag, and make sure you hit enter aft each one... :D
Now we will add a divide, or horizontal rule. The code is simple like creating an indent, or creating a break, here is the code [html]<hr>

Now we can also change the width, so it doesn't cover the whole page, we can do two things to create this, the first is by defining the size in pixels we want, the code is (Pixel Size should be replaced with the actual number)

<hr width=Pixel Size>

Another way we can do this is by entering the percentage of the page thw divide should cover, like so (replace percentage with the percentage, make sure to add the percent sign directly after the number...)

<hr width=percentage%>

We can also make the divide thicker like so... (pixels should be replaced with the pixel size in numbers)

<hr size=pixels>[html]
If we put our divide on a website it will be shaded in, if we want to remove this we must enter [html]<hr noshade>

Now, "What if we want to combine these effects?" you ask? well, this is simple, we add all of the variable into our taghere is an example of a tag with all three effects (remove any not wanted) [hmtl]<hr noshade width=Pixels or percentage size=pixels>[/html] The order of the variables doesn't matter by the way.

 

Lesson 4

Now we need to make our page more lively and less bland, so we will learn to add color now... Here is the code for changing color using hex codes (you would replace the hex with the actual hex code),

<font color="hex">Text Here</font>

Make sure to put the hex code in quotes.

Here are a few basic hex codes:

Red = FF0000

Purple = CC00CC

Blue= 0000FF

Green= 00FF66

Yellow= FFFF00

Black= 000000

White= FFFFFF

Now, we can also use the actual names of basic colors, like so (replace NC with the name of the color)

<font color="NC">Text Here</font>

Make sure you put the name of the BASIC color in quotes.

Ok, now we want to give our site a nice backround color right? ok, well here's the hex code version (remember to swap hex for the actual hex code)

<body bgcolor="hex">

Remember to put the hex code in quotes!

Now, here is the version for basic colors using the name (replace NC with the actual name...),

<body bgcolor="NC">

Rember to put your quotes...

 

Lesson 5

One of the last lessons we will learn is on insterting pistures and backround images.

This is quite simple, but a good skill to have, ok here is the code to insert a picture (replace the words url with the actual url of the image)

<img src="url">

Remember to put the url in quotes!

Ok, we can also add a border which is like a little picture frame, here is the code (replace url with the image url, and number with the border size 0-2)

<img src="url" border="number">

remember to put qoute around both the image's url, and the border size, speaking of border sizes, 0 will create no border (the same as not using the tag at all...) 1 will make a thin border, and 2 will create a thick border.

To display a backround image (it will be tiled...) you can use this code (replace url with the image location)

<body background="url">

rember to put the quotes around the image url.

 

Lesson 6 (last lesson) Refining but Not Confining

 

Ok, as our last lesson we will learn to place text somewhere else on the page, and how to link to another page...

Ok, to align text or an image to the left we must enter this (put the code for your image or text where it says image/text)

<div align=left>image/text</div>

To make the text/image centered on the page we must switch the part that says

align=left to align=center and to align it to the right we must use align=right where the align=left was. Now we will create a text link, here is the code (put the url of the page you want to link to where it says url, and the ocde for the text you want displayed where it says Text Here)

<a href="url">Text Here</a>

remember to put quotes around the url.

Now, we the last thing we will learn is creating a linking image, this is quite simple, all you need to do is replace the code for your text with the code for your image.

 

Wrap-Up

 

Ok, well you've learned a lot to day, I hoped you understood everything, if you have a question just ask in this topic, or PM me. I will post another little course when I finish HTML Novice, it will cover tables, some basic CSS and all that junk.

 

The best way to get a nice looking page is by combining effects, use the alignments to get things precisely where you wnat them!

 

~GM

 

whyme says: fixed your bbcode

Edited March 20, 2005 by whyme (see edit history)

[whyme 0]

an excellent tutorial for html beginners.

[GM-University 0]

Thanks, I messed up some of my BB Code in the third lesson whith creating numbered lists.

[scab_dog 0]

Cool HTML Lessons, would have taken a long time typing it up!!

[whyme 0]

i fixed up the bbcode

[nickmealey 0]

nice tutorial for begginers

[GM-University 0]

i fixed up the bbcode

61868[/snapback]

Thank you Whyme!

[Se?or Maniac 0]

Yes an excellent tool for beginners. I give it a 10/10. It is also helpful to some people here who know html to freshen up on it. Good job keep up the work.

[Dragonfly 0]

A very descriptive tutorial for beginners. You must have struggled to put up each and every line. Next week you may add TABLE and FORM. However I really doubt if beginners will come to this site.

[mahesh2k 0]

Nice HTML tutorial and it ios good for beginers 100% coolkeep posting such good posts.why dont you put these tuts on your site i will spread the URL arround the web. Hands Up man keep it up.

[PHPtech 0]

Wow, that's good, your right, HTML is the base for many web-langauges.

[rectab 0]

Thanks, I messed up some of my BB Code in the third lesson whith creating numbered lists.

[innocent-devil 0]

buddy an excellent HTML tutorial . that would help alot to the beginers who want to leann HTML .thanx for your so nice toturial.

[grimmy 0]

yeah really cool for new members

[luckily909 0]

really good man