/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type='text/css'>
body {
  font-family: 'Helvetica Neue';
  background:#000;
  background-size:100%;
  color:#fff;
  margin:0;
  padding:.5em;
}

h1, h2, h3, p {
  margin:0;
  font-weight:200;
}

p, li {
  margin-bottom: .5em;
}

code {
  font-family: "Menlo", monospace;
  letter-spacing: 0;
}

em, i {
  font-weight: 200;
}

strong, b {
  font-weight: 400;
}

mark {
  color: orange;
}

a {
  background: orange;
  color:#000;
  text-decoration:none;
}

img {
  width:100%;
}

div {
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:0;
  left:0;
}

ol, ul {
  list-style-type: none;
  margin: 0.5em 0;
  padding: 0;
}

ul ul, ul ol, ol ol, ol ul {
  margin-left: .5em;
}

ol li:before, ul li:before {
  color: orange;
}

ol {
  counter-reset: list -1;
}

ol li {
  list-style-type: none;
  counter-increment: list;
}

ol li:before {
  content: counter(list, binary) " ";
}

ul li:before {
  content: "- ";
}

/*

Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

</style>
<script type='text/javascript'>
window.onload = function() {
    var s = document.getElementsByTagName('div'), cur = 0;
    if (!s) return;
    function go(n) {
        cur = n;
        var i = 1e3, e = s[n];
        for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
        e.style.display = 'inline-block';
        e.style.fontSize = i + 'px';
        if (e.firstChild.nodeName === 'IMG') {
            document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
            e.firstChild.style.display = 'none';
        } else {
            document.body.style.backgroundImage = '';
            document.body.style.backgroundColor = e.style.backgroundColor;
        }
        while (
            e.offsetWidth > window.innerWidth ||
            e.offsetHeight > window.innerHeight) {
            e.style.fontSize = (i -= 10) + 'px';
            if (i < 0) break;
        }
        e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
        if (window.location.hash !== n) window.location.hash = n;
        document.title = e.textContent || e.innerText;
    }
    document.onclick = function() {
        go(++cur % (s.length));
    };
    document.onkeydown = function(e) {
        (e.which === 39) && go(Math.min(s.length - 1, ++cur));
        (e.which === 37) && go(Math.max(0, --cur));
    };
    function parse_hash() {
        return Math.max(Math.min(
            s.length - 1,
            parseInt(window.location.hash.substring(1), 10)), 0);
    }
    if (window.location.hash) cur = parse_hash() || cur;
    window.onhashchange = function() {
        var c = parse_hash();
        if (c !== cur) go(c);
    };

    go(cur);
};
</script></head><body>
<div><h1>Intro to the web</h1>
</div>
<div><p>What is a website?</p>
</div>
<div><p>A website is a <strong>document</strong>.</p>
<p>The world wide web is made of documents that are linked.</p>
</div>
<div><p>The web != the internet</p>
<p>(This means that the web is not equal to the internet.) </p>
</div>
<div><p>Born in 1989</p>
</div>
<div><p>Place of birth == CERN</p>
</div>
<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Location_Large_Hadron_Collider.PNG" alt=""></p>
</div>
<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Construction_of_LHC_at_CERN.jpg" alt=""></p>
</div>
<div><p>That is a “CMS Detector”.</p>
</div>
<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Construction_of_LHC_at_CERN.jpg" alt=""></p>
</div>
<div><p>Not for detecting content management systems.</p>
</div>
<div><p>Father == Tim Berners-Lee</p>
</div>
<div><p>The web was built to share and link information (that is, documents) over the internet.</p>
</div>
<div><p>Internet Protocol</p>
</div>
<div><p>Coffee shops</p>
</div>
<div><p>10.0.0.1</p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-15.15.59.png" alt="network connection"></p>
</div>
<div><p>The web relies on IP too, but also HTTP.</p>
</div>
<div><p>Hypertext Transfer Protocol</p>
</div>
<div><p>HTTP is only one layer – a subset of the broader internet protocol</p>
</div>
<div><p>Is the internet a series of tubes?</p>
</div>
<div><p>Is it a series of closets?</p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/google-tubes.jpg" alt="Data center tubes"></p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/google-datacenter-tech-01-820x420.jpg" alt="Data center rows"></p>
</div>
<div><h2>A very brief history of the web</h2>
</div>
<div><ul>
<li>1970s The internet</li>
<li>1980s More internet, plus email</li>
<li>1989 Tim Berners-Lee invents the web</li>
<li>1990s The web</li>
<li>2000s Mobile (no not really – more web)</li>
<li>2010s The web</li>
</ul>
</div>
<div><p>What is a browser?</p>
</div>
<div><p>A browser is software that displays and renders websites. A browser navigates from one site to another.</p>
</div>
<div><p>Examples of modern web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera</p>
</div>
<div><p>Examples of modern mobile web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera</p>
</div>
<div><p>(the same)</p>
</div>
<div><p>RIP Netscape Navigator</p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-12.40.33.png" alt=""></p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-12.41.09.png" alt=""></p>
</div>
<div><p>Common features of browsers:</p>
<ul>
<li>URL bar</li>
<li>Retrieves web pages via URLs</li>
<li>Back/forward controls</li>
<li>A window that displays rendered HTML as a page</li>
</ul>
</div>
<div><p>Most of the apps on your phone or tablet are not browsers.</p>
</div>
<div><p>Examples of not-browsers on iOS and Android:</p>
<ul>
<li>Yelp</li>
<li>Gmail</li>
<li>Tumblr</li>
<li>Google Maps</li>
<li>Uber</li>
<li>Spotify</li>
</ul>
</div>
<div><p>Unlike mobile apps, the web is universal.</p>
</div>
<div><p>HTML and CSS don&#39;t much care what kind of browser you have.</p>
</div>
<div><p>(designers do, though)</p>
</div>
<div><p>The web is not about pixel widths.</p>
</div>
<div><p>The web is not about the canvas.</p>
</div>
<div><p>The web is responsive.</p>
</div>
<div><p>The web is universal.</p>
</div>
<div><h2>What is the most important aspect of the web?</h2>
</div>
<div><p>It’s in the name</p>
</div>
<div><p><em>hyper</em> text</p>
</div>
<div><p>The <strong>hyperlink</strong></p>
</div>
<div><p>Anything can be linked to anything.</p>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>&gt;</span>This is a hypertext link to example.com<span class="tag">&lt;/<span class="title">a</span>&gt;</span></code></pre>
</div>
<div><p>This is how businesses like Google and Yahoo originally made billions of dollars.</p>
</div>
<div><h2>What does HTML look like?</h2>
</div>
<div><p>This is </p>
<pre><code class="lang-html"><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></pre>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">p</span>&gt;</span>This is an element.<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></pre>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">p</span>&gt;</span>In particular, this element is a paragraph element.<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></pre>
</div>
<div><p>And here is the one we ran into a minute ago, the anchor.</p>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>&gt;</span>This is a hypertext anchor link that goes to example.com<span class="tag">&lt;/<span class="title">a</span>&gt;</span></code></pre>
</div>
<div><p><code>a</code> is for anchor. <code>p</code> is for paragraph.</p>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">p</span>&gt;</span>Elements can be placed within one another, nested!<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;<span class="title">p</span>&gt;</span>Here is an <span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>&gt;</span>anchor hyperlink<span class="tag">&lt;/<span class="title">a</span>&gt;</span> within a paragraph.<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></pre>
</div>
<div><p>These are <strong>HTML elements</strong>.</p>
</div>
<div><p>Standardized</p>
</div>
<div><p>Semantic</p>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">h1</span>&gt;</span>Heading Level 1<span class="tag">&lt;/<span class="title">h1</span>&gt;</span></code></pre>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">em</span>&gt;</span>Stress<span class="tag">&lt;/<span class="title">em</span>&gt;</span> emphasis</code></pre>
<p><em>stress</em> emphasis</p>
</div>
<div><pre><code class="lang-html"><span class="tag">&lt;<span class="title">strong</span>&gt;</span>Stronger importance<span class="tag">&lt;/<span class="title">strong</span>&gt;</span> than other text</code></pre>
<p><strong>stronger importance</strong> than other text</p>
</div>
<div><p>HTML is semantic!</p>
</div>
<div><p>Back to elements</p>
</div>
<div><p>An element is made up of <strong>tags</strong> and <strong>attributes</strong></p>
</div>
<div><p>The opening <strong>tag</strong> <code>&lt;p&gt;</code> that begins a paragraph element and the closing tag <code>&lt;/p&gt;</code> that ends that element are generally <em>required</em> for elements.</p>
</div>
<div><p>An element can also have an attribute like <code>&lt;p class=&quot;classy&quot;&gt;</code>. Now the paragraph has “classy” as a <code>class</code> attribute.</p>
</div>
<div><p>Another example of attributes:</p>
<pre><code class="lang-html"><span class="tag">&lt;<span class="title">a</span> <span class="attribute">href</span>=<span class="value">“http:</span>//<span class="attribute">example.com</span>”&gt;</span>An anchor<span class="tag">&lt;/<span class="title">a</span>&gt;</span></code></pre>
<p>The &quot;href&quot; telling the browser which site to navigate to is an attribute for this anchor element.</p>
</div>
<div><h2>That is all pretty abstract though</h2>
</div>
<div><p>HTML (at its best) is human readable.</p>
</div>
<div><p>Besides the elements, HTML is mostly plain text and URLs.</p>
</div>
<div><h2>Other things you can do with HTML</h2>
</div>
<div><p>Inline images</p>
<pre><code class="lang-html"><span class="tag">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">“</span>/<span class="attribute">image.jpg</span>”&gt;</span></code></pre>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-01-20-161924.jpg" alt=""></p>
</div>
<div><p>Also tables of data and media embeds.</p>
</div>
<div><p>Pretend I inserted an example of a table or media embed. I know, it&#39;s a lot of slides.</p>
</div>
<div><h2>But HTML on its own can be ugly</h2>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-15.00.54.png" alt="this is a web page"></p>
</div>
<div><p>Blue and purple links.</p>
</div>
<div><p>Dull typography.</p>
</div>
<div><p>Bland black-on-white uniformity.</p>
</div>
<div><p>That is why we have CSS.</p>
<p>(Cascading Style Sheets)</p>
</div>
<div><p>Every web page you have seen today (including this one) is styled using CSS.</p>
</div>
<div><pre><code class="lang-css"><span class="tag">h1</span> <span class="rules">{
    <span class="rule"><span class="attribute">color</span>:<span class="value"> orange;</span></span>
    <span class="rule"><span class="attribute">font-family</span>:<span class="value"> bitter, serif;</span></span>
    <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">200</span>%;</span></span>
<span class="rule">}</span></span></code></pre>
</div>
<div><pre><code class="lang-css"><span class="tag">a</span> <span class="rules">{
    <span class="rule"><span class="attribute">color</span>:<span class="value"> white;</span></span>
<span class="rule">}</span></span></code></pre>
</div>
<div><pre><code class="lang-css"><span class="tag">p</span> <span class="rules">{
    <span class="rule"><span class="attribute">color</span>:<span class="value"> yellow;</span></span>
    <span class="rule"><span class="attribute">font-family</span>:<span class="value"> Avenir, sans-serif;</span></span>
    <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">150</span>%;</span></span>
<span class="rule">}</span></span></code></pre>
</div>
<div><pre><code class="lang-css"><span class="tag">body</span> <span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> gray;</span></span>
<span class="rule">}</span></span></code></pre>
</div>
<div><p>Separating content from presentation.</p>
</div>
<div><p>Change the style of the page without changing its content.</p>
</div>
<div><h2>How CSS syntax works</h2>
</div>
<div><p><strong>Selector</strong> (the HTML we are targeting)</p>
</div>
<div><p><strong>Declaration</strong> (inside the braces)</p>
</div>
<div><p><strong>Property</strong> (the property we want to apply, like color or size)</p>
</div>
<div><p><strong>Value</strong> (the value we want to assign to that property, like red or 40 pixels)</p>
</div>
<div><pre><code class="lang-css"><span class="tag">selector</span> <span class="rules">{
  <span class="rule"><span class="attribute">property</span>:<span class="value"> value;</span></span>
<span class="rule">}</span></span></code></pre>
<p>The stuff inside is the declaration.</p>
</div>
<div><h2>What you should do now</h2>
</div>
<div><ul>
<li>Take the introductory <a href="http://www.codecademy.com/tracks/web">HTML &amp; CSS track on Codecademy</a></li>
<li>Practice using HTML and CSS using CodePen</li>
<li>Start looking at source code to see how your favorite websites are built</li>
<li>Ask questions!</li>
<li>Make a website</li>
</ul>
</div>

## slides.md

      
    Raw
  

              slides.md
            
          
    Intro to the web


What is a website?

A website is a document.
The world wide web is made of documents that are linked.

The web != the internet
(This means that the web is not equal to the internet.)

Born in 1989

Place of birth == CERN


That is a “CMS Detector”.


Not for detecting content management systems.

Father == Tim Berners-Lee

The web was built to share and link information (that is, documents) over the internet.

Internet Protocol

Coffee shops

10.0.0.1


The web relies on IP too, but also HTTP.

Hypertext Transfer Protocol

HTTP is only one layer – a subset of the broader internet protocol

Is the internet a series of tubes?

Is it a series of closets?


A very brief history of the web


1970s The internet
1980s More internet, plus email
1989 Tim Berners-Lee invents the web
1990s The web
2000s Mobile (no not really – more web)
2010s The web


What is a browser?

A browser is software that displays and renders websites. A browser navigates from one site to another.

Examples of modern web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera

Examples of modern mobile web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera

(the same)

RIP Netscape Navigator


Common features of browsers:

URL bar
Retrieves web pages via URLs
Back/forward controls
A window that displays rendered HTML as a page


Most of the apps on your phone or tablet are not browsers.

Examples of not-browsers on iOS and Android:

Yelp
Gmail
Tumblr
Google Maps
Uber
Spotify


Unlike mobile apps, the web is universal.

HTML and CSS don't much care what kind of browser you have.

(designers do, though)

The web is not about pixel widths.

The web is not about the canvas.

The web is responsive.

The web is universal.

What is the most important aspect of the web?


It’s in the name

hyper text

The hyperlink

Anything can be linked to anything.

<a href="http://example.com">This is a hypertext link to example.com</a>

This is how businesses like Google and Yahoo originally made billions of dollars.

What does HTML look like?


This is
<html>

<p>This is an element.</p>

<p>In particular, this element is a paragraph element.</p>

And here is the one we ran into a minute ago, the anchor.

<a href="http://example.com">This is a hypertext anchor link that goes to example.com</a>

a is for anchor. p is for paragraph.

<p>Elements can be placed within one another, nested!</p>
<p>Here is an <a href="http://example.com">anchor hyperlink</a> within a paragraph.</p>

These are HTML elements.

Standardized

Semantic

<h1>Heading Level 1</h1>

<em>Stress</em> emphasis
stress emphasis

<strong>Stronger importance</strong> than other text
stronger importance than other text

HTML is semantic!

Back to elements

An element is made up of tags and attributes

The opening tag <p> that begins a paragraph element and the closing tag </p> that ends that element are generally required for elements.

An element can also have an attribute like <p class="classy">. Now the paragraph has “classy” as a class attribute.

Another example of attributes:
<a href=“http://example.com”>An anchor</a>
The "href" telling the browser which site to navigate to is an attribute for this anchor element.

That is all pretty abstract though


HTML (at its best) is human readable.


Besides the elements, HTML is mostly plain text and URLs.

Other things you can do with HTML


Inline images
<img src=“/image.jpg”>


Also tables of data and media embeds.

Pretend I inserted an example of a table or media embed. I know, it's a lot of slides.

But HTML on its own can be ugly


Blue and purple links.

Dull typography.

Bland black-on-white uniformity.

That is why we have CSS.
(Cascading Style Sheets)

Every web page you have seen today (including this one) is styled using CSS.

h1 {
    color: orange;
    font-family: bitter, serif;
    font-size: 200%;
}

a {
    color: white;
}

p {
    color: yellow;
    font-family: Avenir, sans-serif;
    font-size: 150%;
}

body {
  background: gray;
}

Separating content from presentation.

Change the style of the page without changing its content.

How CSS syntax works


Selector (the HTML we are targeting)

Declaration (inside the braces)

Property (the property we want to apply, like color or size)

Value (the value we want to assign to that property, like red or 40 pixels)

selector {
  property: value;
}
The stuff inside is the declaration.

What you should do now


Take the introductory HTML & CSS track on Codecademy
Practice using HTML and CSS using CodePen
Start looking at source code to see how your favorite websites are built
Ask questions!
Make a website
	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<style type='text/css'>
	body {
	font-family: 'Helvetica Neue';
	background:#000;
	background-size:100%;
	color:#fff;
	margin:0;
	padding:.5em;
	}

	h1, h2, h3, p {
	margin:0;
	font-weight:200;
	}

	p, li {
	margin-bottom: .5em;
	}

	code {
	font-family: "Menlo", monospace;
	letter-spacing: 0;
	}

	em, i {
	font-weight: 200;
	}

	strong, b {
	font-weight: 400;
	}

	mark {
	color: orange;
	}

	a {
	background: orange;
	color:#000;
	text-decoration:none;
	}

	img {
	width:100%;
	}

	div {
	cursor:pointer;
	cursor:hand;
	position:absolute;
	top:0;
	left:0;
	}

	ol, ul {
	list-style-type: none;
	margin: 0.5em 0;
	padding: 0;
	}

	ul ul, ul ol, ol ol, ol ul {
	margin-left: .5em;
	}

	ol li:before, ul li:before {
	color: orange;
	}

	ol {
	counter-reset: list -1;
	}

	ol li {
	list-style-type: none;
	counter-increment: list;
	}

	ol li:before {
	content: counter(list, binary) " ";
	}

	ul li:before {
	content: "- ";
	}

	/*

	Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

	*/

	pre code {
	display: block; padding: 0.5em;
	background: #000; color: #f8f8f8;
	}

	pre .comment,
	pre .template_comment,
	pre .javadoc {
	color: #aeaeae;
	font-style: italic;
	}

	pre .keyword,
	pre .ruby .function .keyword,
	pre .request,
	pre .status,
	pre .nginx .title {
	color: #E28964;
	}

	pre .function .keyword,
	pre .sub .keyword,
	pre .method,
	pre .list .title {
	color: #99CF50;
	}

	pre .string,
	pre .tag .value,
	pre .cdata,
	pre .filter .argument,
	pre .attr_selector,
	pre .apache .cbracket,
	pre .date,
	pre .tex .command {
	color: #65B042;
	}

	pre .subst {
	color: #DAEFA3;
	}

	pre .regexp {
	color: #E9C062;
	}

	pre .title,
	pre .sub .identifier,
	pre .pi,
	pre .tag,
	pre .tag .keyword,
	pre .decorator,
	pre .shebang,
	pre .prompt {
	color: #89BDFF;
	}

	pre .class .title,
	pre .haskell .type,
	pre .smalltalk .class,
	pre .javadoctag,
	pre .yardoctag,
	pre .phpdoc {
	text-decoration: underline;
	}

	pre .symbol,
	pre .ruby .symbol .string,
	pre .number {
	color: #3387CC;
	}

	pre .params,
	pre .variable,
	pre .clojure .attribute {
	color: #3E87E3;
	}

	pre .css .tag,
	pre .rules .property,
	pre .pseudo,
	pre .tex .special {
	color: #CDA869;
	}

	pre .css .class {
	color: #9B703F;
	}

	pre .rules .keyword {
	color: #C5AF75;
	}

	pre .rules .value {
	color: #CF6A4C;
	}

	pre .css .id {
	color: #8B98AB;
	}

	pre .annotation,
	pre .apache .sqbracket,
	pre .nginx .built_in {
	color: #9B859D;
	}

	pre .preprocessor {
	color: #8996A8;
	}

	pre .hexcolor,
	pre .css .value .number {
	color: #DD7B3B;
	}

	pre .css .function {
	color: #DAD085;
	}

	pre .diff .header,
	pre .chunk,
	pre .tex .formula {
	background-color: #0E2231;
	color: #F8F8F8;
	font-style: italic;
	}

	pre .diff .change {
	background-color: #4A410D;
	color: #F8F8F8;
	}

	pre .addition {
	background-color: #253B22;
	color: #F8F8F8;
	}

	pre .deletion {
	background-color: #420E09;
	color: #F8F8F8;
	}

	pre .coffeescript .javascript,
	pre .javascript .xml,
	pre .tex .formula,
	pre .xml .javascript,
	pre .xml .vbscript,
	pre .xml .css,
	pre .xml .cdata {
	opacity: 0.5;
	}

	</style>
	<script type='text/javascript'>
	window.onload = function() {
	var s = document.getElementsByTagName('div'), cur = 0;
	if (!s) return;
	function go(n) {
	cur = n;
	var i = 1e3, e = s[n];
	for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
	e.style.display = 'inline-block';
	e.style.fontSize = i + 'px';
	if (e.firstChild.nodeName === 'IMG') {
	document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
	e.firstChild.style.display = 'none';
	} else {
	document.body.style.backgroundImage = '';
	document.body.style.backgroundColor = e.style.backgroundColor;
	}
	while (
	e.offsetWidth > window.innerWidth \|\|
	e.offsetHeight > window.innerHeight) {
	e.style.fontSize = (i -= 10) + 'px';
	if (i < 0) break;
	}
	e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
	if (window.location.hash !== n) window.location.hash = n;
	document.title = e.textContent \|\| e.innerText;
	}
	document.onclick = function() {
	go(++cur % (s.length));
	};
	document.onkeydown = function(e) {
	(e.which === 39) && go(Math.min(s.length - 1, ++cur));
	(e.which === 37) && go(Math.max(0, --cur));
	};
	function parse_hash() {
	return Math.max(Math.min(
	s.length - 1,
	parseInt(window.location.hash.substring(1), 10)), 0);
	}
	if (window.location.hash) cur = parse_hash() \|\| cur;
	window.onhashchange = function() {
	var c = parse_hash();
	if (c !== cur) go(c);
	};

	go(cur);
	};
	</script></head><body>
	<div><h1>Intro to the web</h1>
	</div>
	<div><p>What is a website?</p>
	</div>
	<div><p>A website is a <strong>document</strong>.</p>
	<p>The world wide web is made of documents that are linked.</p>
	</div>
	<div><p>The web != the internet</p>
	<p>(This means that the web is not equal to the internet.) </p>
	</div>
	<div><p>Born in 1989</p>
	</div>
	<div><p>Place of birth == CERN</p>
	</div>
	<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Location_Large_Hadron_Collider.PNG" alt=""></p>
	</div>
	<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Construction_of_LHC_at_CERN.jpg" alt=""></p>
	</div>
	<div><p>That is a “CMS Detector”.</p>
	</div>
	<div><p><img src="http://upload.wikimedia.org/wikipedia/commons/b/b9/Construction_of_LHC_at_CERN.jpg" alt=""></p>
	</div>
	<div><p>Not for detecting content management systems.</p>
	</div>
	<div><p>Father == Tim Berners-Lee</p>
	</div>
	<div><p>The web was built to share and link information (that is, documents) over the internet.</p>
	</div>
	<div><p>Internet Protocol</p>
	</div>
	<div><p>Coffee shops</p>
	</div>
	<div><p>10.0.0.1</p>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-15.15.59.png" alt="network connection"></p>
	</div>
	<div><p>The web relies on IP too, but also HTTP.</p>
	</div>
	<div><p>Hypertext Transfer Protocol</p>
	</div>
	<div><p>HTTP is only one layer – a subset of the broader internet protocol</p>
	</div>
	<div><p>Is the internet a series of tubes?</p>
	</div>
	<div><p>Is it a series of closets?</p>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/google-tubes.jpg" alt="Data center tubes"></p>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/google-datacenter-tech-01-820x420.jpg" alt="Data center rows"></p>
	</div>
	<div><h2>A very brief history of the web</h2>
	</div>
	<div><ul>
	<li>1970s The internet</li>
	<li>1980s More internet, plus email</li>
	<li>1989 Tim Berners-Lee invents the web</li>
	<li>1990s The web</li>
	<li>2000s Mobile (no not really – more web)</li>
	<li>2010s The web</li>
	</ul>
	</div>
	<div><p>What is a browser?</p>
	</div>
	<div><p>A browser is software that displays and renders websites. A browser navigates from one site to another.</p>
	</div>
	<div><p>Examples of modern web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera</p>
	</div>
	<div><p>Examples of modern mobile web browsers are: Google Chrome, Apple’s Safari, Microsoft Internet Explorer, Mozilla Firefox, Opera</p>
	</div>
	<div><p>(the same)</p>
	</div>
	<div><p>RIP Netscape Navigator</p>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-12.40.33.png" alt=""></p>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-12.41.09.png" alt=""></p>
	</div>
	<div><p>Common features of browsers:</p>
	<ul>
	<li>URL bar</li>
	<li>Retrieves web pages via URLs</li>
	<li>Back/forward controls</li>
	<li>A window that displays rendered HTML as a page</li>
	</ul>
	</div>
	<div><p>Most of the apps on your phone or tablet are not browsers.</p>
	</div>
	<div><p>Examples of not-browsers on iOS and Android:</p>
	<ul>
	<li>Yelp</li>
	<li>Gmail</li>
	<li>Tumblr</li>
	<li>Google Maps</li>
	<li>Uber</li>
	<li>Spotify</li>
	</ul>
	</div>
	<div><p>Unlike mobile apps, the web is universal.</p>
	</div>
	<div><p>HTML and CSS don't much care what kind of browser you have.</p>
	</div>
	<div><p>(designers do, though)</p>
	</div>
	<div><p>The web is not about pixel widths.</p>
	</div>
	<div><p>The web is not about the canvas.</p>
	</div>
	<div><p>The web is responsive.</p>
	</div>
	<div><p>The web is universal.</p>
	</div>
	<div><h2>What is the most important aspect of the web?</h2>
	</div>
	<div><p>It’s in the name</p>
	</div>
	<div><p><em>hyper</em> text</p>
	</div>
	<div><p>The <strong>hyperlink</strong></p>
	</div>
	<div><p>Anything can be linked to anything.</p>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>></span>This is a hypertext link to example.com<span class="tag"></<span class="title">a</span>></span></code></pre>
	</div>
	<div><p>This is how businesses like Google and Yahoo originally made billions of dollars.</p>
	</div>
	<div><h2>What does HTML look like?</h2>
	</div>
	<div><p>This is </p>
	<pre><code class="lang-html"><span class="tag"><<span class="title">html</span>></span></code></pre>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">p</span>></span>This is an element.<span class="tag"></<span class="title">p</span>></span></code></pre>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">p</span>></span>In particular, this element is a paragraph element.<span class="tag"></<span class="title">p</span>></span></code></pre>
	</div>
	<div><p>And here is the one we ran into a minute ago, the anchor.</p>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>></span>This is a hypertext anchor link that goes to example.com<span class="tag"></<span class="title">a</span>></span></code></pre>
	</div>
	<div><p><code>a</code> is for anchor. <code>p</code> is for paragraph.</p>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">p</span>></span>Elements can be placed within one another, nested!<span class="tag"></<span class="title">p</span>></span>
	<span class="tag"><<span class="title">p</span>></span>Here is an <span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://example.com"</span>></span>anchor hyperlink<span class="tag"></<span class="title">a</span>></span> within a paragraph.<span class="tag"></<span class="title">p</span>></span></code></pre>
	</div>
	<div><p>These are <strong>HTML elements</strong>.</p>
	</div>
	<div><p>Standardized</p>
	</div>
	<div><p>Semantic</p>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">h1</span>></span>Heading Level 1<span class="tag"></<span class="title">h1</span>></span></code></pre>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">em</span>></span>Stress<span class="tag"></<span class="title">em</span>></span> emphasis</code></pre>
	<p><em>stress</em> emphasis</p>
	</div>
	<div><pre><code class="lang-html"><span class="tag"><<span class="title">strong</span>></span>Stronger importance<span class="tag"></<span class="title">strong</span>></span> than other text</code></pre>
	<p><strong>stronger importance</strong> than other text</p>
	</div>
	<div><p>HTML is semantic!</p>
	</div>
	<div><p>Back to elements</p>
	</div>
	<div><p>An element is made up of <strong>tags</strong> and <strong>attributes</strong></p>
	</div>
	<div><p>The opening <strong>tag</strong> <code><p></code> that begins a paragraph element and the closing tag <code></p></code> that ends that element are generally <em>required</em> for elements.</p>
	</div>
	<div><p>An element can also have an attribute like <code><p class="classy"></code>. Now the paragraph has “classy” as a <code>class</code> attribute.</p>
	</div>
	<div><p>Another example of attributes:</p>
	<pre><code class="lang-html"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">“http:</span>//<span class="attribute">example.com</span>”></span>An anchor<span class="tag"></<span class="title">a</span>></span></code></pre>
	<p>The "href" telling the browser which site to navigate to is an attribute for this anchor element.</p>
	</div>
	<div><h2>That is all pretty abstract though</h2>
	</div>
	<div><p>HTML (at its best) is human readable.</p>
	</div>
	<div><p>Besides the elements, HTML is mostly plain text and URLs.</p>
	</div>
	<div><h2>Other things you can do with HTML</h2>
	</div>
	<div><p>Inline images</p>
	<pre><code class="lang-html"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">“</span>/<span class="attribute">image.jpg</span>”></span></code></pre>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-01-20-161924.jpg" alt=""></p>
	</div>
	<div><p>Also tables of data and media embeds.</p>
	</div>
	<div><p>Pretend I inserted an example of a table or media embed. I know, it's a lot of slides.</p>
	</div>
	<div><h2>But HTML on its own can be ugly</h2>
	</div>
	<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-15.00.54.png" alt="this is a web page"></p>
	</div>
	<div><p>Blue and purple links.</p>
	</div>
	<div><p>Dull typography.</p>
	</div>
	<div><p>Bland black-on-white uniformity.</p>
	</div>
	<div><p>That is why we have CSS.</p>
	<p>(Cascading Style Sheets)</p>
	</div>
	<div><p>Every web page you have seen today (including this one) is styled using CSS.</p>
	</div>
	<div><pre><code class="lang-css"><span class="tag">h1</span> <span class="rules">{
	<span class="rule"><span class="attribute">color</span>:<span class="value"> orange;</span></span>
	<span class="rule"><span class="attribute">font-family</span>:<span class="value"> bitter, serif;</span></span>
	<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">200</span>%;</span></span>
	<span class="rule">}</span></span></code></pre>
	</div>
	<div><pre><code class="lang-css"><span class="tag">a</span> <span class="rules">{
	<span class="rule"><span class="attribute">color</span>:<span class="value"> white;</span></span>
	<span class="rule">}</span></span></code></pre>
	</div>
	<div><pre><code class="lang-css"><span class="tag">p</span> <span class="rules">{
	<span class="rule"><span class="attribute">color</span>:<span class="value"> yellow;</span></span>
	<span class="rule"><span class="attribute">font-family</span>:<span class="value"> Avenir, sans-serif;</span></span>
	<span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">150</span>%;</span></span>
	<span class="rule">}</span></span></code></pre>
	</div>
	<div><pre><code class="lang-css"><span class="tag">body</span> <span class="rules">{
	<span class="rule"><span class="attribute">background</span>:<span class="value"> gray;</span></span>
	<span class="rule">}</span></span></code></pre>
	</div>
	<div><p>Separating content from presentation.</p>
	</div>
	<div><p>Change the style of the page without changing its content.</p>
	</div>
	<div><h2>How CSS syntax works</h2>
	</div>
	<div><p><strong>Selector</strong> (the HTML we are targeting)</p>
	</div>
	<div><p><strong>Declaration</strong> (inside the braces)</p>
	</div>
	<div><p><strong>Property</strong> (the property we want to apply, like color or size)</p>
	</div>
	<div><p><strong>Value</strong> (the value we want to assign to that property, like red or 40 pixels)</p>
	</div>
	<div><pre><code class="lang-css"><span class="tag">selector</span> <span class="rules">{
	<span class="rule"><span class="attribute">property</span>:<span class="value"> value;</span></span>
	<span class="rule">}</span></span></code></pre>
	<p>The stuff inside is the declaration.</p>
	</div>
	<div><h2>What you should do now</h2>
	</div>
	<div><ul>
	<li>Take the introductory <a href="http://www.codecademy.com/tracks/web">HTML & CSS track on Codecademy</a></li>
	<li>Practice using HTML and CSS using CodePen</li>
	<li>Start looking at source code to see how your favorite websites are built</li>
	<li>Ask questions!</li>
	<li>Make a website</li>
	</ul>
	</div>