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

ReubenK · Mar 24th, 2006, 6:13 PM

Basic Tutorial On HTML
By Reuben Keeney

Hello there!
In this tutorial I will be showing you some of the basic stuff on HTML. Text,Font,Hyperlinks etc.
But before I go ahead and start this tutorial I will give you a brief history and some facts on HTML.

Brief History and Facts Of HTML

HTML stands for HyperText Markup Language and it is one of the easiest if not easiest language you will ever learn.

Vannevar Bush first proposed the basics of hypertext in 1945. Tim Berners-Lee invented the World Wide Web(WWW), HTML, HTTP (HyperText Transfer Protocol) and URLs (Universal Resource Locators) in 1990. Tim Berners-Lee was the primary author of html, assisted by his colleagues at CERN, an international scientific organization based in Geneva, Switzerland

If you want to learn more about history of HTML and the internet try :

http://inventors.about.com/library/inventors/blhtml.htm
http://careo.prn.bc.ca/losc/mod1t1.html
http://infomesh.net/html/history/early/

Note : That is just some of the links on the internet about HTML, If you want to view more sites just look it up on google.

Basics Of HTML

Okay, Here we go!
As I said this is only a basic tutorial on HTML and if you want to learn more about html I will put some links at the bottom of the tutorial!

Firstly, You can code HTML in any notepad, Microsoft Notepad would be recommended..But if your willing to pay the extra money you can get programs like Microsoft Frontpage or Macromedia Dreamweaver to help you coding(They are very usfull)
You can get a 30-Day trial of Macromedia Dreamweaver from www.macromedia.com
Anyway, Getting back on the subject.. Your first steps into learning HTML..

First go into Notepad.

Type in the following code :

<html>
<head>
<title>Hello</title>
</head>

hello world!

</head>
</html>

Save it as : firsthtml.html

Now open up the file and hey presto! Hello world! comes up on your screen�
You may be thinking Whoop-De-Doo.. It�s a blank page with a bit of text, But you should be proud of yourself, it is your first time using HTML!
Mess about with the text for a few minutes so you know how it works..

I will now tell you what all the <html> and <head> etc means..

<html> 

<head> 
<title>Hello</title> <!�The Text that will appear at the top of your page..The Top left corner..-->
</head>

</head> 

hello world! 

</html> 

<html> = This is the most important part of making a document work�This has to be included in all your html documents. No Buts, No Excuses.

<head> = Your heading.. This would be for your heading of your site. For example. Say your putting your history homework on a website for some strange reason, you could put �History Homework� inside the <head> </head> to make a heading for your website.
Exp.

<html> 

<head> 

 My History Homework 

</head>

</head> 

hello world! 

</html> 

<title> : The title of your website. This will show up at the top left corner of the page.
 = This is used quite frequently when you are writing plain text..Exp Hello, How are you today? 

</> = these are used to start and finish a tag .. examples are the <head> tag and and many more..
If you do not end a tag the site will become a mess..

 : This is used when you are putting a comment in your code.. It will not do anything to your code but it is useful for when you are writing long code..
When you have done it successfully it should turn a greyish colour..

Colour in your text

The following code will show you an example on how to colour your text..
<html>

<head>
<title>Hello</title>
</head>

<body>

hello world

</body>

</html>

hello world is what we are looking at now..
The #FF0000 stands for a colour..FF0000 stands for red..There are lots of different colour codes but you don�t need to learn the codes..
You can use this instead :

<html>

<head>
<title>Hello</title>
</head>

<body>

hello world

</body>

</html>

Although it is not necessary I recommend you learn the colour codes for when you become more advanced in HTML you will be sorry you didn�t learn it, that is if you use notepad.. You don�t need to learn the codes if your using a HTML editor for most should have the colours built in..

Text Styles

Ok, There are several ways you can add styles to your text whether its bold style, italic style underline style etc..
Copy the following code into your HTML editior, Text editor to see some of the effects of text styles :

<html>

<head>

</head>

<body>

This is a bold text
This is a italic text
This is underlined text
<s>This is strikethrough text</s>
This is bold italic text
This is italic underlined text
<s>This is strikethrough underlined text</s>
</body>

</html>

As you see there is a lot of different styles you can use..

 : Bold Text
 : Italic Text
: Underlined Text
<s> : Strikethrough Text

Mess about with the text fonts to get a good grip on the text..

Now you know how to :

� Make your first HTML site
� Putting Text into your site
� Aplying effects to your website.
� Knowing about HTML tags

Now we shall learn some more about HTML..

Before you go on please read over what you have read so you understand it all..

Hyperlinks

Now we have come to the end of our short tutorial and we will finish up with hyperlinks..
The following code will show an example of a simple hyperlink :

