teaching machines

CS 268: Lecture 2 – HTML

February 6, 2020 by . Filed under lectures, spring-2020, webdev.

Dear students:

Last time we introduced the web as an effort to exchange structured information between computers. Today we look more closely at the language we use to give structure to our information: HTML.

Questions

Let’s start by reflecting on the reading with a few questions.

Errors and Validation

Take a moment with your neighbor. Think of some ways that HTML could go wrong. In Java, we might define a method inside another or forget a semi-colon. What are the mistakes we will make in HTML?

When you make these mistakes, what happens? For example, what happens when you put HTML in a title element? What happens if you have two title elements? What if you mistype an attribute name? What if you forget to close a non-empty element? In some cases, the browser will forgive you, and the page will display as you intend. In other cases, the flow of the page will be severely maligned. To get feedback about what might be wrong, we must validate our HTML.

The World Wide Web Consortium (known as the W3C and directed by Tim Berners-Lee) provides a validator. We will look at some of the errors you enumerated and see how they are validated.

This need of explicit validation is very different from conventional programming in statically typed languages, in which our tooling barks at the first sniff of trouble. Perhaps the lack of barking is why some people prefer web development. They don’t see their errors until they ask for them.

Presentational vs. Semantic Elements

When HTML was a baby, web developers sat down to design a site with one question on their minds: “How do I markup this page to make it look like this wireframe?” As HTML grew up and so did the number and kinds of people using the web, we came to realize that there are actually two questions we need to be asking ourselves:

  1. What is the core structure of the information I’d like to share?
  2. How do I want to present that structure?

When structure and presentation were intermingled, we had elements like blink, marquee, strike, u, i, font, big, and center. We had attributes like bgcolor, alink, border, and align. The problem with intermingling structure and presentation is that we cannot easily alter or discard the presentation if it is baked into the structure.

Why would we want to alter the presentation? One of the biggest reasons is to support small screens. At the time of this writing, about 52% of web traffic is from a mobile device. We may present the content differently when its printed. (Perhaps we hide all the ads or remove a form.) To support different presentations, we provide a stylesheet for each different viewing context.

Why would we want to discard the presentation? Not every access of a web page results in a visual display of its content. Folks with vision impairments use software called a screen reader that retrieves the HTML and tries to understand its structure so that it can communicate the essential information to the user. Let’s see this in action.

Additionally, search engines crawl the web and build a vast index of its content. They care about your high-level structure and meta tags. Google’s tips on search engine optimization make no explicit mention of interpreting the presentation (CSS) properties of the content.

By separating presentation and structure, we improve both the reuse and the accessibility of our structured information. We have pushed the presentation into independent stylesheets. Many of the presentational features of HTML are deprecated now. What we (hopefully) have left are the semantic elements, the elements that impose some sort of meaning on the information—but don’t lock us into a particular presentation.

There are two elements that are semantically neutral: div and span. A div element imposes no meaning on its child content beyond it being treated as a block. A span element imposes no meaning on its child content beyond it being treated as a phrasal or inline content.

Exercises

With a neighbor, claim your task on Crowdsource. Then complete the task below. When you are done, submit your solution on Crowdsource.

  1. Recreate this structure: Use this raw text: 
    Kringla
