Computer Science 1000

1. Computer Science 1000 Markup Languages

2. Suppose you received the following document from the web University Arts & Science Sitemap F.A.Q Around The Department Department Department Contacts U of S Phonebook Academic Advising Curriculum Review Judy Peachey Memorial Scholarship Women in Science & Engineering IntraNET Services People Faculty and Staff Graduate Students Undergraduates CSSS CS Graduate Course Council Classes Current Course Offerings Undergrad | Grad | Online Class Listings Grad Timetable Prospective Students Experience US! Course for High School Students Online Courses Undergraduate Students Graduate Students Application Status Research Faculty Research Areas Research Groups Technical Reports Seminars Academic Programs Advising FAQ Course Descriptions Undergraduate Programs Graduate Programs Professional Internship Academic Honesty Bioinformatics Resources iHelp EHandin Software Library Technical Support On-line Tutorials Lab Advisors Labs Arts 265 Spinks 360 | 311 | 315 | 320 Breakout Rooms SMART Board Lab Available Software Lab Usage Employment Faculty Positions Staff Positions Student Positions S.E.C.C. Department News Submit a news item (NSID Required) 2006-2007 Department Seminar Series - Ms. Kirstie Hawkey 12 Jan 2007 Managing Visual Privacy of Incidental Information within Web Browsers Speaker: Ms. Kirstie Hawkey Date: Thursday, January 18, 2007 Time: 3:30 pm Place: ARTS 134 Click here to read the entire article... -------------------------------------------------------------------------------- News Archives Last updated December 12, 2006. Please report problems to webmaster@cs.usask.ca

3. Which would you rather read?

4. Most visual communication today has an element of presentation • humans are visual • certain visual stimuli appeals to us • advertising – billion dollar business • A webpage can be divided into two parts • content • presentation

5. University Arts & Science Sitemap F.A.Q Around The Department Department Department Contacts U of S Phonebook Academic Advising Curriculum Review Judy Peachey Memorial Scholarship Women in Science & Engineering IntraNET Services People Faculty and Staff Graduate Students Undergraduates CSSS CS Graduate Course Council Classes Current Course Offerings Undergrad | Grad | Online Class Listings Grad Timetable Prospective Students Experience US! Course for High School Students Online Courses Undergraduate Students Graduate Students Application Status Research Faculty Research Areas Research Groups Technical Reports Seminars Academic Programs Advising FAQ Course Descriptions Undergraduate Programs Graduate Programs Professional Internship Academic Honesty Bioinformatics Resources iHelp EHandin Software Library Technical Support On-line Tutorials Lab Advisors Labs Arts 265 Spinks 360 | 311 | 315 | 320 Breakout Rooms SMART Board Lab Available Software Lab Usage Employment Faculty Positions Staff Positions Student Positions S.E.C.C. Department News Submit a news item (NSID Required) 2006-2007 Department Seminar Series - Ms. Kirstie Hawkey 12 Jan 2007 Managing Visual Privacy of Incidental Information within Web Browsers Speaker: Ms. Kirstie Hawkey Date: Thursday, January 18, 2007 Time: 3:30 pm Place: ARTS 134 Click here to read the entire article... -------------------------------------------------------------------------------- News Archives Last updated December 12, 2006. Please report problems to webmaster@cs.usask.ca Content

6. Links Black font • Headings • white bold font • Data • bulleted, green font • subheadings bolded • subheadings black font Presentation

7. Content + Presentation

8. How is such presentation achieved? • Method 1: Use an image • open a graphics program • draw the webpage • place graphics • write and color text • etc … • transmit the image as the webpage • Content-type: image/jpg

9. Problems: • 1) Image size • in our example • using an image: 308 KB (1024x768, jpeg) • without using an image: • 3 graphics – roughly 32 KB • text – roughly 1.5 KB • hence, in this small example, roughly a 90% savings in size

10. Problems: • 2) Layout • if page viewed on 1200x960 window, extra space • resizing causes text to become grainy • no word wrapping possible

11. Problems: • And so on • In some cases, saving text and graphic layout as images is used • logos • advertisements • not suitable for entire webpage

12. Markup Languages • text-based file, that includes both content and presentation information • presentation information called markup • markup can include such things as: • layout, size, colour, font, etc … • the webpages that you typically see are rendered using markup

13. HyperText Markup Language (HTML) • a family of languages • markup information is contained in tags • delimited by angle brackets • everything outside of tags is content • many members of HTML family • we will look at XHTML, for consistency with text • a lot of overlap with HTML, so most concepts will transfer

14. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

15. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> Presentation Content

16. Tags • define a particular region of markup data • region defined between start tag and end tag • Format: • <element-name> content </element-name> • Everything in tag region is content • Example: <title> HelloWorld.html </title> Start Tag Content End Tag

17. Tags • the content of a tag can include other tags <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

18. Tags • the content of a tag can include other tags <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> html

19. Tags • the content of a tag can include other tags <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> html head

20. Tags • the content of a tag can include other tags <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> html head title

21. Tags • the content of a tag can include other tags <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> html head body title

22. Tags • the content of a tag can include other tags Root Element <html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html> html head body title p

23. The History of Markup • HTML • created in 1990, by Tim Berners-Lee (CERN) • very simple language • paragraphs • headings • hyperlinks • early edition didn't include: • tables • forms • images Tim Berners-Lee, creator of HTML http://www.ethlife.ethz.ch/images/cern_1990-l.jpg

24. Mosaic • early graphical browser • Unix version deployed in Feb, 1993 • creators: Marc Andreessen and Eric Bina (NCSA) • by end of 1993, vesions for Windows and Mac available • Mosaic allowed images, sounds, video, clickable hyperlinks, etc Andreessen & Bina, creators of Mosaic http://www.at-mix.de/images/glossar/andreessen-und-bina.jpg

25. History of Markup A screenshot of an early version of Mosaic

26. Netscape Communications • formed in April, 1994, as Mosaic Communications Corp. • changed to Netscape in November • formed by Mosaic developers • Marc Andreessen, CEO • Company goal: provide a cross-platform browser • IPO: April 1995 • initial offering: $28/share • first day of trading: $75/share

27. Microsoft Internet Explorer • v1.0 released in 1995 • shipped with Windows 95 (Plus) • v2.0 released later that year Bill Gates, Microsoft Co-Founder http://newsimg.bbc.co.uk/media/images/39935000/jpg/_39935865_microsoftbody.jpg

28. History of Markup • The Browser War • post-mid 1995, browsers were developed rapidly • new features took precendence over bug fixes • browser-specific elements introduced to gain advantage • 3 major consequences • major differences between IE and Netscape • major differences between browsers of different versions • HTML was being defined by browsers, rather than by standards • Navigator 2.0 • (Mar, 1996) • frames • FONT color • Javascript • <DIV> tag • animated gif • Navigator 3.0 • (Aug, 1996) • frame border control • Javasript 1.1 • strike-through • underlining • Navigator 4.0 • (June, 1997) • <Layer> • CSS-1 • CSS-P • Javascript 1.2 • IE 2.0 • (October, 1995) • tables • cookies • IE 3.0 • (August, 1996) • better tables • frames • VBScript/Jscript • CSS • IE 4.0 • (Sept, 1997) • better CSS • DOM Microsoft Netscape Comm.

29. The Effects of the Browser War • Page writers had to account for specifics in each browser • eg: Netscape: <Layer> tag • "Page best viewed in Netscape" • Page writers had to account for backward compatibility issues • Incompatibility between browsers

30. Web Standards • to mitigate these incompatibilities: • agencies have been created • e.g. the World Wide Web Consortium (W3C) • standards have been defined • e.g. XHTML • while such standards have improved the situation considerably, there are still incompatibilities • e.g. HTML may be handled differently by certain browsers

31. Web Standards • the output for our examples will be shown in Internet Explorer, as this is what is installed in the labs • however, most examples should render equally as well in other popular browsers (Firefox, Chrome) • be aware that differences may exist

32. How to Create a Webpage • 1) Hand-Coding – writing markup directly • both content and presentation are written in plaintext • presentation elements are controlled via tags and style sheets

33. How to Create a Webpage • 2) Use a WYSIWYG editor • What You See Is What You Get • only content is written • presentation elements (colour, font, etc) are manipulated using controls (e.g. buttons), similar to rich document editing • the editor writes the HTML for you

34. How to Create a Webpage • 3) Use both! • most WSYIWYG editors allow the creator to manipulate the HTML code that has been automatically generated

35. Hand-Coding vs WYSIWYG • each have their advantages • hand-coding often produces smaller webpages, and hand-coders are less reliant on expensive editors • WYSIWYG editors allow users with little HTML knowledge to produce rich web content

36. How to Create a Webpage • in your lab/assignment, you will create a webpage using both HTML and WYSIWYG • in our lectures, we will be considering the HTML code directly