<html>

<head>

</head>

<body>

<a href="http://www.programmingforums.org">Programming Forums</a>

</body>

</html>

<a href="http://www.programmingforums.org">Programming Forums</a> This is what we are looking at now�
as you can see <a href="http://www.programmingforums.org"> is the place were you enter the actual link and >Programming Forums</a> is the text which will be visible.

When you paste the following code in it should appear like this

Programming Forums

When you click the link you are brought to the following link.

Well that�s about the end of this basic tutorial but before I go I will give you some links on were you can learn more on HTML,

www.w3schools.com - I recommend that one.
www.htmlgoodies.com
www.htmlcodetutorials.com
www.pagetutor.com
www.funky-chickens.com
www.yourhtmlsource.com

Note : Please Let me know if I had made any mistakes. Thanks

ReubenK · Mar 24th, 2006, 6:16 PM

Im sorry about posting this in the wrong forum but when I tried putting it into the HTML tutorial section but it would not let me.. It said I did not have the privileges to do so..Sorry!

a thing · Mar 24th, 2006, 6:23 PM

What about DOCTYPEs and namespaces?

DaWei · Mar 24th, 2006, 6:56 PM

Please read the forum's rules/FAQ and a "How to Post..." thread. No point in dumping ugly stuff on your fellow members when there are code tags to help separate textual material from ememplar material. You're also trying to teach deprecated, poor HTML. Bad idea.

Ooble · Mar 25th, 2006, 7:43 AM

While it was pretty well written, there are two main problems with it: for one, as DaWei said, HTML is deprecated, and most, if not all, web developers advise against using it, favouring XHTML instead. Secondly, you didn't use [code] tags. Please do in future.

The reason you can't post in the HTML Tutorials forum is because people were posting questions in there, so it's now locked. Hopefully a mod will move this.

ReubenK · Mar 25th, 2006, 8:29 AM

Quote:

Originally Posted by DaWei

Please read the forum's rules/FAQ and a "How to Post..." thread. No point in dumping ugly stuff on your fellow members when there are code tags to help separate textual material from ememplar material. You're also trying to teach deprecated, poor HTML. Bad idea.

I'd appreciate if you actually gave a little thanks for it..
I spent my own time writing this tutorial for the website and now im getting stick for it by this person..
Not to be harsh on you or anything but why dont you write one then?
If your going to be so critical well do one yourself..

DaWei · Mar 25th, 2006, 8:51 AM

Sonny, if I wrote an HTML tutorial, it wouldn't be out of date before I finished....

Agent 47 · Mar 25th, 2006, 9:00 AM

You can whinge all you want, but to be honest, the 'tutorial' is
basically crap. If you are gonna teach people the 'basics', you
have to at least teach them properly, and that does not mean
telling them to use deprecated markup.

Quote:

Type in the following code :

<html>
<head>
<title>Hello</title>
</head>

hello world!

</head>
</html>

Save it as : firsthtml.html

Now open up the file and hey presto! Hello world! comes up on your screen�
You may be thinking Whoop-De-Doo.. It�s a blank page with a bit of text, But you should be proud of yourself, it is your first time using HTML!

Wrong. Where's your Doctype? Content-type meta? <body> tags? Etc.

Quote:

Iffy. Not if you are using a Doctype [like you should be]

Quote:

</head>

Poor. As opposed to, what, being inside nothing like in your example?

Quote:

<head> = Your heading.. This would be for your heading of your site. For example. Say your putting your history homework on a website for some strange reason, you could put �History Homework� inside the <head> </head> to make a heading for your website.

Wrong. Wtf are you talking about?

Quote:

<html> 

<head> 

 My History Homework 

</head>

</head> 

hello world! 

</html>

Wrong. Invalid, poor markup.

Quote:

= This is used quite frequently when you are writing plain text..Exp Hello, How are you today?

Poor. What about ? Why use ? Where's your explanation
on the differences/benefits of each?

Quote:

</> = these are used to start and finish a tag .. examples are the <head> tag and and many more..
If you do not end a tag the site will become a mess..

Iffy. What about <img> elements? Are you saying I have to use:

(Toggle Plain Text)

<img src="..." alt="..."></img>

?

Quote:

hello world

Poor. Deprecated tags and attributes.

You should be using s with CSS applied to them.

Quote:

This is a bold text
This is a italic text
This is underlined text
<s>This is strikethrough text</s>
This is bold italic text
This is italic underlined text
<s>This is strikethrough underlined text</s>

Poor. Again, deprecated markup.

You should be using s with CSS applied to them, or,
in some cases, semantic shorthand tags like: , .

