You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 GUIDE: HTML for beginners on Sat Feb 19, 2011 9:38 pm

Rouge

avatar
Achiever
Loading
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-


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>
so you are typing in the correct place.

A title tag is just what you would expect,
Code:
<title>,</title>
all you have to do is type that inside of the head tags.

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>
is how you add normal text to your page. This tag should be placed in the body tag.

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>
would appear as:
[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)

2 Re: GUIDE: HTML for beginners on Fri Feb 25, 2011 12:17 am

Rouge

avatar
Achiever
Loading
Has no one even read it?

3 Re: GUIDE: HTML for beginners on Fri Feb 25, 2011 12:33 am

Thomas

avatar
Admin
Loading
I have. It's pretty good basic stuff


___________________________________________

Thomas • Forum Owner - Administrator • Support by PM - Also use the forums please.

4 Re: GUIDE: HTML for beginners on Fri Feb 25, 2011 12:34 am

des

avatar
Achiever
Loading
Ever seen mine? [You must be registered and logged in to see this link.].

5 Re: GUIDE: HTML for beginners on Fri Feb 25, 2011 3:27 am

Nova

avatar
Member
Loading
Desu wrote:Ever seen mine? [You must be registered and logged in to see this link.].

Yours was full of errors.

This looks good, still reading, you forgot to go into Doctype's though.

6 Re: GUIDE: HTML for beginners on Fri Feb 25, 2011 4:42 am

OwenWilson

avatar
Master
Loading
I learned HTML from Neopets.
You can't go wrong with Neopets, unless you forget to feed your Peophan!!!!!
Razz
This is a good guide, though.
10/10 stars from Owen.

7 Re: GUIDE: HTML for beginners on Sun Feb 27, 2011 1:22 pm

Rouge

avatar
Achiever
Loading
Desu wrote:Ever seen mine? [You must be registered and logged in to see this link.].
Copyer.

8 Re: GUIDE: HTML for beginners on Tue Mar 01, 2011 11:54 am

Rouge

avatar
Achiever
Loading
[You must be registered and logged in to see this link.] wrote:
Desu wrote:Ever seen mine? [You must be registered and logged in to see this link.].

Yours was full of errors.

This looks good, still reading, you forgot to go into Doctype's though.
You don't really need to for this basic stuff.

9 Re: GUIDE: HTML for beginners on Wed Mar 02, 2011 11:41 pm

RepBot1

avatar
Fresh Meat
Loading
Rawr wrote:
[You must be registered and logged in to see this link.] wrote:
Desu wrote:Ever seen mine? [You must be registered and logged in to see this link.].

Yours was full of errors.

This looks good, still reading, you forgot to go into Doctype's though.
You don't really need to for this basic stuff.

Doctypes are 'basic stuff'.

Just sayin'

10 Re: GUIDE: HTML for beginners on Sat Dec 17, 2011 8:22 pm

Nick

avatar
Member
Loading
I've read it. Pretty good one.

11 Re: GUIDE: HTML for beginners on Sat Dec 17, 2011 8:23 pm

Thomas

avatar
Admin
Loading
Oh yeah I forgot all about this. Rouge needs to finish it still lol.


___________________________________________

Thomas • Forum Owner - Administrator • Support by PM - Also use the forums please.

12 Re: GUIDE: HTML for beginners on Sat Dec 17, 2011 8:28 pm

Nick

avatar
Member
Loading
Lol, it's pretty good. It'll be even better when he finishes.

Sponsored content


Loading

View previous topic View next topic Back to top  Message [Page 1 of 1]

Related topics

Permissions in this forum:
You cannot reply to topics in this forum