Programming Forums > Web Development and Design > HTML / XHTML / CSS

crawforddavid2006 · Jul 9th, 2006, 9:55 PM

Ok for those of you who want to learn HTML and don't want to go and search for help I think I can give you a good place to start.

First of all you need an editor. Notepad works great because its free and just about everyone has it

.
HTML uses something called a tag (A tag is what will determine how the page is formated). You have an opening tag and a closing tag.
ex.

(Toggle Plain Text)

<html>

</html>

the closing tag is always signified by a "/". All tags are put inside of "<>"

In HTML as in all languages you can comment parts out. A comment means that the code between the beginning and end will not be used.
The comment tag in HTML is a lot different then most languages.
ex.

(Toggle Plain Text)

<html>
	<!--This is the beginning of a comment -->
		Any text or code in between the two comments is not looked at when you run the page.
	<--this is the end of a comment-->
</html>

If you notice when you look in the top left hand corner of the page it has a title. The title is done by using title tags.

(Toggle Plain Text)

<html>
	<title>
		Hello World
	</title>

</html>

If you put that in your code then the top left hand corner of your page should read "Hello World"

Now that you understand that I will teach you how to display some basic things on your page. Anything that displays on your webpage is probobly
going to be in the body tag. The body tag can take many parameters. It can change the background color it can even change the font type and color
I will show you how to make the background color red and also how to use the body tags now.

(Toggle Plain Text)

<html>
	<title>
		Hello World
	</title>

	<body bgcolor = "red">
		Hello World
	</body>
</html>

The "bgcolor" parameter will take a variety of different colors. If you don't like the choices that you have then you can also use Hex colors

(Toggle Plain Text)

<html>
	<title>
		Hello World
	</title>

	<body bgcolor ="FF0000">
		Hello World
	</body>
</html>

Well thats it for this lesson. I hope this helps.

Booooze · Jul 9th, 2006, 10:40 PM

OK bud. Some things need to be cleared up a bit, as your tutorial is quite accurate.

#1 - Your comment code is wrong. The correct format is this:

(Toggle Plain Text)

<!--This is a comment-->

The code above is a comment, therefore, would not actually show up on the page.

#2 - The body and title tags

Your right on a few things, but need some clarification. The body tag is normally reffered to as the "visual part of the page". Everything in it, gets rendered and displayed. The title tag, should be placed within the head tag. The head tag is where you would put things that don't actually show up in the page, such as javascript functions, styles..etc. The title tag is supposed to be in the head tag. Like...

(Toggle Plain Text)

<html>
    <head>
        <title>My page</title>
    </head>

    <body>
         <!--Comment: Visual part of page-->
    </body>
</html>

Last thing, the bgcolor tag you have in there is old. The proper most effective way is to use stylesheets.

Ooble · Jul 10th, 2006, 4:52 AM

You need a DOCTYPE up there. And please, please, stop teaching HTML 4.

Agent 47 · Jul 10th, 2006, 6:31 AM

Have a look at this thread:

http://www.programmingforums.org/forum/thread9024.html

You have made some very similar mistakes.

As for your 'tutorial':

Your comments are wrong. What you need is:

(Toggle Plain Text)

<!--This is the beginning of a comment

		Any text or code in between the two comments is not looked at when you run the page.

this is the end of a comment-->

As for the rest - where's the doctype? The XML namespace? The
<head></head> tags? The content-tpe META? etc.

As the others have said, it is not a good idea to be teaching HTML
4 to people. There is no good reason why any new document you
create should be anything other than XHTML 1.0 Strict. Here's a
template to get you started.

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<style type="text/css">
	/*<![CDATA[*/

	/*]]>*/
	</style>
	<script type="text/JavaScript">
	/*<![CDATA[*/

	/*]]>*/
	</script>
</head>

<body>
</body>
</html>

DaWei · Jul 10th, 2006, 7:13 AM

I would like to make a comment on the fact that many people think that a contribution is valuable, despite its inaccuracy, simply because it's a contribution. Not so. A US citizen, even a famous and skilled driver, should not go to the UK or Japan, for instance, and teach people to drive on the wrong side of the road.

Sane · Jul 10th, 2006, 9:13 AM

@Agent47

The reason...

(Toggle Plain Text)

	<script type="text/JavaScript">
	/*<![CDATA[*/

	/*]]>*/
	</script>

