HTML Guide For Beginners

Did you find this page useful?

Hey - if anything on this page helped you, please be sure to help me out by clicking "Yes" above where it asks "Was this article useful to you?" That way I know to write more about this topic! Thanks!

HTML – WHAT IT IS AND WHY YOU NEED TO KNOW IT

Congratulations, you've decided to start your own web-based business. You've researched all the relevant legal risks, you've drawn up a business plan, you may have even decided how many different resources you are going to build per day. There is only one problem.

You don't know the first thing about what HTML is.

Well, to answer your question: HTML stands for Hyper Text Markup Language. What that means is that it uses a series of tags around text to format the text to look a certain way. As the old commercial would say, “you are soaking in it” - this site uses HTML to format the text so it looks the way it does. Hit the 'View Source' command in your browser to see how it looks. Most of the documents stored on the web are in HTML, and HTML will be the air to your business, it is that essential. The good news is: HTML is relatively easy to pick up, and there are massive amounts of tutorials on the web, in addition to what we will be presenting here.

BUILDING AN HTML DOCUMENT

But enough of the egghead talk – you're here to figure out what this stuff is and how to use it. Let's get started. A basic HTML document looks like this:

Sample: A Simple HTML document.

<html>

<head>

<title> My Product - The BEST product of its kind! </title>

</head>

<body>

<h1>My Product - The Best Kind There is!</h1>

<p>Hey, I know you've been burned before, but if you try my product, I am convinced you will find it to be the best kind of product of its kind on the market today. I am so convinced, I am offering you a free test drive of my product - no strings attached - its just that simple!</p>

</body>

</html>

Let's take a look at what those things inside the less-than and greater than signs are. Those are commonly referred to as tags. Tags are nested inside of tags, to delimit the structure of the document. The HTML tags tells the browser “hey, this document is HTML! Display it as such.” The next set of tags are enclosed in the HEAD tag. This is where meta-information of the document is held. If you've ever written a formal letter to someone, this is the information above the “Dear Sir/Madam” section of your document. You can think of this as a backstage area of the document. It is not seen by the user (with the exception of the TITLE tag, which is what displays in your browser bar.) The HEAD section of a document is where script, style and other functional stuff is placed to make a document look and act like the author wants it to. (We will focus on this future, but for the purposes of this tutorial, all we need is the TITLE tag for now.)

Image One: Typical Browser Displaying your TITLE tag.

After the HEAD tag, we have the BODY tag. This is where the text and images that you want on the web. Now, there are standard tags that you can add to group your text, the most common tags being paragraph <p> tags around blocks of text to denote that they are (appropriately enough) paragraphs. When we want to give clues to our readers about the different sections of our document, we use heading tags (<1> through <h6>). These heading give semantic clues to our readers (and the search engines) the point that the page is trying to get across. Just like in grade school, you want to structure what you are writing to get your meaning across to the reader.

Subsection - HEY! What about pictures?

Pictures are, of course, worth a thousand words, and help show off your products and services on the web. Images can easily be placed in a document by use of the image tag <IMG src="myimg.jpg" ALT="This is myimage">. The "src" indicates where the picture is stored on the web. The ALT is alternative text that is supplied to people that can't see the pictures, and also provides semantic hints about the document's meaning (nice for those search engines we read so much about!)

NOTE: Be careful, a lot of newbies make the mistake of writing an HTML document on their home hard drive, then uploading the document, but not the pictures. When they go to test the document, they can see the pictures because the document can pull from their local hard drive, but no one else can. Remember, upload your images where people can access them.

Subsection - Hotlinking is a NO-NO!

Some newbies make the mistake of linking to a picture from a website they don't control. This is a BAD THING! When people rent web space from a hosting company, they pay for bandwidth, and that is what you use when you use their pictures without permission to hotlink. Besides the fact that hotlinking isn't right, the people that host the image can block your access to the picture or change what pictures appear on your page, and they can post some nasty things! Remember, without permission, just don't do it!

More books to help you learn HTML

	Creating Web Pages For Dummies, 8th Edition Amazon Price: $1.46 List Price: $24.99
	HTML 4 For Dummies, 5th Edition Amazon Price: $19.71 List Price: $24.99
	HTML, XHTML, and CSS, Sixth Edition Amazon Price: $18.75 List Price: $39.99
	Learn HTML 4 In a Weekend, 4th Edition (In a Weekend (Premier Press)) Amazon Price: $17.66 List Price: $24.99

SUMMARY – BRINGING IT ALL TOGETHER

HTML is the framework that let's us build those nifty pages that appear on the web. In fact, you are reading an HTML webpage now!
Tags are used to mark different sections of the document, format text in certain ways, imbed images within the document and tell the browser what to display. Tags that enclose text and other tags have an open and a close tag. EX: <p>Some text here</p>.
The HEAD section of the document contains meta, style, scripting, and title information, and with the exception of the TITLE tag, is not seen by a surfer.
The BODY section of the document is where the text and pictures that you want to display should be placed.
Heading tags are used to break the document up by topic to make it easier to read and understand by both people and search engines.
Paragraph tags are used to group paragraphs together for readability and document form.

FUTURE TOPICS

HTML – II: Tags, tags and more tags.

CSS – How to use stylesheets to make your website look the way you want it to.

FTP – How to transfer your file from your PC to the web.

XHTML – The newest markup language for the web. It isn't really HTML - but it is close enough that the transition is relatively painless.

HOSTED SERVICES – Why hosted services (just like this one) can relieve you of some of the grunt work of building a web page. MySpace, Hubpages, and bloggers are just a few that we will cover.

HEY! IT DOESN'T LOOK LIKE I WANT IT TO!

Of course, you'd like your document to look better than the plain-jane layout that it has now. Well, never fear, we will cover formatting and style in our section on stylesheets. Keep checking back, we will link to the article here when we complete it.

Software to help you build your web page

	Professor Teaches How to Create Web Pages & Graphics 5 [OLD VERSION] Amazon Price: $19.99
	Adobe Photoshop Elements 4.0 Plus Premiere Elements 2.0 [DVD] Amazon Price: $41.00 List Price: $149.99
	Adobe Dreamweaver CS3 [OLD VERSION] Amazon Price: $799.99 List Price: $399.00
	Microsoft Expression Web Upgrade [OLD VERSION] Amazon Price: $27.58 List Price: $99.95

A video tutorial of these concepts

Can you spot the HTML mistake?

The above video is a great way to reinforce what we've just discussed, but the author makes one mistake. Can you spot it? If so, leave it in the comments below :)

vote up vote downshare print flag

Was this Hub ...?