Difference between revisions of "Anatomy of a Webpage 1"

From FreekiWiki
Jump to navigation Jump to search
(Added Basic Terminology section)
(forms)
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
In this class we'll talk a little about webpages; including basic network architecture, history, syntax and tools to deconstruct other webpages as open source.
 +
 
== Basic Terminology ==
 
== Basic Terminology ==
−
*HTML = '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage
+
=== HTML ===
−
*CSS = '''C'''ascading '''S'''tyle'''s'''heets
+
HTML ('''H'''yper'''T'''ext '''M'''arkup '''L'''anguage) is used to create the structure of a web page.
−
*JS = '''J'''ava'''S'''cript (no relation to Java)
+
=== CSS ===
−
*Browser = Software which renders/displays webpages.
+
CSS ('''C'''ascading '''S'''tyle '''S'''heets) provides the styling for one or more web pages.
−
*Client = End-user device, running browser software.
+
=== JS ===
−
*Server = Powerful computers running application software and/or providing [HTML] files.
+
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 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.
 +
=== 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)
  
 
== All Web Pages Are Created Equal ==
 
== All Web Pages Are Created Equal ==
−
First things first.
+
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.
−
CSS and JavaScript are exciting things, but without HTML they have nothing to do. Peanut butter and jelly, but no bread.
+
 
 +
Many webpages have CSS and JavaScript (observe some <link> and <script> 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.
  
−
== HTML ==
+
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.
−
*head
+
*Firefox uses the Gecko engine.
−
*body
+
*Chrome, Safari and Opera use the Webkit engine.
−
*a, img
+
*Internet Explorer uses the Trident engine.
−
*divs
 
−
*tables, and why they're deprecated
 
  
−
== CSS ==
+
== Instructor Notes ==
−
*class and ID
+
*Students should load a favorite webpage, and press CTRL+U. As a class, discuss the findings.
−
*selectors
+
*Students should launch Leafpad, and create a new, empty file on the desktop with their first name, in lowercase "name.html".
−
*media queries (?)
+
*Double-click that file to open it in the browser.
−
*LESS (?)
+
*Begin building the HTML structure, bit-by-bit, discussing things such as proper syntax.
 +
**make changes
 +
**save changes
 +
**reload browser
 +
*Students should find a simple image (like a kitty) and download it to the desktop, named "name.jpg" or similar.
  
−
== JavaScript ==
+
== Points to Discuss ==
−
*The DOM
+
*Most HTML tags are formatted like this:
−
*jQuery. 'nuff said.
+
<tag attribute="value">something</tag>
 +
*Some HTML tags (like images) don't have a pair:
 +
<img src="" alt="" />
 +
*HTML 5 specification includes the addition of new tags, such as <audio> and <video>, and the deprecation of others, such as <table>, <b> and <center>.
  
−
== WebKit Inspector / Firebug ==
+
== Final HTML Structure ==
−
*Live editing. Ain't it cool?
+
<html>
 +
  <head>
 +
    <title>My First Webpage</title>
 +
  </head>
 +
  <body>
 +
    <h1>Headline</h1>
 +
    <p>Paragraph text.</p>
 +
    <img src="name.jpg" alt="Kitty" />
 +
  </body>
 +
  </html>
  
−
== Documentation ==
+
== Resources ==
 
*[https://developer.mozilla.org/en-US/ MDN]
 
*[https://developer.mozilla.org/en-US/ MDN]
 
*[http://www.w3schools.com/ W3Schools]
 
*[http://www.w3schools.com/ W3Schools]
 
*[http://www.webplatform.org/ http://www.webplatform.org/]
 
*[http://www.webplatform.org/ http://www.webplatform.org/]
 +
 +
== Extra Credit ==
 +
This is for future classes, or if there's extra time.
 +
=== Forms ===
 +
*inputs
 +
**text
 +
**hidden
 +
**radio
 +
**password
 +
*buttons
 +
*selects
 +
*textareas
 +
*fieldsets
 +
*legends

Latest revision as of 09:14, 20 March 2013

In this class we'll talk a little about webpages; including basic network architecture, history, syntax and tools to deconstruct other webpages as open source.

Basic Terminology

HTML

HTML (HyperText Markup Language) is used to create the structure of a web page.

CSS

CSS (Cascading Style Sheets) provides the styling for one or more web pages.

JS

JS (JavaScript) 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 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.

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)

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.

Many webpages have CSS and JavaScript (observe some <link> and <script> 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.

  • Firefox uses the Gecko engine.
  • Chrome, Safari and Opera use the Webkit engine.
  • Internet Explorer uses the Trident engine.

Instructor Notes

  • Students should load a favorite webpage, and press CTRL+U. As a class, discuss the findings.
  • 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, discussing things such as proper syntax.
    • make changes
    • save changes
    • reload browser
  • Students should find a simple image (like a kitty) and download it to the desktop, named "name.jpg" or similar.

Points to Discuss

  • Most HTML tags are formatted like this:
<tag attribute="value">something</tag>
  • Some HTML tags (like images) don't have a pair:
<img src="" alt="" />
  • HTML 5 specification includes the addition of new tags, such as <audio> and <video>, and the deprecation of others, such as <table>, <b> and <center>.

Final HTML Structure

<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Headline</h1>
    <p>Paragraph text.</p>
    <img src="name.jpg" alt="Kitty" />
  </body>
</html>

Resources

Extra Credit

This is for future classes, or if there's extra time.

Forms

  • inputs
    • text
    • hidden
    • radio
    • password
  • buttons
  • selects
  • textareas
  • fieldsets
  • legends
Retrieved from "http://wiki.freegeek.org/index.php?title=Anatomy_of_a_Webpage_1&oldid=66665"