1. M150: Data, Computing and information
Outline
Unit four.
What’s next.
Some questions.
Your questions.

2. 1- Unit four : Integrating data
Basic concepts about data and representations.
Signalling what’s important.
Text to hypertext.
Combining representations - hypermedia.
Beyond basic mark-up: introducing XML.

3. 1- Unit four : Basic concepts about data and representations
Representation refers to the form a data takes whether or not it is digitized.
Format refers to the digital form of the data representation. (see example 2.1)
Many formats are standards.
Standards allow sharing the same data between different computers and applications. 3

4. 1- Unit four : Basic concepts about data and representations
Why bother with different formats ?Each format has a different purpose and different characteristics
Composer needs an editable format
Musician needs printable format
A listener needs quality sound format
A sound recorded with the MP3 format allows its copy from the CD to the computer but hasn’t the same quality as a sound recorded with the audio format.
The diversity of formats allows different users to focus on what’s important for them (fit-for-purpose). 4

5. 1- Unit four : how to enhance the presentation of textual data
Written text is a sort of communication.
The presentation of a text depends on targeted readers, their needs and their expectations.
A certain message is to be passed through the written text to the readers. 5

6. 1- Unit four : Signalling what’s important: Middle ages and text
See figure 3.1, a medieval text is very difficult for an average person to read.
It only targets a minority of highly literate people.
Not everyone had access to education back in those times. 6

7. 1- Unit four : improving text
A text is improved by:
Easy to read characters.
A variety of font sizes.
Spacing between words and paragraphs.
Punctuation.
Use of colors to emphasize some important words.
Use of lists and tables depending on the nature of data represented. 7

8. It is important to know how a text will look when it is printed.
1- Unit four :Marking up
It is important to know how a text will look when it is printed.
A plain text will be marked by an editor indicating where a word should be in Bold or where to start a new paragraph etc… 8

9. Previously marking was done manually, tedious and time consuming.
1- Unit four : Marking up
Previously marking was done manually, tedious and time consuming.
Nowadays word processors allow easier mark-up through pre-programmed tools. 9

10. 1- Unit four : marking-up examples
Examples of mark-up in MS-Word:
Headings.
Bold, Italic, Underlined.
Bulleted and numbered lists.
Table of content.
Paragraphs.
Columns.
Equation editors.
Image object editors.
Etc… 10

11. 1- Unit four : Signalling what’s important
A mark-up language will indicate to the computer how parts of the text will be styled.
Marks are used to determine where the styling starts and where it ends.
The marks are embedded within the typed text.
Marks are either explicit or implicit. 11

12. 1- Unit four : Marking up
Explicit marks are certain words that you put before and after the text to be styled in order to delimit the styling area.
The program needs to understand that the mark is to be distinguished from the text itself.
It makes sense to place a mark between angle brackets < and >. 12

13. 1- Unit four : marking up
Implicit marks are one that you do not have to type yourself, the will not show as words before and after the text you wish to style.
Example in a MS-Word document when you wish to place a word in bold you just press the button “B” then type the word and then release the button. 13

14. 1- Unit four : from plain to Styled text
WYSIWYG programs use implicit marks.
WYSIWYG stands for What You See IS What You Get.
The text that appears on the computer screen will look exactly like the final printed document. 14

15. 1- Unit four : explicit mark-up
HTML Hyper Text Mark-up Language uses explicit marks also called tags for styling.
<b> this sentence is bold </b>
Even though these tags will show on your computer screen when creating the text, only their effect will appear when the document passes through a software that interprets these tags and renders you the final display. 15

16. 1- Unit four : HTML
Tags in HTML are enclosed within angle brackets < and >.
Tags usually come in pairs, there is a start tag before the text to be styled and an end tag after the text to be styled.
The end tag always include a slash(/) after the < and before the tag name.
HTML is not case sensitive. 16

17. 1- Unit four : HTML
The basic skeleton to produce an HTML document is the following:
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>
</P>
</BODY>
</HTML> 17

18. 1- Unit four : HTML
The document is divided into two parts the document head and the document body.
In the document’s head a title tag can be added.
What’s between <TITLE> and </TITLE> is the information shown at the top of the page.
The document’s body contains paragraphs and text, everything that will appear to the document’s reader. 18

19. 1- Unit four : HTML Some HTML tags:
<P> </P> paragraph tags.
<H1> </H1> heading 1 tags.
<CENTER> </CENTER> the text is put in the center of the page.
<I> </I> the text is put in Italic.
Etc… 19

