Tutorial: HTML Basics
Quick Profile
Information
Posts: 69
Joined: Tue Dec 08, 2009 12:49 am View Full Profile
An old tutorial I made, you can also refer to lewisfroom's tutorial over here:viewtopic.php?f=82&t=830
-------------------------------------------------------------------------------------------
Hi guys, I thought I'd write up a simple HTML tutorial just cause I was bored ^_^
It is not that long since there aren't any huge paragraphs to read, just some simple explanations.
If you find anything wrong please post ^_^
Index - Press CTRl + F - Type in the code to get to a topic
Name #
<html> - 1.0
<head> - 1.1
<title> - 1.2
Quick Review - 1.3
<body> - 1.4
Headers & paragraphs - 1.5
Emphasis - 1.6
Simple web page - 1.7
Image - 1.8
------------------------------------------------------------------------------------------------------
[1.0]
Ok, HTML stands for Hyper Text Markup Language. It is not a programming language but a markup language. It uses tags to create a webpage.
To keep it simple, you start a web page by using these tags:
Everything after this will be nested inside these tags. Think of it as a container for all the good stuff ^_^
Almost all tags in HTML have a starting tag <> and a closing tag </>
There are exceptions, and I will talk about them later on.
[1.1]
The next tags I will talk about are the HEAD tags:
If you are creating a simple website, most of the time you'd be only using these tags to put your TITLE in.
The TITLE tag:
When you get a bit more complicated, you might use the HEAD tag to put your CSS inside or your JavaScript inside, I won't be discussing them in this tutorial however.
[1.3]
To make sure you aren't lost, I'll review what I talked about.
You start a document by
[1.4]
The next tag is the important tag.
This tag comes after the HEAD tag.
Ok, so we have learned the basic, no let's get some text on the screen?
These next tags go inside the BODY tag. Most of your tags will be inside the BODY tag.
[1.5]
Lets start from the top. When you write a report for school/work you first, write the heading, then you write your paragraphs, then you bold italics and underline your text, then you add some images to make it look pretty.
So, that is the order I will tell you about the tags.
To write a header on a web page, you use:
These are the tags for writing headers:
Now, heading is done, we will write our main text
Not a lot to talk about this tag. Its simple, any text inside this would be written in a paragraph like structure.
[1.6]
Now, to emphasis your points in your paragraph you'd use bold,italics, and underline. To that using tags is quite simple.
Bold
Eg.
I am bold and underlined
However this could also work
[1.7]
Ok here are all the tags together to create a small web page. This is very simple.
Ok now that you have a header, paragraph and some emphasis, let's let to add images.
The tag to add images is:
Inside the “” goes your location of the image and name. If your image is in the same directory as your page, you simply write the name of the image with the extension. Eg
Your page is in c:\MyFolder
And your image is also in the same place, the image is a “.gif”, and is called “picture”
So you write
“alt” is the alternate text, if for some reason the image does not load, the text will be used in it's place.
To use it:
Try using the "img" tag with the basic layout.
Other attributes for the "img" tag:
-------------------------------------------------------------------------------------------
Hi guys, I thought I'd write up a simple HTML tutorial just cause I was bored ^_^
It is not that long since there aren't any huge paragraphs to read, just some simple explanations.
If you find anything wrong please post ^_^
Index - Press CTRl + F - Type in the code to get to a topic
Name #
<html> - 1.0
<head> - 1.1
<title> - 1.2
Quick Review - 1.3
<body> - 1.4
Headers & paragraphs - 1.5
Emphasis - 1.6
Simple web page - 1.7
Image - 1.8
------------------------------------------------------------------------------------------------------
[1.0]
Ok, HTML stands for Hyper Text Markup Language. It is not a programming language but a markup language. It uses tags to create a webpage.
To keep it simple, you start a web page by using these tags:
Code: Select all
These tags tell the browser that this is an HTML document.<html>
</html>Everything after this will be nested inside these tags. Think of it as a container for all the good stuff ^_^
Almost all tags in HTML have a starting tag <> and a closing tag </>
There are exceptions, and I will talk about them later on.
[1.1]
The next tags I will talk about are the HEAD tags:
Code: Select all
[1.2]<head>
</head>If you are creating a simple website, most of the time you'd be only using these tags to put your TITLE in.
The TITLE tag:
Code: Select all
Defines the title of a web page. Any thing between these tags will show up at the very top of the webpage. Eg. You have this site open, if you look at the very top you will see MMORPG Maker. That is the Title of this document.<title> </title>When you get a bit more complicated, you might use the HEAD tag to put your CSS inside or your JavaScript inside, I won't be discussing them in this tutorial however.
[1.3]
To make sure you aren't lost, I'll review what I talked about.
You start a document by
Code: Select all
Inside these are the HEAD tags,
<html>
</html>
Code: Select all
Inside the HEAD tags are the TITLE tags
<html>
<head>
</head>
</html>
Code: Select all
It doesn't matter how you lineup your tags, the web browser will read it all the same. It is good to indent when nesting, its easier to read and understand. The same code above can be written like this<html>
<head>
<title> </title>
</head>
</html>
Code: Select all
And the browser would show you the same thing. But now it looks bad, and harder to understand for us, so we nest them.<html><head><title> </title></head></html>[1.4]
The next tag is the important tag.
Code: Select all
This tag holds pretty much all your text, images, paragraphs and what not.<body>
</body>This tag comes after the HEAD tag.
Code: Select all
So, that is how everything looks in its most basic layout. I like to write
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
<title> </title>on one line because titles are usually that long. You can write however you like.
Ok, so we have learned the basic, no let's get some text on the screen?
These next tags go inside the BODY tag. Most of your tags will be inside the BODY tag.
[1.5]
Lets start from the top. When you write a report for school/work you first, write the heading, then you write your paragraphs, then you bold italics and underline your text, then you add some images to make it look pretty.
So, that is the order I will tell you about the tags.
To write a header on a web page, you use:
Code: Select all
Now, there are variations of these tags. The H1 tag will write the biggest possible header, relatively speaking.<h1> </h1>These are the tags for writing headers:
Code: Select all
In this, H1 is the biggest font size, and H6 is the smallest font size. Simple isn't it? <h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>Now, heading is done, we will write our main text
Code: Select all
This tag is used to write paragraphs on a web page, thus the letter “p”<p>
</p>Not a lot to talk about this tag. Its simple, any text inside this would be written in a paragraph like structure.
[1.6]
Now, to emphasis your points in your paragraph you'd use bold,italics, and underline. To that using tags is quite simple.
Bold
Code: Select all
Italics
<b> </b>Code: Select all
Underline
<i> </i>Code: Select all
Very simple. But to avoid bad habits in the future, try nesting them also.<u> </u>Eg.
Code: Select all
This will print<b>I am bold and <u>underlined</u></b>I am bold and underlined
However this could also work
Code: Select all
See the difference? First one is the good way to write it.<b>I am bold and <u>underlined</b></u>[1.7]
Ok here are all the tags together to create a small web page. This is very simple.
Code: Select all
[1.8]<html>
<head>
<title>My first webpage</title>
</head>
<body>
<h1>Welcome</h1>
<h3>Hope you enjoy your stay</h3>
<p> This is my webpage, I don't really know what to <b>talk</b> about so I will <u><i>simply</i></u> write random stuff</p>
</body>
</html>
Ok now that you have a header, paragraph and some emphasis, let's let to add images.
The tag to add images is:
Code: Select all
See how there is no ending tag for this?<img src=””>Inside the “” goes your location of the image and name. If your image is in the same directory as your page, you simply write the name of the image with the extension. Eg
Your page is in c:\MyFolder
And your image is also in the same place, the image is a “.gif”, and is called “picture”
So you write
Code: Select all
If the image was in C:\ you'd write<img src=”picture.gif”>Code: Select all
An important attribute of the “img” tag is “alt”<img src=”\picture.gif”>“alt” is the alternate text, if for some reason the image does not load, the text will be used in it's place.
To use it:
Code: Select all
Simple enough ^_^<img src”” alt=””>
Try using the "img" tag with the basic layout.
Other attributes for the "img" tag:
Code: Select all
align - top
bottom
middle
left
right
eg.
<img src="" align="top">
width/height - Can be in pixels or percentage
eg.
<img src="" width="100%">
or
<img src="" width"100px">
NOTE: They are not the same.
Quick Profile
Information
Posts: 1564
Joined: Sun Dec 20, 2009 2:12 pm View Full Profile
Wonderfull tutorial ! Well explained, brilliant 
Quick Profile
Information
Posts: 1564
Joined: Sun Dec 20, 2009 2:12 pm View Full Profile
I love the way you have done the little navigate thingy, Nice :P
Quick Profile
Information
Posts: 69
Joined: Tue Dec 08, 2009 12:49 am View Full Profile
Thanks ^_^
Quick Profile
Information
Posts: 5
Joined: Wed Apr 07, 2010 9:18 pm View Full Profile
Very helpful tutorial for beginners wanting to start learn html coding 
Quick Profile
Information
Posts: 445
Joined: Tue Feb 16, 2010 6:24 am View Full Profile
Very nice tutorial
Quick Profile
Information
Posts: 1892
Joined: Wed Dec 16, 2009 9:56 pm View Full Profile
not bad i knew all this but not bad
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that
Quick Profile
Information
Posts: 1610
Joined: Mon Sep 07, 2009 12:25 am View Full Profile
I made a text file to save with code like this, credits from this tutorial, and more. I made a Mini-Site with pure HTML, though it is basic and I am too embarassed to show it :P This is very VERY helpful.
Quick Profile
Information
Posts: 1892
Joined: Wed Dec 16, 2009 9:56 pm View Full Profile
GoodGuy17 wrote:I made a text file to save with code like this, credits from this tutorial, and more. I made a Mini-Site with pure HTML, though it is basic and I am too embarassed to show it :P This is very VERY helpful.don't be embarrassed of progress here is a site i made
stickpiv.co.cc
the game page is screwed up so dont click it if you view it
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that
Copyright Information
Copyright © Codenstuff.com 2020 - 2023