Inline Quotations

by | Dec 19, 2005 | XHTML

Short inline quotations can actually be incorporated into your html via the q tag. This allows you to skip the actual quotations marks. 

<p>
Steve Jobs told us, 
<q> lang="en-us">design is not just what it looks like and feels like, design is how it works.</q>
</p>

Note that it is also a good idea to add the lang attribute when using q elements.

You can use the lang attribute other tags such as the paragraph tag, if for example you had one paragraph in a different language than your document.

HTML Lists Tags

by | Dec 17, 2005 | XHTML

One easy way to start coding semantically is to use lists tags. For me personally, lists tend to organize my HTML code and make content more readable in general. Lets look at three basic tags that everyone can use, starting with the most common.

The Unordered List

This is probably the tag that we rely most often on. Many designers use it to create link menus as well as the occasional content list. In our example we are going to organize some audio tracks that I got from Apple’s iTunes Store.

<h4>My iTunes Music</h4>
<ul>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ul>

The above code will render with a bullet for each item, and automatically indent. It should look something like this:

My iTunes Music

  • Man In the Box – Alice In Chains
  • Cool – Gwen Stefani
  • Killing Me Softly with His Song – Fugees
  • Not Gonna Get Us – t.A.T.u.
  • Born Under a Bad Sign – Jimmy Hendrix

But how about if I wanted to organize each of my iTunes tracks? Perhaps I had many of them and I wanted to have them all numbered. In this case, the standard unordered list tag is not what I really need.

The Ordered List

Enter the ordered list tag which can automatically number all my items for me. 

<h4>My iTunes Music</h4>
<ol>
  <li>Man In the Box - Alice In Chains</li>
  <li>Cool - Gwen Stefani</li>
  <li>Killing Me Softly with His Song - Fugees</li>
  <li>Not Gonna Get Us - t.A.T.u.</li>
  <li>Born Under a Bad Sign - Jimmy Hendrix</li>
</ol>

Using CSS, I can also style the ordered list using the list-style-type property so that the default list style can be:

  • decimal: 1, 2, 3,…
  • upper-alpha: A, B, C,…
  • lower-alpha: a, b, c,…
  • upper-roman: I, II, III,…
  • lower-roman: i, ii, iii,…
  • none:

The standard decimal default, of the ordered list for my iTunes tracks automatically numbers each of the items for me, so that I do not have to worry about actually adding numbers between the li tags.

My iTunes Music

  1. Man In the Box – Alice In Chains
  2. Cool – Gwen Stefani
  3. Killing Me Softly with His Song – Fugees
  4. Not Gonna Get Us – t.A.T.u.
  5. Born Under a Bad Sign – Jimmy Hendrix

However, after ordering my iTunes tracks, I decide that I would rather organize my tunes according to artist, since my collection has grown and now includes multiple tracks from the same artist.

The Definition List

In this case, I am going to change my list and make things even more structured.

<h4>My iTunes Music by Artist</h4>
<dl>
  <dt>Alice In Chains</dt>
    <dd>Main In the Box</dd>
    <dd>Would? (Unplugged)</dd>
  <dt>Gwen Stefani</dt>
    <dd>Cool</dd>
  <dt>Fugees</dt>
    <dd>Killing Me Softly with His Song</dd>
  <dt>t.A.T.u.</dt>
    <dd>Not Gonna Get Us</dd>
  <dt>Jimmy Hendrix</dt>
    <dd>Born Under a Bad Sign</dd>
</dl>

By using the multiple dd tags, for the same dt tag, I have an easy way of organizing my songs by artist.

My iTunes Music by Artist

Alice In Chains
Main In the Box
Would? (Unplugged)
Gwen Stefani
Cool
Fugees
Killing Me Softly with His Song
t.A.T.u.
Not Gonna Get Us
Jimmy Hendrix
Born Under a Bad Sign

By using common list tags like the Unordered List, Ordered List, and Definition List you can quickly add structure to your HTML and at the same time use CSS more effectively to quickly add design elements to your page.

So You Want To Learn HTML

by | Nov 28, 2005 | XHTML

Every now and then someone asks me how they can learn how to put together web sites, and I always find it somewhat difficult to answer this question, when I do not know much about the person asking the question. Honestly site design can mean so many different things that there is not one answer that will satisfy everyone. Instead of trying to give an overall answer, let me be more specific. Suppose you have a lot of patience, you have an internet connection, and a lot of time to spend on a computer, but you do not know anything about web servers or HTML, but you at least know how to use Word on your computer. Basically you are starting from scratch.

