>


HTML from Square One: Document Setup

Andrew Martin
Creative Director


Welcome to the first entry where I will attempt to provide an intro to HTML. I learned HTML from scratch, and I continue to write HTML from scratch, in a text editor. Why not use a graphical, user-friendly software package to create HTML instead? I have found WYSIWYG ('what you see is what you get') HTML creation applications to produce wasteful, inefficient code. While I am in no way claiming to write the world's cleanest code, I do make the attempt to write efficient code. Furthermore, with a little practice, HTML is extremely easy to learn. Coding websites from scratch can save you hundreds of dollars, as you can use a free text editor as opposed to Adobe Dreamweaver ($399) or Microsoft Expression Web ($149). If you do have some money to spend, I would suggest Panic's Coda ($99), which speeds up the HTML coding process quicker and easier. I'll write a full review of Coda at a later date. Enough introduction - let's learn the first step to HTML mastery. In these tutorials, I will be explaining a form of HTML called XHTML, which is the most common form of HTML in the modern world.

File Setup

Websites, with the exception of a simple 'splash page' website, are made up of a series of separate HTML files. For example, a small business might have five pages - Home, About Us, Services, Clients, and Contact Us. An HTML file is created for each one of these pages - in fact, the HTML file is the page. In this example, we would likely have index.html, about.html, services.html, clients.html, and contact.html. Why 'index.html' and not 'home.html'? Simply because 'index.html' is the default front page of a website. When a user directs their browser to http://www.example.com, the web server will generally send the user to http://www.example.com/index.html. While there are ways to adjust the default page, 'index.html' is the most common, and perfectly suitable for the purpose of this tutorial.

Overview
  1. Open the text editor of your choice (Notepad would be a good starting point on Windows as it's included with all versions of Window; Mac users could try TextEdit (just make sure that upon starting the program go to TextEdit>Preferences and click the 'Plain Text' radio button).
  2. Paste the following into your text editor:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example Web Page</title>
</head>
<body>
Hello, world!
</body>
</html>
  3. Save the file somewhere on your hard drive as 'index.html'. Windows users will need to set the 'Save as Type' dropdown to 'All Files (*.*). If you have the option to select the character set of the document, set it to 'UTF-8'. Next, open the file in your web browser of choice. You will see a predominantly blank document with 'Example Web Page' in the top (title) bar of your web browser application, and the words 'Hello, world!' in the main browser window. This structure is essential to an HTML document, but needs content and style, which we will explore in tutorial two and beyond.


Tags Explained

HTML code is broken up by tags, which are the items you see which are encased in < and > signs. Most HTML elements are in the category of container elements, meaning that they require a start tag and an end tag, for example, <body> and </body>, respectively. The tags determine what the browser should do with the information between the start and end tags. Some elements only need one tag, which are called empty elements, an example of this would be the <meta> tag. Notice that, in the example above, this tag has a forward slash as the second-last character, just before >. Proper XHTML code uses the forward slash in all empty elements. We will learn more about which elements are empty as we go on.

DOCTYPE is the first line of an HTML document, and tells the web browser which type of document it is looking at. In short, it specifies to which standard the HTML document is written. In our case, we are using version 1.0 of XHTML, and more specifically the Transitional document type. Doctypes can be really confusing to beginners, and explaining them thoroughly could take an entire page, so for now, be safe in the knowledge that XHTML 1.0 Transitional is the most common type in use at the moment, and will suffice for our purposes.

<html> is in a way similar to the DOCTYPE in that it specifies what type of document the browser is viewing. This element is also used as the top level of tag hierarchy; notice that between the open and close tag of the html element is the entire contents of the web page.

<head> doesn't contain any text that is actually displayed to the site visitor, but it does contain a lot of critical 'behind the scenes' information which helps configure how the web page looks and behaves. Common tags inside of the <head> element are the page title, CSS styles, Javascripts, and meta tags. We will discuss CSS in the near future, as it is an essential part of making a modern website.

<meta> tags are used for many purposes; they are used to provide miscellaneous, but important information to the browser (and web search engines). We will have a future tutorial dedicated to <meta>, but the only required tag (as listed in the example) defines the content type and character set for the browser to use. This will ensure that the content on the website (especially special characters and punctuation) will be properly displayed.

<title> contains the page title, which is displayed in the web browser's title bar. Replace the text 'Example Web Page' with whatever you would like as your web page's title. Notice that this element is inside of the <head> section of the document.

<body> contains all the content of the web page; everything the visitor sees will be inside the <body> element. Notice that 'Hello, world!' is the only text shown in the browser window of our example. In future tutorials we will be predominantly dealing with elements which are inside the <body> element, and the use of CSS to apply style to these elements.

Closing

While this tutorial may seem rather boring and mundane, a document structure such as the one in the example is absolutely vital in order that your web page is properly displayed on all web browsers, to people all over the world. Now that we have the basic framework of our HTML document, we will begin implementing content and style in future tutorials.

Web Design


Send consumers the ideal message with a custom-tailored web solution from Regal Creative. An extraordinary website doesn't need to cost a fortune; let us show you how affordable a cutting-edge web presence can be, whether your business needs a 'brochure-style' HTML website, a feature-rich content management system, or an advanced e-Commerce platform.

Search Engine Optimization


A high quality website can't live up to its full potential without a high quality stream of traffic! Regal Creative will analyze your traffic and search placement goals, as well as your keyword competition, to create and implement a strategy to greatly increase your search engine performance by means of link building and page optimization.

Graphic Design


Effective, visually appealing graphic design takes years to master. With over a decade of design experience, Regal Creative's creative team can provide your business with extraordinary logo design, print media design (business cards, brochures, postcards, etc.), and trade show display design services, and do so at an affordable rate.