Skip to main content

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.


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

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.