XHTML CCIS1301 - Class 3

Class 3 - Semantic HTML, Lists, Images and links

Semantic XHTML & Web 2.0 (and beyond)

As mentioned in Class 2, the history of developing web pages started with programmers trying to fit a round peg into a square hole. Designers were giving programmers complicated and well designed layouts, but developers lacked the tools necessary to correctly code the XHTML to match the design. It wasn't until the late 90s and early 2000s that CSS gained enough browser support (compatibility) to make effective use of CSS. This resulted in many web pages being created using the <table> tag (i.e. table-based design).

With the wide-spread adoption of CSS, and better layout support, more and more designers were able to separate the design (visual component of a website) from the data ( the formatting component). In doing so, developers were able to look at a design first by the data it contained, then secondly by the layout it displayed. A paragraph would use the <p> tag, a header would use a header tag (h1 through h6) and so on. Each section on the page would have a defined "intent", which had an associated HTML tag to use. In essence, each tag in XHTML has a "meaning". Semantic XHTML is simply using the correct tag to code a part of a web page based on the content you're attempting to render / display.

Benefits of Semantic XHTML

By separating the content from the design, and using the correct tag for the correct content, you can dramatically reduce the overall file size of the web page, sometimes by as much as 80% vs. a table-based design. This has ramifications on network bandwidth, page load time and much more.

Additionally, by having all of the layout instructions in a single place, redesigns become faster and easier. A good example of the power of semantic design is :www.csszengarden.com. I strongly recommend checking out a few of the designs here. Each one has EXACTLY THE SAME XHTML! Only the CSS (or layout instructions) change.

Ordered Lists

In XHTML, one recurring concept we will see is the idea of lists. Lists are used everywhere - shopping lists, directions, instructions, guides, to-dos, definitions, and much more. Whenever we see a web page, we need to think about the correct element to use, and this is the starting point for lists.

Ordered lists are simply a list of items that need to be done in a specified order. Typically these are directions or instructions. Consider the following:

Buy Ingredients
Mix Ingredients
Place mix into pan
Bake for 30 minutes
Eat

The above could be instructions on how to bake a cake. Obviously, I can't eat the cake without mixing the ingredients first. So, there is a specific order to the tasks. These are coded using the <ol> tag and a series of <li> tags like this...

<ol>
	<li>Buy Ingredients</li>
	<li>Mix Ingredients</li>
	<li>Place mix into pan</li>
	<li>Bake for 30 minutes</li>
	<li>Eat</li>
</ol>

I like to think of these 2 tags like this...
OL = Ordered List
LI = List Item

What if I wanted to have a sub-list? Like this...

Buy Ingredients
1. Drive to store
2. Find Items
3. Purchase Items
4. Drive Home
...

As long as I properly nest (open and close in the right order), I can create sub-lists and sub-sub-lists and so on. The example above looks like:

<ol>
	<li>Buy Ingredients
		<ol>
			<li>Drive to store</li>
			<li type="A">Find Items</li>
			<li>Purchase Items</li>
			<li>Drive Home</li>
		</ol>	
	</li>
	<li>...</li>
</ol>

You may have noticed that second item there has a "B", that's because we have a few options in specifying how we want our instructions to display using the "type" attribute. Valid values are:

"A" = Uppercase letters
"a" = Lowercase letters
"1" = Numbers
"i" = Roman Numerals

Unordered lists

The direct cousin to ordered lists are unordered lists. These have a nearly identical format, but are used for a list of items that do not require a specific order. An example would be a shopping list. If you go shopping, the order in which you buy items is irrelevant, so long as you get everything on the list. Consider the following:

Milk
Eggs
Flour
Sugar

Which looks like this...

<ul>
	<li>Milk</li>
	<li>Eggs</li>
	<li>Flour</li>
	<li>Sugar</li>
</ul>

Again, like ordered lists, you can nest these...

Baking Goods
- Milk
- Eggs
- Flour
- Sugar
...

Which might look like this...

<ul>
	<li>Baking Goods
		<ul>
			<li>Milk</li>
			<li type="square">Eggs</li>
			<li>Flour</li>
			<li>Sugar</li>
		</ul>
	</li>
	<li>...</li>
</ul>

And we also have special bullet points we can use the following values for the type attibute...

"square" = Square bullet
"circle" = Circle bullet
"disc" = Disc bullet

Definition Lists

When you think of definitions, think of a glossary in a book. A glossary contains a word or phrase, and then a brief summarization or definition of that word or phrase. Definintion lists are the same, and should be used when you want to associated a word or phrase with its corresponding definition. Frequently, definition lists are also used as part of a Frequently Asked Question (FAQ) page.

Definition lists contain 3 tags:

<dl> - this is the list "container", all items will go in this element (like <ul> and <ol>)
<dt> - I like to think of this as "defintion title", this is the word or phrase we're about to elaborate on.
<dd> - This is the definition data, or explaination element.

Below is an example of a definition list:

Definition List: A defintion list is used to create a glossary of terms on a web page.
Orders List: An ordered list is used to list items which must be completed in a specified order.

The HTML looks like this...

<dl>
	<dt>Definition List</dt>
	<dd>A defintion list is used to create a glossary of terms on a web page.</dd>
	<dt>Orders List</dt>
	<dd>An ordered list is used to list items which must be completed in a specified order.</dd>
