QuantumTom the (nearly) daily mutterings of a so-cal [consumer of food & media] + [gearhead] + techie

11Dec/090

Chrome Imitating IE

A new Chrome extension allows you to render a web page in a standalone tab as if it were Internet Explorer.

I've been dreaming about this. No more switching browsers.

Check out the Chrome IE tab.

Schweet.

Tagged as: No Comments
10Nov/090

More Robots

Crazy.

19Aug/090

Microsoft versus Standards

When it comes to standards, it seems like Microsoft is always on the wrong side of the argument.

Microsoft has always battled rumors that it has a secret "standards mantra" amongst its upper management. It is known as the the three E's. Those E's stand for "embrace (the standard), extend (the standard) and extinguish (the competition)."

The HTML standard, and what they did to it, are a perfect example of this.

In the early days of the wild wild web there was NCSA Mosaic, the earliest popular web browser. Mosaic begat Netscape Navigator. And from the same ashes came Internet Explorer. Version 4 of these browsers was hardly distinguishable. On the surface.

Meanwhile, a tiny standards organization, the World Wide Web Consortium (W3C) had released a comprehensive RFC documenting what HTML is supposed to be capable of. Originally Microsoft embraced this standard, but it wasn't long before they decided that there were a whole lot of things it was missing. Things like event handlers and page transitions.

And IE would render a lot of poorly formed HTML. And I do mean poorly. Put an attribute in a tag without a value? No problem. No doublequotes around your attribute value? No problem. Anyone who has ever tried parsing bad XML knows how frustrating it can be to have just one illegal character in your CDATA. IE let it all through and didn't really adhere to any convention of rules.

As a web developer, learning to build web pages for this browser made it into a kind of "Dark Art." Building HTML tables was like sorcery, hyperlink an image and hide the annoying blue border? Without using a stylesheet? Oooooh, you are the <jedi>master</jedi>.

This is probably going to turn out to be one of those posts where I start out strong, focused and having a point, then rapidly devolve into blathering, nonsensical gobbledeygook right about...

Here.

Oh, so the idea was, join up with everyone else in "embracing" the standard. Love it so much that you add on your own stuff to the technology, so much so that your "player" or "reader" or "application" is the only one that can read all those extra little features. Now that everyone is using all the cool new tricks that you and you alone have employed no one will want to use the boring old standardized document drive (in this case, a web broswer). And voila, no more competition.

To be continued...

22Feb/090

Whitehouse.gov Deconstructed

Just found a great article deconstructing the Obama administration's take on website design for the whitehouse.gov website.

Check it out at Abduzeedo.com.

17Feb/092

HTML Basics: Anchor tags

In an effort to foster my father's growing interest in web publishing, I've written a rather verbose explanation on how to get a hyperlink to open in a new window. It includes a rudimentary explanation of the HTML tag and its attributes.

Web site texts often have links to other material, signified by the key word being underlined. Click on it, and see the referred to material.

That seems to work two ways: (1) your computer leaves the page it's been on, and instead of that page, the clicked-on link page shows up, so you've apparently left where you were; and (2) the clicked-on material is superimposed over the page that referred to it, so you've not left the site you were on, and when you close the super'd material, you're back where you started.

I prefer #2. How do I set up links that behave that way, and not the #1 way?

-- Dad

What you're talking about is a hyperlink. You can specify the "target" for the hyperlink. By default, this is the same window that contains the page with the hyperlink. If you'd like this to be another window, you must specify that. To do this, you need to add a little something to the HTML tag that defines the hyperlink.

Before you get overwhelmed by this, remember that HTML is not a programming language. It was designed to be used by people like you, who didn't have a lot of familiarity with computer science, but who could use a word processor.

An HTML tag is basically a way of editing text. HTML stands for HyperText Markup Language. The word markup is simply a reference to the traditional editorial process in publishing, where modifications are made to copy - the text gets "marked up."

Adhering to the elegant nature of computer mathematics, the text that is to be marked up is defined at its beginning and at its end, just like you were going to use a highlighter on a passage in a text book.

To define the boundaries of the text that is to be marked up, we use what are called "HTML tags," which come in pairs. HTML tags have a starting part and an ending part. The starting part is where all the fun stuff is. The ending part is always very simple looking.

A simple example of this is the bold HTML tag. It looks like this:

To make a word appear in bold you need to include the <b>start and end</b> of the tags.

That will make the copy look like this:

To make a word appear in bold you need to include the start and end of the tag.

The starting HTML bold tag is the letter b enclosed by the less than and greater than signs. This tells Safari to start making all the letters bold until further notice.

A hyperlink is defined using something called an "anchor" tag. It looks like this:

HTML
Put the <A href="#">hyperlinked text</A> between the two anchor tags.

BROWSER
Put the hyperlinked text between the two anchor tags.

You probably noticed that this is different from the bold tag. There is something else inside the start tag. This is called an attribute. HTML tags can do simple little things like define text style (e.g. bold, italics, color, size), but can also give them more complex attributes and behaviors.

A hyperlink won't do much good unless we tell the tag where we want it to go. We do this by using one of the anchor tag's attributes. This attribute is called the "href," or hyperlink reference. Think of it as directional signage for a freeway onramp, "This is the 405 North. If you get on here you will go to Sacramento."

I'm guessing you figured out what the equals sign means. This is how you describe the value of the href attribute for the anchor tag. You need to tell it what the value is by enclosing it in quotes, specifically, double-quotes. Like all paired punctuation, this tells the attribute where its value starts and where it ends.

So what does the number sign mean?

The number sign is the simplest of all values you can put inside the double quote. All it does is point back at itself saying link right back here to me. By itself, it's not really good for much other than explaining how an anchor tag works.

If you want a link to go to Google or Yahoo!, put the full address for that website inside the double quotes for the href attribute. That means the full "URL" which includes the http:// as well as the www.domainname.com.

HTML
<A href="http://www.yahoo.com">This is a link that will go to Yahoo!</A>.

BROWSER
This is a link that will go to Yahoo!.

So, how does one make a hyperlink that opens in a new browser window?

To make a hyperlink that opens in a new browser window (tabs are windows as far as HTML is concerned) you need to add an optional attribute to the anchor tag, the "target" attribute.

The target attribute is your way of saying to the browser, "Okay, you know where this link goes, but I want you to open the hyperlink in a special place. That special place is the target called ______."

Once you specify the target, the browser is going to look to open your hyperlink in that target location. Without getting too deep into something called the DOM (Document Object Model), the browser will try to identify the window that you named. If it can't find a window with that name, it is going to assume you want to open a new window. And it is going to take the name you specified and assign it to the new window.

That last part is not really practical until you start using Javascript, but it's kind of important to round out the explanation.

So what does this all look like?

HTML
A hyperlinik for <a href="http://www.google.com" target="theNameOfTheTarget">Google</a> that will open in a new window.

BROWSER
A hyperlinik for Google that will open in a new window.

A more concise explanation can be found here:

http://www.w3schools.com/HTML/html_links.asp