Re: Part 1 of beginner's course written

Ok, I've updated the text a bit more taking your feedback into consideration [1]. Some of your wording was definitely better. I've deleted the horribly twee analogy, instead putting it into my production note for Seb as a guide for drawing an illustration to go along with that section.

As for your last bunch of notes, I've put them into the Part 2 page [2] as notes, and I'll revisit them when I come to write that part.


Chris Mills
Opera Software,
W3C Fellow, web education and
Author of "Practical CSS3: Develop and Design" (

On 16 Apr 2013, at 19:37, David R. Herz <> wrote:

> In the section "What is the web, and how does it work?" there is a part
> about the main components and you have a section called Client computers.
> For me, it looks like it could cause some confusion.  I would write
> something like Your Computer or Web Access Device (we call this a Client) -
> In order to see a site, you use your browser to send a
> <strong>request</strong> to see a web site from its server.  It sends a
> <strong>response</strong>, which includes the information your browser needs
> to display that web site.
> We are talking beginners here; I think talking to them directly will put
> them more at ease than speaking about this in the third person.
> The more I think about it, the less I think is necessary.  People know there
> are computers away from their own that serve up information.  I think they
> are innately familiar that a request is made and something (the response)
> happens.  These are beginners in coding, not in using the web.
> But, just to contradict myself, I think if the Server is going to be
> discussed, we might want to note that there are thousands of them out there,
> and there is this thing called the net that connects them, the architecture
> of which is beyond the scope of this course. 
> I don't like the analogy either.  I think people get it already.
> I think the use of the term standard is also a bit confusing.  Perhaps
> technically the components are standards, but I think it would be better to
> say there are three fairly standardized components that browsers use to
> display websites.  These are the Hyper Text Markup Language (HTML) code and
> associated Cascading Style Sheets (CSS), Java Script and (I've forgotten the
> third; there was a third, wasn't there).  Over time, an organization called
> W3C has developed standards to define an Open Web Platform that allows for
> code that can be viewed on any device.
> stand·ard  [stan-derd] noun 
> 1. something considered by an authority or by general consent as a basis of
> comparison; an approved model. 
> 2. an object that is regarded as the usual or most common size or form of
> its kind: We stock the deluxe models as well as the standards.  
> 3. a rule or principle that is used as a basis for judgment: They tried to
> establish standards for a new philosophical approach.  
> 4. an average or normal requirement, quality, quantity, level, grade, etc.:
> His work this week hasn't been up to his usual standard.
> More of my proposed text:
> This course assumes you want to build a web site.  It will start on HTML and
> CSS to allow you to do that right away.  Obviously, we can't teach it all at
> once, so we will start with certain basic features we expect you might be
> interested in, and build on from there.  You will quickly find that once you
> get the hang of how this works, you will be able to figure out how to add
> the features you want just by looking at the html and css code tables and
> applying that code to your site.  Let's get started.
> While you can code on any word processor or the notepad program that came
> with your computer, and figure out how to save the file as text and rename
> it .html or some silly process like that, you will probably have a more
> enjoyable experience if you download a program like notepad++ (free at
> _whatever the site is_) for coding purposes (we call this an editor).
> Link to next page to start coding; next page:
> I take your example from the The web standards model — HTML CSS and
> JavaScript page:
> This is a basic HTML document.
> <!DOCTYPE html>
> <html lang="en">
> <head>
>  <meta charset="utf-8">
>  <title>The Title Bar Title Goes Here</title>
>  <link rel="stylesheet" href="stylename.css" type="text/css"
> media="screen">
> </head>
> <body>
> <h1>Headings Go Here</h1>
> <p>This designates a paragraph
>  This is the body of the document, and all your good stuff goes here. </p>
> </body>
> </html>
> Please note there are essentially two types of markings.  There is the
> paired <**>text</**>, which is how we tell the computer to deal with any
> block of text from a letter to defining the beginning and end of a whole
> document.  Then there is the <%%%% _______________> where this block gives
> an instruction to the program as to how to deal with certain situations,
> such as the meta or link above which tell the computer what character set to
> use and what style, respectively, but does not have a closing mark like the
> first style.
> For your first HTML document, please cut and paste the above into your
> editor, and save it as example.html, but leave the document open.  Now go to
> your browser, press open, open this file and see what happens.  Leave this
> page open too.
> Now add the following (or whatever other text you want) in your editor.  Why
> not put it after the paragraph that's already there:
> <h2>Your second level heading here</h2>
> <p>write something <em>add emphasis</em> finish your paragraph </p>
> Save it.  Go back to your browser and refresh the page, what happens.  Now
> play a little.  Try h3 instead of h2, or h4, h5, h6.  What about h7?
> Instead of em, try <strong>more text</strong> or use i in the same way.
> You might want to add color.  This is a little more complicated, and for
> this we'll have to introduce you to the style sheet, but don't worry that's
> what happens next.
> As to the code above, I very much think it should be, and our standard mode
> for teaching should be, a table with the code on the left, and an
> explanation for what each element does on the right.  So take all my
> comments below, and pretend they are off to the right.  This way people can
> see the code, and get what it does right there.
> <!DOCTYPE html> <!this tells the browser what version of HTML it is dealing
> with; there are others and we want to make sure there is no confusion.>
> <html lang="en"> <!this is how we open every document; the language part is
> optional, but makes sure your document doesn't look like gobbledy gook when
> someone in Korea opens your document in a browser that defaults to Korean>
>  <head> <!required part of every HTML document>
>    <meta charset="utf-8">
>    <title>Example Page</title>
> 	<link rel="stylesheet" href="style1.css" type="text/css"
> media="screen">
> 		<!link to style sheet in same directory why this syntax??
> 		type tells us the type of file, the .css is apparently not
> sufficient;
> 		media tells us to what to apply it, in this case the screen
> as we 
> 		might not want this to print>
> 	<! or <style>
> 			style definition
> 		  </style> allows you to do this in the same document
> without consulting
> 		  the style sheet>
>  </head>
>  <body>
>    <h1>Hello world</h1>
>  </body>
> </html>
> So that's about all I have time for tonight.
> David R. Herz

Received on Wednesday, 17 April 2013 10:29:13 UTC