Learning HTML

Kayo · Jan 17, 2007

This tutorial took me a while, and I would add on as I have more time. This has the basics of HTML, and will have more soon. This tutorial would mention CSS, but won't go into detail of CSS. I hope someone will find thid helpfull.

I also love comments.

Tools
1 - Getting started
Tools are very simple, all you need is a text editor, and a browser. you could use notepad on windows, and I believe macs have a simple text editor. I suggest using Notepad++ for windows users. I searchs a program for mac and jEdit seems to do the same. for browsers, I suggest you have multible browsers since you want all you vistors use the browser they like. I think you only use IE6 (Internet Explorer 6) to see if you webpage works on it. IE6 has major problems and you will pull you hair out.
2 - Making the files
When you typed out you HTML files as normal text files, you use "Save As" name it what every you want, then you add ".html" at the end (without the quotes), but you might have a problem with some programs. When you go to "Save As" and type out the name of the file with ".html" at the end, sometimes it would save as a text files
Code:
name you entered
index.html
Output name
index.html.txt
But it you add quotes around the whole name, then it would save as a html file
Code:
name you entered
"index.html"
Output name
index.html
3 - Links
Text editors
Notepad++
jEdit
Browsers
Firefox
Opera

Making your Webpage
1 - Getting Started
HTML was made to be as simple as possible. You could type what even you want and it would appear in the browser. but this isn't proper HTML. "How do I make it proper HTML?" you may ask.

HTML uses something called tags. here is a example of proper HTML
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
Goodbye world
</body>
</html>
ok, now I am going to explain what each line means.

Line - 1&2: DOCTYPE
The DOCTYPE tells the browser what kind of Document the browser is looking at, it does nothing to the page it self, but its XHTML standard.
Line - 3: <html>
<html> is the tag you use to start the HTML file itself.
Line - 4: <body>
Not everything in the HTML you see in the browser. The <body> tag starts before the main content section (The stuff you see in the window).
Line - 5: Goodbye World
This is a line that I add for the main content. It would appear as normal text in the browser. I used "Goodbye World" because I am sick of "Hello World."
Line - 6: </body>
Most tags has a closing tag. After the main content, you add this tag at the end.
Line - 7: </html>
Like <body>, <html> has a closing tag. </html> goes at the very end of the file.

2 - <head></head>
Remember I said that not everything you can see in the browser. Some of the stuff you don't see is in the <head></head> tags
HTML:
<head>
<title>My Webpage</title>
<style type="text/css">
...
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Ok, this is what it means

Line - 1: <head>
This is the begining tag for all the information about the page.
Line - 2: <title>My Webpage</title>
This is the name of the webpage.You will see it on the top of the browser (just before you see the name of the program)
Line - 3: <style type="text/css">
This is the starting tag for putting CSS information.
Line - 4: ...
This is where was put the CSS of the page. we will get to CSS later.
Line - 5: </style>
Closing the CSS file
Line - 6: <link rel="stylesheet" type="text/css" href="style.css" />
You could but all the CSS stuff in a seperate files. This is great for putting the same CSS code on multible places, since you only have to edit the CSS file instead of all your files.
Line - 7: </head>
Closing <head>

3 - Paragraphs
Tryout this could
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
Line number one
Line number two
</body>
</html>
if you tried it out, then you know the problem. but if you haven't, I guess I could fill you in. The problem is that "Line number one" and "Line number two" are on the same line. This is because HTML doesn't care if text are on seperate line. it puts it all together. To put them on two lines, you need to use <p></p>
HTML:
<p>Line number one</p>
<p>Line number two</p>
<p> stands for Paragraphs. There is a double space between each paragraph. If you want a single space, you use <br />.
HTML:
Line number one <br />
Line number two
You shouldn't use this because you are going to double space between paragraphs anyways. You may notice that <br /> has /inside it. This is because it combine both opening and close tags in one, since you are going to put anything inside it. It doesn't make since if you could.
4 - Headings
Headings are what they sound like. It's very simple. You just add one of the following tags

HTML:

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

