Tailgunner404

View Source

Frequently I see things that I think are "Cool" on someones Web site. Being an enquiring kinda guy I like to find out how it was done. After all you don't think I figured out all of this stuff myself did you? My favorite tool is the "View Source" command in your browser. Using this command, you can quickly have a peek at the HTML code to figure out how any Web page design was achieved. Well, *almost* any Web page design. There are some clever coders out in cyber land that have put in scripts that attempt to hide the code from this command. Others use CSS and JavaScript that are contained in separate files, so the code doesn't show up when you use the View Source function.

Please keep in mind that there are copyright laws that apply to intellectual property. You can learn the tricks by looking at the code, but you can't steal it and call it your own. Learn from it, but be creative on your own.

So try it our. If you are using Internet Explorer go to "View" on the menu bar and select, "Source" from the drop down list. It should open "notepad" and display the HTML code for the page. You can then isolate the code for the cool effect and copy and paste it somewhere to use later. Or you can delete the junk you don't like and save the file using the "File" and "Save As" selection. If you are using Netscape Navigator you can select "View" and "Page Source". Netscape makes this trick more difficult by putting the source code in a Navigator window which can not be copied. Both programs will allow a "Right Click" and display a "View Source" option

Now for those sites that have implemented scripts and such to hide the code, try this technique for getting around those barriers. If you are seeing it on your monitor then the information is on your computer. The easiest way to see it to use the "view-source:" URL. If you type "view-source:" in the browser address box, followed by a URL, your browser will display the code for the specified URL instead of displaying the page. So if you want to view the CSS file that defines the styles for this site you would type the following into the address box of your browser:

view-source:http://tailgunner404/tripod.com/htmlpage9.html

and press enter. Notepad should open up with the appropriate code.

So now you've got the code, but the page uses a Style sheet. No problem! Look in the <head> section for a tag that reads something like this:
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" title="style1">

See in the Link tag where it says "href="StyleSheet1.css"?? That is the location and the name of the "Style" sheet for the page or the entire web site. If you want the style sheet code just put it in the address box like we did with the URL.

view-source:http://tailgunner.tripod.com/StyleSheet1.css

You can use the same trick with "JavaScripts" that reside in separate files as well. Again you would need to look at the code for the page first and find the "call" for the JavaScript and then ask the browser for the code. Most JavaScripts will have a ".js" extension. So watch the code for calls to those files.

One other way to get the code is to look in the "cache" file on your hard drive for all files that end with .html, .js, .css and take a look at them for ideas.

Fade to black...

Click Here for next tutorial.

Return to Top

Click Here to Email Tailgunner404