loading

hypermedia





the World Wide Web




The World Wide Web is NOT the Internet, confusing the two would be like confusing cars for roads. the Web is one of the many things we use the Internet for, in the same way that cars are one of the many vehicles that travel on roads.









In 1945, an American engineer/inventor/thinker named Vannevar Bush wrote an article in the Atlantic entitled, “As We May Think,” where he described a theoretical machine for storing and reteriving information based on associations ( which he argued would be more akin to the way we think than the way information was currently being organized ) he called it the “memex.” This text influenced lots of radically minded engineers and futurists who followed including Douglas Englebart ( who among many other things invented the mouse ) and Ted Nelson, who coined the term “hypertext” and created one of the first applications ( called Xanadu ) which had linked documents.







In 1989 Tim Berners-Lee wrote a proposal for a system for linking hypertext documents over the Internet. He submitted it to his boss at CERN ( the research institute he was working at ), who wrote in a memo, “vague, but interesting.” Despite the lack of support Berners-Lee went ahead and created HTTP ( Hypertext Transfer Protocol ) and the first application which could read documents formatted with HTML ( Hypertext Markup Language ). CERN still wasn’t interested, so he posted it to a few Internet newsgroups for free ...the rest was history, the World Wide Web was born.




Afraid that the growing popularity of the Web might lead to corporate competition creating proprietary ( non-open ) web applications that would destroy the integrity and open nature of the Web, Berners-Lee held the first WWW conference to discuss open web standards. This lead to the creation of the World Wide Web Consortium ( W3C ) which he still directs to this day. The W3C is an international organization open to anyone ( and made up of governments, companies, not-for-profits, universities, etc. ) and is in charge of developing the open standards for the web.






Internet Art





from early 90's to today




wwwwwwwww.jodi.org
jodi.org ( 1993 )


"form"-alism





"hack"-tivism





hypermedia





hypermedia

( beyond "Internet Art" )









... what's happening now?


>







CSS




webpage without CSS


same webpage, with CSS





CSS ( or Cascading Style Sheets ) are rules organized in blocks of code that specify how different elements should appear on your page. There are three different ways to add CSS to your page ( watch this video to learn them all ) but for the purposes of this class we'll be using <style> tags, inside our head





how to CSS






a CSS block contains two parts, a selector which specifies which element(s) the rules will be applied to and a { declaration }, surounded by curly brackets, which specifies how the element should be styled.

the declaration is split in two parts, the property which indicates the apsect of the element you want to change ( ex: color, font, width, border ) and the value which is the settings you want to use for that specific property.






in the example above all the <a> tags ( or link elements ) on the page are being changed. rather than the default blue underlined text, they will now all be purple ( color: #ff00ff ) with no underline ( text-decoration: none; ).

elements can have multiple CSS states, in the example above we've also created a hover state for our links, so everytime the mouse hovers over a link the color changes to #cc3399




sometimes you want to be able to target specific elements on your page ( rather than effecting all the elements of a specific type ), you can do this by creating a class ( . followed by a name ) and then assigning that class to an element using the html class attribute.





understanding the box



( block elements vs inline elements )






each element on your page is like a container ( literally a box ). some of these are display block, which means they are as wide as the full page by default, forcing a line break between the element below it ( ex: <h1> <p> <div> ). others are display inline which are only ever as wide as their content by default ( ex: <a> <img> <span> )





CSS Positioning







by default the elements on the page appear in the order that they appear in your code, the way they are positioned is referred to as the “normal flow” of the document. Block elements ( ex: <div>, <p>, <h1> ) flow vertically, stacked one after the other. Inline elements ( ex: <span>, <a>, <img> ) flow horizontally ( left to right ) one next to the other. You can override this default flow by asigning CSS positioning to your elements.






More Fonts







you can add custom fonts to your document by using the CSS @font-face rule, giving your font a custom name and specifying the url to the font file you want to use. keep in mind that not all font files work on all browsers though ( but otf tends to be the most cross-platform friendly ).

check out font squirrel for more font options.



Visiting Writer/Curator




homework



read “Copy” by Jussi Parikka
read “the Ecstasy of Influence” by Jonathan Lethem
watch Everything is a Remix parts I && II by Kirby Ferguson






endnotes