Home1
GUIDE: HTML for beginners Sat Feb 19, 2011 9:38 pm
Rouge
Achiever
This guide, written by Rawr, will explain the basics of HTML.
The first thing you should know about HTML is that it stands for Hyper Text Markup Language. It is a type of code that is used to create simple web pages.
(credit to maker of picture, wasn't me)
Starting out-
Creating a HTML document (page) is actually very simple, the first thing you want to do is make a new folder on your computer and name it your websites name. This will be were the "guts" of your website will be (the web pages, images, etc.)
Now, open up Notepad (or NVU if you have it [You must be registered and logged in to see this link.] and click on file, save as and then find the folder we made at the beginning and for the file name get rid of "*.txt" and type "index.html" and make sure the "Save as type" is not "Text documents" but "All Files" and select save. This created your document, and while working on the web page all you have to do is press CTRL + S on your keyboard to save it
Learning the language-
The basics tags in HTML are:
So, before I confuse you too much - let's look at a example. (you don't need to type it just yet.)
Above is a example of what our web page would look like so far w/ what you have been taught. If you are having trouble w/ where the tags go look on that example. Go ahead and copy and paste what is below into your notepad document.
Now, we get to learn a little more in depth of how to put more stuff inside of the head tag and the body tag.
Creating your website's title-
To create the title for your website (the name on the top of ones internet browser) you will need to work inside your head tag. Make sure you are selected between the
A title tag is just what you would expect,
Your page should look like this now:
Whatever you want to be the title is what you type inside of the title tags.
For example: (your title can be w/e you choose, doesn't have to be same as mine)
Now, press CTRL + S on your keyboard. Your document is now saved. Open up the folder you made and double click on your document, if you did this correctly it should open up a web page. If the title is whatever you put it as, then you have done it correctly and can move on.
Adding text and pictures to your page-
There are many different ways of adding text onto your web page. You can add paragraphs/normal text by using the p tag.
You guessed it,
Your HTML document should look similar to this.
A different text tag is this:
Heading 1 (h1) is the biggest heading tag and Heading 6 (h6) is the smallest heading tag.
You use these "h tags" as headers, or for different sized text.
Adding links to your web page is still basic, but is a little more advance tag.
[You must be registered and logged in to see this link.]
(the link tags would also be place in the body)
The same rules apply for images, be sure they are placed inside of the body.
Upload your images to a hosting site, like imageshack.us, and then place the link inside the tags.
I am working on this guide, please be patient.
The first thing you should know about HTML is that it stands for Hyper Text Markup Language. It is a type of code that is used to create simple web pages.
(credit to maker of picture, wasn't me)
Starting out-
Creating a HTML document (page) is actually very simple, the first thing you want to do is make a new folder on your computer and name it your websites name. This will be were the "guts" of your website will be (the web pages, images, etc.)
Now, open up Notepad (or NVU if you have it [You must be registered and logged in to see this link.] and click on file, save as and then find the folder we made at the beginning and for the file name get rid of "*.txt" and type "index.html" and make sure the "Save as type" is not "Text documents" but "All Files" and select save. This created your document, and while working on the web page all you have to do is press CTRL + S on your keyboard to save it
Learning the language-
- Code:
HTML consists of tags, tags in HTML are like the tags in BB Code ([img]______.com/____.jpg[/img], [img],[/img] are the tags in BB Code, but in HTML tags use < > instead of [ ])
The basics tags in HTML are:
- Code:
<html>,</html> - Goes at the very beginning (<html>) and very end (</html>) of your webpage, tells the computer that HTML is the language being used.
- Code:
<head>,</head> - Used for inserting the web page's title and some more advanced stuff, goes after <html> but before <body> (explained next)
- Code:
<body>,</body> - Contains text, pictures, tables etc., goes after head.
So, before I confuse you too much - let's look at a example. (you don't need to type it just yet.)
- Code:
<html>
<head>
(title tags will be here, explained later)
</head>
<body>
(text, image, etc. tags will be here, explained later)
</body>
</html>
Above is a example of what our web page would look like so far w/ what you have been taught. If you are having trouble w/ where the tags go look on that example. Go ahead and copy and paste what is below into your notepad document.
- Code:
<html>
<head>
</head>
<body>
</body>
</html>
Now, we get to learn a little more in depth of how to put more stuff inside of the head tag and the body tag.
Creating your website's title-
To create the title for your website (the name on the top of ones internet browser) you will need to work inside your head tag. Make sure you are selected between the
- Code:
<head> and </head>
A title tag is just what you would expect,
- Code:
<title>,</title>
Your page should look like this now:
- Code:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Whatever you want to be the title is what you type inside of the title tags.
For example: (your title can be w/e you choose, doesn't have to be same as mine)
- Code:
<html>
<head>
<title>
My first web page! | Home
</title>
</head>
<body>
</body>
</html>
Now, press CTRL + S on your keyboard. Your document is now saved. Open up the folder you made and double click on your document, if you did this correctly it should open up a web page. If the title is whatever you put it as, then you have done it correctly and can move on.
Adding text and pictures to your page-
There are many different ways of adding text onto your web page. You can add paragraphs/normal text by using the p tag.
You guessed it,
- Code:
<p>your text here</p>
- Code:
<html>
<head>
<title>
My first web page! | Home
</title>
</head>
<body>
<p>your text here</p>
</body>
</html>
Your HTML document should look similar to this.
A different text tag is this:
heading 6
heading 5
heading 4
heading 3
(it isn't showing on forums, but it works)heading 2
(it isn't showing on forums, but it works)heading 1
- Code:
<h6>heading 6</h6>
<h5>heading 5</h5>
<h4>heading 4</h4>
<h3>heading 3</h3>
<h2>heading 2</h2>
<h1>heading 1</h1>
Heading 1 (h1) is the biggest heading tag and Heading 6 (h6) is the smallest heading tag.
You use these "h tags" as headers, or for different sized text.
Adding links to your web page is still basic, but is a little more advance tag.
- Code:
<a href="http://www.computalks.com">TEXT</a>
[You must be registered and logged in to see this link.]
(the link tags would also be place in the body)
The same rules apply for images, be sure they are placed inside of the body.
Upload your images to a hosting site, like imageshack.us, and then place the link inside the tags.
- Code:
<img src="http://i74.servimg.com/u/f74/15/54/05/02/img13010.png"/>
- Code:
Template:
<img src="LINK"/>
I am working on this guide, please be patient.
Last edited by Rawr on Sat Feb 19, 2011 10:36 pm; edited 19 times in total (Reason for editing : working on guide)
