Attribute syntax in HTML and CSS

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 recommendations1. 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

Why is hypertext blue?

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

Coding HTML in TextEdit

I received the following question from one of my online students…

” I tried opening files the book told me to, but they didn’t open in code, they just opened in regular text. Is that normal? Or am I doing something wrong?”

HTML code is created with plain text and therefore needs an editor that can work with plain text. The native text editor on the Mac is TextEdit. Unlike its PC counterpart (Notepad), TextEdit has the capacity of interpreting, editing, and saving in several formats:

  • .txt (ASCII character set, or “plain text”)
  • .rtf (Rich Text Format. A platform independent wordprocessing format)
  • .htm (HTML format)

For the purposes of coding in HTML you want to work in plain text. This is why HTML documents are platform independent. Unicode and ASCII characters are part of an open standard and are able to be written and read by all devices and platforms. An HTML document can be read by client programs regardless of whether you are on a PC or Mac, or are using any number of operating systems (proprietary or open source).

TextEdit

There are several settings to adjust before you are ready to use TextEdit as a plain text editor:

  1. Set it to work in Plain Text Mode
  2. Open and Save the document so that you can read HTML code and not have the app interpret those codes and display them as RTF.
  3. Turn off Smart Quotes

In TextEdit, you need to set some preferences to ensure you are opening, working, and saving a document in plain text mode. To do that follow the next few steps:

  1. Open TextEdit
  2. Go into preferences window [TextEdit > Preferences]

    Screenshot of Main TextEdit Menu Pullown
    TextEdit Preferences
  3. At the top of the Preferences window > Select the New Document tab

    Screen Shot: TextEdit Preferences: New Document tab
    New Document tab
  4. Under the Format Section > Select the Plain Text option

    Screen shot of plain text option
    Plain Text Option
  5. Select the Open and Save tab at the top of the Preferences window

    Screen shot of New Documents tab
    Open and Save tab
  6. In the When Opening a File Section, Select the Display HTML files as HTML code instead of formatted text option

    Screenshot of display option
    Display HTML files as HTML code…
  7. Close the Preferences window

    Screenshot of Window close button on Mac
    Mac Window close button

Note: If you already have a document open, you will need to close that document and re-open it after having made the changes to the preferences settings. They will NOT apply to your open document

Smart Quotes

Smart Quotes will break your code. Using Smart Quotes will not allow your files to validate since a “smart” quote is not the same character code as a simple ascii character.  Smart quotes show on the screen at angle, versus regular quotes that are more vertical. The browser (and validator) is looking for plain text character codes. Neither of those applications knows what to do with a smart quote. If you look at your code and everything looks OK, but the code is rendering in the browser correctly, validate the code. If you have smart quotes, the browser will tell you it has found a character that it does not recognize. I have found that this almost always means there is a smart quote issue. The validator will tell you which line the problem is on.

Screenshot: Mac: TextEdit: Turn off Smart Options
Turn off Smart Options

Solution? Make sure you that you have turned off smart quotes in TextEdit  preferences (on the New Document tab). Remember that changing settings not affect the open window. You have to close out any open windows and open them again to change the settings. After ensuring that your smart quotes are off, you should be able to open the offending files, change the smart (angled) quotes to plain text quotes (straight quotes). Validate the file again, to see if the error has disappeared. If it has, open the file in the browser and see if the page renders correctly.

Saving

You should be set. Now you should be able to create your HTML code, save it with a .htm extension, and open it in TextEdit and see the code you previously entered with no problems. To see the HTML code rendered, open that same file in a web browser.

Line Numbers

Screenshot: Mac: TextEdit: Select Line
TextEdit: Select Line

While TextEdit does not display line codes, you can still find out what line your code is on. You use Ctrl L to accomplish that. For example, say you run your code through the w3.org validator and you get an error report. “Line 13, error etc”. Go back to your code in Text Edit. Hold down the Command key and press L at the same time. An input box titled “Select Line” pops up. Enter “13” or whatever the line number with an error is, press select and voila! The requested line is highlighted. No need to hand count each line to find the error.

I hope this answered your question. If you have further question, send me an email and I’ll answer them. Let me know if you found this tutorial helpful

Save