Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Viewing Your Web Page

The View from a Browser

I hope you are ready to view the fruits of all your hard labor! Make sure the file has been saved.

Because the file is saved to your hard drive, it is possible to view your page without being online. How handy is that?

Using Windows Explorer or the Mac Finder, navigate to the "hello.html" file. As long as your browser settings are associated with .html files, all you have to do is double-click on the file, and it will automatically open in your default browser.

If you get a pop-up window asking to specify which program to use, just navigate to your favorite browser’s .exe file installed on your hard drive.

Optionally, you can also open a file directly in your browser of choice. Launch the browser and choose File>Open from the menu.

Okay, so how does it look? It should look similar to my hello
file.

Take a closer look at the top of your browser window. The text you typed in the title area of your code should be listed. Neat, eh?

Now, let’s check behind the scenes.

Viewing Source Code

Remember how (X)HTML works behind the scenes? Well, lucky for us, we can go behind the scenes and easily view the html coding of most any web page. Whether it is your own page, or another designer’s, this is a great learning tool.

Let’s try it with your own page. With your web page open:

  • In Windows Internet Explorer, choose View>Source. A new Notepad window will open in your workspace displaying the source code.
  • In Firefox, Mozilla, and Netscape (both Mac and Windows), View>Page Source and a new window will open in your workspace displaying the source code.
  • In Safari (Mac only), View>View Source, and a new window will open displaying the source code.
  • Another quick way is to right-click on the Web page itself (careful, don’t right-click on an image on the page) and choose View Source from the menu.

Important: Viewing source code is a great way to learn how a designer created a page, but please remember copyright laws. Do not copy anyone’s coding unless the author specifically says it is okay to do so. To learn more about copyright, take a look at http://www.whatiscopyright.org/

So, did you check out the source coding for your first web page? The coding looks familiar, right? It should look just like the coding from the file you are currently working on in your text editor.

Close the source window.

Now go online to visit your favorite web sites and view the source coding there. Phew, it probably looks a whole lot more complex and scary than the coding on your own page. But that is okay, the more you learn, the more you will understand!

FAQ

I have tried to View Source (in Internet Explorer) but it just isn’t cooperating.

ANSWER: This problem is common with IE6. First try emptying your Temporary Internet Cache. Tools>Options>General>click the button to delete Files. Re-launch IE. If that doesn’t work, you may have to delete your Cookies as well. For more information on the Temporary Internet Files folder, read this article on mvps.org.

There have also been reported problems when a Notepad shortcut is placed on the Windows Desktop.

If all else fails, it is a good excuse to switch to an alternative browser, like Firefox or Opera.

When I view source on some web pages, I see a lot of code that doesn’t make sense. Will I ever learn it all?

Answer: There will be a lot of code that might not make sense and it might never make sense - To tell you the truth, there are some coding languages that don’t make sense to me either, so you are not alone. Besides advanced coding, there is also a lot of older, outdated coding on the Web. Using this older coding isn’t necessarily wrong right now, but someday it might not work properly on a modern browser. Let’s just say the coding you are learning from these tutorials is efficient, modern, and is keeping with web standards. This ensures your pages will look presentable on desktop browsers, along with modern cell phones, pda’s, and other Web devices.

What do you want to learn next? « First PageHeadings »

2 Comments

  1. Comment by Amir on August 18th, 2007

    Debugging for FireFox is now so easy with FireBug addon. No, it’s not a commercial, I’m just a user.

  2. Comment by debbie T on August 18th, 2007

    Thanks Amir

    Here is the link to the Firebug extension, if anyone is interested
    https://addons.mozilla.org/en-US/firefox/addon/1843

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.