The first thing you need to do is go to your local library and find the computer books section. This section will have lots of old outdated computer books which no one has read in over a year or two. However, the HTML 4 and XHTML books are what you are looking for. Browse through them all until you find a few that you are comfortable with and go home and read them. At the same time start looking at web sites that cover XHTML and CSS.

Eventually you need to start creating your first site in basic HTML on your computer. You will make many revisions and versions, the more you create, the more you will get the hang of it. Once you have the experience of working with HTML and CSS, you probably will need to re-read some of those books you checked out the library and this time around you probably will gravitate to certain areas of web design that you find more interesting. At this time I would recommend you check out The CSS Anthology, which is a great overall CSS book. You will also come to realize the differences between XHTML and HTML and hopefully gravitate to at least Transitional XHTML. For an overall argument for XHTML check out Jeffrey Zeldman’s Designing With Web Standards and for practical applications of XHTML you can take a look at Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm.

After all the reading and hands on coding, you can explore the infinite resources of the Internet and HTML and XHTML will just make sense to you. There is always more to learn, but this is just to get you started. Good Luck!

Learning To Use XHTML 1.0 Strict

by | Oct 18, 2005 | XHTML

Let’s face it, not very many of us are actually using XHTML 1.0, and for those of us who are, we are reaching for Transitional, instead of Strict. Somehow we still find table layouts to be very appealing and easy to work with, and div layouts just too hard to envision when we are trying to rush. However we can not just give in all the time, we need to start using XHTML and probably the easiest way to do so is on the pages we least design, namely those text based pages that we often never look at on web sites. I am talking about the Privacy Policy and the Terms of Use disclaimer pages that many sites have and which we hardly pay attention to. Most times these are basic text-only pages that have very little styling and there to look more like paper based legal contracts than anything else. And so lets forget about divs for a minutes and just put together a basic XHTML 1.0 Strict page.

The DOC TYPE

This is what your first few lines of your XHTML page should look like.

<!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" xml:lang="en" lang="en">

This is the standard 1.0 Strict doctype. For a more thorough explanation of doctypes see W3Schools.com.

The Header Section

For me personally, the header section is really about providing the browser with needed information, and for tagging your document so that both search engines and people know what the document is about. Here is my version of a standard header section.

<head>
 <title>WebKeyDesign: Terms of Use</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="description" content="WebKeyDesign's Terms of Use for our website." />
	<meta name="keywords" content="webkeydesign,privacy,policy," />
	<meta name="author" content="WebKeyDesign" />
	<meta name="robots" content="noindex,nofollow" />
	<link rel="icon" href="https://www.webkeydesign.com/favicon.ico" type="image/x-icon"  />
	<link rel="stylesheet" type="text/css" href="legal.css" />
</head>

The first meta tag tells the browser what character set you are using. Most of the time we use ISO-8859-1 or UTF-8 for unicode. I like to include the author tag, but this is not necessary. Since this is a legal page, I do not think it really requires indexing, especially, if I decide to change things, I do not want search engines keeping this page cached, therefore the robots tag is set to not index anything.

Lastly we have the standard favicon link, again this is not necessary, it is just something I personally prefer. We are specifying an external stylesheet, as this is XHTML and the idea is to separate content from layout.

The Body

For the actual content of the page, you may choose to either limit yourself to just h1 thru h5 tags along with standard paragraph tags, or perhaps use just three main divs to layout the document. Usually a header, a content, and a footer section is all the layout you need for a text based document as this. 

<body>
  <div id="header"> <h1>WebKeyDesign Privacy Policy</h1></div>
  <div id="content"><p>This is our privacy policy and so on.... </p></div>
  <div id="footer"><p>This is our site navigation or standard footer</p></div>
</body>
</html>

Validate Your Code

At this point we are done, but sometimes, after writing such long text based documents, we are not so good at checking out work, and that is when you should let an online validation tool like WebDesignGroup’s Validator Tool check your page for any typos you might have let through. Once your page validates without error, it’s time to post it live, and bask in the knowledge that you just completed your first XHTML Strict 1.0 page. It may not be fancy, but it’s still XHMTL Strict.