GSP Lab 2015 : Representing Web Pages
Primary:
We turn to a more practical issue in data design and representation: The representation of documents for the World Wide Web.
You've all seen pages on the World Wide Web (or at least I hope you have). Behind the scenes, these pages have to be represented in a way that computers can easily present them (and humans can easily write them).
Working with a partner, design a mechanism for representing Web pages. You are limited to the characters that you can type on the keyboard. You will have to consider how you represent the different aspects of the page to the computer. For example, how do you represent that a piece of text should be bold or have a different typeface?
Each group will quickly present its solution and we will discuss the strengths and weaknesses of the strategy
Each Web page is likely to have three important components:
We use a language called HTML (Hypertext Markup Langauge) to record information about the content. In addition to the text, we have tags that indicate the role a piece of text plays. Tags are surrounded by angle brackets. For example,
<p id="introduction">
Welcome to the Web site of
<em class="company">ThingymabobCoInc</em>. Here you will
find not only thingys, but also mabobs.
</p>
<p>
Here at <em class="company">ThingymabobCoInc</em>, we say
<q id="slogan">If you can't find it here, you probably don't need it.</q>
</p>
You'll note that we have a tag before and after pieces of text, that tags nest, and that we have additional information in tags (such as an id and a class). We have one very short introductory paragraph that includes a piece of emphasized text that represents the company name. We also have a second paragraph that includes both the company name again and a short quotation.
You may also note that some tags have an "id" and some have a "class". The id and the class provide ways to refer to parts of the document. Ids are supposed to be unique - there should only be one element with each id. In contrast, many elements can share the same class.
We use a language called CSS (Cascading Style Sheets) to indicate how to format everything. Each CSS rule has a description of the element to be formatted and instructions for formatting it. For example,
p {
margin-left: 1in;
margin-right: 1in;
}
p#introduction {
size: large;
color: red;
}
em.company {
font-family: Helvetica, Sans;
text-shadow: 2px 5px red;
}
As this might suggest to you, we have at least three ways of describing elements: We can just use a tag; we can use a tag, a pound sign, and an identifier; or we can use a tag, a period, and a class name. There are also many other ways to identify elements, but these will suffice for now.
Finally, we use a language called Javascript (not an acronym) to make pages more interactive. While you can probably master most of the HTML tags and CSS styles in a relatively short amount of time, figuring out how to use Javascript well will take much longer. We'll focus on a few simple things.
document.getElementById("slogan").innerHTML = "buy buy buy!";
document.getElementById("introduction").style["color"] = "red";
The first line selects the part of the page with the id slogan and
replaces the text of that portion of the page. The second line selects
the part of the page with the id introduction and replaces the text
of that portion of the page.