I recently read an article on "How to REALLY Build a Web Page", and I was sorely disappointed. Although I tend to know the majority of what is covered in your average "beginner" article, I enjoy reading them to see others’ takes on the basic premises of web design and coding.
Unfortunately, that particular article left something to be desired. Therefore I wanted to write my own take on building a basic web page. This post will focus on the initial steps to build the HTML (and the steps you should take before writing your first line of code).
Introduction
There are a few million (33.9 million, as of this post) different tutorials out there for building a web page. So what makes this one any different? The short answer is: probably very little. However, I hope to present the process in a way that is both comprehensive and easy to understand for any person who is new to the arena of basic web design. I will also present a few coding best practices that I believe are simpler than people usually make them out to be.
Here is what I plan to cover in this post:
- Step 0: Setting Up Your Environment
- Step 1: The Basic Structure of An HTML File
- Step 2: Building Your First Page
- Step 3: A Practical Example
- Next Steps
Step 0: Setting Up Your Environment
Before you start working on websites, you have to get your environment set up. What does that mean? In general, it means purchasing and/or downloading the appropriate software and making sure you have the right browser(s) to test on.
The Right Browser(s)
You want to build web sites, because it is cool, right? Well then, fire up good old Internet Explorer 6 and get cracking, right? WRONG! Internet Exploder Explorer, whatever the version, has a long history of bungling website code and styles.
Obviously you want your websites to work in as many browsers as possible, but you will save yourself a lot of headache by developing in a better browser first, then tweaking your code for IE. We’ll get into that more in the next article with CSS.
There are a number of good browsers out there for you to use as your primary. I won’t get into a browser debate here, but any of the following browsers are good choices to use as an alternative to IE: Firefox, Chrome, Opera, and Safari. If you are locked into using IE for whatever reason, hopefully you will at least be using IE 8, which made a great deal of progress toward joining the ranks of "high quality browsers".
Your Code Editor
Now that FrontPage is no longer distributed by Microsoft, we can begin the healing process… and that doesn’t mean switch to DreamWeaver’s design view! DreamWeaver is a good quality product, but any time you develop a web page, you should be writing the code. I promise that anyone can learn to write basic HTML. Check out the W3Schools website for information on basic HTML code. They are a great resource for information.
So if I don’t recommend FrontPage or DreamWeaver, what should you use? That, dear reader, I will leave up to you. The key elements to look for are line numbers and (at least) basic HTML syntax highlighting. There are a number of great editors (free and paid) out there, but here are a few that I have used in the past and feel comfortable recommending:
Step 1: The Basic Structure of An HTML File
An HTML file is broken up into several major pieces, with some being required elements and some optional. This section will cover the basic chunks of your first web page.
Doctypes and You
There are a bunch of different doctypes out there, for both HTML and XHTML. However, for most things you will develop, you should only need one or two. For this tutorial, we will be using the XHTML Strict doctype, which looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Don’t let the name fool you — XHTML Strict is just as easy to learn, pearhaps easier, than any other variant of HTML. The reason is that it has fewer exceptions to the rules set forth that require you to keep your code clean. Such rules include things like always closing your tags (<span></span>, <br />, <p></p>, etc). Learning the rules is never the hard part of a new programming language… it’s the exceptions to those rules that throw a wrench into the works. By having fewer exceptions to the rules, XHTML Strict simplifies the learning process.
Required Elements
Any (X)HTML page needs to have a few basic elements to be considered a valid page. These include:
The Doctype definition (seen above)
The doctype definition (DTD) tells the browser which of the many flavors of HTML you have built your page in.
<html>
This is the basic wrapper for the whole file. The entire contents of your website (including all tags specified below) will be nested within this one element. In order to validate as XHTML Strict, we add two attributes to this tag: xmlns, or the xml namespace, which tells the browser to use the default set of HTML/XHTML tags; and the lang, which specifies the document’s language.
<head>
This contains the meta information about your HTML file, such as page title, page and site descriptions, keywords, and author information.
<title>
This is technically the only required element within the <head> section of the web page. This tells the browser what to display in the title bar of the window and in shortcuts.
<body>
After the <head> section of your site comes the <body>. This element is the real "meat" of your site, containing all of the content actually displayed to the user.
Recommended Elements
There are several elements that you aught to have, specifically some elements within the <head> section of your page.
<h1> Tag
Though not explicitly required for any page, the main header element tells your user — as well as any visiting search engines — what the main idea on your page is. Because of this, it is strongly recommended that you have one (and only one) <h1> element on each page. It benefits your users, and it benefits you (due to a potential increase in traffic from more accurate indexing by search engines).
<meta> Tags
These tags specify information about the HTML file itself. They can include content such as the page description, character encoding (highly useful if you use special characters), author information, and much more. While meta tags do not display any information to the user, they are very helpful to search engines, which use the information (along with the rest of your site’s content) to help describe your site in their indices. Here are a few <meta> tags I recommend including in each of your files:
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
This specifies the overall character encoding for your page. UTF-8 is a good "default" encoding to use, as it covers the bulk of characters you are likely to use when developing an English language web page. If you are building your page in a different language, however, I would suggest you take a look at some of the more widely used character encodings and select the one that best fits your needs.
<meta http-equiv=”Content-Script-Type” content=”text/javascript” /> and <meta http-equiv=”Content-Style-Type” content=”text/css” />
These two meta elements are used less widely than many of their counterparts. Their purpose is to provide a fallback language for inline scripts or styles (respectively) if you fail to specify them in their own declarations. For example, if you have an inline <script></script> tag in your code, it should have a type="sometype" attribute. However, if you forget this, the browser needs to know which language is your default scripting language. Hence these tags.
<meta name=”author” content=”Your Name” /> and <meta name=”copyright” content=”Copyright declaration” />
These are (hopefully) self explanatory. Specify your name and copyright information, and while there is some debate about whether this provides a significant boost to your site, there is no reason not to include this information.
<meta name=”robots” content=”index,follow” />
The robots meta tag tells search engines what to do when they get to your site. This helps search engines index your site, potentially (if you have quality content) helping to boost your site’s appearance on search results pages.
<meta name=”description” content=”” /> and <meta name=”keywords” content=”” />
These two tags contain specific information about the page that the user is on. The description should be relatively short (2-3 sentences), and it should be different for each page on your site. Not every page has identical content, so they should not have identical descriptions, right?
The keywords tag is simply a comma-delimited list (e.g. “keyword, keyword, key phrase, etc”) of keywords that you think are relevant to this specific page. Many search engines are placing lower emphasis on the importance of this meta tag due to its abuse by spammers, but if you use it correctly in conjunction with your content, it can help improve your search rankings.
Step 2: Building Your First Page
Now that you know the basic structure of an HTML file and the required/recommended elements that go into it, let’s move on with building your first page.
The Page Skeleton
For the basic skeleton of your page, first include the doctype definition, followed by the required page elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Web Page</title>
</head>
<body>
</body>
</html>
Next, put in the recommended elements appropriate to your needs. For this example, I will be including all of the recommended elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Bill Parrott" />
<meta name="copyright" content="Copyright 2009 Bill Parrott" />
<meta name="robots" content="index,follow" />
<meta name="description" content="This is a sample web page built for the tutorial: 'How to Really Build a Web Page', found at http://chimericdream.com/2009/11/04/how-to-really-build-a-web-page/" />
<meta name="keywords" content="tutorial, web page tutorial, sample web page, web page template, xhtml, xhtml strict" />
</head>
<body>
</body>
</html>
Hello World!
Now that we have our basic page skeleton built, it is time to put the first content into it. We will use the classic "Hello World" example.
Create a paragraph tag (<p></p>) and put the words "Hello World" into it. This tag should be within the <body> section of your page, like so.
...
<body>
<p>Hello World</p>
</body>
...
View example in a separate window.
That’s it! Now it’s time to get more in depth with a practical example.
Step 3: A Practical Example
Obviously your web pages will have more content than just "Hello World" on them. This page will describe the commonly used elements of a web page.
Page Elements
Headings
Headings describe sections of your content and are denoted with heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>). They should be numbered in order of importance, and a good rule of thumb is to have, on average, at most as many of each heading type as its number. For example, you should only have one <h1>, as it is the most important heading on the page. Additionally, you should only have 2 or 3 <h2> or <h3> tags, and so on.
Paragraphs
Paragraphs are denoted with the <p> tag. Any general content on your site (i.e. text and images) should be within a paragraph tag.
Images
Images can be inserted into your site using the <img> tag. This tag has a few required attributes that help browsers, search engines, and many users to better view the content. Here is a sample <img> tag:
<img src="computer-icon.png" alt="Computer icon" />
Note that the <img> tag is self-closing, meaning that it ends with a forward slash inside the closing carat. The src attribute specifies the path to the image, while the alt attribute provides a fallback in the even that the image cannot be loaded. Both of these attributes are required for the <img> tag.
Links and Lists
You will likely want to link to other websites from your new page. Links are inserted with the <a>, or "anchor" tag. Here is a sample link:
<a href="http://chimericdream.com/">ChimericDream</a>
The href attribute of an anchor tag specifies the destination of the link, and the title attribute provides helpful text that is displayed when the user hovers over the link. The href attribute is required for an anchor tag, while title is a strong recommendation.
If you want to insert numbered or bulleted lists into your web page, you may use the <ol> or <ul> tags, respectively. The <ol> tag denotes an ordered (numbered) list, while the <ul> denotes an unoredered (bulleted) list. Each of these tags can contain an arbitrary number of list items, which themselves are contained in <li> tags. Note that if you want to have a list in your website, you must include the tag specifying the list type (<ol> or <ul>) and a <li> tag for each list item. For example:
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
Putting it Together
Now that you have some basic HTML knowledge, let’s put it together with the page skeleton from step 2 to build a simple web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Bill Parrott" />
<meta name="copyright" content="Copyright 2009 Bill Parrott" />
<meta name="robots" content="index,follow" />
<meta name="description" content="This is a sample web page built for the tutorial: 'How to Really Build a Web Page', found at http://chimericdream.com/2009/11/04/how-to-really-build-a-web-page/" />
<meta name="keywords" content="tutorial, web page tutorial, sample web page, web page template, xhtml, xhtml strict" />
</head>
<body>
<h1>My First Web Page</h1>
<p>Welcome! This is the first web page created with real (fake) content.</p>
<h2>About Me</h2>
<p>I make websites, and I hate writing bios. ;-) <a href="http://chimericdream.com/" title="Go to my home page">Here is a link to my website.</a></p>
<p>Here is a computer icon that I randomly found in a Google search. Looks fancy, huh?</p>
<p><img src="computer-icon.png" alt="Computer icon" /></p>
<h2>My Interests</h2>
<ul>
<li>Web Design</li>
<li>Swing Dancing</li>
<li>Video Games</li>
<li>RPGs</li>
</ul>
<h2>My Priorities</h2>
<ol>
<li>Family</li>
<li>Career</li>
<li>School</li>
<li>Hobbies (dancing, computers, gaming)</li>
</ol>
</body>
</html>
View example in a separate window.
That’s the whole thing!
Next Steps
Hopefully by now you have a good grasp of the basic elements necessary to build a barebones web page. But this isn’t the end… this is only the beginning. In future tutorials, I plan to cover more advanced topics to help you flesh out your web page. Some of these will include:
Styles and CSS
CSS lets you keep your HTML simple and apply visual styles to your web pages. The next installment in this series will cover basic CSS and will build on the principles we learned in this article.
(More) Advanced HTML
There is a whole world of HTML tips and tricks out there, just waiting for you to grab hold! I will cover more advanced HTML tags, continuing to build upon the code we created here.
Javascript
Javascript gives you the ability to do a great many things with your content. With basic HTML and CSS, you can have a great looking static website, but when you throw JS into the mix, you give yourself the potential to create dynamic content that the user can interact with. I plan to focus (at first) on using the jQuery javascript library, which has a shallow learning curve and a large support base to draw from.
Final Thoughts
I hope you enjoyed and learned something from this tutorial. Feel free to provide feedback in the comments. Don’t forget to share/bookmark this article!