Writing with HTML

  • Hyper Text Markup Language
the Memex, Vannevar Bush
  • There are a few precursors to Hypertext and HTML
  • First is the Memex, a speculative tabletop device that used microfiche to store entire libraries of information.
  • Vannevar Bush envisioned the memex as a solution to indexed media, which he viewed as unsuitable for human modes of thinking, which are more relational
StorySpace, Eastgate Systems
  • Storyspace was one of the first actualized versions of this idea of Hypertext.
  • A method of writing and storing information that would allow for a nonlinear, networked reading experience.
info.cern.ch
Tim Berners-Lee
wikipedia.org
now we have the internet, with sites like wikipedia, youtube, google, etc. All employing a number of languages...
an demonstration of the Xanadu interface, Ted Nelson
  • there was an alternate proposal to HTTP, called Xanadu by Ted Nelson which was a protocol for navigating networked texts
  • unlike HTTP, Xanadu accounted for link rot by making link bidirectional
  • was more complex and interconnected
  • this is an early prototype showing multiple versions of the same document, side by side
  • and another, 3d, prototype
  • while it never came to fruition, you can see some of the influence in modern interfaces
  • if you are looking for someone to blame for your cognitive overload or 'digital neuroplasticity', you can look to both HTTP and Xanadu
<!DOCTYPE html>
every .html page includes a !DOCTYPE declaration... 
<!DOCTYPE html>                               
<html lang="en">
    ...
</html>
... an html tag ... 
<!DOCTYPE html>                               
<html lang="en">
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>
... a head and body.
In the outermost edge of the document, you'll find the <head> element (which contains the page's metadata) and the <body> element (which contains the page's content). 
<!DOCTYPE html>                               
<html lang="en">
    <head>
        <title>My Website's Title</title>
        ...
    </head>
    <body>
        ...
    </body>
</html>
metadata goes in the head of the document
Your average head element will look something like this. This is where all of the metadata describing your website will go. Most importantly, the title of your webpage. 
<!DOCTYPE html>                               
<html lang="en">
    <head>
        <title>My Website's Title</title>
        ...
    </head>
    <body>
        <h1>My Website's Header</h1>
    	<p>A paragraph with some text.</p>
        ...
    </body>
</html>
content goes in the body
Do you see a pattern? An html document is like a series of containers nested within each other. 
<p> A paragraph with some text. </p>
 ╷               ╷                ╷
 │            content             │
 │                                │
 └─ opening tag      closing tag ─┘
Every element in an HTML document is represented by a tag. 
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 2 </h4>
<h5> Heading 5 </h5>

Heading 1

Heading 2

Heading 3

Heading 2

Heading 5
Tags can represent things like headings... 
<ol>
    <li> This is an </li>
    <li> Ordered </li>
    <li> List </li>
</ol>
  1. This is an
  2. Ordered
  3. List
...or lists... 
<a href="https://en.wikipedia.org/wiki/Hyperlink">Links!</a>
Links!
... and most importantly, links.
www.teleportacia.org/war, Olia Lialina
  • MBCBFTW is an early net art work that relies heavily on the 'frame' element to tell a nonlinear narrative
all-html.net, Evan Roth
it's important to acknowledge that HTML documents can also be read in two ways (browser and inspector)
wwwwwwwww.jodi.org, JODI
JODI plays with ideas of depth, and surfacing the language of the computer