W3C home > Mailing lists > Public > public-webplatform@w3.org > April 2013

RE: Part 1 of beginner's course written

From: David R. Herz <WPD@theherzes.com>
Date: Tue, 16 Apr 2013 21:37:20 +0300
To: "'Chris Mills'" <cmills@opera.com>, 'Sébastien Desbenoit' <seb@desbenoit.net>
Cc: "'Janet Swisher'" <jswisher@mozilla.com>, <public-webplatform@w3.org>
Message-ID: <009801ce3ad1$731190f0$5934b2d0$@com>
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 Tuesday, 16 April 2013 18:38:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:13:45 UTC