Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
HTML Basics
by Michael Aldworth
HTML : The Basics
by Joseph Skidmore
Introduction to the Fundamentals of Dreamweaver
by Vecpix.com
Basic CSS
by Lindsay Coome
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
HTML and CSS  Home HTML and CSS Tutorials HTML Basics
rss

HTML Basics

Author: Havenfx.com More by this author

Added: Jan 17, 2005 Rating:  Average Rating: 3.13 Votes: 84 Position: 6582 of 11901Average Rating: 3.13 Votes: 84 Position: 6582 of 11901Average Rating: 3.13 Votes: 84 Position: 6582 of 11901Average Rating: 3.13 Votes: 84 Position: 6582 of 11901Average Rating: 3.13 Votes: 84 Position: 6582 of 11901 Level: Beginner Software:  DreamweaverGoLiveFrontPage

HTMLHTML (Hyper Text Markup Language) is the most widely used internet language today. It is in all website from the start to the end of the internet.

The basic syntax of html consists of tags. More specificaly, a beginning tag and an ending tag. Here is an example of this concept:

<html>
<head>
<title>HTML Tutorial
</head>
<body bgcolor="black">
<p><font face="Verdana" color="white">Hi, my name is Robert!</font></p><br>
</body>
</html>

Ok, to those of you who have never seen HTML in your lives before, you may be slightly confused. Let's dissect it line by line.

As stated before, html consists of opening and closing tags. Examples of this are '<html>' at the beginning and '</html>' at the end. The '<html>' tag tells the browser that this is where you want it to start processing information for your website. All of your actual HTML script is contained within the '<html>' and '</html>' tags. The '<head>' tags usually contain the title and other tags. The '<title>' tag is what is shown at the top of your browser in the title bar. After the '</head>' tag comes the body. The '<body>' tag is what the actual content of the website will look like. You will notice that next to '<body' is 'bgcolor="black">'. bgcolor is what sets up the background color of your website. In the example shown, the background color is set to black, so the background of the webpage will be black. At this point you may be asking, "Why is it that there are more than one thing in the tags?" Well, there are more than one thing in some tags because of the simple fact that there CAN be more than one thing in those tags. Most web designers find it easier to do:

<body bgcolor="black">
----------

instead of:

----------
<body>
<bgcolor="black">

In fact, most browsers do not support the second example. There are many tags that will have more than one thing in them. A few more examples will be shown later on in this tutorial.

Anyway, back to the original example script dissection. After the <body> tag comes a <p> tag. The <p> tag is the tag that tells the browser to begin a new paragraph. In order to end this paragraph (once you are done with all the information being put into that one paragraph), you must use the </p> tag. I am guessing that you get the general trend now. A tag without a slash at the beginning is an opening tag (<html>), and a tag with a slash at the beginning is a closing tag (</html>).

The next tag you see in the example script is the <font> tag. This one, like the body tag, has more than one thing contained in it. In fact, it has two other things: Font Face, and Font Color. Font face is basically the font that your text will be in. The example has the font of the text (contained within the <font> and </font> tags) as Verdana (My personal favorite). It also sets the color to be white. After we have entered our text, we end the <font> tag with </font>. We then end the paragraph tag and use what is called a line break.

A line break tag is <br>. It basically tells the browser to go to the next line. 2 <br> tags are the basic equivilant of one <p> tag. Line breaks are especially helpful if you are writing poetry or creating lists. It allows you to start new lines wherever you would like.

After the line break comes the </body> tag which tells the browser that is the end of all the data that it needs to process as far as actual content of the webpage goes. After the </body> tag comes the </html> tag which tells the browser that is the end of the HTMl script.

Ok, so we have our script, but what is going to show up in the content of the page once the page has loaded. What will show up as a result of that script is that it will have a title bar that says "HTML Tutorial", a black background, and text that says "Hi, my name is Robert!" in white Verdana text. It will also have a blank line at the very end due to the <br> tag we added.

Now that we have seen a basic script, let's get a little more in depth. Let's say you wanted to link to Yahoo! from your website. You would put the following in.

<a href="http://www.yahoo.com">Yahoo!</a>

Just like the other tags, the link tag has a beginning and end tag. It also has properties simliar to font tags in that whatever is between it's beginning and ending tags will be a link. Here is what will come from that link:

----------
Yahoo!
----------

HTTP

Another HTML tag you will need to know is alignment tags. Alignment tags can be used to align text, images, tables, even your entire webpage. You can set the value of an alignment tag to left, right, or center. Here is an example that will show you how to make put images on your webpage and align it at the same time.

<left><img src="http://us.a1.yimg.com/us.yimg.com/i/ww/m5v2.gif"></img></left>

This will give you the Yahoo! logo aligned on the left side of your page. The <img> tag is a tag that can contain more than one thing in it. It can incorporate alignment into it. This is how to do it.

<img src="http://us.a1.yimg.com/us.yimg.com/i/ww/m5v2.gif" align="left" border="1"></img>

This will give you the same Yahoo! logo, aligned to the left, and with a border of 1. You can also set the border color and other options. You can make hyperlinks out of images by wrapping the image in <a href=""> and </a> tags. Here is an example of how to link to Yahoo! using the Yahoo! logo.

<a href="http://www.yahoo.com" target="_blank"><img src="http://us.a1.yimg.com/us.yimg.com/i/ww/m5v2.gif" align="left" border="1"></img></a>

This will give us the same Yahoo! logo, with a 1 pixel border, aligned to the left, with a link to Yahoo! This means that if you click on the image, it will send you to Yahoo! But this script example goes deeper than that. If you look at the <a href=""> tag, you will notice that we have incorporated other functions in it. We have added 'target=""'. The 'target=""' tag tells the browser that when somebody clicks on that link, open that link in a certain place. I have set that value to "_blank". This means that if somebody were to click on that image, it would open a brand new browser window with the Yahoo! search engine showing up on it. There are other targets to use, but you will have to discover those on your own as you become more experienced with HTML.

There is one more thing you should know about alignment tags used withing <img> tags. If you set the value of 'align' inside an <img> tag, it will align the image to the left and wrap any text that follows or comes before the image around the image itself. You will see exactly what I mean when you try your hand at that feature in HTML.

A couple other things are text properties. Bold, Italic, Underline. Those can all be done by using opening and closing tags as well. Here they are:

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<s>Strikethrough</s>

Another thing you should know about text in HTML is about its 'size' values. When you are setting the size of text using HTML, you must realize that size 8 in HTMl and size 8 in a word processor differ. In HTML, sizes start at 1 and go up from there. 1 is the smallest size text in HTML.

You can learn more about text sizes and everything else ... because afterall... this tutorial was supposed to be only the basics of HTML... and it is... but you will have to get more in depth on your own. But... I won't leave you in the dark and misguided.


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "HTML Basics"