Hypertext & Mark-up Languages (SGML,HTML and XML)

1. Hypertext & Mark-up Languages (SGML,HTML and XML)

2. References & Resources for the Lecture • Web References • CERN - http://public.web.cern.ch/public/about/achievements/www/history/history.html • The World Wide Web Consortium (W3C) http://www.w3.org/ • Books & Papers • Multimedia & Hypertext (J. Nielsen) – Book • Conklin, E.J. (1987); “Hypertext: An introduction and survey”; IEEE Computer2(9), pp.17-41. • Nelson, T. H (1989); “Hyperwelcom”; Hypermedia1(1), pp.2-5. • Bush, V. (1945); “As we may think”, Atlantic Monthly July, pp.13-14.

3. Two Concepts Hypertext 1965 Mark-up Hypertext Mark-up Language

4. Hypertext • Theodor Holm (`Ted') Nelson coined the terms hypertext in 1965. In Literary Machines he wrote: [By "hypertext" I mean non-sequential writing -- text that branches and allows choices to the reader, best read at an interactive screen. As popularly conceived, this is a series of text chunks connected by links which offer the reader different pathways.] • The Oxford English Dictionary Additions Series includes this definition of hypertext: Text which does not form a single sequence and which may be read in various orders; specially text and graphics ... which are interconnected in such a way that a reader of the material (as displayed at a computer terminal, etc.) can discontinue reading one document at certain points in order to consult other related matter.

5. Hypertext II • The concept of hypertext, could be described by its two main characteristics. • Firstly as a tool that would “mimic” the human mind in terms of links and associations and • Secondly as a new way of presenting and accessing textual information. The latter also aims to overcome a number of problems associated with written and printed text such as: • Sequential access: text based information is arranged in a rigid sequence. • Lack of comprehensive cross referencing possibilities. • Lack of efficient retrieval mechanism.

6. A Typical Hypertext Structure I A ‘typical’ hypertext system is often described as a hierarchical network of nodes and links. Figure shows how nodes are linked together in a hypothetical hypertext system.

7. A Typical Hypertext Structure II As can be seen from figure the hypertext model proposed here allows users to traverse in a non-linear fashion, where the user can select a link on a page and begin reading other pages or choose different links to follow on subsequent pages.

8. Some Interesting Questions • Is the WWW a hypertext structure ? If so is it hierarchical or non-hierarchical ? • Can it both ? • What is Hypermedia ?

9. Hypertext - Nodes • Nodes store the system’s complete information and display it to the user and can contain a variety of information such as text and graphics. Early hypertext systems such as NLS and ZOG allowed only text to be stored in nodes. Later systems such as HyperTies, HyperCard and Guide allowed bitmap pictures and charts to be stored and displayed. Current hypermedia systems allow for a richer variety of information, including text, bitmaps, audio, video and animation to be stored as nodes. • Node size has also been subject to significant changes. Early hypertext systems only allowed for rigidly fixed sized nodes. Fixed node sizes force the system’s author to either edit or cut the amount of information to fit in within the node, or to split the node into two or more nodes. In conclusion nodes provide the vehicle for the representation of ideas, facts and concepts in hypertext systems.

10. Hypertext Links • Links in hypertext systems are defined as the means of connecting nodes. The main function of links is to provide a logical navigational mechanism in a hypertext document. Garzotto et al (1993) summarised the role of links as “representational” and “navigational”. The representational role is to capture and represent relationships and the navigational role is to show paths down which the user may navigate. Researchers (see among others: Conklin, 1987; Garzotto et al, 1993; Carr, 1994; Bloomfield, 1994) have identified a number of different types of link that could exist within a hypertext system.

11. Problems With Hypertext Conklin (1987) points to two major shortcomings: • “Getting lost in hyper-space” and • “The cognitive overhead”. These shortcomings are noted in almost all the literature. He further points out that along with the power to organise information in a much more complex manner, comes the problem of having to know “where you are in the network” and “how to get to some other place that you know or think exists”. This could also be called a “disorientation problem”.

12. Hypertext “Lost” Syndrome Small section of a hypertext version of Canada-U.S. Free Trade Agreement, which has a total of 1860 nodes and 3852 links. (Neilsen 265; rpt. Emanuel G. Noik,"Exploring large hyperdocuments...," Proc. ACM Hypertext'93)

13. Mark-up Languages • What is markup? • Markup is everything in a document that is not content. Markup originally referred to the handwritten notations that a designer would add to typewritten text; these notations contained instructions to a typesetter about how to lay out the copy and what typeface to use. • There are two types of Markups

14. Mark-up Languages II

15. Standard Generalised Mark-up Language (SGML) • The Standard Generalized Markup Language, or SGML, is an international standard (ISO 8879) published in 1986. SGML prescribes a standard format for embedding descriptive markup within a document. SGML also specifies a standard method for describing the structure of a document.

16. SGML II • SGML provides a coherent and unambiguous syntax for describing whatever a user chooses to identify within a document. • Applications use SGML to define mark-up schemes. For example, a group of publishers could define a mark-up scheme for describing textbooks.Each publisher could then implement this textbook mark-up scheme to fit their own system. As long as documents conformed to this scheme.

17. How Does It Work ? • You can break a typical document into three layers: • structure, • content, and • style. • SGML separates these three aspects, but deals mainly with the relationship between structure and content.

18. How Does It Work II ? • Structure: At the heart of an SGML application is a file called the DTD, or Document Type Definition. • The DTD describes the structure of a document, much like a database schema describes the types of information it handles and the relationships between fields. • A DTD provides a framework for the elements (such as chapters and chapter headings, sections, and topics) that constitute a document.

19. How Does It Work III ? • Content: Content is the information itself: content includes titles, paragraphs, lists, tables, graphics, and audio. The method for identifying the content's position within the DTD structure is called "tagging." Creating an SGML document involves inserting tags around content.

20. How Does It Work IV ? • These tags mark the beginning and end of each part of the structure.

21. Hypertext Mark-up Language (HTML) • HTML is a SGML based mark-up language for WWW documents. HTML is actually a Document Type Definitions (DTD). • Set of tags defining how content is going to presented to users.

22. HTML II • The idea of HTML and The Web, as it is affectionately called, was originally conceived and developed by Tim Berners-Lee in 1990 while at CERN (CERN is the European Organisation for Nuclear Research founded in 1954, the world's largest particle physics centre) to meet the demand for automatic information sharing between scientists working in different universities and institutes all over the world. • The basic idea of WWW was to merge the technologies of personal computers, computer networking and hypertext into a powerful and easy to use global information system. • During this time, HTML has been extended in a number of ways. The Web depends on Web page authors and vendors sharing the same conventions for HTML. This has motivated joint work on specifications for HTML.

23. What Is XML XML is the acronym for EXtensible Markup Language.

24. XML • XML is the `Extensible Mark-up Language' (extensible because it is not a fixed format like HTML). It is designed to enable the use of SGML on the World Wide Web.

25. XML 0 • ·It is similar to HTML in that both are markup languages. • ·XML was designed to describe data. • ·It uses a DTD(Document Type Definition) or an xML schema to describe these data types.

26. XML I • XML is not a single, predefined mark-up language: it’s a meta-language -- a language for describing other languages -- which lets you design your own mark-up. (A predefined mark-up language like HTML defines a way to describe information in one specific class of documents: • XML lets you define your own customised mark-up languages for different classes of document.) It can do this because it’s written in SGML, the international standard meta-language for mark-up.

27. XML 2 • ·The tags in XML not are not predefined. • You must define your own tags.

28. XML 3 • ·XML is not a replacement for HTML. • ·More likely, XML can be used to describe the data, while HTML to format and display the same data.

29. XML 4 Both were designed with different goals mainly: a)XML is to describe data and to focus on what data is. • b)HTML is to display data and to focus on how data looks.

