This tutorial will introduce you to the basics of the HTML5 markup language, which can be used to create the content portion of your web site. We will be using HTML5 to build a basic blog.
To get started with this tutorial, all you need is a text editor and a web browser. Just about any text editor will do, as long as it can save files as plain text. On Windows, Notepad will work fine, though there are a number of free text editors that might provide a better experience. Notepad++, available online at http://notepad-plus-plus.org/ is one such editor. On the Mac, I recommend downloading a copy of TextWrangler from http://www.barebones.com/products/textwrangler.
Since we're working with HTML5 and it's a relatively new language, you will want to make sure you have a browser that supports the new features. I recommend the latest version of Chrome, Safari, or Firefox. Internet Explorer 9 should also work just fine.
To begin work on our blog, we will first build the basic structure required by any HTML5 web page. Once you have this structure in place, you can save it as a template for use again and again each time you create a new page. Create a new folder on your desktop called blog. Then, start your text editor, create a new file, and save it as index.html within the blog folder. Within your blank text file, enter the following text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>My blog</title>
</head>
<body>
</body>
</html>
Save your work. Now let's take a look at the code.
The first line of our new document is the DOCTYPE and simply lets your web browser know which version of HTML you used to create your page. Because there are many different versions of HTML with different sets of features and rules, the browser needs the information in the DOCTYPE to determine how to render the page.
The line that starts with <html> is our first HTML tag. HTML tags are used to define elements of our web page. The <html> tag defines an element that contains all other elements and represents the beginning and end of our document. In HTML5, all tag names are lowercase and typically have an opening and a closing tag. Therefore, the <html> tag in our code is composed of two parts: <html> and </html>. The tag also contains what is known as an attribute. The lang="en" section of the code is used to specify that the contents of the page are written in English. We will be working more with attributes once we start adding content to our page.
The <head> tag defines a section of the document that contains information that generally won't be displayed in the browser, but is important to the display of the page. The <meta> tag that is contained within the <head> element is used, for example, to define which set of characters should be used to display the text content on the page. The <title> tag contains the title of the page -- the text that gets displayed in the browser's title bar and when the page gets bookmarked. Information on the visual appearance of the page (in the form of CSS code) or links to external CSS files are also typically contained in the <head> element.
The body tag contains all of the visual content of the page. Anything that you want the viewer to see or interact with is typically included in this element. We'll be spending the rest of the tutorial building content within the body tag.
You might have noticed that the code throughout this tutorial is formatted with tabs. I use this formatting to get a better sense of which HTML elements contain other elements. This spacing was created only to make it easier to read the code and your browser won't care whether it's there or not. So feel free to use tabs and blank lines if you'd like, but know that it's not important that you copy the spacing exactly as typed here.
The landing page for our blog will be composed of several different elements:
- A header that contains our blog title
- Navigation
- Blog posts
- A footer containing information on the blog like author and copyright information
Let's start building the page.
There are a number of HTML elements that are used to define sections within a web page. The <header> tag is one such element and is typically used to define the banner that is often included across the top of a page. To create a <header> simply type an opening and closing tag just after the opening <body> tag.
<header>
</header>
Save your work. Now go to your web browser and open the index.html document from the File menu. You should see a blank page. Although the <header> section is in place, it doesn't have a visible component by default. We'll change that in our CSS tutorial, but for now, let's add some content to it.
The <h1> tag is used to define the top-level heading of your page. Add an open and closing <h1> within the <header> tag and populate it with the name of your blog.
<header>
<h1>My blog</h1>
</header>
Now if you preview your page in the browser (just click refresh if the page is already open), you should see the name of your blog in the upper left corner of the page. While it may not be the most well-designed page, it has given us a start on our content.
Right below the closing <header> tag, we'll add a new section to the page using the <nav> tag. As the name implies, this tag is used to define the region of the page that will contain our navigation links.
<nav>
</nav>
Now we'll create a menu for our navigation section. To do so, we'll make use of an HTML element known as the unordered list, defined using the <ul> tag. Unordered lists are often displayed in the browser as a bulleted list. They also have a counterpart known as the ordered list (<ol> tag) which is used to create what is typically displayed as a numbered list. Unordered and ordered lists are composed of list items, represented by the <li> tag. Let's go ahead and create our menu.
<ol>
<li>Home</li>
<li>Portfolio</li>
<li>About me</li>
<li>Contact me</li>
</ol>
Save and preview your page again. A basic menu is in place, but it's not quite functional yet. Let's fix that now.
At this point in time, we should start thinking about the structure of the files that make up our blog. Our entire site is currently only composed of one page -- the home page. Based on our new navigation menu, we can now see that at least three more pages need to be created. Using the template site structure that we started above, let's create those pages now and save them to the blog folder.
- Portfolio - portfolio.html
- About me - about.html
- Contact me - contact.html
Once you are done, return to the index.html file and change the navigation menu to look like this:
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="contact.html">Contact me</a></li>
</ol>
If you preview the page now (remember to save first), you should be able to click the links in the navigation menu to visit any of the new pages you created.
The anchor element (<a> tag) can be used to create hyperlinks to different sections of the page, different pages on your site, pages on external sites, files (such as PDF files), and special addresses such as e-mail addresses. In our navigation menu, we have used the href attribute to specify which internal pages to direct the user to when they click each link. We will explore more advanced use of the <a> tag as we work through the tutorial.
Below the navigation menu, we will create a short list of blog entries. To define each entry as as a separate post, we'll use the <article> tag. Let's create our first entry.
<article>
<h2>Learning HTML5</h2>
<p>Posted by Author on February 1, 2012</p>
<p>I'm learning HTML5 and so far, it's going great! I have learned a few things that I thought I would share:</p>
<ol>
<li>HTML is easy!</li>
<li>HTML is used to structure content</li>
<li>HTML is used alongside CSS and JavaScript to build web pages</li>
</ol>
</article>
We have introduced a few new tags in this section. The <h2> tag is a second-level heading. By using an <h1> tag to define the topmost heading on our page and the <h2> tag to define each section, we create a nice hierarchy for our content. The <p> is one of the most oft-used tags and is used to define a paragraph. We have discussed the ordered list briefly, but now we're seeing it in action.
So far, we have only included text on our page, but it would be nice to also include images in our blog posts. Let's create a new post that contains an image.
Within your blog folder, create a new folder named 'img' that we will use to store images. Although we are not required to create a separate folder for images, we're doing so to keep things organized. You are free to organize your files however you'd like. Next, let's download an image to that folder by navigating to http://bit.ly/yHrJpW and saving the image to the 'img' folder as 'parrot.jpg'. Now we need some information on the size of image. Opening the file in Photoshop reveals that the file is 480 pixels wide by 480 pixels tall.
Create the following blog post right above the previous blog post.
<article>
<h2>My pet parrot</h2>
<p>Posted by Author on February 2, 2012</p>
<img src="img/parrot.jpg" width="480" height="480" alt="My pet parrot hanging out in the backyard" />
<p>My pet parrot hanging out in the backyard</p>
</article>
As you can see, the <img> tag contains several pieces of information on the image. First, the src attribute contains the URL of the actual parrot image itself. The width and height attributes specify the size of the image in pixels. Finally, the alt attribute contains alternative text that describes the image. The alt text is particularly important for browsers that don't display images or for screen readers that rely on a text-based description of the image. For users with visual impairments, the alt tag allows any information contained in the image to be conveyed. Finally, unlike other tags that we have explored so far, there isn't a closing tag for our image. This is because the <img> tag is a self-closing tag, meaning that we can simply include a slash at the end of the tag to close it.
Save your page and preview it in the browser.
We will close out our tutorial by looking at some variations on the anchor tag. Specifically, we will create links to external sites and a link to an e-mail address. We'll also add a third level to the hierarchy we have setup with the header tags. To start, let's create one final blog post.
<article>
<p>Posted by Author on February 3, 2012</p>
<h2>My favorite links</h2>
<h3>School</h3>
<ul>
<li>I attend <a href="http://www.utexas.edu">UT</a></li>
<li>I am a student in the <a href="http://www.edb.utexas.edu/education/departments/ci/programs/it/">Learning Technologies</a> program</li>
</ul>
<h3>Web Design</h3>
<ul>
<li><a href="http://net.tutsplus.com/">Nettuts</a> contains many great web tutorials</li>
<li><a href="http://www.makebetterwebsites.com">Make Better Web sites</a> is a great place to get inspiration</li>
</ul>
</article>
By including the full URL (including http://), your browser will know to link to an external site instead of another page on your site.
Next, add a <footer> tag right before the </body> tag and populate it with the following content
<footer>
<p>©2012 The author <br />
<a href="mailto:author@email.com">E-mail the author</a></p>
</footer>
In this code, we are first including an HTML character code -- © -- which your browser translates into the copyright symbol. The
tag creates a line break and is an example of another self-closing tag. Finally, by including the keyword 'mailto:' in our URL, the browser will know to launch a mail program and address a new message to the address listed.
For your reference, here's our completed HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>My blog</title>
</head>
<body>
<header>
<h1>My blog</h1>
</header>
<nav>
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="contact.html">Contact me</a></li>
</ol>
</nav>
<article>
<p>Posted by Author on February 3, 2012</p>
<h2>My favorite links</h2>
<h3>School</h3>
<ul>
<li>I attend <a href="http://www.utexas.edu">UT</a></li>
<li>I am a student in the <a href="http://www.edb.utexas.edu/education/departments/ci/programs/it/">Learning Technologies</a> program</li>
</ul>
<h3>Web Design</h3>
<ul>
<li><a href="http://net.tutsplus.com/">Nettuts</a> contains many great web tutorials</li>
<li><a href="http://www.makebetterwebsites.com">Make Better Web sites</a> is a great place to get inspiration</li>
</ul>
</article>
<article>
<h2>My pet parrot</h2>
<p>Posted by Author on February 2, 2012</p>
<img src="img/parrot.jpg" width="480" height="480" alt="My pet parrot hanging out in the backyard" />
<p>My pet parrot hanging out in the backyard</p>
</article>
<article>
<h2>Learning HTML5</h2>
<p>Posted by Author on February 1, 2012</p>
<p>I'm learning HTML5 and so far, it's going great! I have learned a few things that I thought I would share:</p>
<ol>
<li>HTML is easy!</li>
<li>HTML is used to structure content</li>
<li>HTML is used alongside CSS and JavaScript to build web pages</li>
</ol>
</article>
<footer>
<p>©2012 The author <br />
<a href="mailto:author@email.com">E-mail the author</a></p>
</footer>
</body>
</html>
This concludes the basic HTML tutorial. In our next tutorial, we'll be covering the use of advanced HTML features, such as audio and video tags. In later tutorials, we'll enhance the visual appeal and functionality of our blog using CSS and JavaScript. Thanks for reading!