20. 1- Unit four : creating HTML
To create an HTML document, you need to:
follow the basic skeleton
format your text as desired
type them all in a text editor (ex: Notepad) and then
save the file with the extension .htm or .html
A web browser such as Internet Explorer or Netscape will be used to display the document. 20

21. 1- Unit four : browsers
Same page viewed with Netscape and Internet Explorer respectively
What are the differences ? 21

22. 1- Unit four : Text to hypertext
The word Hyper means over or beyond.
Hypertext means taking a text beyond its normal boundaries by providing links to some parts of the same document or even links to other documents.
Links in the table of contents of an ebook will allow you to jump to the desired section within the book.
Links in some websites like Wikipedia will allow you to jump to another webpage. 22

23. 1- Unit four : Text to hypertext
To create a link between two items in the same document we need to:
Give the target point (called anchor) an anchor name.
Create the link to the anchor name.
An anchor tag is needed <A> </A>. 23

24. 1- Unit four : Text to hypertext
In figure 4.3 the sentence occupational surnames is placed between anchor tags and it is given the name occupation.
<A NAME=“occupation”> Occupational surnames </A>
In figure 4.4 the link to the anchor Occupational surnames is also placed between anchor tags but this time with a reference to the anchor name.
<A HREF=“#occupation”> patronymic </A>
When the link patronymic is clicked in the HTML page it will take us to the sentence Occupational surnames. 24

25. 1- Unit four : Text to hypertext, Linking to different document
In order to link together two documents:
See in example 4.3 the sentence Annual street party placed between anchor tags along with a reference to the document’s name “streetparty.htm” (note if the two documents are not in the same folder, the full path of the linked document need to be typed in HREF.
<A HREF=“streetparty.htm”> Annual street party </A>
When the sentence Annual street party is clicked the page streetparty.htm will be opened in the browser’s window. 25

26. 1- Unit four : Text to hypertext
In order to create a link to a web page:
See in example 4.4 the sentence Open University Open Day placed between anchor tags along with a reference to the pages URL
<A HREF= “ Open University Open Day </A> 26

27. 1- Unit four : Combining representations - hypermedia
What does multimedia refer to ?
What does hypermedia refer to ?
In order to insert an image into an HTML document an image tag is needed.
<IMG SRC=“image.jpg”>
If the image is not in the same folder as the document then the complete path needs to be indicated as the source.
Note that the <IMG> tag is one of the few tags that are single and go without a closing tag </IMG>. 27

28. 1- Unit four : Beyond basic mark-up: introducing XML
The HTML language has its weaknesses.
The number of tags is limited and they do not cover special styling needs. They are only for:
styling
including other materials (such as pictures)
Linking 28

29. 1- Unit four : Beyond basic mark-up: introducing XML
The XML language (eXtensible Mark-up Language) served for the creation of new tags to which the programmer can give rules as he wishes.
Note that XML is NOT a replacement for HTML.
HTML describes the style of a document, XML is used to describe the substance of the document
XML describes the information using Types
The addition of tags to HTML is not a simple task, if the World Wide Web Consortium has to study all the proposed tags for approval and addition, the process can go forever unsolved. 29

30. 1- Unit four : XML example
<?xml version=“1.0” encoding =“UTF-8”>
<BOOKLIST>
<BOOK>
<TITLE> Alice’s Adventures in Wonderland </TITLE>
<AUTHOR> Lewis Carroll </AUTHOR>
<PUBLISHER> Red Queen Books </PUBLISHER>
<PRICE> 2.99 Euro </PRICE>
</BOOK>
<TITLE> The Hunting of the Snark</TITLE>
<PUBLISHER> Jabberwocky Press </PUBLISHER>
<PRICE> 5.99 Euro </PRICE> 30

31. 1- Unit four : XML Style sheets
XML uses style sheets that control the appearance of information
XML style sheets are written in the XML Style Language (XSL)
XSL instructions can be included within an XML page or in a separate document linked to the XML page 31

32. 2- What’s next Unit 5:Storing getting and sending your data
Storing and accessing data in documents.
Transmitting data.
Accessing data.
Ethical, legal, and security issues. 32

33. 3- Some questions
What is the difference between representation and format?
Name two different applications and their manufacturers that can treat a .doc file?
How does good text formatting improve its readability?
What is an implicit mark-up? Give an example?
What is an explicit mark-up? Give an example?
What does HTML stand for?
What is the job of the World Wide Web Consortium?
Is an HTML file WYSIWIG? Why?
Name two web browser other than Internet Explorer and Netscape?
What is an anchor?
What does XML stand for?
Why XML isn’t a replacement for HTML?

34. 4- Your questions ?