Be Like Water : The Way of the Web Designer Part 2

The Way of the Web Designer Part 2

Feb 12, 2007 | Nor Sanavongsay | Comments (1)

The Invisible Art of Coding

Why do I call it the invisible art? Well, mainly because it’s an art form that hides behind the facade of the web browser. What you see is not always what you get. When I write my codes, I think of it as writing a story. There’s a beginning, a middle, and an end. Let’s start at the beginning.

The Declaration

At the beginning of the HTML file we need to declare what type of document we are writing. We want to use the most current version possible. This is of course the web, and it is the most flexible form writing you will ever use. There are many different types of DOCTYPES to use. A List Apart does a great job of explaining what a doctype is. You can read their article here. “A doctype is short for ‘document type declaration’ which informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.”

The Head

The second thing will insert into the HTML document is the <html> tag. All the code on the page lives inside this tag. As we try to breathe life into our web sites, let’s not forget that all living thing must have a head. The head (encased in the <head> ... </head> tag) of an HTML file is where we put the brain of the document. The head holds the controls for the web site. The title for indicating which page we are viewing, the meta tags for search engines and such, the links to css for the look of the site, and javascript for more interactivity. Figure 1 shows the markup up to the head.

Figure 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>My Awesome Web Site</title>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta name="description" content="Describe what your website is about here." />
 <meta name="keywords" content="List all keywords that pertain to your site" />
 <!-- This style makes the page look nice on screen -->
 <link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" /> 
 <!-- This style makes the page look nice on paper -->
 <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" /> 
 <script type="text/javascript" src="/js/global.js"></script>
</head>

The Body

The body of the page is what the world sees. This is where we would put our content. Let’s say that we are going to layout the page as I have drawn up crudely in part one. We have a header, left navigation, content, and footer. All these core will be in the body of the document. Figure 2 shows how I would set up these boxes with DIVs and ID. Finally, close up your document with a closing </html> tag.

Figure 2

<body>
  <div id="header-wrap">
    <h1>My Awesome Web Site</h1>
    <ul id="main-nav">
      <li>Home</li>
      <li>About Us</li>
      <li>Contact Us</li>
    </ul>
  </div>
  <div id="body-wrap">
    <div id="sub-wrap">
      <ul id="sub-nav">
	<li>sub nav 1</li>
	<li>sub nav 2</li>
	<li>sub nav 3</li>
      </ul>
    </div>
    <div id="content-wrap">
      <h1>Hello World</h1>
	<p>
	    Welcome to my awesome site. 
            There is so much to learn blah blah blah.
	</p>
    </div>
   </div>
  <div id="footer-wrap">
    <p>© 2007 nawDsign, LLC. All rights reserved</p>
  </div>
</body>
</html>

The End

That’s it for the markup. Next time, we will style it with CSS.

Blog Index | Previous Entry Next Entry

Aih Feb 6, 2008 at 10:02 pm

Hi Ai Nor,

This is Aih from MN. Hey I really like your blog. Man you are awesome! Continue with the great work. I put your site as my favorite and will continue to come and check your site every now and then. Tell my cousin, Gold ( haha) I said hi!