Why HCd? Testimonials & Awards Bio: J. Hogue Bio: James Re Studies in [Web] Design HCd>CMS Tutorials Found Thoughts Contact / Location

So you want to become a better web designer

Hello, welcome. Don’t be afraid. I’m here to tell you about standards compliant web design. We’ll be talking about XHTML, CSS, and maybe even PHP once we get there. Bored yet?

First, before you learn about CSS, you should probably know the basics of nice, clean html markup. And actually, what I am going to show you is XHTML. The X is for eXtensible HyperText Markup Language. XHTML is the way browsers will work in the future – it is cleaner and more compatible with new styles of rendering pages – so I feel that it is important to learn it this way.

There is a coding movement out there called POSH. Simply put, POSH is a method of using as many existing and therefore default-designed HTML tags for content. That way, even when CSS is not loaded, the page has a default browser hierarchy. HCd believes in POSH – though maybe not to the letter – and practices as many of the common-sense tenants proposed by the idea. Read on to learn more

A Quick Overview of the Web

But how does it all work? In case you haven’t heard it explained yet, here is a run-down of how the world wide web works. First and foremost, you need to own a domain name or at least have access to someone else’s domain name (at this point I will plug a site like Register.com or NetworkSolutions.com as a recommended place to purchase a domain name from. Other, cheaper providers will make it difficult later to gain control of your DNS in case you want to change servers).

Then, you need a web server to host your pages so they are available to the whole world. Internet Service Providers (ISPs) can range from $3.00 a month to $200.00 a month or more depending on the range of services that you need; bandwidth (how much traffic you expect monthly), disk space (how many files that will be hosting), how many emails, whether or not you need a database, and what kind of server (Windows, Linux, Unix, Mac) you want. A basic $5.00 a month plan that we would recommend has plenty of bandwidth, disk space and emails for most people (unless you are planning to share high-bandwidth items like video and music) but we would recommend to be sure that your ISP provides an installation of PHP and access to at least one mySQL database. Both PHP and mySQL are open source, free programs that should not have to cost you extra. They generally run on Linux (an open source, free operating system) machines best; typically, the places that charge you more for this free software are running Windows machines (Microsoft would rather have you pay extra for ASP and SQL, their versions of PHP and mySQL).

So what happens when someone types that domain into a browser? The request for that URL goes out to a server that lists all the registered domain names and what server they should point to. The request goes out for your URL, and the server says “look over here for that web site”. That server is called a name server, and it uses a DNS record to locate your ISP. Now that the browser knows where to look, and your ISP is contacted, it serves up the page being requested. If the user is just requesting the web page without a particular page in mind, then your ISP assumes it wants the first page, which should be named either “index.htm” or “default.htm” depending on what your ISP prefers.

RECAP: To have a functioning web page, you need a place to host your page (an ISP), a domain name registered with a DNS record of the nameserver of your ISP, and a file for your homepage, either called index.htm or default.htm. An advanced user would know that you could use a friend’s server as well, and the address you would type into the browser could look like this: http://www.friendsite.com/yourname/yourfilename.html.

HTML Editing Programs

There are many programs that will write HTML code and post it to a web server for the world to see. There are a few programs, though, that I would not recommend: Frontpage or Microsoft Word are software programs that edit HTML, but their code is very messy and non-compliant. Adobe’s old GoLive software is buggy as well. For the serious coder, someone who doesn’t need WYSIWYG software, a free program like Page Spinner or Text Wrangler will do a great job. Just upload it to a server to see what the code renders like. Not all of these free or shareware programs will have a component that also uploads your pages to a server; you might need another program for that. In that case, you may need to look for an FTP program; a few I can recommend are Transmit (by Panic.com) and Adobe’s Fetch.

Some designers/users like to see their code before they upload it to a server. A good WYSIWYG software program that you have probably heard of is Adobe Dreamweaver. At HCd, we don’t need to see a preview, and we know to look at our code in at least three different browsers to really see what it is going to look like. We use Coda, by Panic.com, which is an editor, FTP client, and shell-access (Terminal) client all rolled into one.

Page Structure

Ok, now you are ready for the real stuff. An html page is made up of a few basic things: a Doc Type, an opening HTML tag, HEAD tags, BODY tags, and a closing HTML tag. In between the HEAD tags we put things like a document title, meta tags (tags that search engines like to read), links to javascript files, links to css files and any stray javascript code or css styles that you may need. Nothing within the HEAD tags will be seen by the visitor, except the document title will appear in the top of the browser window. In between the BODY tags go the actual content of the page. A very simple page without a Doc Type would look like this:

<html>
  <head>
    <title>A Simple Sample Page</title>
  </head>
  <body>
    This is the text that the visitor will see.
  </body>
</html>

Doc Types

At the head of every (x)html document, the first thing you should see is a document type declaration. This tells the browser (Internet Explorer, Firefox, Safari, Opera, etc...) how to handle the document. Without going into too much detail, when using xhtml you should use an xhtml doc type declaration. This makes sure that the browser will treat the following code properly. Using a regular html doc type and xhtml markup will cause the page to render funny. So, this is the Doc Type that I recommend:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and then, follow it with the proper <html> opening tag.

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

For more information on Doc Types, read ALA and for a complete list of them, read the W3.

Acceptable Markup

Markup is the language that is used to write HTML code, and the type of markup we want to use is XHTML. The differences between HTML and XHTML are slight; XHTML is more strict than HTML. The main difference is that any single tags need to be closed as if they were double tags to ensure that the page is rendered properly. Below is a table that shows you the HTML and its XHTML preferred equivalent:

type of markup HTML XHTML
meta tag: <meta type="keyword"> <meta type="keyword" />
image tag: <img src="image.jpg"> <img src="image.jpg" alt="required" />
form input tag: <input type="text"> <input type="text" />
line break: <br> <br />
horizontal rule: <hr> <hr />
bold tag: <b> </b> <strong> </strong>
italic tag: <i> </i> <em> </em>

This is a partial list, but you get the idea. As a rule of thumb, if you have a tag that is only one line, close it with a “/”. The bold and italic tags, however, are slowly being changed to “strong” and “em” respectively. While it is good to use the new standards, for now, it is not neccesary, as old code that uses the “b” and “i” tags will still be supported.

RECAP

An acceptable page design in XHTML with the proper head tag and some content, therefore, could look like this:

<!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 >A Simple Sample Page</title >
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <meta name="keywords" content="some important stuff 
       that you want search engines to look at" />
     </head>
   <body>
      <img src="animage.jpg" width="480" height="100" 
        alt="This tag gets read aloud by screen readers for deaf people" />
      <h1>This is a very important heading </h1>
      <h2>This is a less important heading </h2>
      <p>This is a paragraph tag with some text <strong>emphasized</strong> and some 
        text that links <a href="http://www.adifferentwebsite.com">to another page</a>.</p> 
  </body>
</html>

 

Ready for more? Go on to our Introduction to CSS.

Notice: Undefined property: StaticPage::$id in /htdocs/content/layouts/studio.php on line 130