<h1> is the biggest heading, and <h6> is the smallest. You should only use <h1> once per page. How ever, you could use <h2>-<h6> as may times you like. You should use the tags in order. Such as sub headings within sub headings, etc.
HTML:
<h1>Main Heading</h1>
<h2>Topic 1</h2>
<h3>subheading 1.0</h3>
<h3>subheading 1.1</h3>
<h3>subheading 1.2</h3>
<h2>Topic 2</h2>
<h3>subheading 2.0</h3>
<h3>subheading 2.1</h3>
<h3>subheading 2.2</h3>
<h2>Topic 3</h2>
<h3>subheading 3.0</h3>
<h3>subheading 3.1</h3>
<h3>subheading 3.2</h3>
5 - Linking
There are two types of links. I don't know the proper names for them, but I will use the term "Internal Links" and "External Links"

External Links
External Links are links to any other page then the current page your on. The link could be within your website, or any other webpage throughout the internet. here is a example of a link:

HTML:

<a href="www.webdesignforums.net">Web Design Forums</a>

you start a link by typing <a href="">. In the quotes, you type the website. If you are linking to a page within you website, you don't have to type the whole url. In the quotes, you just put in name of the webpage, as long as the webpage is within the same folder

HTML:

<a href="news.html">News</a>

If your webpage is in a subfolder, then you type the directory with the webpage.

HTML:

<a href="forums/index.html>Forums</a>

after <a href="">, you types the words that the user will see as the link. What do I mean? I mean that the users won't see the url that you typed out. What they see is the words that are between the tags.

HTML:

<a href="www.webdesignforums.net"> Web Design Forums </a>

Line - 1: <a href="www.webdesignforums.net">
This is where the link leads to
Line - 2: Web Design Forums
This is what the users will see as the link
Line - 3: </a>
Closing the link

bfsog · Jan 17, 2007

Add quotes around the whole filename in notepad? Umm..

Furthermore, you have to change the file type from Text File to All Files or it will come out as filename.htm.txt

Kayo · Jan 17, 2007

no. that won't happen. In notepad, if you go to "Save As" and type out the name of the file with ".html" at the end, then it would save as a text files
Code:
name you entered
index.html
Output name
index.html.txt
But it you add quotes around the whole name, then it would save as a html file
Code:
name you entered
"index.html"
Output name
index.html
I use to use this all the time, so I know it works. You don't have to switched to all types. I going to edit it so its more clear.

bfsog · Jan 17, 2007

Hm, cheers, never knew that.

cmsi · Jul 30, 2008

File Sharer,

The tutorial was indeed helpful especially for beginners. I would say that HTML and PHP is enough for a basic website. You may want to include some Flash animations, javascript and CSS as well. There are a lot of places in the internet that offer help.

Eazzy · Aug 13, 2008

It is help for beginers who study HTML

nitin · Jul 6, 2009

Good effort; really it would be very use full for the beginners.

Dorky · Jul 6, 2009

idk about the javascript guys. i would do some google indexing homework before going wild with the javascript. css is for sure a good idea. and please keep in mind that flash is for interactive design, not just eye candy. you dont need a sledge hammer for a thumb tac.

toddalan · Sep 17, 2009

Indeed it will!

andr104 · Sep 25, 2009

I appreciate these basic but necessary tips! I will obligatory recommend this info to my younger brother - he has just begun to study html. I'm sure it will be useful for his practice

prakask · Dec 30, 2009

Well i appreciate your effort.It is better for people to do practical application as it is of no use just reading.

David Biggs · Apr 9, 2012

wow very useful and evergreen information, Cheers, Kayo! I'd like to share my laziness that i usually copy and paste from flybug add-on hehe. anyway, knowing coding is basic and necessary though.

Kayo · Apr 27, 2012

I almost forgot that I wrote this article. It's 5 years old now. At least all this information remains useful.

Log in or Sign up

Learning HTML

Kayo Active Member

WDF Go Premium, Drop Ads

bfsog Coder

Kayo Active Member

bfsog Coder

cmsi New Member

Eazzy New Member

nitin New Member

Dorky Freelance

toddalan New Member

andr104 New Member

prakask Account Closed

David Biggs New Member

Kayo Active Member

Share This Page