Ingredients
1 1/2 cups white sugar
1 egg
2 1/2 cups sour cream
4 cups all-purpose flour
2 teaspoons baking soda
1/4 teaspoon salt
Directions
Preheat oven to 350 degrees F (175 degrees C). Lightly grease or line baking sheets with parchment paper.
Combine the sugar, beaten egg and sour cream together. Mix in the flour, baking soda and salt. Blend thoroughly.
Divide dough in half and form each half into a long roll. (Note: If your kitchen is warm, keep the half of dough you're not working with in the refrigerator.)
Cut off a narrow slice of dough. Roll lightly with hands on lightly floured board into pencil-like strip about 7 inches long. Form into a figure "8", and pinch ends together. Place on cookie sheet. Repeat with remaining dough.
Bake at 350 degrees F (175 degrees C) for 12 to 15 minutes.
  2. Recreate this structure: Use this raw text: 
    /home/blu
cs268
blog
project1
project2
node_modules
src
job_applications
facebook
nsa
memes
cats
movies
squirrels
nsfw
memoir
  3. Recreate this structure: Use this raw text: 
    Properties of N-dimensional Boxes
ndimensions
nvertices
nedges
nfaces
0
1
0
0
1
2
1
0
2
4
4
1
3
8
12
6
4
16
32
24
5
32
80
80
6
64
192
240
n
2 n
nvertices n 2
nedges (n - 1) 4
  4. Recreate this structure, which has been truncated because of its length: Use this raw text: 
    Common Spices
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
A
allspice
B
basil
bay leaves
black peppercorns
C
cayenne
chili powder
cinnamon
cloves
cumin
curry powder
D
dill weed
G
garlic powder
ginger
N
nutmeg
O
onion powder
oregano
P
paprika
R
red pepper flakes
rosemary
S
saffron
sage
T
tarragon
thyme
V
vanilla extract
  5. Recreate this structure, which has been truncated because of its length: Use this raw text: 
    Cloud Types
Definitions courtesy of the National Weather Service (weather.gov).
Cirrus
Detached clouds in the form of white, delicate filaments, mostly white patches or narrow bands. They may have a fibrous (hair-like) and/or silky sheen appearance.
Cirrocumulus
Thin, white patch, sheet, or layered of clouds without shading. They are composed of very small elements in the form of more or less regularly arranged grains or ripples.
Cirrostratus
Transparent, whitish veil clouds with a fibrous (hair-like) or smooth appearance. A sheet of cirrostratus which is very extensive, nearly always ends by covering the whole sky.
Altocumulus
White and/or gray patch, sheet or layered clouds, generally composed of laminae (plates), rounded masses or rolls. They may be partly fibrous or diffuse and may or may not be merged.
Altostratus
Gray or bluish cloud sheets or layers of striated or fibrous clouds that totally or partially covers the sky. They are thin enough to regularly reveal the sun as if seen through ground glass.
Nimbostratus
Resulting from thickening Altostratus, This is a dark gray cloud layer diffused by falling rain or snow. It is thick enough throughout to blot out the sun. Also, low, ragged clouds frequently occur beneath this cloud which sometimes merges with its base.
Cumulus
Detached, generally dense clouds and with sharp outlines that develop vertically in the form of rising mounds, domes or towers with bulging upper parts often resembling a cauliflower.
Cumulonimbus
The thunderstorm cloud, this is a heavy and dense cloud in the form of a mountain or huge tower. The upper portion is usually smoothed, fibrous or striated and nearly always flattened in the shape of an anvil or vast plume.
Stratocumulus
Gray or whitish patch, sheet, or layered clouds which almost always have dark tessellations (honeycomb appearance), rounded masses or rolls. Except for virga they are non-fibrous and may or may not be merged.
Stratus
A generally gray cloud layer with a uniform base which may, if thick enough, produce drizzle, ice prisms, or snow grains. When the sun is visible through this cloud, its outline is clearly discernible.
  6. Recreate this structure: Use this raw text: 
    My physics teacher said that the best way to learn physics is to double-major in computer science. Then she gave us the following homework problem:
Write a Javascript class that models a projectile. Provide a constructor that accepts the projectile's initial velocities on both the x- and y-axes. Provide also a method for getting the projectile's position at time t.
I will not take a programming course until my 5th grade year, but I watched all of  last summer and managed to piece together the following solution:
class Projectile {
  constructor(velocityX, velocityY) {
    this.velocityX = velocityX;
    this.velocityY = velocityY;
  }

  getPosition(t) {
    return [this.velocityX * t, -4.9 * t * t + this.velocityY * t];
  }
}
Perhaps by the time I am in college,  will be handing out degrees.

TODO

Here’s your TODO list for next time:

See you next time.

Sincerely,

P.S. It’s time for a haiku!

It’s not how I look
It’s who I am that matters
After middle school