Difference between revisions of "Anatomy of a Webpage 1"

From FreekiWiki
Jump to navigation Jump to search
(Added Basic Terminology section)
(expanding...)
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 = '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage
*CSS = '''C'''ascading '''S'''tyle'''s'''heets
+
HTML is used to create the structure of a web page.
 +
*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)
 +
JavaScript provides the actions or functionality for one or more webpages.
 
*Browser = Software which renders/displays webpages.
 
*Browser = Software which renders/displays webpages.
 +
The browser is software which takes these three languages, and interprets them. (called rendering)
 
*Client = End-user device, running browser software.
 
*Client = End-user device, running browser software.
 +
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 = Powerful computers running application software and/or providing [HTML] files.
 +
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 ==

Revision as of 03:27, 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 = HyperText Markup Language

HTML is used to create the structure of a web page.

  • CSS = Cascading Style Sheets

CSS provides the styling for one or more web pages.

  • JS = JavaScript (no relation to Java)

JavaScript provides the actions or functionality for one or more webpages.

  • Browser = Software which renders/displays webpages.

The browser is software which takes these three languages, and interprets them. (called rendering)

  • Client = End-user device, running browser software.

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.

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

First things first. CSS and JavaScript are exciting things, but without HTML they have nothing to do. Peanut butter and jelly, but no bread.

HTML

  • head
  • body
  • a, img
  • divs
  • tables, and why they're deprecated

CSS

  • class and ID
  • selectors
  • media queries (?)
  • LESS (?)

JavaScript

  • The DOM
  • jQuery. 'nuff said.

WebKit Inspector / Firebug

  • Live editing. Ain't it cool?

Documentation