Structured Documents
Week 3
LBSC 690
Information Technology
Outline
•	Muddiest points

•	Building the Web

•	Building a better Web
Muddiest Points
•	Encryption

•	Packet vs. circuit switching

•	The TCP/IP “protocol stack”
Encryption
•	Secret-key systems (e.g., DES)
–	Use the same key to encrypt and decrypt

•	Public-key systems (e.g., PGP, PKI)
–	Public key: open, for encryption
–	Private key: secret, for decryption

•	Digital signatures
–	Encrypt with private key, decrypt with public key
Encryption Issues
•	Key length
–	128 bits balances speed and protection today

•	Trust infrastructure
–	How do you prevent “bait and switch”?
–	Who certifies a digital signature is valid?
Encrypted Applications
•	Secure Shell (SSH)
–	Replaces Telnet
•	Secure FTP (SFTP)/Secure Copy (SCP)
–	Replaces FTP
•	Secure HTTP (HTTPS)
–	Used for financial and other private data
•	Wired Equivalent Protocol (WEP)
–	Used on wireless networks
Packet vs. Circuit Networks
•	Telephone system (“circuit-switched”)
–	Fixed connection between caller and called
–	High network load results in busy signals

•	Internet (“packet-switched”)
–	Each transmission is routed separately
–	High network load results in long delays
Packet Switching
•	Break long messages into short “packets”
–	Keeps one user from hogging a line

•	Route each packet separately
–	Number them for easy reconstruction

•	Request retransmission for lost packets
–	Unless the first packet is lost!
The TCP/IP “Protocol Stack”
•	Link layer moves bits 
–	Ethernet, cable modem, DSL
•	Network layer moves packets
–	IP 
•	Transport layer provides services to applications
–	UDP, TCP 
•	Application layer uses those services
–	DNS, FTP, SSH, …
TCP/IP layer architecture
The World-Wide Web
Web Standards
•	HTML
–	How to write and interpret the information

•	URL
–	Where to find it

•	HTTP
–	How to get it

Uniform Resource Locator (URL)
•	Uniquely identify web pages on the WWW
–	Domain name
–	Directory path
–	File name 
HyperText Markup Language (HTML)
•	Simple document structure language for Web

•	Advantages
–	Adapts easily to different display capabilities
–	Widely available display software (browsers)

•	Disadvantages
–	Does not directly control layout
Hands On:
Learning HTML From Examples
•	Use Internet Explorer to find a page you like
–	http://www.umiacs.umd.edu/~daqingd/simplepage.html
–	http://www.glue.umd.edu/~oard 

•	On the “View” menu select “Source”
–	Opens a notepad window with the source

•	Compare HTML source with the Web page
–	 Observe how each effect is achieved
Hands On: “Adopt” a Web Page
•	Modify the HTML source using notepad
–	For example, change the page to yours
•	Save the HTML source on your “M:” drive
–	In the “File” menu, select “Save As”
–	Select “All Files” and name it “test.html”
•	FTP it to your ~/pub directory on WAM
–	ftp wam.umd.edu
–	cd ../pub/
–	put test.html
•	View it
–	http://www.wam.umd.edu/~(yourlogin)/test.html 
HTML Document Structure
•	“Tags” mark structure
–	<html>a document</html>
–	<ol>an ordered list</ol>
–	<i>something in italics</i>
•	Tag name in angle brackets <>
–	Not case sensitive
•	Open/Close pairs
–	Close tag may be optional (if unambiguous)
Logical Structure Tags
•	Head 
–	Title

•	Body
–	Headers: <h1> <h2> <h3> <h4> <h5> 
–	Lists: <ol>, <ul> (can be nested)
–	Paragraphs:<p>
–	Definitions: <dt><dd>
–	Tables: <table> <tr> <td> </td> </tr> </table>
–	Role: <cite>, <address>, <strong>, …
Rendering
•	Different devices have different capabilities
–	Desktop 
–	PDA
•	Rendering maps logical tags to physical layout
–	Controls line wrap, size, font…
•	Place the title in the page border
•	Render <h1> as 24pt Times
•	Render <strong> as bold
•	Somewhat browser-dependent
–	Internet Explorer and Netscape make different choices
Physical Structure Tags
•	Font
–	Typeface: <font face=“Arial”></font>
–	Size: <font size=“+1”></font>
–	Color: <font color=“990000”></font>
•	http://www.barasch.com/excel/colorfonts.htm
•	Emphasis
–	Bold: <b></b>
–	Italics: <i></i>
Hypertext “Anchors”
•	Links make the Web a web!

•	Internal anchors: somewhere on the same page
–	<a href=“#students”> Students</a>
•	Links to: <a name=“students”>Student Information</a>

•	External anchors: to another page 
–	<a href=“http://www.clis.umd.edu”>CLIS</a>
–	<a href=“http://www.clis.umd.edu#students”>CLIS students</a>
Images
•	<img src=“URL”> or <img src=“path/file”> 
–	<img src=“http://www.clis.umd.edu/IMAGES/head.gif”>
–	SRC: can be url or path/file
–	ALT: a text string
–	ALIGN: position of the image
–	WIDTH and HEIGHT: size of the image
•	Can use as anchor:	
–	 <a href=URL><img src=URL2></a>
•	Example: 
–	http://www.umiacs.umd.edu/~daqingd/Image-Alignment.html
Tables
<table align=“center”>
<caption align=“right”>The caption</caption>    
	< tr align=“LEFT”>
		<th> Header1 </th>
		<th> Header2</th>
	</tr>
	<tr><td>first row, first item </td>
            <td>first row, second item</td></tr>
	< tr><td>second row, first item</td>
            <td>second row, second item</td></tr>
</table>
Example: http://www.umiacs.umd.edu/~daqingd/Simple-Table.html
Frames
•	Divide browser pages into separate sections 
–	Useful when you want to scroll separately

•	Each section can display an HTML page

•	Example 1: menu frame on the left side of a page
		<frameset cols=“10%,90%" >    	
			<frame src=“template.html"> 
			<frame src=“images.html">
		</frameset> 

•	Example 2:
–	http://www.scms.rgu.ac.uk/research/ir/members.html
Designing Web Pages
•	Key design issues:
–	Content: What do you want to publish?
–	Style: How do you want to present it?
–	Syntax: How can you achieve that presentation?

•	Sources of information
–	Online tutorials (Yahoo points to lots of these)
–	Technical materials (e.g., the HTML 4.0 spec)
Some Style Guidelines
•	Design for generic browsers
–	And test on every version you wish to support ?
•	Provide appropriate “access points”
–	User needs and navigation strategies differ
•	Design useful navigational aids
–	A Web search may lead to the middle of a site
•	Include some indication of currency
–	Date of last update, “new” icons, etc.
•	Indicate who is responsible for the content
–	Helps readers assess authority
Accessibility Guidelines
•	Design for device independence
•	Maintain backward compatibility
–	Provide alternative pages if necessary
•	Provide alternatives for aural and visual content
–	Alt tags for images, transcripts for audio
•	Make is easy for assistive devices to work
–	Combine structural markup and style sheets
–	Give a title to each frame
–	Use HTML tables only for tabular data
–	Use markup to indicate language switching
HTML Editors
•	Goal is to create Web pages, not learn HTML!
•	Several are available
–	In Explorer, “File” - “Edit with Front Page”
–	In Netscape, “File” – “Edit Page” for Composer
•	You may still need to edit the HTML file
–	Some editors use browser-specific features
–	Some HTML features may be missing entirely
–	File names may be butchered by FTP
•	Tend to use physical layout tags extensively
–	Detailed control can make hand-editing difficult
HTML Validators
•	Syntax checking: cross-browser compatibility
–	http://validator.w3.org

•	Style checking: improved accessibility
–	http://bobby.watchfire.com
What’s Wrong with the Web?
•	HTML
–	Confounds structure and appearance (XML)

•	HTTP
–	Can’t recognize related transactions (Cookies)

•	URL
–	Links breaks when you move a file (PURL)

Discussion Point: 
Describing the Structure of Text
•	Entities
–	Span
–	Type/Attributes

•	Relationships
–	Part-whole
–	Is-a

What’s a Document?
•	Content

•	Structure

•	Appearance

•	Behavior
History of Structured Documents
•	Early standards were “typesetting languages”
–	NROFF, TeX, LaTeX, SGML
•	HTML was developed for the Web
–	Too specialized for other uses
•	Specialized standards met other needs
–	Change tracking in Word, annotating manuscripts, …
•	XML seeks to unify these threads
–	One standard format for printing, viewing, processing
Goals of XML
•	Meta language 
–	A toolkit for design markup languages
•	Unambiguous markup
–	Clear span of tags
•	Separate markup from presentation
–	Style info => stylesheet, so easy to change
•	Be simple
A Family of Standards
•	Definition: DTD
–	Names known types of entities with “labels”
–	Defines part-whole and is-a relationships
•	Markup: XML
–	“Tags” regions of text with labels
•	Markup: XLink
–	Defines “hypertext” (and other) link relationships
•	Presentation: XSL
–	Specifies how each type of entity should be “rendered”
XML Example
•	View “The Song of the Wandering Aengus” 
–	http://glue.umd.edu/~rba/COURSES/TECHNOLOGY/XML/DTD/

•	Built from three files
–	yeats01.xml 
–	poem01.dtd 
–	poem01.xsl  
An XML Example
Document Type Definition (DTD)
Specifying Appearance: XSL
An XLink Example
Some XML Applications
•	Text Encoding Initiative
–	For adding annotation to historical manuscripts
–	http://www.tei-c.org/

•	Encoded Archival Description
–	To enhance automated processing of finding aids
–	http://www.loc.gov/ead/

•	Metadata Encoding and Transmission Standard
–	Bundles descriptive and administrative metadata
–	http://www.loc.gov/standards/mets/
What’s Wrong with the Web?
•	HTML
–	Confounds structure and appearance (XML)

•	HTTP
–	Can’t recognize related transactions (Cookies)

•	URL
–	Links breaks when you move a file (PURL)

Cookies
•	Servers know users by IP address and port
–	Because that’s where they send the Web pages

•	Cookies preserve “state”
–	Server sends data to the browser
–	Browser later responds with the same data
•	A unique code (server-side state)
•	Information about the user (client-side state)
Uniform Resource Names (URN)
•	Persistent URLs (www.purl.org)
–	http://purl.oclc.org/OCLC/PURL/FAQ/
Summary
•	Learning to build simple Web pages is easy
–	Which is good news for the homework!

•	All documents are structured documents

•	XML is a flexible markup language toolkits

•	The key is to understand its capabilities
–	XML editors can hide much of the complexity
Before You Go!
•	On a sheet of paper (no names), answer the following question:

	What was the muddiest point in today’s class?