Have you ever wanted to learn HTML or how to make websites? If so, this article is a great place to start. I am going to show you why HTML is easy, not at all complicated, and how anyone can start making a web page using HTML right away.
The best part about learning HTML is that you don’t have to commit a bunch of rules and HTML markup to memory. If you learn just one HTML tag, you will know how to use the rest of them. All HTML tags follow simple rules that work for any tag – but before we get into using HTML, let’s go over what an HTML tag is.
HTML is a markup language used to create and build web pages – but you already knew that. HTML is composed of “tags” enclosed in angle brackets. You have probably seen some of these HTML tags as you have traveled along the interwebs. HTML tags usually come in pairs – an opening tag and a closing tag. These open and closing tags are used to wrap content. Here is an example of an HTML tag for the title of a web page:
<title>The title of my document</title>
As you can see in the example above, we have the title of our document enclosed (or wrapped) in the HTML
<title> tag. The open
<title> tag goes at the beginning of our title content and the closing
</title> tag goes at the end of our title content. We have just created a 100% correct HTML webpage title. Congratulations!
HTML is used to describe the content in the document (or web page) you are creating. The purpose of HTML is to describe the content and provide structure. You can think of HTML tags like extra information about the content you have created – extra information that the computer can use so that it knows how to display your content on the web page.
Suppose you have a paragraph that you would like to use on a website. We can use the HTML paragraph tag to tell the computer that your content is a paragraph. Here is an example of a web page paragraph:
<p>This is a great paragraph. I really like writing content that I can use in my websites. I hope that you enjoy this as much as I do. </p>
That’s it! You just created an HTML paragraph. No trouble at all. I told you this would be easy. Now that you know how to wrap content in HTML tags – you can start creating web pages. I am going to show you a few HTML tags that you can use to get started. But first, let’s create an example of a document in Microsoft Word with headings and paragraphs and let’s see how we can use our new powers to turn that into an HTML web page.
Ok, before we create any website or use any HTML tags, we need the most important part, the content. Let’s face it – without the content we don’t really have any use for HTML at all. Let’s fire up a copy of Microsoft Word (or any word processor) and create some content. This part I know you are good at.
As you can see in the example above, I have created a document that has a big heading at the top. This is the page title. Following the page title is a smaller title, paragraph, smaller title, paragraph. I am trying to follow the rules taught to me in grade school about good–and–proper document formatting. Larger headings, followed by smaller headings. This helps to break up the content into scannable sections and helps show the flow of information in my content. Good presentation at it’s best. You will find that these simple ideas come in handy when creating content – especially for the web. You’ll be happy to know that this helps make your HTML even easier to work with.
The next step is learning a new HTML tag, the heading tag. In HTML there are 6 sizes of HTML heading tags. The biggest is the
<h1> tag and the smallest is the
<h6> tag. Here is a list of all the HTML heading tags.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
You can use heading tags to create… well…. headings in HTML. Just like in our example document, we need different sized headings in our web page to show the formatting and hierarchy of our content.
Let’s add some HTML tags to our content. First we are going to use the
<h1> heading tag for our page title. We are going to use the
<h2> tag for our smaller headings. And finally, we are going to use paragraph tags for our paragraphs. You can type this right in your content document just like the example below.
Congratulations! We have just successfully marked up our content using HTML! But wait… I can here you now… “that was fun and all… buuuut…” This isn’t really all that useful like this. All we have at this moment is some content with some ugly brackets in it. Great. Let’s get to the action.
Ok, let’s take our new HTML formatted content and turn it into a web page. This is where the magic happens. But first, I am going to have to teach you a couple of things about HTML documents… bear with me, you wont be disappointed.
We need a text editor. If you are using windows, you can use Notepad. If you are on a mac, you can use TextEdit. I chose to use TextEdit. Go ahead and open your text editor. Once it is open, go back to your content document, copy it all and paste it into your text editor. It should look something like this:
***Note to users in TextEdit: You need to change your document to plan text. To do that goto the menu, choose
Format > Make Plain Text.
Next, save your document in a safe place and name the document “webpage.html”. This will create a new web page document on your computer. Once this file is saved, double click it and it should open in your web browser (Internet Explorer, Firefox, or Safari). If that was successful you should be looking at your very first web page. It should look something like the example below:
Again, congratulations! You just made a real life web page using HTML. It really is that simple.
This website was made on a 13" MacBook Pro and 23" ACD, hand–coded in Coda, designed in the browser (Safari 5.03 to be exact) using CSS3, HTML5, and jQuery 1.5. © Copyright Joshua Gatcke http://www.99lime.com 2011–2012. All Rights Reserved.