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
Wait, what???
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
Solution...
World Wide Web
In 10 minutes
Defined
Wait what???
Basically...
Invented by:
Let me explain...
Explained (kind of)
- Steve Jobs
- NeXT Computers
- Tim Berners-Lee
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:
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
Heading
General concepts
Selectors
Statements
Declarations
Common selectors
- h1, h2, h3, h4, h5, h6
- p
- ul, ol, li
- img
- table, tr, td
Look familiar?
h1 { color: red; }
Selector
Declaration
Statement
Property
Value
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
