AFB's guide to basic HTML

AFB

Lifer
Jan 10, 2004
10,718
3
0
Many people here keep saying that they wish they knew HTML. Well, you no longer have a reason not to. Behold the HTML tutorial. Enjoy :D


All about tags
HTML is a markup language. It is used for formatting, not programming. You may have seen an HTML tag before and it probably looked something like this

<a href=?page.htm? >The other Page</a>

In HTML, we use angle brackets( < &amp; > ) to give the browser commands on how to format the text. Most HTML tags have an opening tag and a closing tag.

Opening tag:

Closing tag

In some HTML elements , the closing tag is optional but you can add it.

Example:

<font>Hello<./font>
<br>
<font>Bye</font>

The closing tag is optional for the <br> tag.

Tags are case insensitive, meaning that this

<FONT> Abcdefgh</FONT>

Is the same as
<font> Abcdefgh</font>


Attributes

In the following tag

<a href=?page1.htm?>

The tag is <a> or the anchor tag and it is used for linking the other pages or documents and I will talk about it later. We are specifying the ?href? attribute of the this tag. This is the page we are wanting to link to. Without attributes, the browser would not know where to take us if we clicked on the link. They are used to convey extra information in addition to what the empty tag provides. Attributes should always be surrounded by double quotes ( ?) and should always be in the opening tag.

Your first HTML page

Your first web page start out very basic and you will add things to it as you move on. You can download the current page from the link provided.

First, open up a text editor such as Notepad or WordPad. Do not use word processors such as Word ! They will mess up your page when you try to save it. Now create a new file and call it ?one.html?. Make sure that you double quote around the name or select all files so you do not save it as a ?.txt? document.

Now that you have your page open, we will start. All HTML pages should start with the <html> tag
and end with the </html> closing tag. Lets add them to the page.

<html>

</html>

I prefer to use lowercase letters for my tags, but you can use anything you want. If you open up this page in your browser, you will not see much. We have just created a blank page with nothing in it. Lets add some words.

<html>

<body>
Can you read this ?
</body>
</html>

You may have noticed that we added some extra tags here. Most of your words and content should be inside the <body> tag just like the rest of you page should be inside the <html> tag. There is also another common tag that goes directly inside the <html> tag. It is the <head> tag and it is used to give the browser extra information about the page.

<html>
<head>
<title>This is a page title</title>
<head>

<body>
Can you read this? Can you read what is on top ?
</body>
</html>

Save this and open it up in your browser, you should notice that the title bar says ?This is a page title?. You can specify different information like this in the head section like what the page is about using special tags that some search engines use. It should not be used for page content. Now lets add a background color to the page by specifying the ?bgcolor? attribute in the body tag.


<html>
<head>
<title>This is a page title</title>
<head>

<body bgcolor=?blue?>
Can you read this? Can you read what is on top ?
</body>
</html>

Save the page and open it in your browser. The background of the page should be blue. Try playing with it till you get a color you like. You can only give some of the most common colors using words. For other colors, you will have to give it in a different way which I will cover later.

Your final page should look like this

I will update this page as I get more time.
 

screw3d

Diamond Member
Nov 6, 2001
6,906
1
76
I think you should learn proper HTML from grounds up.. don't play with icky font and bgcolor tags first.. you can do all of that with CSS later.

You should first learn about how each tag corresponds with the content of the document, rather than presentation..

For example, <h1> to <h6> is not meant to just make your font size bigger.. they represent the structure of your content.

and oh, every (x)HTML document should also have the proper doctype declared at the very beginning. :)

Now while doing block layouts in CSS across different browsers is not easy, styling text and all that are all game for a beginner

Apart from w3schools, this is also a good place to start learning proper HTML
 

AFB

Lifer
Jan 10, 2004
10,718
3
0
Originally posted by: screw3d
I think you should learn proper HTML from grounds up.. don't play with icky font and bgcolor tags first.. you can do all of that with CSS later.

You should first learn about how each tag corresponds with the content of the document, rather than presentation..

For example, <h1> to <h6> is not meant to just make your font size bigger.. they represent the structure of your content.

and oh, every (x)HTML document should also have the proper doctype declared at the very beginning. :)

Now while doing block layouts in CSS across different browsers is not easy, styling text and all that are all game for a beginner

Apart from w3schools, this is also a good place to start learning proper HTML

I agree, W3Cschools rox.