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