The Way of the Web Designer Part 2
Feb 12, 2007 by Nor Sanavongsay with 1 Comments
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.