Overall: piss-poor. Out of 10, I'd give you 4.

You miss out vitally important ideas in your 'tutorial', such as valid
code, semantic markup, using CSS to separate the design from the
content, etc. I could go on, but I think you must get the point.

What did you expect? A pat on the back?

--47.

ReubenK · Mar 25th, 2006, 11:18 AM

well im sorry but i thought i was doing the right thing contrubiting to the forum..

Mjordan2nd · Mar 25th, 2006, 11:28 AM

~Moved to the tutorial section

Mar 24th, 2006, 6:13 PM	#1
ReubenK Programmer Join Date: Mar 2006 Posts: 36 Rep Power: 0	Basic HTML Tutorial - Reuben Keeney Basic Tutorial On HTML By Reuben Keeney Hello there! In this tutorial I will be showing you some of the basic stuff on HTML. Text,Font,Hyperlinks etc. But before I go ahead and start this tutorial I will give you a brief history and some facts on HTML. Brief History and Facts Of HTML HTML stands for HyperText Markup Language and it is one of the easiest if not easiest language you will ever learn. Vannevar Bush first proposed the basics of hypertext in 1945. Tim Berners-Lee invented the World Wide Web(WWW), HTML, HTTP (HyperText Transfer Protocol) and URLs (Universal Resource Locators) in 1990. Tim Berners-Lee was the primary author of html, assisted by his colleagues at CERN, an international scientific organization based in Geneva, Switzerland If you want to learn more about history of HTML and the internet try : http://inventors.about.com/library/inventors/blhtml.htm http://careo.prn.bc.ca/losc/mod1t1.html http://infomesh.net/html/history/early/ Note : That is just some of the links on the internet about HTML, If you want to view more sites just look it up on google. Basics Of HTML Okay, Here we go! As I said this is only a basic tutorial on HTML and if you want to learn more about html I will put some links at the bottom of the tutorial! Firstly, You can code HTML in any notepad, Microsoft Notepad would be recommended..But if your willing to pay the extra money you can get programs like Microsoft Frontpage or Macromedia Dreamweaver to help you coding(They are very usfull) You can get a 30-Day trial of Macromedia Dreamweaver from www.macromedia.com Anyway, Getting back on the subject.. Your first steps into learning HTML.. First go into Notepad. Type in the following code : <html> <head> <title>Hello</title> </head> <p>hello world!</p> </head> </html> Save it as : firsthtml.html Now open up the file and hey presto! Hello world! comes up on your screen� You may be thinking Whoop-De-Doo.. It�s a blank page with a bit of text, But you should be proud of yourself, it is your first time using HTML! Mess about with the text for a few minutes so you know how it works.. I will now tell you what all the <html> and <head> etc means.. <html> <!--Starting Tag \| Must always be at the top of every HTML document--> <head> <!--The Tag for your heading--> <title>Hello</title> <!�The Text that will appear at the top of your page..The Top left corner..--> </head> </head> <!--Closing tag for your heading..If this weren�t included all your code would be inside the heading..--> <p>hello world!</p> <!--The Text Of The Document..Reads "hello world!"--> </html> <!--Closing HTML tag..If this isnt at the end of your document all that will show will be a blank page..--> <html> = This is the most important part of making a document work�This has to be included in all your html documents. No Buts, No Excuses. <head> = Your heading.. This would be for your heading of your site. For example. Say your putting your history homework on a website for some strange reason, you could put �History Homework� inside the <head> </head> to make a heading for your website. Exp. <html> <!--Starting Tag \| Must always be at the top of every HTML document--> <head> <!--The Tag for your heading--> <p> My History Homework </p> </head> </head> <!--Closing tag for your heading..If this wasn�t included all your code would be inside the heading.--> <p>hello world!</p> <!--The Text Of The Document..Reads "hello world!"--> </html> <!--Closing HTML tag..If this isnt at the end of your document all that will show will be a blank page..--> <title> : The title of your website. This will show up at the top left corner of the page. <p> = This is used quite frequently when you are writing plain text..Exp <p> Hello, How are you today? </p> </> = these are used to start and finish a tag .. examples are the <head> tag and <p> and many more.. If you do not end a tag the site will become a mess.. <!-- --> : This is used when you are putting a comment in your code.. It will not do anything to your code but it is useful for when you are writing long code.. When you have done it successfully it should turn a greyish colour.. Colour in your text The following code will show you an example on how to colour your text.. <html> <head> <title>Hello</title> </head> <body> <p><font color="#FF0000">hello world</font></p> </body> </html> <font color="#FF0000">hello world</font> is what we are looking at now.. The #FF0000 stands for a colour..FF0000 stands for red..There are lots of different colour codes but you don�t need to learn the codes.. You can use this instead : <html> <head> <title>Hello</title> </head> <body> <p><font color="red">hello world</font></p> </body> </html> Although it is not necessary I recommend you learn the colour codes for when you become more advanced in HTML you will be sorry you didn�t learn it, that is if you use notepad.. You don�t need to learn the codes if your using a HTML editor for most should have the colours built in.. Text Styles Ok, There are several ways you can add styles to your text whether its bold style, italic style underline style etc.. Copy the following code into your HTML editior, Text editor to see some of the effects of text styles : <html> <head> </head> <body> <b>This is a bold text</b> <i>This is a italic text</i> <u>This is underlined text</u> <s>This is strikethrough text</s> <b><i>This is bold italic text</b></i> <i><u>This is italic underlined text</i></u> <s><u>This is strikethrough underlined text</s></u> </body> </html> As you see there is a lot of different styles you can use.. <b> : Bold Text <I> : Italic Text <u>: Underlined Text <s> : Strikethrough Text Mess about with the text fonts to get a good grip on the text.. Now you know how to : � Make your first HTML site � Putting Text into your site � Aplying effects to your website. � Knowing about HTML tags Now we shall learn some more about HTML.. Before you go on please read over what you have read so you understand it all.. Hyperlinks Now we have come to the end of our short tutorial and we will finish up with hyperlinks.. The following code will show an example of a simple hyperlink : <html> <head> </head> <body> <a href="http://www.programmingforums.org">Programming Forums</a> </body> </html> <a href="http://www.programmingforums.org">Programming Forums</a> This is what we are looking at now� as you can see <a href="http://www.programmingforums.org"> is the place were you enter the actual link and >Programming Forums</a> is the text which will be visible. When you paste the following code in it should appear like this Programming Forums When you click the link you are brought to the following link. Well that�s about the end of this basic tutorial but before I go I will give you some links on were you can learn more on HTML, www.w3schools.com - I recommend that one. www.htmlgoodies.com www.htmlcodetutorials.com www.pagetutor.com www.funky-chickens.com www.yourhtmlsource.com Note : Please Let me know if I had made any mistakes. Thanks

