Re: Part 1 of beginner's course written

Cheers for the wealth of feedback here David. I'll work through this today, and post an update soon.

Chris Mills
Opera Software, dev.opera.com
W3C Fellow, web education and webplatform.org
Author of "Practical CSS3: Develop and Design" (http://goo.gl/AKf9M)

On 16 Apr 2013, at 19:37, David R. Herz <WPD@theherzes.com> 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.
> 
> http://dictionary.reference.com/browse/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
> wpd@theherzes.com
>

Received on Wednesday, 17 April 2013 08:23:10 UTC