Anatomy of a Webpage 1 - Revision history

Bsandberg: forms

2013-03-20T16:14:37Z

forms

Bsandberg: /* Browser */

2013-03-20T13:00:18Z

Browser

Bsandberg at 12:48, 20 March 2013

2013-03-20T12:48:02Z

Bsandberg: restructure

2013-03-20T12:47:15Z

restructure

Bsandberg at 11:40, 20 March 2013

2013-03-20T11:40:02Z

Bsandberg at 11:38, 20 March 2013

2013-03-20T11:38:54Z

Bsandberg at 11:36, 20 March 2013

2013-03-20T11:36:35Z

Bsandberg at 11:31, 20 March 2013

2013-03-20T11:31:43Z

Bsandberg: html 5 shoutout

2013-03-20T11:29:19Z

html 5 shoutout

Bsandberg: added important points

2013-03-20T11:27:21Z

added important points

@@ Line 43: / Line 43: @@
 *HTML 5 specification includes the addition of new tags, such as &lt;audio&gt; and &lt;video&gt;, and the deprecation of others, such as &lt;table&gt;, &lt;b&gt; and &lt;center&gt;.
-== Final Structure ==
+== Final HTML Structure ==
   &lt;html&gt;
     &lt;head&gt;
@@ Line 59: / Line 59: @@
 *[http://www.w3schools.com/ W3Schools]
 *[http://www.webplatform.org/ http://www.webplatform.org/]

@@ Line 9: / Line 9: @@
 JS ('''J'''ava'''S'''cript) JavaScript provides the actions or functionality for one or more webpages. And it has no relation to Java. Really.
 === Browser ===
-The browser is software which takes these three languages, and interprets them for display. (called rendering)
+The browser is software which takes these three languages, and via the rendering engine, interprets them for display.
 === Client ===
 Clients are devices (or software) which connect to a server. Any internet-connected device can be considered a client.

@@ Line 37: / Line 37: @@
 == Points to Discuss ==
 *Most HTML tags are formatted like this:
-  &lt;tag attribute="value"&gt;something&lt;/tag&gt;.
+  &lt;tag attribute="value"&gt;something&lt;/tag&gt;
 *Some HTML tags (like images) don't have a pair:
-  &lt;img src="" alt="" /&gt;.
+  &lt;img src="" alt="" /&gt;
 *HTML 5 specification includes the addition of new tags, such as &lt;audio&gt; and &lt;video&gt;, and the deprecation of others, such as &lt;table&gt;, &lt;b&gt; and &lt;center&gt;.

@@ Line 2: / Line 2: @@
 == Basic Terminology ==
-*HTML = '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage
+=== HTML ===
-HTML is used to create the structure of a web page.
+HTML ('''H'''yper'''T'''ext '''M'''arkup '''L'''anguage) is used to create the structure of a web page.
-*CSS = '''C'''ascading '''S'''tyle '''S'''heets
+=== CSS ===
-CSS provides the styling for one or more web pages.
+CSS ('''C'''ascading '''S'''tyle '''S'''heets) provides the styling for one or more web pages.
-*JS = '''J'''ava'''S'''cript (No relation to Java. Really.)
+=== JS ===
-JavaScript provides the actions or functionality for one or more webpages.
+JS ('''J'''ava'''S'''cript) JavaScript provides the actions or functionality for one or more webpages. And it has no relation to Java. Really.
-*Browser = Software which renders/displays webpages.
+=== Browser ===
-The browser is software which takes these three languages, and interprets them. (called rendering)
+The browser is software which takes these three languages, and interprets them for display. (called rendering)
-*Client = End-user device, running browser software.
+=== Client ===
 Clients are devices (or software) which connect to a server. Any internet-connected device can be considered a client.
-*Server = Powerful computers running application software and/or providing [HTML] files.
+=== Server ===
 Servers are (often powerful) computers running server software. They run applications (such as CMS) and provide files. (such as HTML/CSS/JS and images)

@@ Line 6: / Line 6: @@
 *CSS = '''C'''ascading '''S'''tyle '''S'''heets
 CSS provides the styling for one or more web pages.
-*JS = '''J'''ava'''S'''cript (no relation to Java)
+*JS = '''J'''ava'''S'''cript (No relation to Java. Really.)
 JavaScript provides the actions or functionality for one or more webpages.
 *Browser = Software which renders/displays webpages.

@@ Line 24: / Line 24: @@
 *Chrome, Safari and Opera use the Webkit engine.
 *Internet Explorer uses the Trident engine.
 == Instructor Notes ==
@@ Line 41: / Line 34: @@
 **reload browser
 *Students should find a simple image (like a kitty) and download it to the desktop, named "name.jpg" or similar.
 == Final Structure ==

@@ Line 16: / Line 16: @@
 == All Web Pages Are Created Equal ==
-All webpages are created equal.  They're all open source.  Servers send raw HTML, (and likely) CSS, JavaScript and images "over the wire" to the client device, where the browser takes these components, and renders them together, making a webpage.  Press CTRL+U in any browser, and you can see the source code for any given webpage. In this way, every webpage can be learned from, by simply reading the available code.
+All webpages are created equal.  They're all open source. Servers send raw HTML, (and likely) CSS, JavaScript and images "over the wire" to the client device, where the browser takes these components, and renders them together, making a webpage. Press CTRL+U in any browser, and you can see the source code for any given webpage. In this way, every webpage can be learned from, by simply reading the available code.
-Many webpages have CSS and JavaScript (observe &lt;link&gt; and &lt;script&gt; tags) but not all, and it's certainly not required.  Some pages have a little CSS and JavaScript, but some have tons. CSS and JavaScript are great things, but without HTML, they can't exist. They modify, act upon and operate HTML elements.
+Many webpages have CSS and JavaScript (observe some &lt;link&gt; and &lt;script&gt; tags) but not all, and it's certainly not required. Some pages have a little CSS and JavaScript, but some have tons. CSS and JavaScript are great things, but without HTML, they can't exist. They modify, act upon and operate HTML elements.
-Each browser has it's own quirks and differences in interpretations of these languages. There are strong commonalities, but differences remain. Each browser has a rendering engine at it's core.  This engine consumes the raw HTML, CSS and JavaScript, and produces the visual output of a webpage.
+Each browser has it's own quirks and differences in interpretations of these languages. There are strong commonalities, but differences remain. Each browser has a rendering engine at it's core. This engine consumes the raw HTML, CSS and JavaScript, and produces the visual output of a webpage.
 *Firefox uses the Gecko engine.
 *Chrome, Safari and Opera use the Webkit engine.
@@ Line 26: / Line 26: @@
 == Points ==
-*Most HTML tags are formatted like this: &lt;tag attribute="value"&gt;something&lt;/tag&gt;.
+*Most HTML tags are formatted like this:
-*Some HTML tags (like images) don't have a pair: &lt;img src="" alt="" /&gt;.
+ &lt;tag attribute="value"&gt;something&lt;/tag&gt;.
 *HTML 5 specification includes the addition of new tags, such as &lt;audio&gt; and &lt;video&gt;, and the deprecation of others, such as &lt;table&gt;, &lt;b&gt; and &lt;center&gt;.

@@ Line 24: / Line 24: @@
 *Chrome, Safari and Opera use the Webkit engine.
 *Internet Explorer uses the Trident engine.
 == Instructor Notes ==
@@ Line 29: / Line 34: @@
 *Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.html".
 *Double-click that file to open it in the browser.
-*Begin building the HTML structure, bit-by-bit
+*Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
 **make changes
 **save changes