Programming Forums - Basics of HTML Tutorial

Programming Forums (http://www.programmingforums.org/forumindex.php)

- HTML / XHTML / CSS (http://www.programmingforums.org/forum27.html)

- - Basics of HTML Tutorial (http://www.programmingforums.org/showthread.php?t=10672)

Basics of HTML Tutorial

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 :D.
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.

<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.

<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.

<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.

<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

<html>

        <title>

                Hello World

        </title>



        <body bgcolor ="FF0000">

                Hello World

        </body>

</html>

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

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:

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...

<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.

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

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:

<!--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.

<!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 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.

@Agent47

The reason...

        <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. :confused:

Quote:

Originally Posted by Sane

@Agent47

The reason...

        <script type="text/JavaScript">

        /*<![CDATA[*/



        /*]]>*/

        </script>

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%...

Quote:

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

<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?:confused: sorry if i offenden anyone

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.

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:rolleyes:
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 :)