Link Search Menu Expand Document
refcode-docs

Browser Rendering

The most important tool in making a website is the browser. A browser (for example, Chrome) is a program that gets files from the internet, reads the code in those files, and displays the result in the webpage for you to see.

In this exercise, we learn about how the browser looks at code and writes that code to the window.

Terms to learn:

  • Source Code
  • Rendered Output
  • Window
  • Draw / Paint / Render / Redraw
  • Content
  • Style
  • Behavior
  • Meaning / Semantics
  • Target or Selector

Setup

This will be a dramatization of what a browser does when it renders an HTML page. A volunteer will come forward and will be instructed to read the instructions (displayed on the projector) and draw what the “source code” tells them to on the whiteboard. They will also have available a manilla folder with other manilla folders and documents nested within it.

Other students should be encouraged to help. The volunteer should, with guidance and help, be able to “render” the webpage. First they will draw out the content but will then need to redraw when they get to the styles. For the behavior section, they will need to actively watch and respond to the “user.”

Source Code

Content 

Write a heading "Hello World"
Tape the photo /shapes/circle.png
Tape the photo /shapes/arrows/up.png
Tape the photo /shapes/upside-down-v.png
Write a paragraph "This is my self portrait"

Style 

Make the heading
 - 3 inches tall
 - blue
Put one inch of space below the heading.
Make sure all photos:
 - Are on their own line
 - Are centered
 - Have 0 inches of space below them
Make sure the paragraph:
 - Has 1 inch of space above it
 - Is centered (not left-aligned)

Behavior 

If someone touches the first picture, yell "OUCH!"
If someone touches the heading, underline it. 
If someone stops touching the heading, erase the underline.

Resources

Nested manilla folders and printed photos

Questions to reinforce concepts

These questions can help underscore some of the concepts that this workshop is attempting to teach.

Browser Defaults

  • What color pen did you use at first? Did the source code tell you to use that color?
  • What size text did you use at first? Did the source code tell you to use that size?

Selectors

  • When you read the style code for the heading, how did you know which text to erase and re-draw?