Browser Tools

Your browser contains a couple tools which can help you be a better web designer.

View Source

All modern browsers contain a "View Source" command which lets you see the underlying XHTML.

Digression on Internet Explorer 6

Why isn't Internet Explorer 6 included on that list? Simple: I do not consider Internet Explorer 6 to be a "modern" browser. (If you would like to use IE6 to view source, it can be found under View -> Source.)

I'm not going to beat around the bush on this one: Internet Explorer 6 is a terrible browser. Internet Explorer's rendering engine, called Trident, isn't nearly as accurate as WebKit (Safari) and Gecko (Firefox). Trident has a lot of trouble with CSS, namely, the box model, padding, margins, indentation, and many other things which you will learn about later. Trident has even more trouble with JavaScript. Code that validates fine (you will learn about validation in a moment) and looks great in Firefox might be completely borked in IE6.

As if IE6's rendering problems weren't enough, IE6 is also a terribly unsecure browser. IE6's tight integration with Windows Explorer (the program you use to browse files on your PC) means that malicious code can easily work its way into your system without your knowledge.

If you haven't already migrated to IE7, you should upgrade immediately, regardless of whether or not you use Firefox as a primary browser. The security improvements are that important. IE7 also comes within about 80% of being as good as Firefox with respect to rendering. That said, you should really be using Firefox for your everyday browser if you are on Windows.

Download Image

Modern browsers and IE6 have the ability to download images to any specified location. Right-click on the image in question and select Save Image to Desktop (Safari), Save Image As (Firefox/IE7), or Save Picture As (IE6).

Firefox's Web Developer Tools

While I prefer Safari for everyday browsing, I keep Firefox around because it has a couple of wonderful extensions that are extremely helpful for web designers.

Validating your Code

Writing valid code is important. If you write valid code, you virtually ensure that future browsers will be able to read your code. You also virtually ensure that Safari and Firefox can read your code.

That said, not everyone writes valid code and the vast majority of websites on the web will not validate. This is mostly because of Internet Explorer's blatant disregard for standards. Since IE6 is the dominant browser, clocking in at somewhere between 75%-85% of all users browsers, many people see no incentive to write valid code.

However, that doesn't mean you shouldn't. Valid code is the mark of a careful and dedicated web designer. For the heck of it, lets go ahead and validate our quotes page.

To validate your code, head over to The W3C Markup Validation Service and copy and paste our quotes page right in.

source

Quotes Page:

<html>
<head>
<title>Battlestar Galactica Quotes</title>
</head>
<body>

<h2>Battlestar Galactica Quotes:</h2>

<p>
  <b>Admiral Cain:</b> Commander, why are you launching 
                Vipers? <br />
  <b>Commander Adama:</b> Please arrange for Chief Tyrol 
                   and Lieutenant Agathon to be 
                   handed over to my marines as 
                   soon as they arrive. <br />
  <b>Cain:</b> I don't take orders from you! <br />
  <b>Adama:</b> Call it whatever you like. I'm 
         getting my men. <br />
  <b>Cain:</b>  You are making <i>such</i> a mistake! <br />
  <b>Adama:</b>  I'm getting my men. 
</p>

<p>
  <b>Commander Adama:</b> There's a reason you separate 
                   military and the police. One 
                   fights the enemies of the state,
                   the other serves and protects 
                   the people. When the military 
                   becomes both, then the enemies 
                   of the state tend to become 
                   the people.
</p>

<p>
  <b>Commander Adama:</b> Sometimes, you have to 
                   roll a hard six.
</p>
</body>
</html>

Validating our code produces only one error: no doctype declaration. Doctype declarations are extremely important but a little weird, and they will be discussed in lesson four.

That said, the code above is otherwise valid. See? It isn't that hard to write valid code, and this tutorial will not teach you any invalid methods. It is in your best interest, as well as the World Wide Web's best interest, to write valid code.

On a final note, there will occasionally be things that are impossible to validate, and if you ever use a CMS (content management system), various quirks may seep into your code. Do not worry too much about them. Minor errors that do not cause your code to completely bork are, in most cases, just fine. It is complete and utter code soup that is created by laziness or bad WYSIWYG editors, such as Dreamweaver, that we try and avoid.