Computer Science 1000
description
Transcript of Computer Science 1000
![Page 1: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/1.jpg)
Computer Science 1000
Markup Languages
![Page 2: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/2.jpg)
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 [email protected]
![Page 3: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/3.jpg)
Which wouldyou rather read?
![Page 4: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/4.jpg)
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
![Page 5: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/5.jpg)
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 [email protected]
Content
![Page 6: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/6.jpg)
Headings- white bold font
LinksBlack font
Data- bulleted, green font- subheadings bolded- subheadings black fontPresentation
![Page 7: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/7.jpg)
Content +Presentation
![Page 8: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/8.jpg)
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
![Page 9: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/9.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
![Page 10: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/10.jpg)
Problems:2) Layout
if page viewed on 1200x960 window, extra space
resizing causes text to become grainyno word wrapping possible
![Page 11: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/11.jpg)
Problems: And so on In some cases, saving text and graphic layout as
images is used logos advertisements
not suitable for entire webpage
![Page 12: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/12.jpg)
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
![Page 13: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/13.jpg)
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
![Page 14: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/14.jpg)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>
![Page 15: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/15.jpg)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>
PresentationContent
![Page 16: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/16.jpg)
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
![Page 17: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/17.jpg)
Tags the content of a tag can include other tags
<html> <head> <title> HelloWorld.html </title> </head> <body> <p> Hello World! </p> </body> </html>
![Page 18: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/18.jpg)
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
![Page 19: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/19.jpg)
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
![Page 20: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/20.jpg)
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
![Page 21: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/21.jpg)
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
![Page 22: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/22.jpg)
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
![Page 23: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/23.jpg)
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
![Page 24: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/24.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
![Page 25: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/25.jpg)
History of Markup
A screenshot of anearly version of Mosaic
![Page 26: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/26.jpg)
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
![Page 27: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/27.jpg)
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
![Page 28: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/28.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
![Page 29: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/29.jpg)
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
![Page 30: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/30.jpg)
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
![Page 31: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/31.jpg)
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
![Page 32: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/32.jpg)
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
![Page 33: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/33.jpg)
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
![Page 34: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/34.jpg)
How to Create a Webpage3) Use both!
most WSYIWYG editors allow the creator to manipulate the HTML code that has been automatically generated
![Page 35: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/35.jpg)
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
![Page 36: Computer Science 1000](https://reader036.fdocuments.in/reader036/viewer/2022062803/568148af550346895db5c4bc/html5/thumbnails/36.jpg)
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