MRW I realized all the TIL about teh internets

Translation:

My reaction when I realized all the things I learned about the internet

The internet

In 5 minutes

Defined

Invented by:

Let me explain...

Explained (kind of)

• US Department of Defense
• ARPANET

More hosts
Bigger network
Global scale

The Internet's 'killer @pp'

Breaking News

UUCP and Usenet

Problem

World Wide Web

In 10 minutes

Defined

Basically...

Invented by:

Let me explain...

Explained (kind of)

• Steve Jobs
• NeXT Computers
• Tim Berners-Lee

hypertext

The birth of...

Tim built the first...

• HTTP
• HTML
• Web Browser
• Web Editor
• Server Software
• Web Server
• Web pages

All on his fancy new NeXT

Fun fact

A message from Tim

Popularizing the Web

Wired, October 1994

When it comes to smashing a paradigm, pleasure is not the most important thing. It is the only thing. If this sounds wrong, consider Mosaic. Mosaic is the celebrated graphical "browser" that allows users to travel through the world of electronic information using a point-and-click interface. Mosaic's charming appearance encourages users to load their own documents onto the Net, including color photos, sound bites, video clips, and hypertext "links" to other documents. By following the links - click, and the linked document appears - you can travel through the online world along paths of whim and intuition. Mosaic is not the most direct way to find online information. Nor is it the most powerful. It is merely the most pleasurable way, and in the 18 months since it was released, Mosaic has incited a rush of excitement and commercial energy unprecedented in the history of the Net.

Mosaic

Marc Andreessen

National Center for Supercomputing Applications (NCSA)

Netscape Navigator

Marc Andreessen

Mosaic Communications Corporation

a.k.a. Netscape

Before we go on

Let's start at the bottom

Started from the bottom now we're here

Binary

0101010100100010100100111110100101001001010010010010100010010100100100100100101000101010010010010011001100101010110101001011010101010101010101101010101011101010101010100010110100101010110010111010101

Binary

0110110 = 23

0000001 = A

000000-111111 = 256 values, color

Binary

Assembly

Written instructions

00110110

10010010

00101101

00100100

Binary

Assembly

Written instructions

00110110

10010010

Compiler (i.e. C)

Symbolic language

Binary

Assembly

C

C++

Written instructions

00110110

10010010

Symbolic language

Improved language

What's in a browser?

Binary

Assembly

Compiler

C++

HTML + CSS + JavaScript

veni
vidi
vici

It's not quite that simple, though

Scary stuff...

Complexity of the average website

1980s

Today

Web technologies

HTML

CSS

JavaScript

Sass

Compass

PHP

MySQL

Angular.js

Grunt

Polymer

Complexities

Software and Hardware Capabilities

Complexities

Abstractions

Example

APIs

Always
Be
Learning

Exciting stuff...

Diversity

Options

Challenges

Advancements

HTML

What you should know about

Structure

It's the

of your document

HTML stands for

• HyperText
• Markup
• Language

Hypertext

This is a paragraph of text. Within it, I may refer to this awesome website by some cool dude, or maybe a list of items I want you to buy:

• Buy this item
• Read this book
• Download this song

Markup

<h1>Main Headline</h1>

<p>This section has 3 sub-sections inside it</p>

   <h2>Sub-section 1</h2>

   <p>Look at this image of a piano!</p>

   <img src="piano.jpg"/>

Markup

What you see in the browser.

<h1>Main Headline</h1>

<p>This section has 3 sub-sections inside it</p>

   <h2>Sub-section 1</h2>

   <p>Look at this image of a piano!</p>

   <img src="piano.jpg"/>

General concepts

Elements
Tags
Attributes

Common elements

• Heading
• Paragraph
• Lists and their items
• Images
• Tables of data

Common tags

• h1, h2, h3, h4, h5, h6
• p
• ul, ol, li
• img
• table, tr, td

<open>Your text</close>

<a href="google.com">
   Google it
</a>

This code

Becomes this in the browser

with the help of CSS...

CSS

What you should know about

Presentation

It's the

of your document

CSS stands for

• Cascading
• Style
• Sheets

Style

• Color
• Typeface
• Spacing
• Size
• Placement
• Layout

The Cascade

Make the heading blue

...other styles

Make the heading red

General concepts

Selectors
Statements
Declarations

Common selectors

• h1, h2, h3, h4, h5, h6
• p
• ul, ol, li
• img
• table, tr, td

Simple

p {

  color: blue;

}

Complex

ul li.nav a:hover {

  margin: 0 auto;

  font-size: 18px;

  color: #08f908;

  border-bottom: 1px solid blue;

  line-height: 1.4

}

Building a website

Setup

Index

Hello, World

You should see this in the browser

Style

You should still see this in the browser

Why?

Link

Test

You should now see this in the browser

Your root folder should look kinda like this