Making and Manipulating Web Pages

Summary: This section explores some of the technology behind the World Wide Web.

Start the Terminal and Chromium

You learned how to start the terminal and Chromium in the section on setting up the lab equipment. Open a terminal window and the Chromium Web browser.
Direct your Web browser to open the page at http://www.cs.grinnell.edu/~rebelsky/Workshops/GSP2015/web.html.
You should see this page. (We ask you to load this page so that you can copy and paste from it later.)
Make sure that your sample Web page is open. It's at http://www.cs.grinnell.edu/~username/ (substitute your own username)

Styling Basics

We have at least three aspects of the page to think about: The content, the styling, and the interactivity. We'll work on bits of each in turn. We're going to start with the style because, well, it's probably the worst part of the sample page. In particular, the color palette of the sample résumé is atrocious. That's intentional ... we want something that you'll be inclined to change.

If you no longer have a terminal window open, open a new terminal window.
Type the following command. Don't forget the ampersand at the end.
```
gedit public_html/styles.css &
```
A window should appear.
Identify all of the places that colors are used.
Choose new colors and enter their names in place of the old colors.
Save the style sheet.
Reload the page in your Web browser to see if the changes took effect. (Since there are other formatting issues with page, it will still be less than attractive, but it will should be better.)

Exploring Content and Markup

The things we can specify in the style sheet depend a lot on how we have "marked up" the original text.

Look at the page and make a list of about a dozen different roles that text play on the page. You don't need to figure out the particular HTML tags; just think about different kinds of text. What kinds of things on the page are similar? What things seem unique enough that they'll need an identifier?
If you no longer have a terminal window open, open a new terminal window.
In the terminal window, type the following, including the ampersand.
```
gedit public_html/index.html &
```
For each piece of text you mentioned above, figure out what tag, class, and/or identifier are used.
What other useful tags, classes, and identifiers do you observe?
Add another "Additional Interest" to the end of the page.
Reload the page to verify that you were successful.
Add another work or volunteer experience to the page.
Reload the page to verify that you were successful.

Additional Formatting

Return to the style sheet.
Identify a few of the characteristics of elements that you seem able to change.
Using that knowledge and your knowledge of the primary tags, classes, and identifiers in the page, make three changes to the styles that will improve the page. You might add new styles to certain parts of the page.
Find at least one other useful style characteristic that we haven't used. (You'll need to do a Web search "CSS" and perhaps some other terms naturally related to formatting.) Use that style characateristic somewhere on the page.