Writing for the Web with HTML

This page is ready for review (BH has reviewed). Please note that I made this the most mellow of intros to HTML—basically just enough so that the http block report isn't totally incomprehensible. I used Paul's suggestion to "use an online two-view tool" (I chose w3school's because I find that site easy to use.) See what you think. --MF
PG original remarks: How's this page for addressing these concerns? --MF
From Observation Notes Analysis: 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).

  1. 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.

    w3schools HTML example
  1. 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>".
  2. Talk with Your Partner Write Out Your Thoughts What can HTML be used to do?
  3. 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
      There's no such thing as a hexadecimal number! If we're going to link to an external site it has to be one that's accurate. (We already went through this discussion long ago about binary and CS Unplugged.) --bh
      • Brian, is your primary concern that the page uses the term "hexadecimal number"? While I agree that it's not correct, it is a very commonly used term (wikipedia.org, khanacademy.org) and it's going to be hard to find any site that does something nice and accessible that doesn't use the term. We haven't covered HEX yet or HEX colors (though I think we should by this point), so students need something here to explain what that is at least for year 1. If not this, then what do you suggest? --MF
        • Well, you can argue with Al about it. But I'm on Al's side; I think wrong terminology confuses people. In this case, many students will end up thinking that, e.g., colors can be represented only in hex, because hex numbers are different from "regular" numbers. It would help to show the same color represented as a decimal number, then explain how colors are made out of red, green, and blue intensities and show how hex is a more useful representation because you can see the parts easily. But they could have made colors look like IP addresses: 255.255.255 for white, 0.255.0 for green, etc. (PS The Wikipedia article you cite used "numeral" almost all the time when appropriate; I fixed the few erroneous "number"s. I take no responsibility for Khan Academy. ☺)
    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).
  4. 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

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.

  1. 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?
  1. Try out the w3schools.com JavaScript example:
    1. Experiment with the paragraph size and color.
    2. Add to your written assignment more detail about what JavaScript can do.