Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this


  1. 1. Studio 4: Hypertext Prof. Alvarado MDST 3703 19 September 2013
  2. 2. Business • Any issues with using the Hive? • Tutorial this Friday at 2:00 in Alderman 323 – I can accept a couple of more people
  3. 3. Review • Text markup is a kind of knowledge representation (KR) • A KR is an operationalized ontology – Ontology = categories and relations – Operationalized = machine processable • The machine is a medium – It allows you to do things with text – But it has limitations (resistance)
  4. 4. Today • Finish up last week’s exercise • Use some POSH to capture information in the text • Use some CSS to represent that information • Learn about two hypertextual elements – A and IMG
  5. 5. Exercise 1: Create a page • Create a directory for today (09-19) • Copy oedipus.html from last week’s directory to this week’s • Working in groups, implement the solution we discussed to the problem of creating pages in the document • Use CSS to add style to the page
  6. 6. Exercise 2: Markup some topics • Use SPAN elements with CLASS attributes to mark up a few topics (people, places, behaviors) in the page you just created • Set the class of each topic to the kind of topic, e.g. person, place, etc. <span class=“person”>Cadmus</span> • Use CSS to highlight the topics
  7. 7. Exercise 3: Add a link • Somewhere at the top of your document, create a hypertext link from your document to one of your colleague’s pages – For example: – The URL should be something like this: <a href=“”>some text</a> 19/oedipus.html
  8. 8. Exercise 4: Add an image • Search the web for an image that represents on of the topics your markup up earlier • Insert the image after the paragraph in which the topic appears using this tag <img src=“http://someplace/myimage.jpg” />