First web page with HTML (MFW#3)

“My First Website” series navigation: first postwhole series


My First Website 3Now 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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:

<html xmlns="http://www.w3.org/1999/xhtml">

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:

<head>
<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>

<body>
<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!

</html>

Putting it all together

Now we’re done! Here is the complete markup for our very first (and very 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">

<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>

View the actual web page

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!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



4 Responses:

  1. Mike

    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!

  2. David R - Admin

    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

  3. Gil Brown

    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.

  4. Tom

    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


Share your thoughts below: