[Guide]Basic HTML Guide

Deurian · March 19, 2009

First of all All credits go to hopzone.net , it's just a c/p

This guide is mainly for Beginers to the Language to just get grasp of it.

This guide is broken up into 6 Sections:

1) Introduction

2) Basic HTML Tags

3) HTML Links

4) HTML Tables

5) HTML Images

6) HTML Background

Firstly HTML stands for Hypertext Markup Language. It is used to create web pages that you see everyday on the Internet. It is a really easy language to understand because of its relationship to english.

1) ****Introduction****

Now all you need to start coding in HTML is "Notepad" or any Third party Tool such as "Macromedia Dreamweaver".

Now open up Notepad and input this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

Hey my name is Ali

</body>

</html>

<--------------- End of Code --------------->

Now to explain all this new stuff to you.

Well the first tag in the document is <html>. This tells the browser you are using that this is a start of a HTML document.

The last tag is </html>. This tells the browser that this is the end of the HTML document. These tags always have to be used in able for the document to be executed.

Now the text between the <head> tag and the </head> tag is header information.

The text between <title> tag and the </title> tag is the title of your document. This is displayed in your browsers title bar at the top.

The text between the <body> tags is the text which is going to be displayed in your browser.

Pretty simple isnt it.

Now all you got to do is save the file as a .html or .htm and open it. It should work and the text you inserted should be displayed.

What about if you want to make your text bold how would you go around it?

Well its pretty straight forward... We will use the bold tags which are <b> and </b>

So the code will look like this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

</body>

</html>

<--------------- End of Code --------------->

All we did is add the bold tags. Everything else is explained above.

Now see if it works.

2) ****Basic HTML Tags****

In this section we will go into some basic Html tags that are commonly used.

Headings:

Headings are shown with tag's <h1> to <h6>. Tag <h1> is the largest heading. The tag <h6> is the smallest heading.

So lets see a real example of it. Use the basic HTML structure code from above and add the heading tags so it would look like this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

</body>

</html>

<--------------- End of Code --------------->

Now check it out. It should have "Hey my name is Ali" from largest to smallest.

Line Breaks:

Line Breaks are used to end a line but you do not want to start a new paragraph. It's tag is <br>. It can be placed anywhere in a HTML document.

Now using the Basic HTML structure in the First lesson lets add the <br> tag to it.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

Hey<br>my<br>name<br>is<br>Ali.

</body>

</html>

<--------------- End of Code --------------->

That is how it can be used. Also you may have noticed "How come there is no closing tag?".. It is because the tag <br> is an empty tag.

Now check it out. It should have each word an a seperate line.

Paragraphs:

Paragraphs are defined with the <p> tag and the </p> tag.

Now using the Basic HTML structure in the First lesson lets add the <p> tag to it.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

</body>

</html>

<--------------- End of Code --------------->

That is how it can be used. Now check it out. It should have each sentance in its own paragraph.

Comments in HTML:

The comment tag is used to insert a comment in the HTML document without it being displayed. A comment is used to explain your code, which can help you edit the code in the future.

Now using the Basic HTML structure in the First lesson lets add the Comment tag to it.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

Hey my name is Ali

</body>

</html>

<--------------- End of Code --------------->

Simple isnt it. Now onto the next lesson.

3) ****HTML Links****

Now the tag <a> defines a anchor. An anchor is used with the href attribute to create an anchor which can point to any image,webpage or resource on the Internet.

The Syntax of creating an anchor is as follows.

<a href="url">Text to be displayed</a>

To explain this to you. The <a> tag is used to create an anchor. The href attribute is used to address the document to link to the target, and the words between the open and close of the anchor tag will be displayed as a Hyperlink.

Now using the Basic HTML structure in the First lesson lets add the <a> tag to it.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<a href="http://www.google.com">Google's'>http://www.google.com">Google's Homepage</a>

</body>

</html>

<--------------- End of Code --------------->

That is how it can be used. Now check it out. It should have the text Google's Hopepage as a Hyperlink and as you click it, it will redirect you to Googles Hopepage.

Now what about if you want the Hyperlink to open in a new page? Simple you would use the same syntax but input "target="_blank". So it would look like this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<a href="http://www.google.com" target="_blank">Google's Homepage</a>

</body>

</html>

<--------------- End of Code --------------->

Now test them both out and change the links to your liking.

4) ****Tables****

Tables are shown with the <table> and </table> tag. A table is divided into rows with the <tr> and </tr> tag, and of course each row is divided into data cells with the <td> and </td> tags. The letters td stand for of course Table data which can be supported as images,text lists paragraphs etc.

Now using the Basic HTML structure in the First lesson lets add the table tags to form a table.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<--------------- End of Code --------------->

Now this table has 2 rows and 4 cells. Each with a word or word's within them. You can edit them to what you like.

Well maybe you want a heading in your table. Its quite simple!! All you got to use is the Heading tag which in a table is defined as <th> and </th> tag. So this is how it should look.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<tr>

<th>First Name</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<--------------- End of Code --------------->

Straight forward isnt it. Now this should have 2 rows and the heading of the First row should be " First Name" and the heading of the second row should be " Last Name "

Now modify and try your own.

5) ****HTML Images****

Now what would be a web page with images??

In HTML images are defined with the <img> Tag. The <img> tag is empty therefore there is no closing

tag. To put an image onthe page you have to use the src attribute. Src Stands for Source.

The Syntax to insert an image is as follows:

Now using the Basic HTML structure in the First lesson lets add an image to the HTML Document.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

Hey my name is Ali

This is an image of my self.

</body>

</html>

<--------------- End of Code --------------->

Now I added some extra code which I will explain now. Simply I have aligned the image to the middle. Now the alt part means alternate text for the image. So say if I cant load the picture I could then see what I am missing which is " Picture of my Self "

Now you give it a try and see if it works.

6) ****HTML Lists****

There are a couple of HTML lists including Unordered Lists, Ordered Lists, Definition Lists.

I will go through the Unordered and Ordered Lists.

Unordered lists is a list of terms. The list of terms are marked with bullets or small black circles.

An Unordered list is defined as the <ul> and </ul> tags. Also <li> and </li> means List item. Thats the tag for placing anything you want in any List.

Heres an example.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

<--------------- End of Code --------------->

An ordered list is also a list of items. The list items are marked with numbers.

Now for a Ordered List we just change the tags <ul> and </ul> to <ol> and </ol>.

So it should look like this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

<body>

<ol>

</ol>

</body>

</html>

<--------------- End of Code --------------->

7) ****HTML Background****

For the Background of a web page you can either use an Image or a Selected Colour.

Now to make the Background your selected colour we will use the <body> tag. Now the browser has 3 ways to interpret your selected colour.

1) Hexadecimal value of Colour

2) A RGB Value

3) A Color Name

I like using the HexaDecimal feature. So we will use that now.

Here is an Example:

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

</body>

</html>

<--------------- End of Code --------------->

That Hex Value sets the background to the Colour Black.

Now to add a background image it would look like this.

<--------------- Start of Code --------------->

<html>

<head>

<title>My First page!!!</title>

</head>

</body>

</html>

<--------------- End of Code --------------->

Credits to hopzone.net again (it was posted by hopzone in hopzone forums)

MrAderson · June 18, 2009

oreo copy paste :D

gj

AcaretA · July 5, 2009

thk i seach this for long time ago ....

[Guide]Basic HTML Guide

Recommended Posts

Deurian

MrAderson

AcaretA

Join the conversation

Posts

Topics

Browse

Activity

Store