30. XML 5 HTML is about displaying information, while XML is about describing information. As XML was not designed for displaying data as it’s primary function, it is not a replacement for HTML.

31. XHTML & SMIL • SMIL (pronounced smile) stands for Synchronized Multimedia Integration Language. It is a markup language (like HTML) and is designed to be easy to learn and deploy on Web sites. SMIL was created specifically to solve the problems of coordinating the display of a variety of media (multimedia) on Web sites. By using a single time line for all of the media on a page their display can be properly time coordinated and synchronized. • The Extensible HyperText Markup Language: XHTML is a family of current and future document types and modules that reproduce, subset, and extend HTML 4 [HTML]. XHTML family document types are XML based, and ultimately are designed to work in conjunction with XML-based user agents.

32. HTML 4 • HTML 4 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects, improved support for right to left and mixed direction text, richer tables, and enhancements to forms, offering improved accessibility for people with disabilities.

33. HTML 4 Tags • <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> • <html> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> • <meta name="Author" content="Mohammad Dastbaz"> • <meta name="GENERATOR" content="Mozilla/4.7 [en] (WinNT; I) [Netscape]"> • <title>test</title> • </head> • <body> • <font color="#FF0000"><font size=+3>This is my first page</font></font> • </body> • </html>

34. HTML 4 Tags II • <HTML> • identifies the document as an HTML doc. • <HEAD> • contains information about the document including its title, scripts used, style definitions & document description • <Title> • HTML 3.2 & 4 specification require and contains the document title • <Body> • encloses all the tags, attributes, and information that you want a visitor’s browser to display.

35. Designing HTML Sites • What are the steps in designing a Web site ? • Site Specification • Aim & Objectives (i.e. e-commerce, marketing etc.) • Content (text, graphics, audio, video, etc.) • Style (menu driven, frames, etc.) • Design Chart

36. Design Chart • A Design chart creates a hierarchical tree of your Web pages and their links and dependents.

37. A Simple Exercise • Draw a design chart for the following Web site. • LSBU needs a Web site that contains information about: • Its members of staff • Undergraduate course • Postgraduate course • Research • and Resources.