Skip to content

Instantly share code, notes, and snippets.

@opattison

opattison/intro-to-the-web-presentation.html

Forked from anonymous/index.html
Last active August 29, 2015 13:57
Show Gist options
  • Save opattison/9574788 to your computer and use it in GitHub Desktop.
Save opattison/9574788 to your computer and use it in GitHub Desktop.
Download ZIP
“Intro to the Web” presentation made with http://killercup.github.io/biggie/ – version live at http://bl.ocks.org/anonymous/raw/9599023/#0
Raw
intro-to-the-web-presentation.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 <[email protected]>
*/
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="Mobile Safari"></p>
</div>
<div><p><img src="http://temp20140314.s3.amazonaws.com/2014-03-14-12.41.09.png" alt="Desktop Chrome"></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 link 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://example.com"</span>&gt;</span>An anchor<span class="tag">&lt;/<span class="title">a</span>&gt;</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">&lt;<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"/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 curly brackets)</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 the brackets 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><!DOCTYPE html>
<html>
<head>
<title>Plain HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is written in HTML</h1>
<p>This website is written in HTML – hypertext markup language.</p>
<p>All sorts of things can be written in HTML, but at its heart, it is a structured document language. The killer feature of HTML is <a href="http://www.w3.org/html/wg/drafts/html/master/links.html">the hyperlink</a>.</p>
</body>
</html>
Raw
notes.md

2014-03-14 Notes for Intro to the Web

Covering

  • What is a website?
  • The web is not the internet
  • What is a browser?
  • A very brief history of the web
  • The importance of the hyperlink
  • What HTML looks like
  • HTML as a structured document
  • What CSS looks like
  • Examples of CSS styling HTML elements
  • What to do next

Principles of presentation

  • Not too much code
  • Rapid overview
  • Don't get bogged down in the details
  • Entire presentation is published in HTML/CSS
  • Use examples of real websites and apps
  • Try not to be pedantic

Slide Notes

What is a website?

Fundamentally, a website is a document. Websites are written in HTML (hypertext markup language) and styled with CSS (cascading style sheets).

We will talk more about markup and the languages of the web soon. The important bit here is that all websites are written in HTML, which is a document language.

The world wide web is made of documents that are linked.

The web is not the internet

Web != internet

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

The internet predates the world wide web, going all the way back to the 1960s and 1970s. The internet is a world-wide networking technology that has allowed for everything from email to the world wide web to voice and video calling. The internet is the infrastructure that made the web possible.

The world wide web was originally developed as a research project in 1989 by Tim Berners-Lee at CERN (also known more recently for projects like the Large Hadron Collider) to connect scientists in universities and institutes around the world. The web was built to share and link information (that is, documents) over the internet.

Illustrating the difference between IP and HTTP

You know IP addresses (like 10.0.0.1) that you might see if you are trying to connect to a Wi-Fi network at a coffee shop? Those are internet protocol (IP) addresses. Connecting to the right IP address is part of how you are able to “get online”. What can you do with an IP address? Connect to a server anywhere in the world, and not just web servers. When you use your mail app on your phone to get mail, you are downloading mail content from a mail server over the internet but not necessarily over the web.

The web relies on IP too, but also HTTP.

The web however, uses a specific HTTP (hypertext transfer protocol) to connect you (the client) to a web server far away in a data center or closet somewhere (the server). The server provides data to the client, and they can communicate with each other back and forth via HTTP. The web’s HTTP is only one layer – a subset of the broader internet protocol.

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. It also lets you navigate 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

RIP Netscape Navigator (although its roots live on in Mozilla Firefox)

[Show examples of mobile Safari and desktop Chrome]

Common features of browsers:

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

What is not a browser

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

Examples of not-browsers:

  • Yelp
  • Gmail
  • Tumblr
  • Google Maps
  • Uber
  • Spotify