Mar 24th, 2006, 6:23 PM	#3
a thing Unverified User Join Date: Aug 2005 Location: none Posts: 146 Rep Power: 0	What about DOCTYPEs and namespaces? __________________ Warning: My posts may change (dramatically) within the first 15 minutes they're posted. Got 'Nux?�GNU/Linux and other free software support. It's GNU/Linux, not just Linux.

Mar 24th, 2006, 6:56 PM	#4
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Please read the forum's rules/FAQ and a "How to Post..." thread. No point in dumping ugly stuff on your fellow members when there are code tags to help separate textual material from ememplar material. You're also trying to teach deprecated, poor HTML. Bad idea. __________________ 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

Mar 25th, 2006, 7:43 AM	#5
Ooble I eat cake for breakfast. Join Date: Jul 2004 Location: In my box. Posts: 4,434 Rep Power: 9	While it was pretty well written, there are two main problems with it: for one, as DaWei said, HTML is deprecated, and most, if not all, web developers advise against using it, favouring XHTML instead. Secondly, you didn't use [code] tags. Please do in future. The reason you can't post in the HTML Tutorials forum is because people were posting questions in there, so it's now locked. Hopefully a mod will move this. __________________ Me :: You :: Them

Mar 25th, 2006, 8:51 AM	#7
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Sonny, if I wrote an HTML tutorial, it wouldn't be out of date before I finished.... __________________ 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

Mar 24th, 2006, 6:16 PM	#2
ReubenK Programmer Join Date: Mar 2006 Posts: 36 Rep Power: 0	Im sorry about posting this in the wrong forum but when I tried putting it into the HTML tutorial section but it would not let me.. It said I did not have the privileges to do so..Sorry!

Mar 25th, 2006, 11:18 AM	#9
ReubenK Programmer Join Date: Mar 2006 Posts: 36 Rep Power: 0	well im sorry but i thought i was doing the right thing contrubiting to the forum..

Mar 25th, 2006, 11:28 AM	#10
Mjordan2nd The Supreme Ruler Join Date: May 2004 Location: Houston Posts: 1,476 Rep Power: 6	~Moved to the tutorial section __________________ "Every gun that is made, every warship launched, every rocket signifies, in the final sense, a theft from those who hunger and are not fed, from those who are cold and are not clothed. The world in arms is not spending money alone. It is spending the sweat of its laborers, the genius of its scientists, the hopes of its children." - Dwight D. Eisenhower

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

Basic HTML Tutorial - Reuben Keeney