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

What's The URL Of My Blog?

We see the plea for help, periodicallyI 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?".

Leave Comments Here

Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog. If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook.

As noted above, please note my commenting policy. If you post a comment to this post, I will probably treat it as a "Contact Me" post. If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post, not here. This post is for general comments, and for non posted contact to me.

If the form below does not work for you, check your third party cookies setting!

For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken, or Nitecruzr Dot Net - Blogging is, almos…

What Is "" vs. ""?

With Google Domains registered custom domains becoming more normal, we are seeing one odd attention to detail, expressed as confusion in Blogger Help Forum: Learn More About Blogger.My website uses "" - am I supposed to use "", instead?It's good to be attentive to detail, particularly with custom domain publishing. This is one detail that may not require immediate attention, however.