Tutorial Related Links
If you wish to view a full list of all the tutorials that have been posted by Tony Bob Design
or wish to browse our arhives, click on the links above.
Categories
If you wish to browse our tutorials by category, navigate with the links above.
Tutorials - HTML - Basic HTML
Posted by:Tony Bob on Oct 04 2006
HTML stands for Hyper Text Markup Language. Every single person who wish to make webpage should know about it. To get started, Open your Notepad or any other Text Editor.
Starting Point
Always remember that, a webpage always starts with,
<head>
<title>Your website title goes here</title>
</head>
<body>
and ends with,
</html>
The Body Tag
You can do a lots of thing with the BODY tag. You can add backgroung color to it. Suppose you want to use black as your background color, you will have to insert the code below.
#000000 stands for black. It's a hex color. You also can insert an image in the background of your site.
There are also others things you can do with the BODY tag. Such as you can tell it what should be the link color, active link color, visited link color, etc. This is how you do it:
vlink="#FF0000" background="image.gif">
alink = active link
vlink = visited link
The Text
When you put some text in your webpage, it's usually Times New Roman, 12pt size, and black font. But you can change it. To change it, your will need use the FONT tag. The font tag start with <font> and ends with </font>. Assume you want to use the font TIMES, red color, size 14:
To make the text bold:
<b>I am bold!</b>
To make it italic
<i>I am italic!</i>
To make it underline
<u>I am underline!</u>
To make it strike
<s>I am strike!</s>
The Images
A site without any image looks really bad. So, you might thinking about inserting images in your webpages. Inserting an image isn't hard at all. All you do is use the IMG tag. This is how it works,
You also can mention the height and width of the image. As a matter of fact, you always should state the height and width of an image because if you don't, it will take more time to load the image since the brower doesn't know what's the exact size of the image..
Linking
*a stands for anchor and href stands for hypertext reference. But you don't have to remember it.
Okay, now you know how to link a page. But want it to open in a new window of your browser. It's easy, you just set the target of the window, which goes like this.
Which will look like this:
Click here to go to Tony Bob Deisgn
*_blank is the target for the link and it opens in a new window.
What about if I want to add a ScreenTip to a link? Well, you ask and here how it goes.
And there you have it, you have just learned the basics of creating a basic web site with html.
Starting Point
Step 1
Always remember that, a webpage always starts with,
Code
<html><head>
<title>Your website title goes here</title>
</head>
<body>
and ends with,
Code
</body></html>
The Body Tag
Step 2
You can do a lots of thing with the BODY tag. You can add backgroung color to it. Suppose you want to use black as your background color, you will have to insert the code below.
Code
<body bgcolor="#000000">#000000 stands for black. It's a hex color. You also can insert an image in the background of your site.
Code
<body background="background.gif">There are also others things you can do with the BODY tag. Such as you can tell it what should be the link color, active link color, visited link color, etc. This is how you do it:
Code
<body bgcolor="#000000" text="#FF0000" link="#FF0000 alink="#FF0000"vlink="#FF0000" background="image.gif">
alink = active link
vlink = visited link
The Text
Step 3
When you put some text in your webpage, it's usually Times New Roman, 12pt size, and black font. But you can change it. To change it, your will need use the FONT tag. The font tag start with <font> and ends with </font>. Assume you want to use the font TIMES, red color, size 14:
Code
<font face="TIMES" size="14" color="#FF0000">Your text goes here</font>To make the text bold:
<b>I am bold!</b>
To make it italic
<i>I am italic!</i>
To make it underline
<u>I am underline!</u>
To make it strike
<s>
The Images
Step 4
A site without any image looks really bad. So, you might thinking about inserting images in your webpages. Inserting an image isn't hard at all. All you do is use the IMG tag. This is how it works,
Code
<img src="picture.gif" border="0" height="50" width="100">You also can mention the height and width of the image. As a matter of fact, you always should state the height and width of an image because if you don't, it will take more time to load the image since the brower doesn't know what's the exact size of the image..
Linking
Step 5
Code
<a href=me.html>Go to another Page</a>*a stands for anchor and href stands for hypertext reference. But you don't have to remember it.
Okay, now you know how to link a page. But want it to open in a new window of your browser. It's easy, you just set the target of the window, which goes like this.
Code
<a href="http://www.tonybobdesign.com" target="_blank">Click here to go to Tony Bob Deisgn</a>Which will look like this:
Click here to go to Tony Bob Deisgn
*_blank is the target for the link and it opens in a new window.
What about if I want to add a ScreenTip to a link? Well, you ask and here how it goes.
Code
<a href="http://www.tonybobdesign.com" title="This is the ScreenTip for this link">Mouse over me to see the ScreenTip.</a>And there you have it, you have just learned the basics of creating a basic web site with html.
Rate This Tutorial
Comments
Add A comment