Kayo
January 16 '07, 11:11 PM
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. :D
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++ (http://notepad-plus.sourceforge.net/uk/site.htm) for windows users. I searchs a program for mac and jEdit (http://www.jedit.org/) 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
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
name you entered
"index.html"
Output name
index.html 3 - Links
Text editors
Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)
jEdit (http://www.jedit.org/)
Browsers
Firefox (http://getfirefox.com)
Opera (http://www.opera.com/)
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
<!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
<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
<!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>
<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 />.
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
<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.
<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:
<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
<a href="news.html">News</a>
If your webpage is in a subfolder, then you type the directory with the webpage.
<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.
<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
I also love comments. :D
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++ (http://notepad-plus.sourceforge.net/uk/site.htm) for windows users. I searchs a program for mac and jEdit (http://www.jedit.org/) 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
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
name you entered
"index.html"
Output name
index.html 3 - Links
Text editors
Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)
jEdit (http://www.jedit.org/)
Browsers
Firefox (http://getfirefox.com)
Opera (http://www.opera.com/)
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
<!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
<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
<!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>
<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 />.
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
<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.
<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:
<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
<a href="news.html">News</a>
If your webpage is in a subfolder, then you type the directory with the webpage.
<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.
<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