Computer Science 1000 Markup Languages
Computer Science 1000
Markup Languages
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
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)
Which would you rather read?
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
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
Content
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
Presentation
Headings
- white bold font
Links
Black font
Data
- bulleted, green font
- subheadings bolded
- subheadings black font
Content +
Presentation
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
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 grainy
no 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 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
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
<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>
Presentation
Content
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:
Start Tag
Content
End Tag
<title>
HelloWorld.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>
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 title 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 title html 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>
Root Element head title html body p
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
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 an early 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 crossplatform browser
IPO: April 1995
initial offering: $28/share first day of trading: $75/share
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
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
- animated gif
Netscape Comm.
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
- VBScript/Jscript
- CSS
Microsoft
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
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 Webpage
1) 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 Webpage
3) Use both!
most WSYIWYG editors allow the creator to manipulate the HTML code that has been automatically generated
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
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