</dl>

Colors and the Web

Years ago monitors came in 2 colors - black w/green text and black w/orange text. That was it, and at the time, it was easy to display data because, well, you had no choice!

As monitors progressed, they started to support more and more colors and today can literally display millions of different colors. Occasionally, you will hear about the "web safe" colors. These refer to a pallette of 216 colors that were universally supported by all monitors in the late 90s. However, today the term is irrelvant.

It's important to understand a few things when it comes to colors and the internet - not all monitors are configured the same. Every monitor out there has the ability to adjust the display settings including saturation and hue. These changes can dramitically effect color display, and as such, make many designer's jobs more difficult. There is currently no way to ensure that "red" on my monitor will be the same "red" on your monitor.

Accessibility

Another often over-looked aspect of color on the internet is color blindness. According to some studies, as many as 25% of all men suffer from some form of mild to moderate color blindness. The most common color blindness is red-green, followed by blue-yellow color blindness, then more obscure types. It's important to know and understand the basics of color-blindness to ensure that your audience can access and view your content. For example, placing green text on a red background (while visually revolting), may render the text nearly invisible to a segment of your audience. It's important to make sure you use colors in a way that ensures maximum contrast and minimum impact for color blind individuals.

We will circle back on how to use colors later in this course.

Images

To add an image to a web page, we use the <img> tag. This is a self-closing tag, so there is no </img>. An example is below.

<img src="/path/to/image.jpg" />

Every img tag must have a "src" attribute, which contains information on how to access the file we want to include as an image.

Paths

It's important that we understand how a path for the value of our source attribute works. Consider the following directory structure...

+ C:\
	+ MyDocuments/
		+ Website/
			+ images/
				+ logo.jpg
				+ image.jpg
				+ widget.jpg
			+ products/
				+ widget.html
			+ index.html
			+ about_us.html

Here we have the C: drive, with MyDocuments folder and a subfolder "Website". In that folder are 2 more sub folders (images and products) which both contain files.

If we are on the index.html page, and want to access (include) the logo.jpg file, our img tag would look like this:

<img src="images/logo.jpg" />

or

<img src="./images/logo.jpg" />

or 

<img src="c:/MyDocuments/Website/images/logo.jpg" />

If we are on the products folder on the widget.html page, and want to access (include) the logo.jpg file, our img tag would look like this:

<img src="../images/logo.jpg" />

or

<img src="c:/MyDocuments/Website/images/logo.jpgimages/logo.jpg" />

The important think to understand here is the concept of relative and absolute paths. A "relative" path, is navigating the directory tree relative to your current position. An absolute path, is navigating from a "ROOT" (Document root, Filesystem root, or protocol root). There are 2 special ways to navigate with a relative path:

. = current directory
.. = parent directory

You can combine the ".." to get the grandparent directory (../../) or great grand parent (../../..) and so on.

Absolute paths can be absolute to the file system:

<img src="c:/MyDocuments/Website/images/logo.jpg" />

absolute to the web sites document root (if on a server - we assume here that c:/MyDocuments/Website is the document root)

<img src="/images/logo.jpg" />

or absolute using a protocol prefix

<img src="http://www.example.com/images/logo.jpg" />

Using images on a web page is subject to the same concerns we have about colors. We need to make sure they are used in a manner such that they will be meaningful to the largest possible segment of our visitors. There are a few additional considerations for images...

Accessibility

The use of colors needs to carefully consider the effects of color-blindness. The use of images, needs to carefully consider total blindness.

While you may think that the blind would not be able to effectively navigate the web, that is incorrect. There are assistive technologies out there which help blind people read web content and navigate through the pages and links effectively. The most common of these technologies is a screen reader such as JAWS. A screen reader will read aloud the HTML content to the user. But how does it read images? The answer: it doesn't, which is why it's important for use to add some descriptive text to our image HTML to ensure our content is readable. We do this by adding the "alt" attribute to the img tag.

<img src="./images/logo.jpg" alt="Corporate Logo" />

Links

Creating links in HTML is done with the <a> tag. This tag usually requires 1 attribute ("href") which directs where the link should go. There are 4 total components to a typical link. The opening tag, the href attribute, the link text and the closing tag. Below is an example of a link to amazon.com...

<a href="http://www.amazon.com">Amazon.com</a>

The value of the href follows the same path rules as the src attribute with images. The example above is using an absolute URL path.

Linking within a page

There is one other option to the <a> tag, and that is called an "internal" link. You may have noticed that when you click a link from the right side of this page, it "jumps" to a spot in this page. That is done through an internal link, and this requires 2 "a" tags to work. One that "links" and the other that identifies where to link to.

The target link (the one with the text that's clickable) would look like this:

<a href="#bottom">Bottom of page</a>

To associate that link to a position on the page, we need to create a destination link (anchor). We do that like this:

<a name="bottom"></a>

Notice how the name attribute value in the second link matches the href attribute value (with a # sign prepended) of the first link. It's important to note that in XHTML, the "name" attribute in the second link is invalid and should be an "id" attribute instead, like this:

<a id="bottom"></a>

However, this is not backwords compatible. In general, this is one of those "you need to do it wrong" parts of HTML to make sure it functions in older browsers. HOWEVER, for our homework, you will need to use the id attribute to get the internal links to validate!