THE INTERNET &
WORLD WIDE WEB — A BRIEF HISTORY
Sputnik launched by the Soviet Union
Shocked the world! Especially the USA, who was thinking about satellites, just not quite there.
ARPA (the Advanced Research Projects Agency)
• The US Department of Defense created ARPA (now DARPA) to research/develop technology beyond current identified needs.
• Their most famous project was THE INTERNET.
The Internet
• ARPA sponsored/researched “internetting” to link research institutions’ computers.
• Four original host: UCLA, Stanford, UC Berkley, U of Utah
• Packets — data requests being split up in to small chunks which can be processed quickly without blocking communication from other parties.
• Everything is text-based at this point.
TCP/IP (Transmission Control Program/Internet Protocol)
• A new standard masking the differences between existing network protocols (which had become a problem).
• The traffic cop/rules of the digital road for transmitting packets of data.
• Easily joined all networks together.
1957
1960’s
1974
The World Wide Web Developed
• Tim Burners Lee created an information management system where text could contain links and references to other works.
• Created a server for the hypertext docs. and a program for reading them calling it the World Wide Web.
• Released the source code to the public so anyone could build upon it.
The First Browser, Mosaic, is Released
• A browser reads HTML code and displays it in human-readable way
• Now the web is more publicly-accessible.
World Wide Web Consortium (W3C)
• Tim Burners Lee founded the W3C
• W3C Vision: to standardize the protocols and technologies used to build the web for maximum global accessibility.
• They produce a set of recommendations, not rules, but guidelines that we call Web Base Standards
• The Web Standards Project was created to promote W3C Recommendations
Blogging and Social Networks Become Popular
The iPhone
• Steve Jobs develops the iPhone, unleashing a mobile revolution
1990
1993
1994
2002
2007
THE INTERNET V. THE WEB
The Internet
The World-Wide Web
IM
P2P Chat
FTP
VOIP
2 TYPES OF DESIGN/DEVELOPMENT
Client Side
Runs in the browser
Examples: HTML CSS Javascript
Server Side
Runs on the server only
Examples: PHP ASP JAVA
PHP
P
HP
Front-End Design/
Development Back-End Development
THE BROWSER
• Software developed to present data/content sent from a server in visual manner through a Graphical User Interface
(GUI)• Browsers follow W3C standards but vary to some degree in default presentations and vary more so in support for advanced features of CSS.
• Opera, Chrome, Safari and Firefox perform the best. Internet
Explorer historically lags behind.
THE LANGUAGE OF WEB:
HTML
HTML (Hyper Text Markup Language)
• HTML was developed to allow common formatting of text documents for exchange of scientific/research information.
• HTML is simply a way of marking up the content of a page to show what the content is—a header, a paragraph, a list, a link, etc. HTML is used to markup the structure of the document.
CSS • Cascading Style Sheets (CSS) is a separate markup language.
• CSS shows how the HTML content should be displayed — whether the header should be displayed green and large or red and small, whether the links are displayed pink or highlighted or underlined, whether the paragraphs are displayed in the top left or the bottom right, etc.
The separation of content and appearance into HTML and CSS is referred to as Standards-Based Design.
The World Wide Web Consortium (W3C) is the governing body that controls and sets the standards/rules of HTML and CSS.
HTML + CSS = STANDARDS-BASED DESIGN
structure/
content appearance/
presentation
The “What”
The “How”
WHY WEB STANDARDS?
The World Wide Web Consortium (W3C) produce a set of recommendations, not rules, but guidelines called Web Base Standards.
1. EFFICIENCY OF CODE
• You can separate your HTML content from your stylistic CSS and behavioral Javascript • Allows file sizes to be small
• Code can be written once and reused wherever needed
2. EASE OF MAINTENANCE
• Make change once and it will propagate through entire website.
• Saves us from changing each individual instance.
3. ACCESSIBILITY
• Allows website to be accessible to anyone, includes people with disabilities (visual or motor impairments)
4. DEVICE COMPATIBILITY
• Insures your site will work across browsers and devices
5. WEB CRAWLERS/SEARCH ENGINES
• SEO (search engine optimization)
• Makes your site much more visible to web-crawlers
Why does it matter
how I write my code?
getting to know html
you are here � 25
This is the closing tag that ends the heading;
in this case the </h1>
tag is ending an <h1>
heading. You know i t’s a closing tag because
it comes after the content, and it’s got
a “/” before the “h1”.
All closing tags hav e a
“/” in them.
The whole shebang is called an element. In this case we can call it the <h1> element. An element consists of the enclosing tags and the content in between.
Here’s the opening tag that begins the heading.
Tags dissected...
Okay, you’ve seen a bit of markup, so let’s zoom in and take a look at how tags really work...
<h1> Starbuzz Coffee Beverages </h1>
You usually put tags around some piece of content . Here we’re using tags to tell the browser that our content, “Starbuzz Coffee Beverages”, is a top level heading (that is, heading level one).
Tags consist of the tag name surrounded by angle brackets;
that is, the < and > charac ters.
To tell the browser about the structure of your page, use pairs of tags around your content.
Remember,
Element = Opening Tag + Content + Closing Tag
We call an opening tag and its closing tag
matching tags .
Element = Opening Tag + Content + Closing Tag
HTML
TWO MAIN TAGS:
• An HTML document is divided into two main tags—the head and the body.
• The head is invisible in the browser.
• The body contains all the content.
getting to know html
you are here � 23
Are we there yet?
You have an HTML file with markup – does that make a Web page? Almost.
You’ve already seen the <html>, <head>, <title>, and <body> tags, and we just need to add those to make this a first class HTML page...
Next add <head> and </head> tags. T he head contains information about your W eb
page, like its title. For now, think about i t this way: the head allows you t o tell the
browser things about the W eb page.
The body contains all the content and structure of your Web page – the parts of the Web page that you see in your browser.
<html>
<head>
<title>Starbuzz Coffee</title>
</head>
<body>
<h1>Starbuzz Coffee Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>
<h2>Mocha Cafe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>
The head consists of the <head>
& </head> tags and everything in between.
The body consists of the <body>
& </body> tags and everything in between.
Keep your head and body separate when writing HTML.
First, surround your HTML with <html> &
</html> tags. This tells the browser the content
of the file is HTML.
Go ahead and put a title inside the head. The title usually appears at the top
of the browser window.
CSS
• CSS rules select HTML code or attributes to affect and are written using a different syntax.
• One CSS file will affect the whole site (several HTML pages).
• Each rule is made up of the selector and the declaration.
• The declaration contains a series of properties and values separated by a colon.
CSS Rule
(the whole thing)
How much code does a designer need to know?
It Depends...
Graphic Designer at a big wealthy ad agency
In-House Graphic Designer OR
Designer at a small agency or Non-Profit
OR
Freelance Web Designer
...
Might not code at all, but still needs to know how code affects design and what the developers will need
Codes the most. (Especially in a bad economy.) A freelancer usually needs to have the most coding skills of all.