...this is done is to support browsers that don't have Javascript support?

But aren't browsers now beyond that time? I'd figure that 0.0001% if not less, use browsers that don't support Javascript these days.

Agent 47 · Jul 10th, 2006, 9:41 AM

Quote:

Originally Posted by Sane

@Agent47

The reason...

(Toggle Plain Text)

	<script type="text/JavaScript">
	/*<![CDATA[*/

	/*]]>*/
	</script>

...this is done is to support browsers that don't have Javascript support?

But aren't browsers now beyond that time? I'd figure that 0.0001% if not less, use browsers that don't support Javascript these days.

No, that's done so that the XML parser ignores your JS and/or
CSS code.

Technically, you should not be putting your JS and CSS in the
<head>, it should be linked to in external files where the XML
parser won't see it. But, just in case you need to put it in the
XHTML, you need to comment it out or else you will get some
validation errors.

<edit>
Actually, the latest figures I saw put it between 5 and 10%...

crawforddavid2006 · Jul 10th, 2006, 10:00 PM

Quote:

#1 - Your comment code is wrong. The correct format is this:

(Toggle Plain Text)

<!--This is a comment-->

The code above is a comment, therefore, would not actually show up on the page.

#2 - The body and title tags

Your right on a few things, but need some clarification. The body tag is normally reffered to as the "visual part of the page". Everything in it, gets rendered and displayed. The title tag, should be placed within the head tag. The head tag is where you would put things that don't actually show up in the page, such as javascript functions, styles..etc. The title tag is supposed to be in the head tag. Like...

(Toggle Plain Text)

<html>
    <head>
        <title>My page</title>
    </head>

    <body>
         <!--Comment: Visual part of page-->
    </body>
</html>

Last thing, the bgcolor tag you have in there is old. The proper most effective way is to use stylesheets.

All right... I'll admit I forgot the head tags but I have always used the bgcolor tag and when I checked in Dreamweaver the comment looked correct(it put everything inbetween in italics) I did not bother to check it until just now and again i'll admit i was wrong. I will be glad to rewrite it. Also at Ooble I have never used a doctype tag and it works just fine. not to be rude but whats the point exactly?

sorry if i offenden anyone

DaWei · Jul 10th, 2006, 10:21 PM

I don't mean to be rude, either, David, but times and standards change. The things you show are schlocky, even where not completely incorrect, and possibly deprecated, too. Doctypes inform the browser of the degree to which you are adhering (or not adhering) to recommended 'best' practice. There's an old saying that anyone can make a web page. It's true (except for Aunt Gertie). It's just that not everyone can make a web page properly. One can measure with their forearm, mark with chalk, and cut with an axe. Ainnagonnabe fine furniture. Craftsmanship is not a boat from Sears.

Booooze · Jul 10th, 2006, 10:26 PM

The Doctype is for W3C Standards. It tells you what the page is coded in. look here for a list:
http://www.cookwood.com/html/extras/doctypes.html

There are different doctypes, but for the most part, the code is the same. There are few differences (unless your using an older version). Sure, using older code and not sticking to a standard will work, it's just not proper. It's like doing C++ programming, and not making it Object Oriented. If you code the webpage the way you are doing it, it would never pass the W3C standards. You can find more about that here: http://validator.w3.org/

Not everyone checks their code and makes it valid. Run www.microsoft.com through the validator, and see how many errors it comes up with

I, and many others, tend to push for those standards a little harder, simply because if everyone did it taht way, then we would have a standard, and the web browsers would all render it the same way. Theres lots mroe too it. Run through google and see what you can come up with. There is a lot to learn.

[EDIT] - Dawei has some good advice there, as always

Jul 10th, 2006, 4:52 AM	#3
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	You need a DOCTYPE up there. And please, please, stop teaching HTML 4. __________________ Me :: You :: Them

