HTML Tutorial - Detailed Basics - Trik Forum

~~Eric E.~~ · **HTML Tutorial - Detailed Basics -** 11-03-2007, 11:49 PM

Hey, It's Premier Grand Master Eric and this is a thread for beginners. Hope you enjoy it. Here it is:

HTML for beginners
Hyper Text Markup Language

This tutorial is for those who would like to know the basics of coding websites using the HTML language. HTML is one of the simplest programming languages around and can be very powerful when properly applied. It gives you the ability to create a website in a simple text editor such as notepad. Let’s get started…

Tags

Tags are what you use throughout your code and may look like this: <head> It is easy to distinguish a tag, every tag has <> surrounding it. The example above is a ‘head’ tag which represents the header.

Syntax

The syntax (structure of the code) is simple; it may look something like this:
Code:

<HTML>
<title>Title</title>
<head>Header</head>
<body>Information</body>
</HTML>

You’ll notice some of the tags have a ‘/’ before them. This is how you close a tag. Whenever you open a tag, in most cases you must close it so the computer knows where it ends.

Tags: <HTML>

The <HTML> tag is the most important tag in your code; it tells the computer you are creating a HTML (website) document. It is required at the very top of your script and you must end the tag after your code which will signify the end of your website.

Tags: <title>

The <title> tag determines what the title of your website will be and the selected title will appear at the top of your browser. This isn’t required but is recommended. Make sure you remember to close the tag.

Tags: <head>

As mentioned earlier, the <head> tag is the header of the website. You can enter your main title here and change the font’s size and color as well which I’ll show you how to do later on. Get in the habit of closing your tags. This is important for your website to function properly.

Tags: <body>

The <body> tag is the main part of your website. It holds the rest of your information, graphics, multimedia and whatever else you wish to put in it. Within the body tag you can determine the background color, the website default font and much else. Later I’ll show you how to set background color.

Other tags

Other tags: <font>

Here is an example of the <font> tag in use:
Code:

<HTML>
<title> My Website </title>
<head> My Website </head>
<body>
<font size = “3” color = “blue” face = “arial”>
This is the body
</body>
</HTML>

You can see that within the tag <font> you can insert extra information that isn’t required but will give your website a more unique look. You can use size, color and face to determine the font you want. Size and color are obvious with what they do and you might have worked out that face determines the font you use. Take note that you have to spell color the American way, color.

Other Tags: <br>

The <br> tag stands for break and enters down a line. In HTML you can’t set out your text in your text editor like this:

Code:

<body>
This is my website.
I created this because I enjoy websites.

I wish I had a:

• Dog
• Cat
• Horse
</body>

This will not work; you will have to add in the appropriate code like this:
Code:

<body>
This is my website.
<br>
I created this because I enjoy websites.
<br>
<br>
I wish I had a:
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Horse</li>
</ul>
</body>

Ignore the <li> and <ul> tags, they are for lists, focus on the <br> tags. These do the same job as your Enter key.

Other tags: <p>

The <p> tag is not needed but should be used when typing large amounts of text. The <p> tag represents a new paragraph. When you finish the paragraph make sure you end the tag. Although it may not need to be closed, it is recommended so your code is neater and easier to follow.

Other tags: <img>

The <img> tag is used to put images into your website. You must type in something like this:
Code:

<img src = “C:/Documents and Settings/My Documents/image.jpg” alt = “Image”>

Like the font, this tag has extra information added. The src is the source of the image or the image path. Here you put where the image is. Also there is alt which represents Alternate Text. It is optional and sets the alternate text. So when the user holds their mouse over your image, the text you entered in the alt section of the code will be displayed in a little yellow box.

Other tags: <a href>

This one is a bit harder to remember but is used very regularly. It is what is used to define hyperlinks, eg.
Code:

<a href = “C:/Documents and Settings/My Documents/index.HTML>Home</a>

This tag will display the word “Home” and when you click it, it will link to the page “index.HTML” if it’s found at that location.

Other tags: <h1>

The <h1>, <h2>, <h3> tags etc are used for heading sizes. Heading 1 is the largest, then heading 2, heading 3 etc. They are useful when wanting same sized headings and sub-headings without finding what size you’re using for other headings.

Tables

Tables are very important when creating websites. The easiest way to create a good website with code only is to set it out in tables so your layout stays structured and doesn’t shift as you add different images and text. To start the table you use the <table> tag. Then you must define a row using <tr> and then finally a cell using <td>.
Here’s an example of a table:
Code:

<table>
<tr>
<td> Cell 1 </td>
</tr>
</table>

It can take a bit of getting used to but the table tags will get easier to remember as you work with them more. You can also add extra information to tables. Here is an example of modifying the height and width of a table:
Code:

<table height = “500” width = “100%”>
<tr>
<td>Cell 1</td>
</tr>
</table>

The height and width determine how many pixels big the table is. You’ll notice the width is 100%. This simply means the width is the full length of the page, or 100%.

Final Words

When you want to preview your website, make sure you click File | Save As and call give it the extension name .HTML, eg.

‘Index.HTML’

This will make it an internet file and will automatically open it in your default browser. If you just save it as a .txt file it will open in notepad. To keep editing your website once saved as .HTML, simply right-click and click open with… notepad.

That covers the basics of HTML. I hope this tutorial has helped you understand a bit more about how websites are coded and how you can make your own website with nothing but notepad.

Sincerely,
Premier Grand Master Eric

DEADLY SOLDIER · 11-05-2007, 03:18 PM

This guide is accurate, and works for .html, .htm, and .php

Thanks Premier