Studio 2: HTML

Prof. AlvaradoMDST 3703/77036 September 2012

Review• The concept of hypertext is as old as the

computer– Although the memex was not a computer, Bush was one of the

“fathers” of the computer• Bush’s and Nelson’s visions remain

unrealized– We still don’t have a system for capturing trails– Our systems our built on the metaphor of the “file”

• Tim Berners-Lee revolutionized hypertext by inventing the social link– The World Wide Web connect lexia across the network– This was a brand new idea not envisioned by hypertext

theorists

Hypertext is the first big idea of the digital liberal arts

It represents a rethinking of knowledge through the

critical and practical investigation of text

Hypertext as an idea is based on the premise that text shapes knowledge

See media determinism and the

rationalization effect

Concepts

• Rationalization Effect– The condition of having to rethink assumptions and

tacit knowledge as a result of technological disruption

– ‘Rationalization’ in the sense defined by Max Weber• Media Determinism– The view that media forms determine, or at least

strongly shape, cognitive and social forms – E.g. literacy hierarchy logical rationality

HTML and the WorldWideWeb

How it Works

• The World Wide Web is a system that sits on top of the Internet– The Internet is the global network of computers

that began in 1969 between UCLA and Stanford• The system consists of HTML and

HTTP– HTML is a language used to write documents and

is interpreted by browsers on clients– HTTP is a protocol that servers use to connect and

transfer documents across the network

The Internet as ARPANET in 1970

GLOBAL HYPERTEXT

Some more vocabulary

NetworkA spatially distributed set of computers that can communicate with each other

ServerA computer or a program that exchanges information with other computers

ClientA computer or a program that receives information from a server for humans to consume

ProtocolThe language that servers use to communicate (e.g. HTTP, FTP, NNTP, SMTP, etc.)

Internet Communication

SERVERS TALKING TO EACH OTHER

Basic HTML

The document mark-up language of the World Wide Web

An example of “source code” that is “interpreted” by browsers

Break up into groups

Help each other with small questions

Exercise 1: View Source

• Find a web page … – http//faculty.vassar.edu/mijoyce/Ted_sed.html

• Open “View Source” on your browser– Chrome: View > Developer > View Source– Firefox: Tools > Web Developer > Page Source

• Notice the pattern– Lots of angle brackets– What do they look like they are doing there?– What is the difference between “source” and the

rendered view of the page?

Angle brackets are called tagsTags are used to define elements

of textStart tags can have attributes

We will discuss the significance of these next

Tuesday

In general, tags produce effects on elementsEffects include: position and style, but also

behaviors, like linking

Exercise 2: Hello, World!

• Download JEdit (a decent, cross-platform text editor)– See blog post on course site

• Create a new file• Save the file – Call it “index.html”

• Write the following string<p>Hello, World!</p>

• Open the file in your browser

Some Basic Elements

• Paragraphs: <p>…</p>• Headers: <h1>…</h1>, <h2>…</h2>• Format: <b>…</b>, <i>…</i>, <u>…</u>• Images:

<img src=“http://foo.com/img.gif”></img>

• Links = <a href=“http://foo.com/page.html”>Label of link</a>

• Other elements– Lists, tables, etc.– See http://www.w3schools.com/html/default.asp

Exercise 3: Add More Elements

• Create some headers and add some paragraphs with formatted text

• Add an image• Add a link• You can grab text from a “lorem

ipsum” generator on the web– http://www.lipsum.com/ – http://slipsum.com/ (EXPLICIT)

The Prime Directive: Tags must always nest

NO OVERLAPPING TAGS

Nesting Tags

<p>This is <b>OK</b></p>

<p>This is <b>NOT OK</p></b>

Anatomy of a URL

• All web addresses are expressed as URLs– Uniform Resource Locators

• Everything on the web has to have a URL• URLs have the following parts:

http://www.virginia.edu/someresource.html#some_place?key=value

THE PROTOCOL

THE SERVER

THE PAGE (DEFAULT index.html)

THE ANCHOR (OPTIONAL)

THE PARAMETERS (OPTIONAL)

Exercise 4: Put the file on the web

• Install the Home Directory Service tool– See blog post for URL

• Drag the file into the public_html directory– Create it if it is not there

• Look at the page in your browswer– http://www.people.virginia.edu/~rca2t• Replace rca2t with your netid

Exercise 5: Link to your page from WP

• Create a new post• Create a link to your newly

created home page