This tutorial teaches the basics of HTML, the language which you use to create web pages. HTML stands for HyperText Markup Language. Contrary to popular belief, you don’t need a fancy program to create a webpage, you can start your own using a simple text editor, though programs like Frontpage and Dreamweaver (an excellent program) assist tremendously by creating the code for you. Even with a program like these, it’s a good idea to know HTML yourself to help fix mistakes (even these programs make them) and to understand your own code. For more HTML information, we recommend reading either HTML 4 for the World Wide Web or Learn HTML In a Weekend
What does a webpage look like?
A webpage is made of HTML commands. The basic structure of a webpage is:
<HTML>
<HEAD>
<TITLE> This is my first title </TITLE>
</HEAD><BODY>
This is where all my other tags will go to makeup the BODY.
</BODY>
</HTML>
As you can see, each of the commands are enclosed with angle brackets. These commands are called Tags and are the basis for HTML. Each Tag has a command, such as <TITLE>, and a close command, such as </TITLE>. In HTML, each command has an ‘open’ and a ‘close’ to signify the beginning and ending of the command. The stuff inside the <TITLE> tag and the </TITLE> tag appears at the top of your browser window. For example, on this page the title is “Learnthat.com HTML Introduction – Learn what makes up webpages Tutorial“.
Every page has a begin HTML command, <HTML>. Next is the <HEAD> tag which opens the HEAD area of the page which is not displayed in your browser, but commands like <TITLE> appear at the top of your screen. Inside the <BODY> tags appears the stuff that is shown on the page. All of the scripts, tables, tags, and text on this page are contained inside a set of <BODY> </BODY> tags. Finally, a close HTML command, </HTML>, tells the browser where the HTML ends.
Now you’ve learned the basic scructure of a webpage, let’s move on to learning some basic HTML commands and how they fit into your webpage.
Now that we’ve learned what a basic HTML page is made of, we can now move onto more advanced commands and how they fit together to make your page look beautiful on the web.
First, let’s start with our framework for a page and add a few things:
<HTML>
<HEAD>
<TITLE>My Life</TITLE>
<BODY>
<h2>This is my life!</h2>
<p> This is my first webpage and I want to talk about my life. My life is <b>so</b> cool!</p>
</BODY>
</HTML>
First, let’s look at what this page would look like:
This is my life!
This is my first webpage and I want to talk about my life. My life is so cool!
Now, let’s dissect the code. In the first exercise, we learned all the code that’s highlighted in green above is the required framework of a page. The TITLE tags in Blue are the only required tags for <HEAD>. The rest of this stuff makes up our page.
The first tag you see is <h2>. <h2> is a “headline” command. It creates a headline like the “This is my life!” one above. Placing different numbers behind the ‘h’ cause the headings to be different sizes, such as <h1>, which is the largest heading.
This is the largest Heading.
The next command is an open paragraph command, a <p>. <p> starts a new paragraph and </p> closes the paragraph. After the paragraph tag and before the word “so” is a <b> tag which signifies to bold the text it encloses with </b>.
These are just a few of the tags available in the world of HTML, let’s move on to a a more advanced subject, tables.
What would the world wide web be without links? Links make the web go ’round, millions of links and websites linking each other.
Links are created using the <a> tag. The <a> tag has a required attribute of href which is equal to what you are linking to. For example, to link to Learnthat.com, you can type this on your page:
<a href=”http://learnthat.flywheelsites.com”>Click here for free training!</a>
As you see, the <a> tag is like all others, it has a close tag </a> to tell it when to stop linking. This links to another page on a different site, or one that is not easily linked to on your site. You can also link to a local page easily, here is an example:
<a href=”about.html”>Click here to learn about us.</a>
This would assume the page “about.html” is in the same directory as the page you are linking from. To link to a page in a deeper directory, you can specify the directory first:
<a href=”about/index.html”>Click here to learn about us.</a>
This would link to a document in a subdirectory off the one you are in.
Linking to a directory is easy once you get linking down. Instead of text, just put an img source tag in there, for example:
<a href=”http://learnthat.flywheelsites.com”><img src=”image.gif”></a>
The last thing to learn about linking is how to create one of those links where it opens a new mail message. I’m sure you’ve seen “Send me a message: Click here!” and wondered how they did that, here’s an example:
<a href=”mailto:webmaster@learnthat.com”>Click here to email me!</a>
If you substitute your email address in there, whenever your visitors clicks on the link, it will open a mail message in their mail program!
Now that we’ve learned links, let’s move on to a more advanced topic, Tables!
Tables open up a whole new world in HTML. With Tables, you can control how things appear on a web page and can format data cleaner on a page.
Tables may appear to be a more advanced topic, and in future tutorials, tables will be used extensively to see the amazing things you can do. As someone learning beginning HTML, tables will be a concept you should learn.
Netscape originated tables, and as such, made the commands for them. To open a table, the <TABLE> command should be used. The other tags you need to know are Table Row <tr> and Table Cell <td>. One key thing to remember is that a <td> is always enclosed in a <tr> which is always enclosed in a <table> tag.
First, let’s create a basic table with 4 cells:
| First Cell | Second Cell |
| Third Cell | Fourth Cell |
The code for this table is:
<table border>
<tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr>
<tr>
<td>Third Cell</td>
<td>Fourth Cell</td>
</tr>
</table>
In this code, you can see that there are two <tr> tags, or two rows. Within the first row is the First Cell and Second Cell, each inside a set of <td> tags. In the second row, the Third Cell and Fourth Cell is enclosed in their <td> set of tags. As you see with the <table border> tag, the border was added so we could see it. To see a border of a different size, set the border equal to a number, such as <table border=3>.
Now, let’s learn some important attributes of Tables. These are the main attributes of a table: border, width, cellpadding, cellspacing, bgcolor, and background. Border sets the size of the border around the table. Width can be expressed in pixels or %, it specifies the width of the tag it is in, it is available to all of the table tags. Cellpadding determines the padding width between each of the table’s cells. Cellspacing specifies the spacing width between each of the table’s cells. Bgcolor specifies a background color of the table and background specifies a background image in the table.
An example of using several of these commands is:
<table border=”3″ width=”75%” bgcolor=”#CC0000″>
Now that we have learned some basic HTML and tables, let’s look at a summary of a lot of the useful HTML commands you can use.
