Learn the basics of HTML code

Monday

May022011

Learn the basics of HTML code

Discuss this Discuss this ()Options

Chris Self

May 2, 2011

Editorial ,

Exclusive,

Internet,

Websites

We have put these lessons together to provide anyone and everyone with a basic understanding of programming on the web. The end goal is a fully functional website built and designed completely by you. These lessons are intended to be lightweight, informative and easy to understand. The goal is to provide the reader with an enviroment that is easy to learn in. You’ll find that each new post covers only a few news bits of information. At the end of the posts, you can download a PDF document containing a “cheat sheet” with all the tags and important information you just learned. We also have some more rich content in the work that you’re going to enjoy.

Software

Expensive software is not needed for basic programming needs and can be done with any basic word processing software. For the industry proffesionals, Dreamweaver is a must. I won’t get into the software differences now but expect to see an article about software in the near future. To turn your text document into a format that a browser can understand, save it as an HTML document. For example… website.html or website.htm are both legitimant file formats.

Lesson 1

In this lesson..

Learn about the basic tags and what they mean
See how a broswer reads these tags
Build a basic webpage with text

Important Tags

All websites begin with <html> and end with </html>. These two tags tell a browser that it’s reading an HTML document. If you’re website is going to contain HTML5 specific tags, you must replace the first tag with <!DOCTYPE HTML>. For those who are just getting started, it’s highly recommended that you use this tag instead of the traditional tag so it’s compliant with web standards.

Next in your HTML document, you’ll find the <head> tags. Although we won’t be using this tag in the first lessons, it’s important not to ignore them. It’s in between these tags where your inline and external CSS & Javascript code is contained. And just like the <html> tags, you need to close it also.

The <body> tags represent the start and finish of all visible content on your website. Any text, images or video you want to add must be put in between these tags. We’ll spend the majority of the next few lessons in the section.

When you want to add some tex to your site, use the <p> tag. Note that “p” stands for paragraph. Everytime you make a new <p> tag, your browser moves to the next line. It’s very similar to when you write an essay and go the next line when starting a paragraph. Here’s what text looks like using these tags.

<p>This is a line of text.</p> <p>This is another line of text.</p>

In some cases, closing the <p> tags isn’t necessary but it’s recommended. The example below is completely acceptable when it comes to programming.

<p>This is a line of text.

<p>This is another line of text.

5. When search engines index your website, they use the heading on your site to do so. There are six heading tags, but their only difference is the text size. It’s important to use these tags as headings for sections of text on your site and not a way to bold text or make it bigger. Here’s all the heading tags.

<h1>This is heading.</h1>

<h2>This is heading.</h2>

<h3>This is heading.</h3>

<h4>This is heading.</h4>

<h5>This is heading.</h5>

<h6>This is heading.</h6>

Putting it together

Let’s put all these basic tags together and build a basic website. To see what you’ll be building, click here for a live example. In the meantime, let’s look at the code…

<!DOCTYPE HTML>

<head>

</head>

<body>

<p>This is a line of text.

<p>This is another line of text.</p>

<p>

<h1>This is a H1 heading.</h1>

<h2>This is H2 heading.</h2>

<h3>This is H3 heading.</h3>

<h4>This is H4 heading.</h4>

<h5>This is H5 heading.</h5>

<h6>This is H6 heading.</h6>

</body>

</html>

Note that I’ve added some space between the the last line of text and the first heading by adding an empty <p> tag. It’s a very simple way of adding breaks in text. Also, as the number increases in the header tag, the text gets smaller; not bigger like you’d expect.

Congratulations, you’ve learned some basic HTML tags. Your website should look similar to live example we’ve setup here.

In the next lesson

learn about hyperlinks
add images
embed video
learn about metadata

Download this post’s PDF by clicking here.

Chris Self

May 2, 2011

Open QR Code Save on Instapaper Read More

Discussion Threads

Follow and Subscribe to Okay Geek - We always send our latest articles to Twitter, RSS, Facebook and more, as well as other awesome content we find interesting.

Built using Squarespace