Learning HTML Part 1
In part 1 this tutorial I will teach you the basics of HTML.
What program to use
Beleive it or not, NotePad is one of the most common HTML editing programs. A few others are Microsoft FrontPage, Macromedia DreamWeaver and NotePad 2.
Microsoft FrontPage is called a WYSIWYG program (What you see is what you get). It does the coding for you, and you just tell it what you want. That is good if you don’t know any HTML and want to produce a website, but you have limitations in what your website can and can’t do.
DreamWeaver is an excellent program. You can use it as a WYSIWYG, or you can use it to code, so then you only need to know very basic HTML to make a website. DreamWeaver is also good because it colors different parts of the code with different colors so it is easier to find what you want and it looks much neater. It also suggests different tags to you while you are coding, so you don’t have to write the whole tag and might learn some new ones. It closes tags automatically.
NotePad 2 is a free program unlike the other two, and is basically the same as NotePad, but has been modded to make coding easier. It colors different parts of the code like DreamWeaver, and knows at least 10 different coding lannguages.
You can download NotePad 2 here. I recommend using that for this tutorial. If you use DreamWeaver you won’t learn as much. If you don’t want to download NotePad 2 just use regualr NotePad, it won’t interfier in how you do the tutorial.
Getting Started
HTML stands for Hyper Text Markup Language.
HTML is enssential if you want to make a website, it is also very easy once you know how it works.
HTML is made up of tags, like this one <html>. You might see some tutorials that teach you to write in CAPITALS, but you should get used to writing in lower case becasue xHTML (eXtensible Hyper Text Markup Language) only accepts lower case tags and in the futre it will replace HTML.
Each tag must be closed, like this: <html> </html>. The first one is the opening tag and the second one is the closing tag. In html some tags (like the ‘<p>’ paragragh tag) still work if you don’t close them, but you still should because you need to in xHTML.
There are only a few tags that don’t need to be closed, such as the line break tag ‘<br>’, the horizontal rule tag ‘<hr>’, and the input tag ‘<input>’. You can write them like I did just before, but you should write them like this: <br />, <hr /> and <input />. xHTML only accecpts the second type, so i suggest you write them like that.
Let’s start coding!
HTML is very simple, because the tags it is made up of explain themselves.
A basic HTML document should look like this:
<head>
</head>
<body>
</body>
</html>
The <html> tag tells the browser that everything inbetween it is HTML code. Anything between the <head> tag is not displayed on the page. But you can put other stuff in there like the page title, the page description and keywords and stlye sheets. Everything you want to appear on the page goes between the <body> tag.
<title>
The title tag displays the title of the page up in the top left corner of the browser on the bar that has the minimize and close buttons on it. Yours should say ‘Awesty Productions’ now.
The <title> tag goes between the <head> tags.
You can try it out right now. Open notepad or whatever program you want to use (if you are not sure look up the top) and put in the following code.
<head>
<title>My first web page!</title>
</head>
<body>
This is my first webpage!
</body>
</html>
Now save that as a .html or .htm file (it doesn’t matter which one, just like .jpg and .jpeg). Open you web browser and click on File > Open File… then select the html file you just made.
There should be a title up the top saying ‘My first web page’ and on the page there should be ‘This is my first webpage!’.
This is the end of this tutorial, but come back soon for part 2 to learn some more tags that you can put between the body tags to make you page look better.
Loading ...
Thank you very much… it’s much easier and simple to understand than many tutorials out there.
::cheers::
[…] This is part 2 of ‘Learning HTML’. If you haven’t taken part 1 it is recommended that you do. You can find it here. […]
this is the best site i ever ever seen in my whole life!!!!!!!!!!!!
WOWWWWW!!!!!!!!!!!
It really is helpful for some of my page problem:)
Thanks;)
this website is intruging
One thing…when u “save as” in notepad..u dont have any option for Htm or html ! )Unicode, ansi and other types
Yep.
In the box where it wants to to type in the file name just put in filename.htm or .html.
Thanks for your help. Most tutorials are very technical and take alot of studying. I hope to see more from you in the future. Please send me any other tutorials you have.
This is SIMPLE and GOOD. Thanks
Cool, this is the first HTML thing I understood!
wow nice thats really cool
html is fuuunnnn
Oooooo…
Thank you so very much for all these turitals
Nice,n simple language u have used 4 explainations. Thanks 4 ds Good Tutorial.
Hello
I bad gays
I here I with you .
Greetings
I shall do posts and to read this forum
Hello awesty! I’ve been doing your flash tutorials and they have been very usefull. As a short break and to deepen my coding understanding i’ve decided to do html. This tutorial was verry good indeed and notepad2 jsut rocked. I’ve got dream weaver, so should i use that or notepad 2?