Jul 10th, 2006, 6:31 AM	#4
Agent 47 Hobbyist Programmer Join Date: Nov 2005 Posts: 122 Rep Power: 3	Have a look at this thread: http://www.programmingforums.org/forum/thread9024.html You have made some very similar mistakes. As for your 'tutorial': Your comments are wrong. What you need is: (Toggle Plain Text) <!--This is the beginning of a comment Any text or code in between the two comments is not looked at when you run the page. this is the end of a comment--> <!--This is the beginning of a comment Any text or code in between the two comments is not looked at when you run the page. this is the end of a comment--> As for the rest - where's the doctype? The XML namespace? The <head></head> tags? The content-tpe META? etc. As the others have said, it is not a good idea to be teaching HTML 4 to people. There is no good reason why any new document you create should be anything other than XHTML 1.0 Strict. Here's a template to get you started. (Toggle Plain Text) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> /<![CDATA[/ /]]>/ </style> <script type="text/JavaScript"> /<![CDATA[/ /]]>/ </script> </head> <body> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> /<![CDATA[/ /]]>/ </style> <script type="text/JavaScript"> /<![CDATA[/ /]]>/ </script> </head> <body> </body> </html> __________________ "I'm going to become rich and famous when I invent a device that allows you to stab people in the face over the internet" Last edited by Agent 47; Jul 10th, 2006 at 6:46 AM.

Jul 10th, 2006, 7:13 AM	#5
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I would like to make a comment on the fact that many people think that a contribution is valuable, despite its inaccuracy, simply because it's a contribution. Not so. A US citizen, even a famous and skilled driver, should not go to the UK or Japan, for instance, and teach people to drive on the wrong side of the road. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Jul 10th, 2006, 9:13 AM	#6
Sane Programming Guru Join Date: Apr 2005 Posts: 1,799 Rep Power: 5	@Agent47 The reason... (Toggle Plain Text) <script type="text/JavaScript"> */<![CDATA[/ /]]>/* </script> <script type="text/JavaScript"> /<![CDATA[/ /]]>/ </script> ...this is done is to support browsers that don't have Javascript support? But aren't browsers now beyond that time? I'd figure that 0.0001% if not less, use browsers that don't support Javascript these days.

Jul 10th, 2006, 10:21 PM	#9
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I don't mean to be rude, either, David, but times and standards change. The things you show are schlocky, even where not completely incorrect, and possibly deprecated, too. Doctypes inform the browser of the degree to which you are adhering (or not adhering) to recommended 'best' practice. There's an old saying that anyone can make a web page. It's true (except for Aunt Gertie). It's just that not everyone can make a web page properly. One can measure with their forearm, mark with chalk, and cut with an axe. Ainnagonnabe fine furniture. Craftsmanship is not a boat from Sears. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Jul 9th, 2006, 10:40 PM	#2
Booooze Expert Programmer Join Date: Mar 2006 Location: Igloo Posts: 710 Rep Power: 3	OK bud. Some things need to be cleared up a bit, as your tutorial is quite accurate. #1 - Your comment code is wrong. The correct format is this: (Toggle Plain Text) <!--This is a comment--> <!--This is a comment--> The code above is a comment, therefore, would not actually show up on the page. #2 - The body and title tags Your right on a few things, but need some clarification. The body tag is normally reffered to as the "visual part of the page". Everything in it, gets rendered and displayed. The title tag, should be placed within the head tag. The head tag is where you would put things that don't actually show up in the page, such as javascript functions, styles..etc. The title tag is supposed to be in the head tag. Like... (Toggle Plain Text) <html> <head> <title>My page</title> </head> <body> <!--Comment: Visual part of page--> </body> </html> <html> <head> <title>My page</title> </head> <body> <!--Comment: Visual part of page--> </body> </html> Last thing, the bgcolor tag you have in there is old. The proper most effective way is to use stylesheets.

Jul 10th, 2006, 10:26 PM	#10
Booooze Expert Programmer Join Date: Mar 2006 Location: Igloo Posts: 710 Rep Power: 3	The Doctype is for W3C Standards. It tells you what the page is coded in. look here for a list: http://www.cookwood.com/html/extras/doctypes.html There are different doctypes, but for the most part, the code is the same. There are few differences (unless your using an older version). Sure, using older code and not sticking to a standard will work, it's just not proper. It's like doing C++ programming, and not making it Object Oriented. If you code the webpage the way you are doing it, it would never pass the W3C standards. You can find more about that here: http://validator.w3.org/ Not everyone checks their code and makes it valid. Run www.microsoft.com through the validator, and see how many errors it comes up with I, and many others, tend to push for those standards a little harder, simply because if everyone did it taht way, then we would have a standard, and the web browsers would all render it the same way. Theres lots mroe too it. Run through google and see what you can come up with. There is a lot to learn. [EDIT] - Dawei has some good advice there, as always

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > HTML / XHTML / CSS

Basics of HTML Tutorial