Computer Science 1000

Markup Languages

Suppose you received the following document from the web

University Arts & Science Sitemap F.A.Q Around The Department DepartmentDepartment ContactsU of S PhonebookAcademic AdvisingCurriculum ReviewJudy Peachey Memorial ScholarshipWomen in Science & Engineering IntraNET ServicesPeopleFaculty and StaffGraduate StudentsUndergraduatesCSSSCS Graduate Course CouncilClassesCurrent Course OfferingsUndergrad | Grad | OnlineClass ListingsGrad Timetable Prospective StudentsExperience US!Course for High School StudentsOnline CoursesUndergraduate StudentsGraduate StudentsApplication StatusResearchFaculty Research AreasResearch GroupsTechnical ReportsSeminarsAcademic Programs Advising FAQCourse DescriptionsUndergraduate ProgramsGraduate Programs

Professional InternshipAcademic HonestyBioinformaticsResourcesiHelpEHandinSoftware LibraryTechnical SupportOn-line TutorialsLab AdvisorsLabsArts 265Spinks 360 | 311 | 315 | 320Breakout RoomsSMART Board LabAvailable SoftwareLab UsageEmploymentFaculty PositionsStaff PositionsStudent PositionsS.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 BrowsersSpeaker: Ms. Kirstie HawkeyDate: Thursday, January 18, 2007Time: 3:30 pmPlace: ARTS 134Click here to read the entire article... --------------------------------------------------------------------------------News ArchivesLast updated December 12, 2006. Please report problems to webmaster@cs.usask.ca

Which wouldyou rather read?

Most visual communication today has an element of presentationhumans are visual certain visual stimuli appeals to us

advertising – billion dollar business

A webpage can be divided into two partscontentpresentation

University Arts & Science Sitemap F.A.Q Around The Department DepartmentDepartment ContactsU of S PhonebookAcademic AdvisingCurriculum ReviewJudy Peachey Memorial ScholarshipWomen in Science & Engineering IntraNET ServicesPeopleFaculty and StaffGraduate StudentsUndergraduatesCSSSCS Graduate Course CouncilClassesCurrent Course OfferingsUndergrad | Grad | OnlineClass ListingsGrad Timetable Prospective StudentsExperience US!Course for High School StudentsOnline CoursesUndergraduate StudentsGraduate StudentsApplication StatusResearchFaculty Research AreasResearch GroupsTechnical ReportsSeminarsAcademic Programs Advising FAQCourse DescriptionsUndergraduate ProgramsGraduate Programs

Professional InternshipAcademic HonestyBioinformaticsResourcesiHelpEHandinSoftware LibraryTechnical SupportOn-line TutorialsLab AdvisorsLabsArts 265Spinks 360 | 311 | 315 | 320Breakout RoomsSMART Board LabAvailable SoftwareLab UsageEmploymentFaculty PositionsStaff PositionsStudent PositionsS.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 BrowsersSpeaker: Ms. Kirstie HawkeyDate: Thursday, January 18, 2007Time: 3:30 pmPlace: ARTS 134Click here to read the entire article... --------------------------------------------------------------------------------News ArchivesLast updated December 12, 2006. Please report problems to webmaster@cs.usask.ca

Content

Headings- white bold font

LinksBlack font

Data- bulleted, green font- subheadings bolded- subheadings black fontPresentation

Content +Presentation

How is such presentation achieved?Method 1: Use an image

open a graphics programdraw the webpage

place graphics write and color text etc …

transmit the image as the webpage Content-type: image/jpg

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

Problems:2) Layout

if page viewed on 1200x960 window, extra space

resizing causes text to become grainyno word wrapping possible

Problems: And so on In some cases, saving text and graphic layout as

images is used logos advertisements

not suitable for entire webpage

Markup Languages text-based file, that includes both content

and presentation informationpresentation information called markupmarkup can include such things as:

layout, size, colour, font, etc … the webpages that you typically see are

rendered using markup

HyperText Markup Language (HTML)a family of languagesmarkup information is contained in tags

delimited by angle bracketseverything outside of tags is content

many members of HTML familywe will look at XHTML, for consistency with texta lot of overlap with HTML, so most concepts will

transfer

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

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

PresentationContent

Tagsdefine a particular region of markup data

region defined between start tag and end tagFormat:

<element-name> content </element-name>

Everything in tag region is contentExample:

<title> HelloWorld.html </title>

Start Tag

Content

End Tag

Tags the content of a tag can include other tags

<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

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

Tags the content of a tag can include other tags

<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

head

html

Tags the content of a tag can include other tags

<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

head

html

title

Tags the content of a tag can include other tags

<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

head

html

title

body

Tags the content of a tag can include other tags

<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>

head

html

title

body

p

Root Element

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, creatorof HTML

http://www.ethlife.ethz.ch/images/cern_1990-l.jpg

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

History of Markup

A screenshot of anearly version of Mosaic

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

Microsoft Internet Explorerv1.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

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

Netscape Comm. Microsoft

The Effects of the Browser WarPage writers had to account for specifics in

each browsereg: Netscape: <Layer> tag"Page best viewed in Netscape"

Page writers had to account for backward compatibility issues

Incompatibility between browsers

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

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

How to Create a Webpage1) Hand-Coding – writing markup directly

both content and presentation are written in plaintext

presentation elements are controlled via tags and style sheets

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

How to Create a Webpage3) Use both!

most WSYIWYG editors allow the creator to manipulate the HTML code that has been automatically generated

Hand-Coding vs WYSIWYGeach 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

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