Difference between revisions of "Anatomy of a Webpage 1"

From FreekiWiki
Jump to navigation Jump to search
m (moved Anatomy of a Webpage to Anatomy of a Webpage 1: expansion of series)
(Added Basic Terminology section)
Line 1: Line 1:
== All Webpages Are Created Equal ==
+
== Basic Terminology ==
All webpages are created using HTML. Each page's HTML is loaded by the web browser, and rendered into what we see.
+
*HTML = '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage
Things like CSS make it look fancy, and things like JavaScript make it dance, but it's all HTML at it's core.
+
*CSS = '''C'''ascading '''S'''tyle'''s'''heets
With the decline of Flash due to the mobile experience's lack of hover events, HTML5 is the dominant medium for rich web experiences for the forseeable future.
+
*JS = '''J'''ava'''S'''cript (no relation to Java)
 +
*Browser = Software which renders/displays webpages.
 +
*Client = End-user device, running browser software.
 +
*Server = Powerful computers running application software and/or providing [HTML] files.
  
 +
== All Web Pages Are Created Equal ==
 
First things first.
 
First things first.
 
CSS and JavaScript are exciting things, but without HTML they have nothing to do. Peanut butter and jelly, but no bread.
 
CSS and JavaScript are exciting things, but without HTML they have nothing to do. Peanut butter and jelly, but no bread.

Revision as of 03:13, 20 March 2013

Basic Terminology

  • HTML = HyperText Markup Language
  • CSS = Cascading Stylesheets
  • JS = JavaScript (no relation to Java)
  • Browser = Software which renders/displays webpages.
  • Client = End-user device, running browser software.
  • Server = Powerful computers running application software and/or providing [HTML] files.

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