But aren’t those websites too? What about mail.google.com and tumblr.com? Those are websites, but their mobile app counterparts you get from sources like the Apple App Store or Google Play Store are not usually about the web. Only apps like Safari and Chrome are dedicated web browsers.

What about apps like Gmail, Facebook and Twitter where you can access links within the app? Those apps have browsers built-in, but they are not only or even primarily browsers.

So?

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 universal.

What is the most important aspect of the web?

It’s in the name of HTML: hyper text

The hyperlink. Document languages are common (you’ve used Microsoft Word, right?), but what was special about the web over 20 years ago was that pages could be linked. Anything can be linked to anything. The hyperlink takes advantage of the URL (uniform resource locator), which is most commonly known as a “web address”. Every time you activate a link, there is an anchor reference that roughly says: “go to http://example.com”. In HTML this looks like:

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

This one feature might sound trivial, but 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. Let’s put these two elements together.

`

Elements can be placed within one another, nested!

Here is an anchor hyperlink within a paragraph.

`

These bits of code are called elements. An HTML element is a specified and standardized piece of code that gives a semantic definition to text or other content in a document. By “semantic” I mean that the text means something. An <h1> (heading level 1) has a different purpose in a document from a paragraph. Text that is <em> (emphasized) is intended to be spoken or read with stress emphasis. This doesn't mean "presented as italic" – it means emphasized.

An element is always made up of at least one, and usually two significant parts, the 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. In our previous example with the anchor, href is an attribute which defines the URL for that anchor link.

That is all pretty abstract though

Most HTML (at its best) is human readable! If you ignore all of the tags and attributes, you are left with pretty much two things: text and URLs.

We write plain text all of the time. HTML provides semantic meaning and structure for our plain text. It also provides a global context through hyperlinks.

Other things you can do with HTML

Inline images

<img src=“/image.jpg”>

Tables and embedded media content (no time for this)

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 is a programming language that lets us declare styles, adding a presentational layer to an HTML document. This means how it is laid out and how it is formatted. Every web page you have seen today (including this one) is styled using CSS.

Let's style a plain html page with some CSS.

[context switch: plain-html.html]

a {
    color: white;
}

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

body {
  background: gray;
}

[context switch: styled-html.html]

This is the result we get from just a few lines of CSS, targeted at the HTML elements. Except for the CSS being applied, the content of the HTML document in this example is exactly the same.

We are doing something really important here: we are separating content from presentation. The content is in the structured HTML document, while the presentation is handled separately by CSS. This means that we can change the style of our page without altering the meaning and structure of our document.

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 the brackets is the declaration.

[and that is really all we have time for]

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
Raw
plain-html.html
<!DOCTYPE html>
<html>
<head>
<title>Plain HTML</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is written in HTML</h1>
<p>This website is written in HTML – hypertext markup language.</p>
<p>All sorts of things can be written in HTML, but at its heart, it is a structured document language. The killer feature of HTML is <a href="http://www.w3.org/html/wg/drafts/html/master/links.html">the hyperlink</a>.</p>
</body>
</html>
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

network connection

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?

Data center tubes

Data center rows

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

Mobile Safari

Desktop Chrome

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 link 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

this is a web page

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 curly brackets)

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 the brackets 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
Raw
styled-html.html
<!DOCTYPE html>
<html>
<head>
<title>Styled HTML</title>
<meta charset="utf-8">
<style>
body {
background: gray;
padding: 15%;
}
h1 {
color: orange;
font-family: bitter, serif;
font-size: 200%;
}
p {
color: yellow;
font-family: Avenir, sans-serif;
font-size: 150%;
}
a {
color: white;
}
</style>
</head>
<body>
<h1>This is written in HTML</h1>
<p>This website is written in HTML – hypertext markup language.</p>
<p>All sorts of things can be written in HTML, but at its heart, it is a structured document language. The killer feature of HTML is <a href="http://www.w3.org/html/wg/drafts/html/master/links.html">the hyperlink</a>.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment