WebPages: Looking Behind the Scene

posted by: Mr. Bergquist 3 November 2011 No Comment

Ready to see how WebPages work?  Well we will start with a cool tool that shows you the code and details of a website as you browse it in the Chrome (Click here if you are using Mozilla Firefox).  Start by watching the Video on this webpage, note: you will have to hit the play button to start the video
http://www.dontfeartheinternet.com/03-the-browser/
As they show in the video, open up Chrome browser’s “Developer Tools” to see the inner details of WebPages.  To do this:

  1. Go to the Chrome browser, and open this page: http://www.dontfeartheinternet.com/example/1/ by copying it and pasting it in the Chrome browser’s navigation bar at the top (where the URL for the current page appears).  Notice that the image for their page is broken – the link to an image they used is no longer present – oops.
  2. Click on the wrench Icon to the right of the Chrome navigation bar
  3. From the pull down go to “Tools” and then select the “Developer Tools”
  4. Check out the pane of the window that opens up below the current webpage.  This shows you all the details of its HTML code on the left and its styling (CSS) on the right.  In the HTML pane, you can open up the different section using the triangles next to each – try it out.  You can use this tool to figure out the details of how your favorite websites are created, so you can use them yourself!
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 5.00 out of 5)
Loading ... Loading ...

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>