dalerrogers.com

A student asks…

“Just to clarify, the primary purpose of the width and height attributes is to reserve space for the image, not to actually resize the image, correct? “

The width and height attributes on the img tag actually do both; they reserve the screen real-estate and also resize the image.

Reserving real-estate

When you think about, what is HTML markup? It is a collection of content surrounding by tags giving instructions to a browser. All of it is ASCII text. There are  no embedded images or media like you might have in a pdf, or Word document. All resources other than text are referenced as external files. For example, look at the following example:

<img src="images/logo.gif" width="100" height="50" />

The browser is being instructed to reserve a place on the screen 100 pixels wide and 50 pixels tall for the logo.gif image, in the images directory, that will be referenced as an external file. Since all media resides outside the HTML file, then what we are doing is preparing a place on the screen where the media will be shown.

Providing Dimensions

The attribute values of width=”100″ height=”50″ state that a definite amount of screen space is being reserved. The image will be forced into those dimensions. If we do not provide the dimensions, the browser will calculate them based on the actual image dimensions; which may or may not throw off our design. Many designers recommend providing the dimensions to take that additional computational burden off the browser.

Here are some things to think about

• If the image dimensions we provide are not the same as the original dimension, some distortion will take place
• If the original image dimensions are much larger than the ones we specify in the attribute values, then we are wasting bandwidth. The entire image has to be downloaded and then resized before rendered. Why download a 1 MB image and resize it, if a 20 kB image will do?
• If the original image dimensions are much smaller than the ones we specify in the attribute values, then the image will appear pixelated because it is being scaled up.

Best practices

Remember, you always have to think about the output. Keep different versions of the image to be used for different output resolutions. For example, if you have a 1 MB version of a logo for printed material, resize it for web delivery. Determined how many colors, and what size you need for the screen and then save an appropriate version for the web that has the needed dimensions, color depth, and resolution (72ppi). Put those dimensions into the width and height attribute values of your <img> tag. In that way, the image is web optimized. What you see in your image editing program is what you see on your web page. You are taking the resizing calculation burden off the browser, maximizing bandwidth, and preventing your image from distortion problems.

A student asked the following question…

“I understand what we’re doing, but I’m worried about memorizing all of the coding. It might help if I understood the reasons behind all of it. For example, why do font changes need semicolons on them and not just a closing quotation mark like other things?”

Great question and I believe what you are referring to is the difference between an attribute in a HTML tag and a property declaration in CSS. In HTML, an attribute modifies or embellishes a tag. Attributes follow the following syntax:

<tagName attribute=”value”> Some content </tagName>

The value is always surrounded by quotation marks. For some attributes like href for example, it is easy to see.

<a href=”some URL”> link text </a>

Specifying the type of font I want to display is a bit different since we no longer use the <font> tag in xHTML. Cascading Style Sheet, CSS, declarations are used to specify font presentation as outlined in the W3C recommendations¹. Properties in CSS are defined using the following syntax

property: value;

If I want to change the font family for a specific paragraph using an inline Cascading Style Sheet declaration, I need to use a CSS declaration within the context of a HTML tag. An attribute was created to accomplish that, the style attribute. The basic syntax of that code would look like…

<tagName style=”CSS declaration”> some content</tagName>

So, for example, lets say I have a <h1> heading element. I would like the heading to be in a Verdana font. If a Verdana font is not available on the viewers computers, I’d settle for an Arial font. If neither is available, I at least want a sans-serif font used. In CSS syntax that would look like the following”

font-family: Verdana, Arial, sans-serif;

Now, let’s place that CSS declaration into a HTML attribute

<h1 style=”font-family: Verdana, Arial, sans-serif;”> Some content </h1>

That is why the punctuation of colons, commas, and semi-colons all have to be included between the quotation marks. It is because the CSS syntax has to fit within the HTML syntax.

References

Lie, Håkon Wium and Bos, Bert (April 2008). Basic concepts. Cascading Style Sheets, level 1 W3C Recommendation. http://www.w3.org/TR/REC-CSS1/#basic-concepts

A student asked the design question, “Why is hypertext blue?”

I was able to speculate why as a designer I might have chosen the color blue over another; like red. Red indicates alarm where blue is less intimidating yet still provides a strong contrast with surrounding black text and a white background. However, I could not answer the question in terms of any supporting specification on the W3C (World Wide Consortium) web site.

After some searching, I discovered the following answer from the inventor of the World Wide Web, Lee Berners. The following quote is an excerpt from his FAQ web page…

“There is no reason why one should use color, or blue, to signify links: it is just a default. I think the first WWW client (WorldWideWeb I wrote for the NeXT) used just underline to represent link, as it was a spare emphasis form which isn’t used much in real documents. Blue came in as browsers went color – I don’t remember which was the first to use blue. You can change the defaults in most browsers, and certainly in HTML documents, and of course with CSS style sheets. There are many examples of style sheets which use different colors.

My guess is that blue is the darkest color and so threatens the legibility least. I used green whenever I could in the early WWW design, for nature and because it is supposed to be relaxing. Robert Cailliau made the WWW icon in many colors but chose green as he had always seen W in his head as green.”

Well there you have it. Blue is a default. There was no design decision on the part of the W3C and the reasons for its usage might be more attributed to  decisions of particular browser developers. My guess is that someone used it, it worked, and others reasoned that “if it ain’t broke, don’t fix it.” Sometimes standards come into practice more out of habit than anything else. This may be one of those instances.

Note: If any reader knows for sure, I welcome a comment indicating as such.

References

Berners, Lee (n.d.) Frequently Asked Questions. http://www.w3.org/People/Berners-Lee/FAQ.html