Unit 4 Lab 1: Website Data, Page 2

PG original remarks:

first problem is that kids have no idea what they should be expecting to find in a web page, or even that a web page uses a programming language to organize the elements (pictures and text) on the page and create the buttons that we click, just as they've created buttons to click in Snap.
what I really think should happen is that students use an online two-view tool, code and image, and build a simple web page, perhaps for their school or interest or... With text and a graphic and (perhaps) a button or some other whizzy feature, and then look at some page we build (or some other) to see if they can find such features. Or something. A low level part of the purpose of this page is to show what's under the hood of a web page (for which they don't need Snap), to show that they can see the source of a page (for which they don't need Snap), and to show that they can get that source with Snap so that they can process it for some purpose (like weather app, etc.).

How's this page for addressing these concerns? --MF

From Observation Notes Analysis:

U4L1: "There's a lot of reading and mucking around with the w3schools page, but I didn't feel like students learned much about CS today outside the work on CITN. The details on "tags" really didn't seem to help advance the curriculum."
U4L1: "I feel like we're not doing much with this particular lesson. Why are we teaching this? Is it an AP standard to learn or understand HTML? I get that we need to pick through an HTML page to find goodies, but it seems like we could do that without having people know all the details."
U4L1: "The W3 HTML interface seemed to work very smoothly for students (though the instructions they were given didn't lead to interesting insights)."
U4L1: "Writing HTML: we need to clarify the basics of HTML more explicitly (like opening and closing tags and the difference between the head and the body—these are probably the most important). As I recall, a lot of what I'd originally included on this page was cut during revisions, but I think we need some of it back to help students get to some relevant insights (the most fundamental to using HTML in Snap!)."
U4L1: "Also ned more very basics of HTML in TG. Teacher said some wrong things about HTML such as "p" is for "new paragraph" (not exactly) and "b" is for "line break" (wrong)."
U4L1: "Instead of using the w3schools example, we should have them copy/paste a View Source into that window. Then they can see both the HTML and the result together. Personally, I would copy/paste the Weather App page (from weatherstreet.com) but maybe something else? Mary felt the Weather App page, which does load and is visible (other than Javascript) is too complicated, but we're going to be very quickly moving to that anyway."
U4L1: "One student shared some confusion about how the W3 editor worked. Students explained how it worked. Several compared it to Snap! suggesting the WYSIWYG side on the right is like the Snap! stage."
U4L1: "W3 site is working well with these students also. Some have had some exposure to HTML and made some cute additions (such as adding a background image to the page)."
U4L1: "Selective changes to HTML example tasks to help highlight essentials of HTML needed for importing into Snap!."

A few meta-notes on these comments: there are so many because two people watched two classes on this page (for a total of 4 observations of this one page). The negative comments about the page are all from one person. And for transparency, the person disclaiming this both wrote the page and wants to keep it. ;) --MF

Most web pages are written with HTML (hypertext markup language) and read with HTTP (hypertext transfer protocol).

Watch this video from code.org on HTTP and HTML:

Unlike Snap!, which is a general purpose programming language, HTML is a special purpose programming language; it's designed for a specific task: programming web pages. There are many sites on the Internet that can help you learn to create web pages. w3schools.com is one example.

Try out the w3schoools.com HTML example. Experiment with the code and watch the impact on the result:
1. Create a second heading and more paragraphs.
2. Try deleting some or part of the html tags like "<title>" or "</h1>".
What can HTML be used to do?
Try out the CSS example. Make some changes to the code:
Hex isn't in our curriculum yet, but it should be (EK 2.1.1D and EK 2.1.1F). I think we should add it to U1L5 near binary when we clean up that Lab, which needs attention for coherence to itself. Then it can come up again in U4 both here with this brief intro to HTML/CSS and then again with IPv4. For now, I'm just putting in a simple, fun link for anyone who wonders what hex is. --MF
1. Notice the two different ways color is coded (as a hexadecimal numeral, "d0e4fe," and as a word, "orange"). Experiment with style of the body, level 1 heading, and paragraph.
2. Experiment with removing some of the CSS punctuation (such as the brackets, the colon, or the semicolon).
Add to your written assignment a description of what CSS can be used to do.

What's the reason for replacing my correct View Source table with this incorrect web link? (It assumes that anyone not running Safari is a Windows user.) --bh

It was not complete and not easy to use. I thought it would be best to link to a site that addresses that ever-changing issue specifically rather than trying to list them all ourselves (when we couldn't). Perhaps that site is not good, but can you suggest another one? --MF
- I would use the correct parts of that web site to fill in missing entries in my table, and also do experiments to find out other missing entries. But the web site is grossly inadequate.

You can "View Source" for any web page using your browser. You might be able to find it in a menu, or look up how to do it in your browser.

Look at the source code for a few different web pages and make a list of all the HTML formatting commands you can figure out. For example, what code makes text appear in bold or italics?

Writing for the Web with HTML