First web page with HTML (MFW#3)
“My First Website” series navigation: first post — whole series
Now it’s time to make our first web page with HTML! This, of course, is going to be a very, very basic web page. But it’s important to understand exactly what the HTML of a basic web page looks like and how each HTML element and tag function.
So let’s dive right in, cut to the chase, get to the point, (and any other expressions that you know of that make good transitions in writing… 
)
All HTML web pages MUST have these
All web pages must contain certain “elements” or “items” that allow browsers to recognize them as being web pages. As you may have experienced, your browser can render (display on your screen) many kinds of files such as single images, .PDF files, audio-only pages, and a multitude of others. So, in order for your browser to know that your web page really IS a web page, it must contain the following:
- a doctype
- an <html> tag
- a <head> tag
- a <title> tag
- a <body> tag
Let’s take a closer look at each of these so we can finally feel intelligent about HTML website design!
The doctype (Document Type Declaration)
The Document Type Declaration or doctype for short, basically says “Yo browser! This is a web page. It’s written in XHTML. Render it this way. Got it?” Since there are many different types of files that a browser can render and just as many types of HTML and XHTML, the doctype is a must-have.
The position of the doctype is very important. It absolutely, positively must be located at the very top of your web page since your browser can’t do anything with your web page file until it knows exactly what it is.
Here is what the complex doctype looks like:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Don’t worry about trying to memorize this jumble of HTML code. Most professional website designers do what I do: just copy and paste it to the top of every web page.
The <html> element
Now that the browser has a clue about what kind of file our web page is, we need to give it some HTML! If you read the post on what is HTML (you can read it here) then you know that all tags must have an opening and a closing. The opening tag says “begin here” and the closing tag says “end here”. Following is the <html> that you need for your web page:
Again, don’t worry about memorizing this, just copy and paste.
The <head> element
The head element is where you store information about your web page. Some information may include the web page’s title, a description of your web page (used by search engines), a keyword list (also used by search engines), a link to your CSS file, and others. For the time being, we will only concentrate on two of these: the title tag and the charaset meta element.
The <title> element
The title element tells the browser the name of your web page. This name appears in many places:
- At the top of the browser window
- In the Windows Taskbar or the Mac Dock
- In the Favorites or Bookmarks menu of your browser
- In the search engine results page (the page you see when searching on Google, Yahoo, etc.)
Because the title tag can give vital information about your web page, it’s important to make it more detailed than just “Home”. (More on proper title tag construction in future posts.)
The charaset meta element
There are actually many ways to display text on a computer, and each way has its own encoding. The meta element of charaset (which is short for character set) tells the browser to read your text as “UTF-8″. UTF-8 is a globally recognized encoding for text that all browsers can read — perfect!
As a newbie to website design, it really isn’t important to fully understand text encoding. Just make sure to use the code listed below and all will be fine. Speaking of which, here is the complete head section of your web page:
<title>My First Website</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
Where it all happens: the <body> element
This is it! In-between the <body></body> tags is where you put all of the actual content (text, images, and other goodies) that will be visible to your website’s visitors. Since this is our first example of a web page, let’s keep it simple by only using the paragraph tags: <p> </p>
<p>Here is some sample text that will appear in your browser.</p>
</body>
One last thing
I’d like to show you the whole HTML markup for this web page, but I can’t just yet. There is one last thing. We still have to put the closing </html> tag at the bottom of the page!
Putting it all together
Now we’re done! Here is the complete markup for our very first (and very simple) web page:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My First Website</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body>
<p>Here is some sample text that will appear in your browser.</p>
</body>
</html>
Note: after clicking on the above link, right-click on that web page and choose “View Source” to see the HTML markup. It’s the same as what we created above!
Conclusion
Yes, I do realize that this is by far the most basic web page in the world — no color, no images, no links, and pathetic text to read — but it is necessary to understand what makes up an HTML web page before moving into the really cool stuff.
In the next installment in the “My First Website” series, we’ll start playing around with the <body> element to add some headings and text.
Until next time!
Jul 04, 2009 at 7:53 am
I always thought that I had to memorize a lot of that html stuff. It’s nice to know that even the pros don’t even try to remember it all. Copy and paste will become my new best friends!
Thx!
Jul 13, 2009 at 3:40 am
Mike,
Hang in there. In a short amount of time the most often used code will flow from your fingertips just like writing an e-mail to a friend!
-David
Jul 31, 2009 at 4:03 pm
Ok David, I hope I’m not making too many suggestions but…would it be possible to link this section in the “conclusions: to the next lesson in your series. Somehow, I got lost and wasn’t sure if I was on the correct next step. Thanks.
Jan 10, 2010 at 10:06 pm
Hi David,
I am keen to pick up the basics of website building and design as I have a new job in ecommerce. Having stumbled across this blog I wanted to say that so far it’s by far the best resource I’ve found for beginners, including the many books I have opened and more often than not hastily closed.
Is the blog still active? Also, do you know of any similarly good resources for Web design and also SEO?
Thanks,
Tom