Html By Mike
Where shall I begin.. Html is a language, used to make websites. It is the Qbasic of the online language world. It is a very simple language to learn, and yet it's still very powerful. Html is the language one should start programming webpages with, and maybe later learn other online languages such as: Javascript, Java, Perl, or Flash. Maybe my tutorial will help you to understand html, and you too will be able to make webpages with ease.
The Basics
First thing's first. You need to know what tools are required for programming in html. You need a text editor, such as notepad. This is required for typing your html in. Next, you'll need webspace. You may want to get your own domain name, which would be like www.mysite.com, or you could get free web hosting. Usually the name of your site would be on an extention like www.freeprovider.com/yoursite or www.freeprovider.com/yoursitetopic/yoursite.html if you get a free webspace provider. Some free webspace providers are as followed: Angelfire, Geocities, and there are many at The Free Site. Just make sure that your webspace provider has an advanced editor. (That's where you'll copy and paste your html to.)If you are just starting out on your website creating career, or just doing it for fun, I would suggest choosing a free provider; but if you want to go professional, or have loads of money to throw around, get a domain name. They're easier to remember; and, therefore more people will go to your site. The only other tools you'll need for making webpages are probably a topic, a good igmagination, and a little time.
Back To Top
Your first Simple Page
For this program to work, copy and paste it into your notepad, if you want to save it, then copy and paste it directly into your site provider's html editor. If you don't want to save it, and just want to see what it is, just copy and paste it onto your site provider's html editor. Also, there is a feature that will be very helpful, if you're unable to get online all the time. If you save a document from notepad with the extention .html after it, and you'll be able to see the completed site on your computer, without you having to be on the internet. Just save it with the .html extention, open either My Computer or Windows Explorer, and click on it. A page should appear that would look just like it was on the internet. Its a cool feature my friend showed me, he was very suprised I didn't know it, because I was the one who got him interested in html. Anyways, here's the program I want you to copy and paste.
<html>
<title>My First Page</title>
<body> Hi! This is my first page! </body>
</html>
Well, here's the site. My First Page
Boring wasn't it? Well, thats a basic page. It has a title and some text. Everything below the line was extra. The title was between the <title> </title> tags. The text was between the <body> </body> tags. Well, in the course of this tutorial you'll learn how to make pages that are way better than that. You'll learn how to do colour, links, tables, images, and more.
Back To Top
Adding Text
A very simple thing to do, and yet, a very important thing is adding text to your page. To add text to your page you must use the tags: <p> and </p>. You use those tags between the <body> </body> tags. Check out this page, My Second Page
<html>
<title>My Second Page</title>
<body> <p>Check it out! I wrote some text!</p> </body>
</html>
Well, wasn't much but it's a start. If you have large portions of text and want to make spaces in the text, or just want a line to end so you can make a new one use the <br> tag. (The more <br> tags you put the more space will be between the text.) These will make a page break for you. Here, try this one, My Third Page
<html>
<title>My Third Page</title>
<body>
<p>Check it out!<br><br><br>
I wrote some text!</p>
</body>
</html>
Lets see, I'll also show you how to make lines in the text. Making a line can help you divide different subjects in your page, or just make it look cool. As you can see, I use lines on my site. To do a line you use these tags: <hr> and </hr>. Here's an example of a line. My Fourth Page
<html>
<title>My Fourth Page</title>
<body>
<p>Check it out! <hr></hr>
Thats a line!</p>
</body>
</html>
One last feature that deals with text on webpages is making bold, italics, and underlined text. Also, aligning the text is a good thing to do. To make a portion of text bold type it inbetween the tags: <b> and </b>. A sentence you want in bold would be typed in a text box like this..
<p> Look its some <b> bold text. </b> It went regular again!</p>
It would look like this..
Look its some bold text. It went regular again!
Back To Top
Colour
Colour plays a very important role in making webpages. If you didn't set the color for your pages, they'd just be boring old black and white. For the colours of your text and links you have to add this tag after the <body> tag. Its like this:
<body bgcolor=color link=color vlink=color alink=color text=color>
The bgcolor is the background color, link is your links, vlink is visited links, alink is active link, and the text is your text.. The way to change the type of your font, and size is with the tag..
<basefont="Font Name" size="size">.
You aslo put the font property tag after the <head> tag. The colours available without going to too much trouble are as followed: Aqua Blue Fucsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow. One colour I was unable to show was black, because my background is black. An example of colours on a page is here, My Fifth Page
<html>
<title>
My Fifth Page
</title>
<head>
<body bgcolor=black link=blue vlink=red alink=fuchia text=red>
<basefont="Times New Roman" size="10">
<p>Testing the colour of my text. Also, play around with the link to test it</p>
<a href="http://www.freecoolsites.com/wallstreet/danhtml">My Rival's Site</a>
</head>
</html>
Also, there is a way to change the colour of just a portion of your text it is the tag
<fontface="your font" size="size" color="color">Text goes here</font>.
An example of that tag would be like this.
Back To Top
Links
Links are also a very important part of any website, because without links there would be only one page. Links are like the transportation systems of the internet. Without a link on your page, it'd be like boating without a paddle. Links are very simple to make, too. Here's an example of a link,
<a href="http://www.yoursitename.com/">The name you want people to see</a>
To add a link to a site, just put it between the <body> and </body> tags. Lets plug in a site name to that link. We'll use Geocities, it'd be like this
<http://www.geocities.com/>Geocities</a>
It should take you to here..Geocities
Also, there is a cool thing you can do with images called hyperlinks. When you click on an image, it takes you to a site. Its like the picture is a link. I'll teach you that when you learn about pictures.
Back To Top
Lists
Lists are important if you want to...list something! They're easy to make too. There are two different kinds of lists, unordered lists and ordered lists. Use the tags
<ol> and </ol>
for and ordered list. Use the tags,
<ul> and </ul>
for an unordered list. An example of an ordered list is as followed..
<ol>
<li>First Item
<li>Second Item
<li>Third Item
</ol>
It would look like this on a webpage..
- First Item
- Second Item
- Third Item
An unordered list is like this..
<ul>
<li>First Item
<li>Second Item
<li>Third Item
</ul>
It'd look like this on a webpage..
- First Item
- Second Item
- Third Item
The thing about lists is that they aren't limited to text, you can put anything in a list, such as: text, links, tables, and images.
Back To Top
Images
Images are also an important part of webpages. Without images its just a bunch of boring old words. Don't get me wrong, I believe reading is a fundemintal, but pictures are great! To display an image on your webpage you must use a tag like this..
<img src="imagename.ext" align="whereveryouwantitaligned">
The image name and extention it must be correct for it to work. Usually extentions of images are either .jpg or .gif. To get an image on your page you first need to upload it to your online directory, then type the name in. The alignment is just where you want the image to be on the page it can be either align="right" or align="left". To center an image you add the tags <center> and </center> to the outside of your image code. So, if I wanted to put a picture on my site that was named 'spaceship1.gif' and aligned in the center. I'd use the code..
<center><img src="spaceship1.gif"></center>
It should look like this
If you wanted to make it align to the right you'd type this in..
<img src="spaceship1.gif" align=right>
And it'd look like this..
Thats how to make a picture appear on your site. Next thing you'll learn is how to make that picture into a link. I call them hyperlink images. To do that you use the code..
<a href="address you want the image to go to"><img src="filename.ext></a>
So, if I wanted to make a hpyerlink to my rival's site it'd be like this..
<a href="http://www.geocities.com/"><img src="spaceship2.gif"></a>
And if you put it in a site it'd look something like this..
The thing about hyperlink images is that, I think they do not work will all browsers, but when they do, it sure adds a cool feature to your site.
Back To Top
Tables
Tables..now here's a subject that is very useful for making good webpages. You can put text, links, pictures, and almost everything else in a table. A table starts with the <table> tag and ends with the </table> tag. Tables consist of rows and cells. Columns are top to bottom and rows are left to right. Columns are defined with the <tr> tag, and rows are defined with the <td> tag. Also, tables can be made with borders. This is a useful feature when you want to see what a table looks like. I recommend using it when you're working with tables on a page, just to see if your cells are in the proper place. For a table to have borders, use <table border> instead of just < table> when you start your table. Now, for a simple table. It'll have two columns, two rows, and a border. Here's the code.
<table border>
<tr>
<td>top left</td>
<td>top right</td>
</tr>
<tr>
<td>bottom left</td>
<td>bottom right</td>
</tr>
</table>
It should look like this..
| top left | top right |
| bottom left | bottom right |
To put a picture in your table just add the code for a picture inside the <td> tag. You can also put links inside tables, too. For a link just add the code for a link between the <td> tag. Here's an example for pictures, links, and text inside a table.
<table border>
<tr>
<td><img src="spaceship1.gif"></td>
<td>Text</td>
</tr>
<tr>
<td><a href="http://www.webcrawler.com">Webcrawler Web Site</a></td>
<td><img src="spaceship2.gif"></td>
</tr>
</table>
It should look something like this.
|
Text |
| Webcrawler Web Site | |
Another feature with tables is cells that span multiple columns or rows. To do this, you add the tag rowspan=whatever number of rows you want to span, then skip the cells that the large cell overlays. Sound confusing? Well here's an example of an overlayed row.
<table border>
<tr>
<td rowspan=2>left</td>
<td>top right</td>
</tr>
<tr>
<td>bottom right</td>
</tr>
</table>
You'll notice that we didn't define the bottom left cell, because we didn't have to. And the table should look something like this..
| left | top right |
| bottom right |
The way to span columns is with the tag colspan=whatever number of columns you want to span. Here's an example.
<table border>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td>bottom left</td>
<td>bottom right</td>
</tr>
</table>
It should look something like this..
| top | |
| bottom left | bottom right |
Sometimes, you'll want to align the text, or picture, or whatever is in a cell in your table to do this you use the align and valign tags inside the <tr> tag.
When you use align, it can be left, right, or center. (Left is what it is set as default.)
Valign can either be top, bottom, middle, or baseline. Baseline is aligned to the baseline of the text.
Here's an example of alignment.
<table border>
<tr>
<td align=right>Right</td>
<td align=left>Left</td>
</tr>
<tr>
<td>Look at the top cells!</td>
<td>Look at the top cells!</td>
</tr>
</table>
It should look like this..
| Right | Left |
| Look at the top cells! | Look at the top cells! |
The last thing I'm going to teach about tables is how to set them up so the cells are different lengths. You can either specify the number of pixels you want a cell to be, or how much a percent of the page you want it to be, just make sure you add your percents up to 100. To make the width of your cells different lengths you use width="whatever number of pixels" beside your <td> tags. To use percentages instead of putting a number of pixels by width, you just type in a percentage, like this. <td width=50%> Well here's an example of a table using widths specified by pixels.
<table border>
<tr>
<td width="200">Longer</td>
<td width="100">Shorter</td>
</tr>
<tr>
<td width="200">Longer</td>
<td width="100">Shorter</td>
</tr>
</table>
It should look like this.
| Longer | Shorter |
| Longer | Shorter |
That's all I can teach you about tables. They're very important in making webpages, so use them well!
Back To Top
In Conclusion
I hope my site has helped you to learn html. With html you'll have the basic knowledge of webpage building. It is a foundation for your career, or just fun, webpage creation days. With the knowledge of html you can learn more advanced internet languages like javascript, java, and flash. If you have any questions or comments email me at, [email protected]
Back To Top
Talk to other visitors on the Site!
Check out the Forums to see what other visitors of Mike's Html Page have to say. Maybe if you have a question that you need answered you'll find it there.
