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 t...
Hypertext is the first big idea of    the digital liberal arts     It represents a rethinking of  knowledge through the cr...
Hypertext as an idea is based on thepremise that text shapes knowledge    See media determinism and the         rationaliz...
Concepts• Rationalization Effect  – The condition of having to rethink assumptions    and tacit knowledge as a result of t...
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 co...
The Internet as ARPANET in 1970
GLOBAL HYPERTEXT
Some more vocabularyNetwork   A spatially distributed set of computers that can   communicate with each otherServer   A co...
Internet Communication     SERVERS TALKING TO        EACH OTHER
Basic HTMLThe document mark-up language of        the World Wide WebAn example of “source code” that is     “interpreted” ...
Break up into groupsHelp 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 br...
Angle brackets are called tagsTags are used to define elements              of text  Start tags can have attributes We wil...
In general, tags produce effects on              elementsEffects include: position and style,   but also behaviors, like l...
Exercise 2: Hello, World!• Download JEdit (a decent, cross-platform  text editor)  – See blog post on course site• Create ...
Some Basic Elements•   Paragraphs: <p>…</p>•   Headers: <h1>…</h1>, <h2>…</h2>•   Format: <b>…</b>, <i>…</i>, <u>…</u>•   ...
Exercise 3: Add More Elements• Create some headers and add some  paragraphs with formatted text• Add an image• Add a link•...
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 ...
Exercise 4: Put the file on the web• Install the Home Directory Service tool  – See blog post for URL• Drag the file into ...
Exercise 5: Link to your page from WP• Create a new post• Create a link to your newly created home  page
Upcoming SlideShare
Loading in …5
×

UVA MDST 3703 HTML 2012-09-06

982 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
982
On SlideShare
0
From Embeds
0
Number of Embeds
175
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • ----- Meeting Notes (9/6/12 10:58) -----I can add notes as I speak … Cool!
  • An
  • Modified from http://www.explainingcomputers.com/internet.html
  • UVA MDST 3703 HTML 2012-09-06

    1. 1. Studio 2: HTML Prof. AlvaradoMDST 3703/77036 September 2012
    2. 2. 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
    3. 3. 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
    4. 4. Hypertext as an idea is based on thepremise that text shapes knowledge See media determinism and the rationalization effect
    5. 5. 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
    6. 6. HTML and the WorldWideWeb
    7. 7. 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
    8. 8. The Internet as ARPANET in 1970
    9. 9. GLOBAL HYPERTEXT
    10. 10. Some more vocabularyNetwork A spatially distributed set of computers that can communicate with each otherServer A computer or a program that exchanges information with other computersClient A computer or a program that receives information from a server for humans to consumeProtocol The language that servers use to communicate (e.g. HTTP, FTP, NNTP, SMTP, etc.)
    11. 11. Internet Communication SERVERS TALKING TO EACH OTHER
    12. 12. Basic HTMLThe document mark-up language of the World Wide WebAn example of “source code” that is “interpreted” by browsers
    13. 13. Break up into groupsHelp each other with small questions
    14. 14. 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?
    15. 15. Angle brackets are called tagsTags are used to define elements of text Start tags can have attributes We will discuss the significance of these next Tuesday
    16. 16. In general, tags produce effects on elementsEffects include: position and style, but also behaviors, like linking
    17. 17. 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
    18. 18. 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
    19. 19. 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)
    20. 20. The Prime Directive: Tags must always nest NO OVERLAPPING TAGS
    21. 21. Nesting Tags<p>This is <b>OK</b></p><p>This is <b>NOT OK</p></b>
    22. 22. 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:// THE PROTOCOL www.virginia.edu THE SERVER /someresource.html THE PAGE (DEFAULT index.html) #some_place THE ANCHOR (OPTIONAL) ?key=value THE PARAMETERS (OPTIONAL)
    23. 23. 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
    24. 24. Exercise 5: Link to your page from WP• Create a new post• Create a link to your newly created home page

    ×