Home HTML and CSS Tutorials HTML Basics

HTML Basics

Author: Michael Aldworth More by this author

Added: Mar 07, 2005 Rating:

Level: Beginner Software: Dreamweaver

1.Welcome, this tutorial will hopefully teach you the basic necessities for making your very own webpage. Now contrary to what people tell you, html (Hypertext Markup Language) is not a programming language, its simply instructions telling the browser what to do. Yes, different programming languages can be incorprated into html, but html itself is just instructions for browsers.
We will first talk about tags. All html documents have tags and they must be opened and closed. Some examples of tags are: , , .

Now before we start off, you must know that in html, every bit of code you type has an opening and a closing tag. The opening tag simply has the word <html>, telling the browser that you are opening a html document. And when the browser reads </html> the forward slash symbolizes the end of your webpage. Now we will talk about the code in between. You can open up notepad or use one of the many html programs which defeats the purpose or learning html.

2.Now to make your first webpage put the following code in notepad, then save it as 'webpage.html'.

<html>
<head>
<title>My First Webpage</title>
</head>
<body> </body>
</html>

Now in the head tags it has parameters set that the browser reads before the webpage is loaded. The title tag is located in teh head tags. Title message is the text that appears in the upper left bar of your browser. For example I use <title>.: Infinite Designs :.</title>

3. Now your probably thinking 'What the heck does all that do?' well, this is what it does:

<html> - This tag tells the browser that it is opening an HTML document

<head> - This is the HEAD of a webpage, however nothing inside the HEAD tags is shown in the webpage aside from the TITLE

<title></title> - Whatever normal text is written in here is normally shown in the upper left of the window above the File Menu

</head> - Closes the HEAD of the document

<body> </body> - This is the opening for the content that the user actually sees.

</html> - this closes the HTML document, telling the browser ther eis nothing left to interpret.

4. Now that you can make a basic html page how do you add text, links, images etc..? Well here are the following most commonly used elements to a webpage.

Text
 This tag displays text and many parameters can be added to the opening font tag to edit text. ie.. ( Text Here) 

Hyperlink (Link to another webpage)
<a href="http://www.yourdomain.com"> This is where you would write the text that you wish to link to the specified page. </a>

E-mail
<a href="mailto:address@yourdomain.com"> This is the same tag as the hyperlink except the address starts with mailto: telling the browser to open the default mail client when clicked on</a>

Body Parameters
<body Parameters placed in here>oIf your wondering how to change the background colour or have a background image, or other stuff, heres how. To change the colour after the opening body put bgcolor="#FF0000" ie..( <body bgcolor="#FF0000">) I believe this changes the page color to red. To add a background image instead of color, use background="imagename.jpg or .gif" . Now you can change the color of links by 3 parameters (alink ,link, and vlink) a link means active link, so if they click on it and a new window opens, the link in the origional window will remain a certain color as long as the link is open. Link is just the color of the links, and vlink means visited link, which are links you have already visited. you can add them with the following code, alink="#3399FF" link="#FFCC33" vlink="#FF0000". And finally the closing tag always looks the same.</body>

Bold
 Simply makes the text bold. 

Italics
 Simply makes the text italics. 

Underline
 Simply makes the text underlined. 

Line Break
 This tag does NOT need a closing. It simply brings you down a line when used, similar to pressing the 'enter' key in a word processor..