- From: Chris Mills <cmills@opera.com>
- Date: Wed, 17 Apr 2013 11:28:12 +0100
- To: <wpd@theherzes.com>
- Cc: "'Sébastien Desbenoit'" <seb@desbenoit.net>, "'Janet Swisher'" <jswisher@mozilla.com>, <public-webplatform@w3.org>
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. [1] http://docs.webplatform.org/wiki/beginners/the_beginning [2] http://docs.webplatform.org/wiki/beginners/crash_course 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 10:29:13 UTC