HTML For The Newcomer: Part 1
http://www.codecrunch.com/articles/51/1/HTML-For-The-Newcomer-Part-1.html
By Daniel Phillips
Published on 06/24/2006
In this part we take a look at basic tags and text effects, all the information is presented in a user friendly manner, should be easy to absorb and understand.
Tutorial ForThe HTML Newcomer: Part 1
Ok first a quick definition of what HTML is!
In layman's terms, HTML is a language recognised by the Internet, therefore if you know how to use it, you can play around with the Internet, the most popular use of HTML is for editing websites.
In this tutorial I will cover some of the basic HTML commands for use with notepad, which will be your program of choice when coding HTML, if you cant find it - It is in the accessories folder in program files.
Now to learn some basic tags
<html> This starts a html document
<head> This is the tag for the head area of the webpage, the part where the title and stuff goes.
<Title> This is where the title goes
<body> This is where you put the main content/body of the document.
So for example:
<html> Starts the html code
<head> Starts the head area
<title> Hello this is my first html document </title> Starts then ends the title area
</head> Ends title area
<body> Starts body area
<b> hello world </b> starts then ends Bold text command
</body> Ends the body area
</html>
Ends the html code
The document should look like this in notepad
In layman's terms, HTML is a language recognised by the Internet, therefore if you know how to use it, you can play around with the Internet, the most popular use of HTML is for editing websites.
In this tutorial I will cover some of the basic HTML commands for use with notepad, which will be your program of choice when coding HTML, if you cant find it - It is in the accessories folder in program files.
Now to learn some basic tags
<html> This starts a html document
<head> This is the tag for the head area of the webpage, the part where the title and stuff goes.
<Title> This is where the title goes
<body> This is where you put the main content/body of the document.
So for example:
<html> Starts the html code
<head> Starts the head area
<title> Hello this is my first html document </title> Starts then ends the title area
</head> Ends title area
<body> Starts body area
<b> hello world </b> starts then ends Bold text command
</body> Ends the body area
</html>
Ends the html code
The document should look like this in notepad
Tutorial For The HTML Newcomer: Part 1
Ok you may now be rather confused, dont worry i have just introduced a few new things:
The closing tag
The closing tag is just a command that ends a tag, for example </head> ends the head area, this is essential because if </head> was not used the head area would not end.
An ending tag is just the normal tag with a "/" next to the < , its that simple.
for example:
<head> Is ended by </head>
<body> is ended by </body>
<b> is ended by </b>
The <b> tag
When text is placed between the <b> and </b> of this tag it becomes bold, simple really.
Text
You probably noticed i inserted text into this code, for example "hello world" this text is placed between <b> and </b> tags, so it will be bold.
The text "Hello this is my first html document", is in between <title> and </title> tags, so it will appear on your web site as a title at the top of the browser..
Although we diddnt use them in this tutorial, there are two more text tags in the summary, <u> and <i>, take a look at the summary to learn their functions.
Lastly you need to know how to save a HTML document in html format.
In not pad go to file/save save the document as document.html, the vital factor being the ".html" at the end which classifies the document type, the saved document should now open with an internet browser rather than notepad.
Ok now thats cleared up, read through it a few more times until you feel you fully understand everything.
The closing tag
The closing tag is just a command that ends a tag, for example </head> ends the head area, this is essential because if </head> was not used the head area would not end.
An ending tag is just the normal tag with a "/" next to the < , its that simple.
for example:
<head> Is ended by </head>
<body> is ended by </body>
<b> is ended by </b>
The <b> tag
When text is placed between the <b> and </b> of this tag it becomes bold, simple really.
Text
You probably noticed i inserted text into this code, for example "hello world" this text is placed between <b> and </b> tags, so it will be bold.
The text "Hello this is my first html document", is in between <title> and </title> tags, so it will appear on your web site as a title at the top of the browser..
Although we diddnt use them in this tutorial, there are two more text tags in the summary, <u> and <i>, take a look at the summary to learn their functions.
Lastly you need to know how to save a HTML document in html format.
In not pad go to file/save save the document as document.html, the vital factor being the ".html" at the end which classifies the document type, the saved document should now open with an internet browser rather than notepad.
Ok now thats cleared up, read through it a few more times until you feel you fully understand everything.
Tutorial For The HTML Newcomer: Part 1
As a summary
<html> To start a HTML document
</html> To end a HTML document
<head> To being the head area of the document
</head> To end the head are of the document
<body> To begins the body area of the document.
</body> To end the body area of the document.
<title> Used to input title.
</title> Used to end the <title> tag.
<b> Text put here wtll be bold </b>
<i> Text put here will be italic </i>
<u> thext put here will be underlined </u>
<u><b> You can pair text tags, text put here will be underlined and bold</b></u>
<html> To start a HTML document
</html> To end a HTML document
<head> To being the head area of the document
</head> To end the head are of the document
<body> To begins the body area of the document.
</body> To end the body area of the document.
<title> Used to input title.
</title> Used to end the <title> tag.
<b> Text put here wtll be bold </b>
<i> Text put here will be italic </i>
<u> thext put here will be underlined </u>
<u><b> You can pair text tags, text put here will be underlined and bold</b></u>