1. 0. HTML Menu
2. 1. Getting Started
3. 2. Tags
4. 3. CSS
5. 4. Publishing
6. 5. The Next Level
7. 6. References

Creating a Website Tutorial

Getting Started

Most people will look at a webpage and imagine it is something either a high school geek or a rocket scientist can do, but it's not. It's easier than you might expect, requiring nothing more than a simple text editor and a few, basic commands.

In this lesson, we'll create a webpage. You'll learn the basic structure of a webpage and the terminology used to discuss the parts of the page. By the time you finish, you will have created your first webpage.

A Brief History of HTML

All webpages are written using HTML, short for HyperText Markup Language. It's a simple text file with tags that specify how text should be displayed. The original HTML specification was very limited, and as the browser wars heated up, each web browser started adding proprietary extensions to one-up the other. This was good, because it allowed much more control over how a webpage was displayed, but it was bad because only certain browsers supported certain constructs. Often a webpage that would work well with Netscape would not display correctly with Internet Explorer or vice-versa.

To help pull all these little differences together, an organization known as the World Wide Web Consortium started to develop standards so a webpage would display the same regardless of the browser that someone used. The latest HTML version is actually XML compliant. Don't worry about XML, however, I only mention it because now people refer to the latest standard as XHTML. Not all HTML files are XHTML, but all XHTML files are HTML. This tutorial will use XHTML at all times, but the terms will be used interchangeably.

XHTML is much more strict than older HTML standards, but it ensures that any standards-compliant browser will display your webpage exactly like you want it regardless of the browser or operating system that someone is using. Atlas Quest uses XHTML, and if you create a new website, you may as well do it right and use XHTML.

What You'll Need

You'll need two things to create a webpage: (1) a web browser to view and test your page, and (2) a text editor to create your page.

Web Browser: Firefox, Chrome and Safari are all solid browsers. Internet Explorer (IE), historically, has been one of the worst at supporting current standards. Newer versions of IE aren't so bad, but if you're on an older system with an older version of IE, another browser will likely be better for testing purposes.

I prefer Firefox myself, mostly because I've come to reply quite heavily on the Web Developer and Html Validator extensions for help in developing Atlas Quest.

Text Editor: Any text editor will work. Windows-based systems have WordPad and Notepad installed, though trying to use them can be difficult, at best. If you choose to use a word processing program such as Microsoft Word, be sure to save your files as regular text files.

My editor of choice is Crimson Editor, a free but powerful text editor that allows you to work with multiple files at the same time and has syntax highlighting to make creating a webpage a breeze. It is, however, only available for Windows-based systems.

I'm not familiar enough with Macs and other non-Windows machines to make a recommendation for a good text editor for those systems.

Creating a Hello, World! Webpage

Since the dawn of the computer era, programmers who are first learning a new programming language create the Hello, World! program. It's simple, it's easy and you have something to show for your efforts almost immediately. Since there is no compelling reason to diss this tradition, we'll create a hello world 'program' of our own using HTML.

Let's discuss this file one line at a time.

You'll need this at the top of every one of your HTML pages. This line tells the browser that the rest of the page is HTML. When you use a validator to check your HTML, it uses the information from this line to determine what version of HTML to check the rest of the file for. It's not especially important for you to understand how it all works, however, just know that every HTML file you create should begin with that line. Other variations exist, but unless you know what you are doing, use this exact line—this tutorial expects you'll be using it.

This is an opening tag that marks the beginning of your HTML page. Tags take the form:

<element attribute="value">Affected Text</element>

The element is like a little label that marks what the text between the opening and closing tags represent. It could be a paragraph, a heading or any of several possible ways to mark your code. In this case, it specifies that everything between <html> and </html> is HTML. In XHTML, a closing tag is always required. The closing tag will look just like the opening tag, except there will be a slash before the element name. The closing tag here is </html> which you will find at the end of the file.

If there is no affected text associated with a tag, you can open and close the tag in one step, for example, <hr />. You must include a space between the element name and the slash marking the closing of the tag if you use this form of a closing tag.

Attributes and values contain information about the data that makes up the element, rather than the data itself. Not all tags will use attributes, but in this case, lang is an attribute telling the browser what language the page is written in (en, which is short for English). All of your HTML pages will use this exact form of the HTML tag.

With XHTML, attributes are always all lowercase, values are always surrounded by double quotes (") and all attributes always have a value associated with it.

In this tutorial, we'll mark elements in blue, attribute names in red, attribute values in purple, and predefined constants (coming in the next lesson) in fuchsia.

Every properly constructed HTML page will have a header, marked off with the tags <head> and </head>. This is information that doesn't necessarily show up in the webpage itself but is still associated with the webpage. It'll include the title of your page and often additional information about your page for search engines to use, or to include author or copyright information.

In our webpage, we'll only specify the title for now, which is Hello, World! What you type here will show up in the title bar of your browser window, and it's a good habit to give all of your webpages a title.

The section between the <body> and </body> tags are the meat of your webpage. This is what the browser will render into a readable page. In it, we've marked the first line as a header and the second and third lines as paragraphs.

Headers are specified with the tags h1, h2, h3, h4, h5, and h6 where smaller numbers represent a higher level for the header. Think of h1 as the main header, while h2 is a sub-header, h3 is a sub-sub-header, and so forth.

By default, HTML largely ignores whitespace such as spaces and new lines. Regardless of the number of spaces or new lines you specify, the browser will squish the space into a single space. To explicitly break up text, you need to tell the browser where to do so. Marking off an entire paragraph is done with the <p> and </p> tags.

One last thing to note—what about those strange little things in the signature? Because HTML reserves some symbols for it's use, you must specify such symbols in a 'code' of sorts. In this case, &mdash; (—) and &amp; (&) are encoded so they'll display correctly to the person viewing the webpage. All encodings start with an ampersand and end with a semicolon, and the value between the two specify which character to display. Most of the encoded symbols are likely ones you'll never use, but the few that are used more commonly include:

You might be wondering about that last one. It's a special case of a space to ensure that the browser will not split a series of two or more words at a line break. For instance, if you write the date as "Jan 9, 2006," the browser may put half the date at the end of one line then the other half at the beginning of the next line. To prevent this, type the HTML as "Jan&nbsp;9,&nbsp;2006." The spaces will still show up, but the browser will treat it as a single word.

Additional encodings exist for other accented letters, foreign characters (including the Greek alphabet), currency symbols, mathematical symbols, punctuation, and even shapes such as arrows or the suits from a deck of cards. Check the References page for where to find additional information on other encodings.

And there's your first HTML page! Go ahead and view the finished page. It's not exciting, but we'll spruce things up in the next lesson.

You've now learned the basic structure for every webpage you'll ever create, and how to use tags to markup text. In the next lesson, you'll learn about many more tags available for marking up your text!

1. 0. HTML Menu
2. 1. Getting Started
3. 2. Tags
4. 3. CSS
5. 4. Publishing
6. 5. The Next Level
7. 6. References