Tuesday, June 06, 2006

How Did He Do THAT?

That's a question I ask myself almost daily - when looking at websites in general, and at blogs in particular. Just about everything I do in my blogs is copied from somebody else. There's no classes "Blogging 101" etc.

Well, here is yet another reason why I push Firefox.

View Selection Source


If you are looking at a web page or blog, and you see a feature that intrigues you, simply:
  1. Highlight the portion of the webpage that interests you.
  2. Right click and select "View Selection Source".
  3. A view page source window will pop up, with the code to produce just the highlighted elements, from step 1, highlighted.


What better way to learn? Try my sample article.
  • Click on the link.
  • Highlight the portion of the page beginning with "yesterday", and ending with "Experience". It helps to highlight objects before and after the area that interests you, to get the context.
  • Right click in the highlighted area, and select "View Selection Source".
  • If you find the source, as displayed in the popup window, hard to read, just copy the highlighted code (Ctrl - C), open Notepad, and paste.
  • Voila.
  • So THAT's how he (she) did it!

If you have just Internet Explorer or Opera, sorry. Get Firefox.

Going further, the Firebug add-on in Firefox will show you, dynamically, the code behind any container or object on the web page. You can examine CSS or HTML, and you can look at the CSS attributes, the physical layout, or the DOM for any object that interests you.

You can, alternatively, look at the source code for the entire page. With Firefox, it's "View" - "Page Source"; with Internet Explorer, it's almost the same - "View" - "Source". Firefox presents a listing, with important keywords and sections in different colours; Internet Explorer presents you with a Notepad window. Both are useful, in their own way.

An alternative to using browser based code interpreters would be vURL Desktop Edition. You provide the URL of an interesting web page, it extracts the page, and displays the source code and a compiled and sorted list of all links within that web page. The drawback of vURL would be its presentation of source code. With Firefox and "View Selection Source", you are presented the web page code with the area of interest highlighted; with vURL, you are given the entire web page and you have to search on your own, and find the code for the area of interest.

Anyway, once you find code that interests you, find out how to use the code. The W3 CSS / HTML website is excellent for this purpose.
  • Go to the W3 website.
  • Find the Site Search applet in the upper right of the web page.
  • Type the CSS / HTML tag, with the brackets around it, that interests you. Hit enter.
  • The search results will include a number of hits. The top hit should link to the tutorial page for that tag.
  • The tutorial web page will briefly describe the tag, and its characteristics.
  • Near the bottom of each tutorial web page, look for "Try-It-Yourself Demos". The demos are like live labs, with code on the left, and the resulting display on the right. You can type in changes and see results as you watch.
I see similar possibilities in the EchoEcho CSS Tutorial.

2 comments:

vijayakumar said...

EXCELLENT ARTICLE I VE EVER SEENED

Freakytech said...

Good information.But you can also view the page source using Firebug add-on in Chrome.