Home

as 1-up pdf - School of Computer Science Student WWW Server

1. j waterloo ca cs200 ericMeyer dynamicMenus html E N LI Reac ling ZapC Re efst ada 1257 2007 HPs Java5 Cocoa CocoajJava weather kai Wor wot Radio Python An Illustration of Dynamic Fonts amp Menus Larger Title Smaller Title UofW Other sites e Daring Fireball e Mac Geeke e Ars Technica CS 200 Fall 2013 52 The Web Monday October 28 2013 lt html gt lt head gt The CSS for this Example lt title gt An ILlustration of Dynamic Fonts amp amp Menus lt title gt lt style type text css gt 4 ie gt lt style gt CS 200 Fall 2013 body menuOne 4 menulwo 4 title 4 content 4 Monday October 28 2013 font family display display font size font weight margin bottom text align position Left top background color padding sans serif none none 15pt bold 15pt center absoLute 2 51n Q 51n FFFFQQ 25px 53 The Web The Content for this Example S lt body gt lt div id title gt An Illustration of Dynamic Fonts amp amp Menus lt div gt lt p gt lt A href onclick changeFontS1ze 4 3 gt Larger Title lt a gt lt p gt lt p gt lt A href onclick changeFontSizeC 3 gt Smaller Title lt a gt lt p gt lt h3 gt lt a href onclick toggleMenuC menuOne gt UofW 4 lt a gt lt h3 gt lt ul 1d menuOne gt
2. CSS for lt div ID p2 gt lt div gt 10em 2em right Sem top right bottom left 1 5em 0 25em 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 1lem 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html Other Selectors What we ve seen piece sets attributes for all lt p gt tags p name sets attributes for all lt p class name eee gt tags p name sets attributes for the lt p id name gt tag There are a variety of useful selectors we haven t discussed including h1 h2 h3 grouped selectors same attributes for multiple tags p title attributes for all tags lt p title eee gt ie lt p gt tags having a title attribute o title important attributes for all tags lt p title important eee gt h1 gt strong attributes for lt strong gt appearing immediately within an lt h1 gt eg lt h1 gt This is lt strong gt very lt strong gt important lt h1 gt hi p ees attributes for any lt p gt that immediately follows an lt h1 gt eg lt h1 gt Section A lt h1 gt lt p gt For this para lt p gt lt p gt But not this one lt p gt tr gt td first child attributes for lt td gt when it is the first child of a lt tr gt eg lt tr gt lt td gt mat
3. right 5em 0 1 5em 0 25em 0 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 1lem 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html T body 4 background color font family div wrap background color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 The Style Sheet div p2 4 rgb 153 102 51 margin Myriad Pro sans serif div menu float width rgb 251 233 198 padding rgb 122 74 26 margin 2em border background Q div menu a Q 25em 1em 25em lem display 1 25em text align 120 padding div footer 4 0 margin Q 25em 5em O 25em O 5em padding text align font style 2em 10em color 37 10em 2em right 5em 0 1 5em 0 25em 0 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 11em 0 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html T body 4 background color font family div wrap back
4. what folder would the path be relative to CS 200 Fall 2013 19 The Web Monday October 28 2013 When to use relative vs absolute paths Absolute paths e always start at the web root folder e are necessary between machines e ifahost domain name is present the path is necessarily absolute Relative paths e start at the document containing the link e make it MUCH easier to move web pages around as a group eg if all the cs200 pages use relative URLs amongst themselves then can move the cs200 subtree somewhere else without breaking the links between the cs200 pages e but ifa file in the group links to a file on the same machine not in the group it must use an absolute file path or the group can t be moved w o breaking that link IMPORTANT e you MUST write 20 instead of a space in URLs e and look out for trailing blanks So within a web site e use a relative path when the two files are more likely to be moved together eg a page amp an image in it e use an absolute path when the two files are more likely to be moved separately CS 200 Fall 2013 20 The Web Monday October 28 2013 An HTML form is a web page with interface widgets for supplying data e text edit boxes To retrieve your marks to date in C S 200 please enter your last name case doesn t matter and student td in the boxes shown below e check boxes Then click on the Search button ordinarily it shouldn t take more than thirty seconds
5. CS 200 Lecture 0 7 The Web HTML CGls amp CSS CS 200 Fall 2013 1 The Web Monday October 28 2013 Miscellaneous Notes Abbreviations aka Also Known As CSS Cascading Style Sheets CWS Course Web Site Reading Learning Web Design 2 e library reserve Extracts from HTML amp XHTML 5 e The Definitive Guide Chapter 8 on Cascading Style Sheets also available online from the University at http safari ora ccom gt MY BOOKSHELF Book 27 Western Civilization s tutorial on CSS properties for reference http www westciv com style_master academy css_tutorial introduction css_intro atm Sitepoint s CSS Introduction and Documentation for reference http reference sitepoint com css The Cascading Style Sheet Properties Quick Reference for reference CSS Pocket Reference 3 e by Eric Meyer O Reilly amp Associates book store Optional background reading Web Style Guide by Lynch amp Horton Yale Univ Press 0 300 07675 4 Library Reserves Optional reference text CSS The Definitive Guide 3 e by Eric Meyer O Reilly ISBN 0 596 52733 0 CS 200 Fall 2013 2 The Web Monday October 28 2013 Administrivia Please read and high light before lab e Assignment 7 e This week s slides There are hyper text commented source files for many of the web pages used in this lecture e Handouts gt Commented HTML on the CWS Major topics today e read and recall pearl e the client serve
6. of marks for a course how man y paon received marks Hi and 80 e 4 n 70 and 75 how many betw le containing the The solution You have a FileMaker tab final or kenang for each stu rae t bu t databases ar ren t good at making graphs and you often want to include such graphs in end of term reports for aka department chair So you need to transfer data between FileMa ker Excel and Mi soft Word as y work Because you and you rcolleagu ues do this often you aan to work out a convenient and efficient way of doing so ected demonstra be eo a Solutio P d p solut may subfolder whe gt 200ex ams di ip a ge erve o opy them of 200ex ams before running them o your personal s eter Demo Course Grades When the Do It button on the Choose layout is clicked grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to A open the Data file copy its contents into the Grades worksheet and then close it _ The Web TaskB html the body part of the web page 1 T lt HTML gt lt HEAD gt lt LINK REL STYLESHEET HREF LabExam css gt lt TITLE gt Lab Exam Task B lt TITLE gt lt HEAD gt lt BODY gt lt DIV CLASS Block style text align center font weight bold gt Sample Lab Examp Task B lt DIV gt lt DIV CLASS Block style font style 1tali
7. NAME which VALUE course gt Course Mark lt TD gt lt TR gt lt TR gt lt TD ALIGN Left gt lt INPUT TYPE Submit VALUE Fetch Marks gt lt TD gt lt TR gt lt TABLE gt lt FORM gt lt CENTER gt lt xxx gt form tags lt HTML gt CS 200 Fall 2013 27 The Web Monday October 28 2013 Styles in HTML Most tags are named styles lt strong gt lt em gt lt p gt lt ol gt e these are logical tags e browsers decide how to render them Although a few are not lt b gt lt i gt e these are physical tags e browsers have no choice Generally speaking e the browser not the web author controls layout e browsers sometimes behave differently But appearance is important CS 200 Fall 2013 28 The Web Monday October 28 2013 Controlling HTML Layout The response e abusing tables and frames e new tags and attributes e proprietary tags and attributes e postscript and pdf Adobe s Portable Document Format via plugins Wouldn t it be nice e if HTML had USER DEFINED named styles e like those we find in word processors e that authors could use to control layout CS 200 Fall 2013 29 Monday October 28 2013 The Web Cascading Style Sheets Style definitions may appear at the beginning of a web page There are five style definitions in this example the first specifies the default font to be used the second and third attach default properties
8. and then close it search people Kare i AJ CS 200 Fall 2013 32 The Web Monday October 28 2013 A yin SONRA Task B from the Winter 98 Lab Exam T piur e a Lab Exam Task A lt os og E E3 http jcbserver uwaterloo ca cs200 SampleExams LabExam Taskl i To Google math uwaterloo ca computer science descriptions administrivia lectures resources project exams surveys marks sample Lab Exam Task B This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of cs home the leading wrong 200 home To use computers effectively itis important to select an appropriate tool for each task more often than not this involves using several tools to solve a problem passing data from one tool to the next as you work This task is an example of such The problem As a teacher you often want to look at a bar chart like the example on the right showing the distribution of marks for a course how many people received marks between 0 and 75 how many between 75 and 80 etc The solution You have a FileMaker table containing the final grades for each student but databases aren t good at making graphs and you often want to include such graphs in end of term reports for your department chair So you need to transfer data between FileMaker Excel and Microsoft Word as you work Because you and your colleagues do this often you
9. fathoms 12 feet approximately 3 7 meters or safe water was measured on the sounding line The riverboatman s cry was mark twain or more fully by the mark twain twain is an archaic term for two By the mark twain meant according to the mark on the line the depth is two fathoms Clemens provides a footnote to Chapter 8 Perplexing Lessons of Life e on the Mississippi where he explains mark twain as two fathoms and Mark three is three fathoms The name may also have come from his wilder days in the West where he would buy two drinks and tell the bartender to mark twain on his tab From the online encyclopedia Wikipedia at Attp en wikipedia org wiki Mark_twain The Web URLs Uniform Resource Locators a Oe CS 200 Home Page http jcbserver cs uwaterloo ca cs200 index shtml Q7 Google Water math uwaterloo ca computer science erloo descriptions administrivia lectures resources project exams surveys marks CS 200 Home Page Concepts for Advanced Computer Usage Use the orange menu bar at the top of this page to locate information P UW Angel A CS nome CS 200 message board and online component can be found here LE 200 home i seagh Reviews of Backup Software for Windows PC Magazine has a fairly recent August 2005 article on backup practices A people 7 x and software for Windows including a review of Retrospect 7 for Windows 7 Open
10. http ficbserver cs uwaterloo ca cs20D search search shtml in anew window behind the current window For lt a href http jcbserver cs uwaterloo ca cs200 search search shtml gt search lt a gt equivalent to lt a href http jcbserver cs uwaterloo ca 80 cs200 search search shtml gt search lt a gt e http is the protocol e jcbServer is the server s local name e cs uwaterloo ca is the domain in which the server is located e jcbServer cs uwaterloo ca is the server s host domain name is the port on which jcbServer s web server application is listening e cs200 search search htm is the absolute path from the server s web root folder to the file An anchor with another protocol lt a href ftp ftp tla systems co uk 21 DragThing dmg gt lt a gt CS 200 Fall 2013 16 The Web Monday October 28 2013 Another Example URL T Another example THE FOURTH PART THE FOURTH PART OF GAUL A novel of the Veneti Gaul revolt against Caesar and the epic voyage of its survivors to the New World John C Beatty iia 3 Gaul in 56 BC Editorial Note Purchase from Amazon Prologue Purchase from Barnes amp Noble Synopsis In 58 B C Rome was the superpower of the Mediterranean world and in that year Julius Caesar took up the governorship of the Roman Province in southern France or Gaul as it was then called The Roman Senate expected Caesar to govern the province extract a reasona
11. i FONT STYLE italic 5 An example html file that uses simple css lt HTML gt lt HEAD gt lt LINK REL styLesheet TYPE text css HREF Simple css lt HEAD gt lt BODY gt lt P gt This paragraph will be centered lt P CLASS A gt This paragraph will be centered and bold lt P CLASS B gt This paragraph will be centered and italic lt P gt This word will be lt SPAN gt green lt SPAN gt lt BODY gt lt HTML gt Notice that all four paragraphs are centered and in Myriad Pro The contents of lt P class A gt lt P gt and lt P class B gt lt P gt inherit the properties of lt P gt so they don t have to explicitly set them Inner elements inherit properties from outer elements containing them when that makes sense eg the lt P gt lt P gt inherit Myriad Pro from the lt BODY gt lt BODY gt in which they appear Many browsers now let users supply a default file sheet CS 200 Fall 2013 31 The Web Monday October 28 2013 A yin SONRA Task B from the Winter 98 Lab Exam T pie a Lab Exam Task A lt os og E E3 http jcbserver uwaterloo ca cs200 SampleExams LabExam Taskl i To Google math uwaterloo ca computer science descriptions administrivia lectures resources project exams surveys marks sample Lab Exam Task B This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of cs ho
12. ie attributes to lt SPAN gt and lt P gt the last two define property bundles that can be applied to lt P gt lt HTML gt These are called selectors lt HEAD gt lt STYLEwIYPE TEXT CSS gt BODY FONT FAMILY Myriad Pro sans serif SPAN 4 COLOR green TEXT ALIGN center FONT WEIGHT bold FONT STYLE italic lt STYLE gt lt HEAD gt lt BODY gt lt P gt This paragraph will be centered lt P gt lt P CLASS A gt This paragraph will be centered and bold lt P gt lt P CLASS B gt This paragraph will be centered and italic lt P gt lt P gt This word will be lt SPAN gt green lt SPAN gt lt P gt lt BODY gt lt HTML gt ASO simpleHeadCSSexample html This paragraph will be centered This paragraph will be centered and bold This paragraph will be centered and italic This word will be green CS 200 Fall 2013 30 Monday October 28 2013 The Web Or style definitions may be EXTERNAL to a web page External CSS files MO simpleExternalCSSexample html This paragraph will be centered This paragraph will be centered and bold so that multiple web pages can use them This paragraph will be centered and italic much more important for HTML than for word processing This word will be green An example style sheet file BODY FONT FAMILY Myriad Pro sans serif named simple css SPAN COLOR green P A FONT WEIGHT bold P B j j P TEXT ALIGN center 5
13. lt li gt lt a href onclick SetContentToC http ww cs uwaterLloo ca gt CS lt a gt lt li gt lt li gt lt a href onclick SetContentToC http jcbServer cs uwaterloo ca cs2Q 0 gt CS 200 lt a gt lt li gt lt li gt lt a href onclick SetContentToC http jcbServer cs uwaterloo ca cs230 gt CS 230 lt a gt lt li gt lt li gt lt a href onclick SetContentToC http jcbServer cs uwaterloo ca cs436 gt CS 436 lt a gt lt li gt lt li gt lt a href onclick setContentToC http jcbServer cs uwaterloo ca gt jcbServer lt a gt lt li gt lt li gt lt a href onclick setContentTo http www math uwaterloo ca gt Math lt a gt lt li gt lt li gt lt a href onclick setContentTo http oscar cs uwaterloo ca gt Oscar lt a gt lt li gt lt li gt lt a href onclick sSetContentToC http ww uwaterLloo ca gt UofW lt a gt lt li gt lt ul gt lt h3 gt lt a href onclick togglLeMenuC menuTwo gt Other sites lt a gt lt h3 gt lt ul 1d menuTwo gt lt li gt lt a href onclick SsetContentToC http daringfireball net gt Daring Fireball lt a gt lt li gt lt li gt lt a href onclick SetContentToC http ww macgeekery com gt Mac Geekery lt a gt lt li gt lt li gt lt a href onclick SsetContentToC http arstechnica com index ars gt Ars Technica lt a gt lt li
14. 80 gt Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman lt P gt lt BODY gt lt HTML gt Jen s Fake Home Page Yuck 906 g Fake Home ag e Jen s Fake Home Page WN Jen siQite Home Page Welcome to my Web page Warning This is not my real home page It s just a little something made up for the occasion But just in case you re interested I ll tell you a bit about me Places I ve Lived Akron OH Hudson OH Sourth Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Done CS 200 Fall 2013 10 The Web Monday October 28 2013 A Toy Web Page The HTML for this web page lt HITML gt lt HEAD gt lt TITLE gt Jen s Fake Home Page lt TITLE gt lt HEAD gt lt BODY bgcolor FFFFFF gt lt IMG SRC star gif gt lt IMG oRC JenBanner gif gt lt IMG SRC star gif gt lt CENTER gt lt H2 gt Welcome to my Web page lt H2 gt lt CENTER gt lt IMG SRC Exclamation gif ALIGN left HSPACE 6 gt lt P gt lt STRONG gt Warning lt STRONG gt This is not my lt EM gt real lt EM gt home page It s just a little something made up for the occasion But just in case you re interested I ll tell you a bit about me lt P gt lt HR gt lt H2 gt Places I ve Lived lt H2 gt lt UL gt lt LI gt Akron OH lt LI gt lt Ll gt Hudson OH lt LI gt lt Ll gt Sourth Bend IN lt LI gt lt L
15. Page http jcbserver cs uwaterloo ca 9 Qy Google 5 Jen s 9 Home Page Welcome to my Web page Warning This is not my real home page It s just a little something I made up for the occasion But just in case you re interested I tell you a bit about me Places I ve Lived Akron OH Hudson OH South Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Choose A Font Arial Palatino Comic Sans MS The Web The Javascript for this Example S lt HTML gt lt HEAD gt lt TITLE gt Jen s Fake Home Page lt TITLE gt lt HEAD gt lt BODY id all bgcolor FFFFFF style font family Artal sans serif gt eA POOE ATONE SANA Notice that the CSS attribute font family DN Fori becomes fontFamily in Javascript because is illegal in a variable name lt input type radio name chooseFont checked onclick elt document getElementBylIdC aLll elt style fontFamily Arial sans serif gt Arial lt input type radio name chooseFont onclick elt document getElLementByIdC all elt styLle fontFamily Palatino serif gt Palatino lt input type radio name chooseFont onclick elt document getELementByIdC all elt style fontFamily Comic Sans MS cursive gt Comic Sans MS lt form gt lt p gt lt BODY gt lt HTML gt Think about Excel scripting as you read this Ja
16. e but it makes debugging HTML harder e therefore when a tag doesn t seem to have any effect suspect misspelling e Validation see the assignment for details That s what the lt IDOCTYPE gt magic incantation is for see next slide Upper case vs lower case e who cares HTML is case insensitive lt TITLE gt lt title gt works fine XHTML requires that tags be lower case XML is case sensitive e suggestion use lower case CS 200 Fall 2013 13 Monday October 28 2013 The Web A Simple HTML Table lt xml version 1 0 encoding utf 8 gt lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 Loose dtd gt lt HTML gt lt HEAD gt lt TITLE gt Mark Report lt TITLE gt lt HEAD gt lt BODY gt lt H2 gt Top CS20 Marks lt H2 gt i ARMIN lt TABLE BORDER 1 ALIGN center gt Top CS 200 Marks lt TR ALIGN center gt lt TH gt ID Number lt TH gt ID Number Final Grade lt TH gt Final Grade lt TH gt 94010203 lt TR gt 98102030 lt TR ALIGN center gt eee lt TD gt 94010203 lt TD gt lt TD gt 81 lt TD gt lt TR gt lt TR ALIGN center gt lt TD gt 98102030 lt TD gt lt TD gt 75 lt TD gt lt TR gt lt TR ALIGN center gt lt TD gt 90000123 lt TD gt lt TD gt 607 lt TD gt lt TR gt lt TABLE gt lt BODY gt For a list of valid doctypes see http www w3 org QA 2002 04 valid dtd list html lt HTML g
17. for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman lt P gt lt BODY gt lt HTML gt 099 Jen s Fake Home Page 3 Jen s Fake Home Page Jen s o gt Home Page Welcome to my Web page Warning This is not my real home page It s just a little something made up for the occasion But just in case you re interested I ll tell you a bit about me Places I ve Lived Akron OH Hudson OH Sourth Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Done CS 200 Fall 2013 10 The Web Monday October 28 2013 A Toy Web Page The HTML for this web page lt HITML gt lt HEAD gt lt TITLE gt Jen s Fake Home Page lt TITLE gt lt HEAD gt lt BODY bgcolor FFFFFF gt lt IMG SRC star gif gt lt IMG oRC JenBanner gif gt lt IMG SRC star gif gt lt CENTER gt lt H2 gt Welcome to my Web page lt H2 gt lt CENTER gt lt IMG SRC Exclamation gif ALIGN left HSPACE 6 gt lt P gt lt STRONG gt Warning lt STRONG gt This is not my lt EM gt real lt EM gt home page It s just a little something made up for the occasion But just in case you re interested I ll tell you a bit about me lt P gt lt HR gt lt H2 gt Places I ve Lived lt H2 gt lt UL gt lt LI gt Akron OH lt LI gt lt Ll gt Hudson OH lt LI gt lt Ll gt Sourth Bend IN lt LI gt lt Ll gt Boston MA lt LI gt lt UL gt lt P style font size
18. gt lt li gt lt a href onclick SetContentToC http ww slashdot com gt Slashdot lt a gt lt li gt lt li gt lt a href onclick SetContentToC http www apple com gt Apple lt a gt lt li gt lt li gt lt a href onclick sSetContentToC http ww microsoft com gt Microsoft lt a gt lt li gt lt li gt lt a href onclick SetContentToC http ww mozilla org gt Mozilla lt a gt lt li gt lt ul gt lt IFRAME 1d content SRC width 70 height 100 gt Oops this browser doesn t implement the IFRAME tag lt IFRAME gt pesca Adapted from Section 6 13 of The CSS Cookbook by Christopher Schmitt O Reilly amp Associates See also the documentation for CSS attributes in the CSS Pocket Reference CS 200 Fall 2013 54 The Web Monday October 28 2013 The JavaScript for this Example lt script Language JavaScript gt var currentFontSize 15 function changeFontSizeC delta 4 var titLeELement document getELementByIdC title style currentFontS1ze currentFontSize delta titLeELement fontSize currentFontSize pt j function toggleMenu menuClicked 4 processOneMenu menuOne menuClicked processOneMenuC menuTwo menuClicked j function processOneMenuC menuToCheck menuClicked 4 var menuClickedStyles document getELlementById menuClicked style var menuToCheckStyles document getELementById menuToChe
19. like squid which many of us won t eat because it s nasty They re shaped like little umbrellas but you probably wouldn t want one in your pina colada Most varieties are grown with liberal quantities of what like to term managerial output And they re fungal which our mothers always warned would kill us Heck some mushrooms actually will kill you So what is it about mushrooms that so many of us like suppose it s the taste which appeals to some of us understand that grasshoppers can be very tasty too so who am to judge People will eat all manner of weird stuff But fungus don t know Maybe the morel is that those of us who eat mushrooms aren t really us if you see what mean It could be that the mushroom eaters of the world are really some bizarre funqus based aliens who are secretly planning to take over the world Just like on The X Files If that s the case though wonder when I ll get my instructions from the mothership a fun guy Good evening my name is Rootsy and I ll be your host for this evening It s been said that should just stop with this whole Web thing mostly by Grandma but she still thinks computers are run by evil pixies so try to keep the source in mind accept that some of the humor on this page may be in spore taste but we re all adults here and it made me laugh to write this stuff down so maybe you ll like it as well stories ems art Elen m_ Res
20. lt TITLE gt Request Your Marks in CS 200 lt TITLE gt lt HEAD gt lt BODY gt lt P gt To retrieve your marks to date in CS 200 please enter your last name case doesn t matter and student id in the boxes shown below lt P gt lt P gt Then click on the lt STRONG gt Fetch Marks lt STRONG gt button ordinarily it shouldn t take more than thirty seconds or so for your marks to come back Please be patient I m only a Mac IIfx lt P gt lt P gt lf you find a discrepancy please notify the course tutor as soon as possible lt P gt lt FORM ACTION http ReportMarks cgi METHOD GET gt lt P gt lt STRONG gt Your Last Name lt STRONG gt lt INPUT TYPE text NAME surname SIZE 33 gt lt P gt lt P gt lt STRONG gt Your ID Number lt STRONG gt lt INPUT TYPE text NAME idnumber SIZE 33 gt lt P gt lt P gt lt INPUT TYPE submit VALUE Fetch Marks gt lt P gt lt P gt lt INPUT TYPE hidden NAME course VALUE cs200 gt lt P gt lt FORM gt lt BODY gt lt HTML gt CS 200 Fall 2013 23 Monday October 28 2013 ANA Request Your Marks in CS 200 ay GA http jcbserver cs200 200request htm O To retneve your marks to date in CS 204 please enter your last name case doesn t matter and student id in the boxes shown below Then click on the Search button ordinarily it shouldn t take more than thirty seconds or so for your ma
21. up for the occasion But just in case you re interested I ll tell you a bit about me lt P gt lt HR gt lt H2 gt Places I ve Lived lt H2 gt lt UL gt lt Ll gt Akron OH lt LI gt lt Ll gt Hudson OH lt LI gt lt Ll gt Sourth Bend IN lt LI gt lt Ll gt Boston MA lt LI gt lt UL gt lt P style font size 80 gt Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman lt P gt lt BODY gt lt HTML gt CS 200 Fall 2013 11 Monday October 28 2013 The HTML for our Toy Web Page Readably Formatted The Web Discussion Points Camino 1 6 HTML is stored in ASCII text files If you view this page in any of the common browsers you will find that they share two major deficiencies HTML tags as named styles e paragraphs are separated by too much white space typically an e iti entire blank line whose definitions are supplied by the browser e and list items are separated by too little white space typically none l bevond the current line to line leading e same web page different browser E generally similar but not identical appearance Always use closing tags eg lt P gt lt LI gt If you view this page in any of the common browsers you will find that they share two major deficiencies e otherwise the browser must guess their location e paragraphs are separated by too much white space typically an be prepa
22. 0 switchingStyleSheets JensHomePage html http jcbserver cs uwaterloo ca cs200 switchingStyleSheets JensHomePage html a0 0 Jen s Fake Home Page ESS eT Goode iiy ke Welcome to my Web page i Warning This is not my real home page It s just a little something I made up for the occasion But just in case you re interested I ll tell you a bit about me Places I ve Lived e Akron OH e Hudson OH South Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman And just for fun we choose a random color for the first paragraph Choose Style Sheet e No Style Def s e Style Def s 1 o Style Def s 2 See JensHomePage html and the javascript source file global js in cs200 switchingStyeSheets for details if you re curious Note that the color of the Warning paragraph is chosen randomly CS 200 Fall 2013 Monday October 28 2013 51 The Web CSS JavaScript S Adding a little JavaScript to CSS of the sort covered in CS 100 e dynamically changing CSS attributes e collapsing menus e absolute positioning of layers remember Photoshop amp Illustrator e and much much more Example e local http 127 0 0 1 dynamicMenus html e remote http jcbServer cs uwaterloo ca cs200 ericMeyer dynamicMenus html ei lt lt An Illustration of Dynamic Fonts amp Menus ii IGE Tod ul http j jcbserver cs u fy
23. 13 The Web CSS JavaScript To Change The Default Font Example changing the font locally local e remote Jen s Fake Home Page A hitp jcbserver cs uwaterloo ca GO G oogle b Jen s 0 Home Page Welcome to my Web page Warning This is not my real home page It s just a little something made up for the occasion But justin case you re interested I ll tell you a bit about me Places I ve Lived Akron OH Hudson OH South Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Choose A Font Arial Palatino Comic Sans MS CS 200 Fall 2013 Monday October 28 2013 Jen s Fake Home Page A http jcbserver cs uwaterloo ca 2 Qe Google gt Jen s 0 Home Page Welcome to my Web page Warning This is not my real home page It s just a little something I made up for the occasion But just in case you re interested l tell you a bit about me Places I ve Lived Akron OH Hudson OH South Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Choose A Font Arial Palatino Comic Sans MS 49 S http 127 0 0 1 cs200 switchingFontsWithJavascript JensHomePage html http jcbserver cs uwaterloo ca cs200 switchingFontsWithJavascript JensHomePage html 000 Jen s Fake Home
24. Lorem ipsum dolor sit amet consectetuer adipiscing elit Morbi lacus felis euismod at pulvinar sit amet dapibus eu eros Etiam tellus Nam vestibulum porttitor urna Phasellus REGULAR aliquet pretium quam Proin pharetra wisi nec tristique accumsan magna sapien pulvinar purus vel hendrerit ipsum tellus at ante CS 200 Fall 2013 43 Monday October 28 2013 requirements reset settings on this c A d gt of T ae ae Py Ee Fey Ae Tu Fe CF Be a a G2 Fm FSF a S bh YA wee wesw i r 4 4 a WA E W ww fet ih WY ogee T I ioe MB pE a a AA Wa y 4 _ Ly wW E hk a 1 J ga x WH Ss es Wb Seti MW bana DA ji au GS w y d ne q wua IN ES wW wuy HEH P wW d Ba Google Feso rees base font size 10px E step by step tools omputer most wanted settings 3rd column Ghose typeface Foon thelist Arial OF SEGA yaur oum Scrivano 7 column settings size leading Tracking TD CNED COD alignment Word space decoration left normal none color background apply to Saluran fffa75 ingan ei aa The Web Common Sources of Confusion in the Lab You can use Firefox or Safari s File gt Open File menu item e that s effectively what PageSpinner s Preview button menu item does e HOWEVER File gt Open File is not as fussy about paths as most web servers it wont complain about sp
25. ORM and TABLE are on the next page gt lt HEAD gt lt TITLE gt Request Your Marks in CS 200 lt TITLE gt lt HEAD gt lt BODY gt lt P gt To retrieve your marks to date in CS 200 please enter your Last name case doesn t matter and student id itn the boxes shown below lt P gt lt P gt Then click on the lt STRONG gt Search lt STRONG gt button ordinarily it shouldn t take more than thirty seconds or so for your marks to come back Please be patient I m only a Mac IIfx lt P gt lt P gt If you find a discrepancy please notify the course tutor as soon as possible lt P gt lt CENTER gt CS 200 Fall 2013 Monday October 28 2013 26 The Web lt FORM ACTION http ReportMarks cg1 METHOD POST gt lt INPUT TYPE h1idden NAME course VALUE cs2QQ gt lt TABLE gt lt TR gt lt TD gt lt STRONG gt Your Last Name lt STRONG gt lt TD gt lt TD gt lt INPUT TYPE text NAME sSurname SITZE 33 gt lt TD gt lt TR gt lt TR gt lt D gt lt STRONG gt Your ID Number lt STRONG gt lt TD gt lt TD gt lt INPUT TYPE text NAME 1dnumber SIZE 33 gt lt TD gt lt TR gt lt TR gt lt TD COLSPAN 2 gt lt STRONG gt Wh1ch lt STRONG gt lt INPUT TYPE checkbox NAME which VALUE assign gt Assignments lt INPUT TYPE checkbox NAME which VALUE midterm gt Midterm lt INPUT TYPE checkbox NAME which VALUE final gt Final lt INPUT TYPE checkbox
26. aces in URLs it wont complain about trailing blanks in file names e So you MUST also ask Oscar s web server to access your web pages to be certain that the URLs in them work http oscar cs uwaterloo ca cs200web cs200section_NNN yHC_web www Root htm Browsers cache most pages you have browsed on your local disk e When you ve changed the contents of a page and saved it to your network disk from PageSpinner option click the Reload button or to ensure your browser REALLY gets the new version And a word of advice use e closing tags eg lt TD gt lt P gt e indentation e blank lines to structure your HTML it makes debugging much easier CS 200 Fall 2013 Monday October 28 2013 44 The Web Finally Remember that lt head gt does NOT mean lt header gt e lt head gt lt head gt enclose information ABOUT the web page that is not displayed IN the page e lt style gt lt style gt illustrates this better than lt title gt lt title gt Most browsers have a View gt Source menu item that will show you the HTML source for the page currently being displayed Warning e CSS is still not perfectly implemented by contemporary browsers although the situation is much better now than it was a few years ago So use the latest release of whatever browser you like when experimenting with Cascading Style Sheets e Also StyleMaster has lots of info about browser quirks amp
27. all 2013 17 The Web Monday October 28 2013 The web root folder Relative vs Absolute Paths 1 e aweb server can only return files in the server subtree e sometimes that s rooted in the folder holding the server app e sometimes this web root folder can be set elsewhere CS 200 Fall 2013 Monday October 28 2013 Cl 1st Year Cl 2nd Year Cl CS100 Cl CS120 Cl CS134 CS200 html hBook html hPage html CS120 htmI Aka The Web Relative vs Absolute Paths 2 A link in CS100 html to CS200 html could be written as e lt a href 2nd 20Year cs200 cs200 html gt CS200 lt a gt Ci 1st Year Cl 2nd Year e Note the initial slash e This is an absolute path e The host domain name is implicit ie the same as the referencing web page Or as e lt ahref 2nd 20Year cs200 cs200 html gt CS200 lt a gt e Note the initial CS200 html hBook html hPage html 100 htmI CS120 htmI IN e This is a relative path sel means go up one level to the parent folder fee Means go up two levels etc note for security reasons the web server application will prevent the path from rising above the web root folder Or using an explicit host domain name AND an absolute path e lt a href http jcbServer uwaterloo ca 2nd 20Year cs200 cs200 html gt CS200 lt a gt It makes no sense to combine a host domain name and a relative path
28. ars on the desktop just as for a local disk use a network disk just like a local disk although it s a bit slower network folders these are subfolders aka subdirectories of a network disk eg 101BeaJ_main is my cs200main network folder unlike the other terms on this slide network folder is a CS200 invented term As distinct from peer to peer file sharing CS 200 Fall 2013 6 The Web Monday October 28 2013 The Web like file sharing has a client server model Many of the machines on the Internet are web servers oscar cs uwaterloo ca e any machine client on the web can ask them for data Server e actually they re asking a particular application running on that machine for data which is identified by a port The client uses a browser to request amp display web pages e eg Firefox Safari Netscape Explorer Camino Opera e browsers decide how to render the HTML based on HTML tags found in the document what kind of display is available gt user preferences Lab Macintoshes Clients e browsers are often but not always consistent in how they do this an M For security e aweb server can only return files in the server subtree e sometimes that s rooted in the folder holding the server app The default Mac OS X web server application Apache is at ust sbin httpd e e M mM usually this web root folder can be set the default web doc
29. ases aren t good at making graphs and you lt gt often want to include such graphs in end of term reports for your department chair So you need to transfer data between FileMaker Excel and Microsoft Word as you i work Because you and your colleagues do this often you want to work out a lt DIV CLASS BLock gt convenient and efficient way of doing so d 1 Password protected demonstration solutions may be found in the Demo Solutions lt S PAN cl ass S hou t gt Th e sol ut LON lt S PAN gt subfolder of the 200exams disk on jcbServer Copy them to your personal subfolder 1 f 200exams before running them You have a FileMaker table e i Demo Course Grades When the Do It button on the Choose layout is clicked lt DIV gt grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to A open the Data file copy its contents into the Grades worksheet and then close it__ CS 200 Fall 2013 34 The Web Monday October 28 2013 TaskB html the body part of the web page 1 T lt HTML gt lt HEAD gt lt LINK REL STYLESHEET HREF LabExam css gt lt TITLE gt Lab Exam Task B lt TITLE gt lt HEAD gt lt BODY gt lt DIV CLASS Block style text align center font weight bold gt Sample Lab Examp Task B lt DIV gt 806 lt DIV CLASS BLock style f
30. ble amount of revenue and guard the frontier against incursion by the many Gaulish tribes to the north lt a href fragments bio biography html gt John C Beatty lt A gt fragments bio biography htm e isa relative path to the target file e starting in the folder containing the page holding the link e note the LACK of an initial and host domain name lt IMG SRC gt works the same way CS 200 Fall 2013 17 The Web Monday October 28 2013 Another Example URL T Another example THE FOURTH PART THE FOURTH PART OF GAUL A novel of the Veneti Gaul revolt against Caesar and the epic voyage of its survivors to the New World Gaul in 56 BC Editorial Note Purchase from Amazon Prologue Purchase from Barnes amp Noble Synopsis In 58 B C Rome was the superpower of the Mediterranean world and in that year Julius Caesar took up the governorship of the Roman Province in southern France or Gaul as it was then called The Roman Senate expected Caesar to govern the province extract a reasonable amount of revenue and guard the frontier against incursion by the many Gaulish tribes to the north lt a href fragments bio biography html gt John C Beatty lt A gt fragments bio biography htm e isa relative path to the target file e starting in the folder containing the page holding the link e note the LACK of an initial and host domain name lt IMG SRC gt works the same way CS 200 F
31. bugs CS 200 Fall 2013 45 Monday October 28 2013 The Web XML lt xml versiton 1 encoding UTF 8 gt lt xml stylesheet type text css href ToylTable css gt lt doc gt ToyTable xml lt xmLTabLe gt lt row gt lt ceLL gt X lt ceLlL gt lt ceLL gt lt ceLL gt lt cell gt 0 lt cell gt lt row gt lt row gt lt ceLL gt lt cell gt lt ceLL gt lt cell gt lt cell gt 0 lt cell gt lt row gt lt row gt lt ceLL gt 0 lt celLllL gt lt ceLL gt lt ceLlL gt lt ceLL gt X lt ceLlL gt lt row gt lt xmLTab Le gt lt examp Le gt This text is centered WITHIN the space occupied by the amp Lt example amp gt amp Lt example amp gt block lt examp Le gt lt doc gt CS 200 Fall 2013 46 The Web Monday October 28 2013 ToyTable css doc font family Comic Sans MS sans serif Font size 20pt xmLTable display table color b Lack background color yellow Use LR margins of auto margin top lem to center a block level margin left atO element within its parent Marg Ln right l auto lt xml version 1 0 encoding UTF 8 gt lt xmL styLesheet type text css href ToyTable css gt FOW lt doc gt disp Lay tab lLe row lt xmLTabLe gt lt row gt cell lt ceLlLlL gt X lt cell gt 7 e lt Ccell gt lt Ccell gt display a table cellL lt cell gt 0 lt cell gt padding Left Q 2em Or sits wheat lt cell gt lt ce
32. c gt This page 1S best displayed with e lt DIV gt lt DIV CLASS BLock gt To use computers effectively it is important Introduction Preliminaries Taska Taske Task 8609 Lab Exam Task A Shien ichcacver inwatering ra les 2 SamnlaFvame ahFyam Tacki MY nala I A lt gt A E http jcbserver uwaterloo ca cs200 SampleExams LabExam Taski Qr Google math uwaterloo ca computer science Waterloo descriptions administrivia lectures resources project exams surveys marks 6 Sample Lab Exam Task B lt D IV gt This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of cs home the leading wrong lt IMG S RC A Ta S kB 1 smal g 1 f A al 1 g n r 1 g ht gt 200home To use computers effectively itis important to select an appropriate tool for each task a more often than not this involves using several tools to solve a problem passing data n a from one tool to the next as you work This task is an example of such lt DIV CLASS Block gt ji The problem As a teacher you often want to look ata bar chart like the example on the right showing the distribution lt SPAN clLass Shout gt The probl em lt SPAN gt of marks for a course how many people received marks between 70 and 75 how many between 75 and 80 etc AS a teache r 9 you often want 66 The solution You have a FileMaker table containing the DIV final grades for each student but datab
33. ches this lt td gt lt td gt but not this lt td gt lt td gt and various combinations of these Effectively they do pattern matching See Chapter 2 of CSS The Definitive Guide if you re curious You re not expected to memorize these for CS 200 this is useful read and recall someday info CS 200 Fall 2013 38 The Web Monday October 28 2013 The HTML lt html gt lt head gt lt titlLe gt A Simple Eric Meyer lt title gt lt LINK REL STYLESHEET HREF er1icMeyer css gt lt head gt lt body gt lt div class wrap 1d p1 gt lt hi gt much room to think lt h1 gt lt p gt Sometimes I find myself o lt p gt lt p gt I suppose it s the taste e lt p gt lt div gt lt div class wrap 1d p2 gt lt h2 gt a fun guy lt h2 gt lt div 1d menu gt lt a href test2 htmL gt stor1es lt a gt lt a href test3 htmL gt poems lt a gt lt a href test4 htmlL 1d LastLink gt art lt a gt lt div gt lt p gt Good evening my name 1s Rootsy eee lt p gt lt div gt CS 200 Fall 2013 Monday October 28 2013 lt div class wrap 1d footer gt Adapted from Eric Meyer On CSS by Eric Meyer amp copy 2002 lt br gt See ww newriders com amp amp www ericmeyeroncss com lt div gt lt body gt lt html gt Notice that attributes can come from more than one style definition e eg from div wrap and div p1 appli
34. ck style 1fC menuCLicked menuToCheck 4 tfC menuCLickedStyles display block 4 menuCLickedStyLles display none else menuCLickedStyLes display block else menuloCheckStyLes display none function setContentToC theURL 4 var theDiv document getELementByIdC content theDiv src theURL j lt script gt lt head gt CS 200 Fall 2013 55 Monday October 28 2013 The Web An example of exotic selectors in use lt html gt lt head gt lt style gt 26 td title color black tr gt td first child color blue text align center tr gt td td td color red tr gt td td td td color black gt lt style gt lt head gt lt body gt lt table align center border 0 cellpadding cellspacing width 707 gt lt tr gt lt td colspan 5 align center id title gt lt span style font size 20pt font weight bold gt ASCII Character Codes lt span gt lt br gt lt span styLle font size 14pt font weight normal1 gt Chttp jcbServer cs uwaterlLloo ca csi25 asciiCodes2 html lt span gt td gt asciiCodes fancySelectors html lt lt tr gt ASCII Character Codes http jcbServer cs uwaterloo ca cs125 asciiCodes2 html Decimal Value Bits Char Abbr Meaning 0010 0000 space pan 0010 0001 lt td gt Decimal Value lt td gt 0010 0010 lt td gt lt a name table gt B1its lt a gt lt td gt 0010 0100 lt td g
35. div gt e eg lt p style color green gt good stuff lt p gt e eg lt li style color green gt clear desk lt li gt e eg lt span style color green gt Good work lt span gt Block level tags generate automatic line breaks before amp after Inline tags do not one can follow another on the same line CS 200 Fall 2013 Monday October 28 2013 eBlock font family line height margin top eltem1 4 font family line height margin top margin left eltem2 4 font family margin top eFootnote font family font size line height margin top eEmphasize font style eShout font weight Lab Exam Task A Palatino 15px 0X Palatino 15px 5pX 25px Palatino SPX Palatino 10pt 13px 5px italic bold Sa ed http jcbse ca cs200 SampleExams LabExam TaskI Q7 Googl Introduction Preliminaries Task A Task B Task C Sample Lab Exam Task B This page is displayed with Internet Explorer 4 or 5 Netscape 4 gets some of the leading wrong s effe ctiv ely itis important to se selec n appropriate tool for each task s oten than bi this involv m using several cos a kasah ve apr sedani nila ng data fro ool to the ates you work This task is mple of such t The ae As a teacher you often want to look at a bar chart like the example on the right showing the distribution
36. e radio buttons or so for your marks to come back Please be patient Tm only a Mac IN e pop up menus If you find a discrepency please notify the course tutor as soon as possible Your Last Name Daly Your ID Number oooooooo Fetch Marks CS 200 Fall 2013 Monday October 28 2013 21 The Web Forms and CGIs mac6001 Client Web Servers can t know in advance a e what forms data will be sent to them e what should be done with it ala So there s a convention the Common Gateway Interface fyi S a enang e for identifying the particular application A e to which form data should be sent for processing Lan NGGON Actually the CGI scheme is more general than this network connection a a web server can run any application and return its output jcbServer When the submit button Is pressed Server e the data is sent to a web server rr call e the web server forwards the data to a cgi a separate program University4 e the cgi processes the data amp i P3 SQL i Sybase returns a web page to the server Root ise Students html A a Wi Sa Apa e the server passes that response Implementation __ A R A Register html b gt a i LA on to the browser I _ s oo acne tne F Pi server app k Ng e 1 5 Plug INS A Marks CS 200 Fall 2013 22 The Web Monday October 28 2013 The CS 200 request marks form simplified lt HTML gt lt HEAD gt
37. ed to lt div class wrap id p1 gt when that happens they re merged if there s a conflict the more specific wins eg p1 over wrap because only one tag can have id p1 The Web Discussion The class attribute can be used by many tags which share its meaning The id attribute is supposed to uniquely identify a tag ie only be used once Both specify a style to use on their content Style sheets can come from e the web page author e the user who can often specify a style sheet in the browser s preferences e the browser ie builtin And this is their order of priority from high to low when a conflict arises for a particular attribute Browsers are finicky about CSS syntax e if your CSS seems to have no effect check for syntax errors use a CSS validator The detailed rules for resolving conflicts are considerably more complicated e see Section 8 1 9 of HTML amp XHTML The Definitive Guide 5 e for a fuller explanation e or Chapter 3 Structure and the Cascade in Cascading Style Sheets The Definitive Guide for details but you shouldn t need to Note there s a lot more to CSS than we ve had time to talk about CS 200 Fall 2013 40 The Web Monday October 28 2013 Safari s gt Show Inspector T ae os c MO Google much room to think Sometimes find myself wondering about the stuff we eat Take mushrooms for example They re kind of rubbery
38. ee here are property tags but they could equally well be named style tags Strip out all the formatting codes to get a text or ascii file CS 200 Fall 2013 Monday October 28 2013 SS HTML Read Me Ruler Layout Font Styles Table List Merge Book ark HTML This document provides a set of macrosto author your own HTML home pages m addition to the i bult HTML features in WP 3 5 WordPertect providesa sial TAr editing enronnernt along with a good set of tools for text manpulaion HTML has been and still is an obstacle and tune consuming process m producing a home page and WordPertect s HTML WYsl Wyo capabilities makes t easier and faster to get the job done To insili fhe AT ATE Macros included with His Kendime 1 Wirth ths Read Me document open choose PETENGE from the Edit meny then clic k the Librarian ron a Ghoose Marc ros fromthe Resource pop up menu at the top of the dialog box The list boxes will change to show macros The ha onthe left showsthe macros current by meta lled m yonr private library Library USA if you are using U S Enghsh software The ba box onthe night showethe macros contamed inthe document O Mark Tort 2 gt BookMark Install the HTML Macros gt Bold gt To InstallethegHTMHL LE Macrosgincludedt ae PIndenflwitho this OReadoMeodocument open Ochaosed Bold gt Preferencesf Bold tromo thes Bold Edi can Ft ii Cros tromi thes Resource pop Req luprnienuttatothe l
39. eep Alive User Agent Mozilla 4 06 Macintosh U PPC Nav Host 192 168 1 100 Accept image gif image x xbitmap image jpeg image pjpeg image png Accept Encoding gzip Accept Language en Accept Charset iso 8859 1 utf 8 Content type application x www form urlencoded CONTENT LENGTH 43 course cs200 amp surname Daly amp idnumber 00000000 The details of this difference are not important to us AOA Mark Report But you do need to know that e http jcbserver ReportMarks cgi O POST is necessary for large quantities of data Your CS 200 Marks are say gt 256 characters ID Number 00000000 POST ed form data does not appear in the URL Last Name Daly and therefore cannot be bookmarked Assignment Mark 98 CS 200 Fall 2013 25 The Web Monday October 28 2013 Laying Out a Form as a Table The Form Request Your Marks in CS 200 for Netscape To retrieve your marks to date in CS 200 please enter your last name case doesn t matter and student id in the boxes shown below Then click on the Search button ordinarily it shouldn t take more than thirty seconds or so for your marks to come back Please be patient I m only a Mac IIfx If you find a discrepancy please notify the course tutor as soon as possible Your Last Name Your ID Number Which O Assignments O Midterm O Final O Course Mark Fetch Marks h lt HTML gt lt The beginning of the web page the F
40. gin 2em border background top right bottom left 0 div menu a 4 Q 25em 1em 0 25em lem display 1 25em text align 120 margin padding div footer 4 0 margin Q 25em 5em 0 25em O 5em padding text align font style color 2em 09 10en 37 CSS for lt div ID p2 gt lt div gt 10em 2em right 5em 0 1 5em 0 25em 0 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 1lem 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html T body 4 background color font family div wrap background color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 The Style Sheet div p2 4 rgb 153 102 51 margin Myriad Pro sans serif O lt r g b lt 255 div menu float width rgb 251 233 198 padding rgb 122 74 26 margin 2em border background top right bottom left 0 div menu a 4 Q 25em 1em 0 25em lem display 1 25em text align 120 margin padding div footer 4 0 margin Q 25em 5em 0 25em O 5em padding text align font style color 2em 09 10en 37
41. ground color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 The Style Sheet div p2 4 rgb 153 102 51 margin Myriad Pro sans serif div menu float width rgb 251 233 198 padding rgb 122 74 26 margin 2em border background Q div menu a Q 25em 1em 25em lem display 1 25em text align 120 padding div footer 4 0 margin Q 25em 5em O 25em O 5em padding text align font style 2em 10em color 37 CSS for lt div ID p2 gt lt div gt 10em 2em right 5em 0 1 5em 0 25em 0 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 11em 0 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html T body 4 background color font family div wrap background color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 O lt r g b lt 255 The Style Sheet div p2 4 rgb 153 102 51 margin Myriad Pro sans serif div menu float width rgb 251 233 198 padding rgb 122 74 26 mar
42. ican wo By the mark twain mea author William Faulkner is credite ording to the mark on the Ta e ith writing that Twain was the first we de ae s t i ee oms Clemens N O S a eC re O nN S OWeVe tru erican writer and all of us vides a footn o Chapter 8 J since are his heirs Twain died in 1910 Pe rplexi ngi Les ne of Li feo n the CS 200 Fall 2013 15 Monday October 28 2013 Mark Report Top CS 200 Marks ep Tables for Layout Mark Twain Samuel Langhorne Clemens November 30 1835 April 21 1910 better known by his pen name Mark Twain was an American humorist satirist novelist writer and lecturer Although Twain was confounded by financial and business affairs his humor and wit were keen and he enjoyed immense public popularity At his peak he was probably the most popular American celebrity of his time In 1907 crowds at the Jamestown Exposition thronged just to get a glimpse of him He had dozens of famous friends including William Dean Howells Booker T Washington Nikola Tesla Helen Keller and Henry Huttleston Rogers Fellow American author William Faulkner is credited with writing that Twain was the first truly American writer and all of us since are his heirs Twain died in 1910 and is buried in Elmira New York BE xli llel Pen Names Clemens maintained that his primary pen name Mark Twain came from his years working on Mississippi riverboats where two
43. ient way of doing so Password protected demonstration solutions may be found in the Demo Solutions subfolder of the 200exams disk on cbServer Copy them to your personal subfolder of 200exams before running them Demo Course Grades When the Do It button on the Choose layout is clicked grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to A open the Data file copy its contents into the Grades worksheet and then close it _ Y CS 200 Fall 2013 35 The Web Monday October 28 2013 Another Example from Eric Meyer on CSS 0009 A Simple Eric Meyer CSS Example Dynamic Non Tabular Layout faje Le LE http sicbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html r Google much room to think Sometimes find myself wondering about the stuff we eat Take mushrooms for example They re kind of rubbery like squid which many of us won t eat because it s nasty They re shaped like little umbrellas but you probably wouldn t want one in your pina colada Most varieties are grown with liberal quantities of what like to term managerial output And they re fungal which our mothers always warned would kill us Heck some mushrooms actually will kill you So what is it about mushrooms that so many of us like suppose it s the taste which appeals to some of us understand that gras
44. l gt Boston MA lt LI gt lt UL gt lt P style font size 80 gt Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman lt P gt lt BODY gt lt HTML gt i Jen s Fake Home Page Yuck e Jen s Fake Home Page Recall that browsers ignore e multiple blanks Jen s o gt Home Page e carriage returns e blank lines Welcome to my Web page H Warning This is not my real home page It s just a little something made up for Use these to make your HTML more readable the occasion But just in case you re interested I ll tell you a bit about me e You ll lose marks in CS 200 if you don t l Places I ve Lived e You ll make your life difficult if you don t e Akron OH Hudson OH Sourth Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Done CS 200 Fall 2013 10 The Web Monday October 28 2013 lt HTML gt lt HEAD gt lt TITLE gt Jen s Fake Home Page lt TITLE gt lt HEAD gt lt BODY bgcolor FFFFFF gt lt IMG SRC star gif gt lt IMG SRC JenBanner gif gt lt IMG SRC star gif gt lt CENTER gt lt H2 gt Welcome to my Web page lt H2 gt lt CENTER gt lt IMG SRC Exclamation gif ALIGN left HSPACE 6 gt lt P gt lt S TRONG gt Warning lt STRONG gt This is not my lt EM gt real lt EM gt home page It s just a little something made
45. ll gt padding top 0 2em Use text align center ee eee ls padding bottom Q 2em to center text within lt cell gt 0 lt cell gt width 1 5em an element lt row gt lt row gt text align Center e lt cell gt 0 lt cell gt lt cell gt lt cell gt lt ceLlL gt X lt ceLL gt examp Le lt row gt display block lt xmlTable gt padding Q 5em NT Ka background color cyan This text is centered WITHIN margin left O Pa paa by the n gas 0 Man amp Lt example amp gt amp lt example amp gt block margin right kai Py eee fe ext align center lt doc gt CS 200 Fall 2013 47 The Web Monday October 28 2013 XML w o the lt xml stylesheet gt lt xml versiton 1 encoding UTF 8 gt Sao 000 ToyTableNoCSS xml S file Volumes TRANSFER 20TeachirO 91 Qr Gc lt xmLTabLe gt lt row gt lt ceLL gt X lt ceLlL gt lt ceLL gt lt ceLL gt lt cell gt 0 lt cell gt lt row gt lt row gt lt ceLL gt lt cell gt lt ceLL gt lt cell gt lt cell gt 0 lt cell gt lt row gt lt row gt lt ceLL gt 0 lt celLllL gt lt ceLL gt lt ceLlL gt lt ceLL gt X lt ceLlL gt lt row gt lt xmLTab Le gt py the lt example gt lt example gt block lt examp Le gt This text is centered WITHIN the space occupied by the amp Lt example amp gt amp Lt example amp gt block lt examp Le gt lt doc gt CS 200 Fall 2013 48 Monday October 28 20
46. m1 gt The charts in By 5 and By 10 can e lt DIV gt lt I gt math uwaterloo ca computer science Waterloo tF descriptions administrivia lectures resources project exams surveys marks sample Lab Exam Task B lt D LV C L AS S B L OC k i gt This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of cs home the leading wrong You are tO d u pl L cat e t h e be havi our 6 200home To use computers effectively itis important to select an appropriate tool for each task searah more often than not this involves using several tools to solve a problem passing data lt DIV gt from one tool to the next as you work This task is an example of such people The problem As a teacher you often want to look ata bar NI 1 chart like the example on the right showing the distribution 7 lt DIV C LAS S BL OC k gt of marks for a course how many people received marks i between 70 and 75 how many between 75 and 80 etc The rel ative weight of 1mpo rtant DL eces 6 The solution You have a FileMaker table containing the final grades for each student but databases aren t good at making graphs and you lt DIV gt often want to include such graphs in end of term reports for your department chair So you need to transfer data between FileMaker Excel and Microsoft Word as you work Because you and your colleagues do this often you want to work outa 6 convenient and effic
47. me the leading wrong 200 home To use computers effectively itis important to select an appropriate tool for each task more often than not this involves using several tools to solve a problem passing data from one tool to the next as you work This task is an example of such The problem As a teacher you often want to look at a bar chart like the example on the right showing the distribution of marks for a course how many people received marks between 0 and 75 how many between 75 and 80 etc The solution You have a FileMaker table containing the final grades for each student but databases aren t good at making graphs and you often want to include such graphs in end of term reports for your department chair So you need to transfer data between FileMaker Excel and Microsoft Word as you work Because you and your colleagues do this often you want to work outa convenient and efficient way of doing so Password protected demonstration solutions may be found in the Demo Solutions subfolder of the 200exams disk on jcbServer Copy them to your personal subfolder of 200exams before running them Demo Course Grades When the Do It button on the Choose layout is clicked grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to _ open the Data file copy its contents into the Grades worksheet
48. ont style italic gt ee a aaa a CED This page 1S best di spl ayed with e 3 T Tanna Sa ES project exams surveys marks lt DIV gt ae lt DIV CLASS BLock gt To use computers effectively it is important i introduction Preliminaries Taska TaskB Taskc Lab Exam Task A Sample Lab Exam Task B lt D IV gt This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of E cs home the leading wrong lt IMG SRC Tas kB 1smal g 1 f al 1 g n r 1 g ht gt E 200home f To use computers effectively itis important to select an appropriate tool for each task more often than not this involves using several tools to solve a problem passing data n a from one tool to the next as you work This task is an example of such lt DIV CLASS Block gt The problem As a teacher you often want to look ata bar chart like the example on the right showing the distribution lt SPAN clLass Shout gt The probl em lt SPAN gt of marks for a course how many people received marks between 70 and 75 how many between 75 and 80 etc AS a teache r 9 you often want 66 The solution You have a FileMaker table containing the DIV final grades for each student but databases aren t good at making graphs and you lt gt often want to include such graphs in end of term reports for your department chair So you need to transfer data between FileMaker Excel and Microsoft Word as you i wo
49. ources gy Scripts amp Profiles Databases Search Elements lt html gt Styles b lt head gt Computed Style lt body gt display block lt div class wrap id pl1 gt font size 32px lt hl gt much room to think lt hl gt font weight bold height 22px b lt p gt margin bottom Opx lt p gt margin left Opx lt div gt margin right Opx margin top Upu padding bottom amp px padding left 16px p lt div class wrap id p2 gt p lt div class wrap id footer gt lt body gt padding right 16px lt html gt padding top amp px width 742px hl h2 fcs200 ericMeyer ericMeyer css b margin Opx P pk padding 0 25em 0 5em 0 25em 0 5em O gt Q htm S body gt div pl wrap CS 200 Fall 2013 41 The Web Monday October 28 2013 Safari s gt Show Inspector T Universal Access Fal Never use font sizes smaller than _ Press Tab to highlight each item on a webpage Option Tab highlights each item Style sheet E _jcbDocs css Proxies Change Settings Ei Show Develop menu in menu bar CS 200 Fall 2013 41 The Web Monday October 28 2013 Safari s gt Show Inspector T Universal Access Never use font sizes smaller than Press Tab to highlight each item on a webpage Option Tab highlights each item Style sheet T _jcbDocs css Proxies Change Settings E Open Page With User Agen
50. r paradigm e putting HTML in context e relative vs absolute URLs e tables as a layout tool e forms e styles in HTML esp cascading style sheets Today s lecture assumes an elementary understanding of HTML tags amp attributes eg from CS 100 e if you lack it see Learning Web Design or www htmlCodeTutorial com CS 200 Fall 2013 3 The Web Monday October 28 2013 Road Map New applications for this week e PageSpinner a Mac only HTML editor e Editix a cross platform XML editor e StyleMaster a cross platform CSS editor This week s lecture builds on the preceding weeks material e tables e styles e graphics CS 200 Fall 2013 4 Monday October 28 2013 The Web The Read n Recall Pearl Dialogs and Menus e Menus e Dialogs e Toolbars amp Palettes Documentation e The user manual e Online help e Online tutorials CS 200 Fall 2013 5 The Web Monday October 28 2013 Client Server File Sharing EG the AppleShare file Server on Oscar your lab Mac is the client slower cheaper smaller disks oscar is the server machine faster more expensive bigger disks AppleShare is the server application running on the server machine share points are folders on the server that are made available over the network network disks mounting a share point use the Finder s Go gt Connect to Server menu item creates a network disk on your client machine an icon appe
51. red for XHTM L XML amp CSS entire blank linet and list items are ey by too little w white Space typically lt HEAD gt lt HEAD gt ane hevond e lt HEAD gt does not mean header lf you view this page in any of the common browsers you will find that they share two major deficiencies e lt HEAD gt lt HEAD gt contain information about the page e eg lt meta name description value a paragraph gt paragraphs are separated by too much white space typically an entire blank line e eg lt meta name author value Bugs Bunny gt e and list items are separated by too little white space e eg lt title gt lt title gt Shows up in Most browsers title bar If you view this page in any of the common browsers you will find that browsers use to label bookmarks they share two major deficiencies index engines give words in extra weight e paragraphs are separated by too much white space typically an entire blank line TT s and list items are separated by too little white space typically lt BODY gt lt BODY gt contain info displayed in the page none beyond the current line to line leading CS 200 Fall 2013 12 The Web Monday October 28 2013 More Discussion Points Browsers also ignore tags they don t recognize e eg tags you misspell e this is actually a feature so newly invented tags don t screw up old browsers so E specinc tags don t screw up Netscape amp vice versa etc
52. rgin black Myriad Pro sans serif div menu float width rgb 251 233 198 padding rgb 122 74 26 margin 2em border background Q div menu a Q 25em 1em 25em lem display 1 25em text align 120 padding div footer 4 0 margin Q 25em 5em 25em O 5em padding text align font style 2em 10em color 37 10em 2em right 5em 0 1 5em 0 25em 0 5em 3px solid rgb 50 50 175 white block center Q 2em O0 5em 2em O 5em 1lem 2em Q 2em 0 O 5em 0 center italic rgb 128 128 128 a A Simple Eric Meyer ample Dynamic Non Tabular Layout gt http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html ewriders com amp www ericmeyero T body 4 background color font family div wrap background color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 The Style Sheet div p2 rgb 153 102 51 margin black Myriad Pro sans serif div menu float width rgb 251 233 198 padding rgb 122 74 26 margin 2em border background Q div menu a Q 25em 1em 25em lem display 1 25em text align 120 padding div footer 4 0 margin Q 25em 5em O 25em O 5em padding text align font style 2em 10en color 37 10em 2em
53. rk Because you and your colleagues do this often you want to work out a lt DIV CLASS BLock gt convenient and efficient way of doing so d 1 Password protected demonstration solutions may be found in the Demo Solutions lt S PAN cl ass S hou t gt Th e sol ut LON lt S PAN gt subfolder of the 200exams disk on jcbServer Copy them to your personal subfolder 1 f 200exams before running them You have a FileMaker table e Demo Course Grades When the Do It button on the Choose layout is clicked lt DIV gt grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to open the Data file copy its contents into the Grades worksheet and then close it CS 200 Fall 2013 34 The Web Monday October 28 2013 TaskB html the body part of the web page 2 lt I gt lt DIV CLASS BLock gt Password protected demonstration solutions lt DIV gt lt DIV CLASS Itemi gt lt SPAN class Shout gt Demo Course Grades lt SPAN gt When the Do It button on the Choose Layout e lt DIV gt lt DIV CLASS Iteml gt lt SPAN class Shout gt Demo Make Histograms lt SPAN gt l eos Lab Exam Task A Pees the Get Data button in any e lt gt JL a ei up icbserver uwaterloo ca cs200 SampleExams LabExam Taski A Qr Google W lt gt lt DIV CLASS Ite
54. rks to come back Please be patient Tm only a Mac Hix lf you find a discrepency please notify the course tutor as soon as possible Your Last Name Daly Your ID Number oopooopo Fetch Marks The Web The CS 200 request marks form simplified T lt HTML gt lt HEAD gt lt TITLE gt Request Your Marks in CS 200 lt TITLE gt lt HEAD gt lt BODY gt lt P gt To retrieve your marks to date in CS 200 please enter your last name as On cl n NG A ere are case doesn t matter and student id in the boxes shown below lt P gt Ae iina To retneve your marks to date in CS 204 please enter your last name case doesn t matter and student id in the boxes shown below lt P gt Then click on the lt STRONG gt Fetch Marks lt STRONG gt button ordinarily It Then click on the Search button ordinarily it shouldn t take more than thirty seconds or so for your marks to come back Please be patient Tm only a Mac Hix shouldn t take more than thirty seconds or so for your marks to come back Please be patient I m only a Mac IIfx lt P gt lf you find a discrepency please notify the course tutor as soon as possible Your Last Name Daly lt P gt lf you find a discrepancy please notify the course tutor as soon as Somr 4 Number 00000000 possible lt P gt Fetch Marks lt FORM ACTION http ReportMarks cgi METHOD GET gt lt P gt lt STRONG gt Your Last Name lt STRONG g
55. rver why the path to the cgi had better not contain a question mark CS 200 Fall 2013 24 The Web Monday October 28 2013 What Gets Sent to the Server GET T GET ReportMarks cgi course cs200 amp surname Daly amp idnumber 00000000 HTTP 1 0 Connection Keep Alive User Agent Mozilla 4 06 Macintosh U PPC Nav Host jcbServer cs uwaterloo ca Accept image gif image x xbitmap image jpeg image pjpeg image png Accept Encoding gzip Accept Language en Accept Charset iso 8859 1 utf 8 The rules for this stuff are part of the What comes back So Mark Report Fs g ter ReportMarks cgi course cs 00 amp surname Da v amp idnumber 00000000 Q http protocol Your CS 200 Marks are ID Number 00000000 Last Name Daly Assignment Mark 98 ReportMarks cgi locates the program a cgi to which the server forwards the forms data Notice that the URL from which a web page came always appears in the location bar that the forms data is encoded in the URL how that URL appears in what s sent to the server why the path to the cgi had better not contain a question mark CS 200 Fall 2013 24 The Web Monday October 28 2013 POST Actions The request marks form could have said lt FORM ACTION http ReportMarks cgi METHOD POST gt In which case the forms data would be transferred a bit differently POST ReportMarks cgi HTTP 1 0 Connection K
56. shoppers can be very tasty too so who am to judge People will eat all manner of weird stuff But rungus don t know Maybe the morel is that those of us who eat mushrooms aren t really us if you see what mean It could be that the mushroom eaters of the world are really some bizarre fungus based aliens who are secretly planning to take over the world Just like on The X Files lf that s the case though wonder when I ll get my instructions from the mothership a fun guy Good evening my name is Rootsy and I ll be your host for this evening It s been stories said that should just stop with this whole Web thing mostly by Grandma but she still thinks computers are run by evil pixies so try to keep the source in mind accept that some of the humor on this page may be in spore taste but we re all adults here and it art made me laugh to write this stuff down so maybe you ll like it as well poems Adapted from Eric Meyer On CSS by Eric Meyer 2002 See www newriders com amp www ericmeyeroncss com http jcbserver uwaterloo ca cs200 ericMeyer ericMeyer html CS 200 Fall 2013 Monday October 28 2013 36 The Web T body 4 background color font family div wrap background color margin p i margin padding text indent line height h1 h2 margin padding div p1 4 margin CS 200 Fall 2013 Monday October 28 2013 The Style Sheet div p2 rgb 153 102 51 ma
57. t lt INPUT TYPE text NAME surname SIZE 33 gt lt P gt lt P gt lt STRONG gt Your ID Number lt STRONG gt lt INPUT TYPE text NAME idnumber SIZE 33 gt lt P gt lt P gt lt INPUT TYPE submit VALUE Fetch Marks gt lt P gt lt P gt lt INPUT TYPE hidden NAME course VALUE cs200 gt lt P gt lt FORM gt t t t Note the use of a hidden parameter that the user never sees so forms for lt BODY gt different courses can use the same cgi lt HTML gt CS 200 Fall 2013 23 The Web Monday October 28 2013 What Gets Sent to the Server GET T GET ReportMarks cgi course cs200 amp surname Daly amp idnumber 00000000 HTTP 1 0 Connection Keep Alive User Agent Mozilla 4 06 Macintosh U PPC Nav Host jcbServer cs uwaterloo ca Accept image gif image x xbitmap image jpeg image pjpeg image png Accept Encoding gzip Accept Language en Accept Charset iso 8859 1 utf 8 What comes back So Mark Report Fs g ter ReportMarks cgi course cs 00 amp surname Da v amp idnumber 00000000 Q Your CS 200 Marks are ID Number 00000000 Last Name Daly Assignment Mark 98 ReportMarks cgi locates the program a cgi to which the server forwards the forms data Notice that the URL from which a web page came always appears in the location bar that the forms data is encoded in the URL how that URL appears in what s sent to the se
58. t BAGE Window Show Web Inspector Show Error Console Show Snippet Editor Start Debugging JavaScript Start Profiling JavaScript XHEP Disable Caches Disable Images Disable Styles Disable JavaScript Disable Runaway JavaScript Timer Disable Site specific Hacks CS 200 Fall 2013 41 The Web Monday October 28 2013 For More Optional Information on CSS Western Civilization s Complete CSS Guide at http www westciv com style_master academy css_tutorial introduction css_intro atm Properties Introduction the Complete CSS Guide s section on CSS attributes at http www westciv com style_master academy css_tutorial properties index htm HTML amp XHTML The Definitive Guide 5 e by Musciano amp Kennedy Chapter 9 Cascading Style Sheets on reserve in the library an earlier edition without XHTML in the title or at http safari ora com gt MY BOOKSHELF Book 26 from a University computer Chapter 8 Cascading Style Sheets amp the appendix Cascading Style Sheet Properties Quick Reference the 6th edition was published in October of 2006 Cascading Style Sheets The Definitive Guide by Eric Meyer 3rd edition 2006 O Reilly amp Associates 0 596 52733 0 or the 2 e at http www safari ora com gt MY BOOKSHELF Book 9 from a University computer Typetester a neat web page w Javascript CSS for comparing various fonts side by side in your browser typetester marat
59. t CS 200 Fall 2013 14 The Web Monday October 28 2013 HTML Table Tags lt table gt lt table gt surround the entire table lt tr gt lt tr gt surround a table row lt td gt lt td gt surround a table cell definition By default a table and its cells are as wide as they need to be For details see HTML The Definitive Guide library reserve PageSpinner Help Tables as a deprecated all purpose layout tool in HTML Hmm Are tables a useful layout tool in word processors HTML Tables can be nested Samuel Langhorne Clem November 30 1835 pai wan 1910 better known by his pen name Mark ain was an erican humorist satirist novelist writer and lecturer and HTML cells can be merged h 1 mM mM Althou TE in was confounded by orizon a CO S an nN financial and bus ered Pen Names humor and wit were a and he n se public populari se Clemens maintained that his sapaa is peak he r pen name Ma Tain came fro a nN d O opular American ce wah 0 time his years workin issippi n crowds at the estown riverboats where two ee ce oms 12 feet x osition ti ronged just to get a ae oximat ciy 3 meters or safe ter was measured on n the undin e ni ni ee s inclu ing i ie man s cry was mar Pean owells Booker T Washington aio or more ei i by the mark ve rtica y rOWS Da n n ikola Tesla Helen Keller and Henr n twain is an archaic sad uttleston Rogers Fello er
60. t toptofethe lt dialogbox i 9 The Web A Toy Web Page Jen s Fake Home Page Jen s Fake Home Page Jen s o gt Home Page Welcome to my Web page Warning This is not my real home page It s just a little something I made up for the occasion But just in case you re interested Il tell you a bit about me Places I ve Lived Akron OH Hudson OH Sourth Bend IN Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Done CS 200 Fall 2013 10 The Web Monday October 28 2013 A Toy Web Page The HTML for this web page lt HITML gt lt HEAD gt lt TITLE gt Jen s Fake Home Page lt TITLE gt lt HEAD gt lt BODY bgcolor FFFFFF gt lt IMG SRC star gif gt lt IMG oRC JenBanner gif gt lt IMG SRC star gif gt lt CENTER gt lt H2 gt Welcome to my Web page lt H2 gt lt CENTER gt lt IMG SRC Exclamation gif ALIGN left HSPACE 6 gt lt P gt lt STRONG gt Warning lt STRONG gt This is not my lt EM gt real lt EM gt home page It s just a little something made up for the occasion But just in case you re interested I ll tell you a bit about me lt P gt lt HR gt lt H2 gt Places I ve Lived lt H2 gt lt UL gt lt LI gt Akron OH lt LI gt lt Ll gt Hudson OH lt LI gt lt Ll gt Sourth Bend IN lt LI gt lt LIl gt Boston MA lt LI gt lt UL gt lt P style font size 80 gt Adapted from Designing
61. t Char lt td gt _ eh ee lt td gt Abbr lt td gt lt td gt Meaning lt td gt lt tr gt CS 200 Fall 2013 56 Monday October 28 2013 lt tr gt lt td gt 32 lt td gt lt td gt 0010 0000 lt td gt lt td gt lt td gt lt td gt lt td gt lt td gt space lt td gt lt tr gt lt tr gt lt td gt 33 lt td gt lt td gt 001 0001 lt td gt lt td gt lt td gt lt td gt lt td gt lt td gt lt td gt lt tr gt lt tr gt lt td gt 34 lt td gt lt td gt 0010 0010 lt td gt lt td gt amp quot lt td gt lt td gt lt td gt lt td gt lt td gt lt tr gt lt tr gt lt td gt 35 lt td gt lt td gt 0010 0011 lt td gt lt td gt lt td gt lt td gt lt td gt lt td gt lt td gt lt tr gt eee lt table gt lt body gt lt html gt The Web
62. ty tags but they could equally well be named style tags Strip out all the formatting codes to get a text or ascii file CS 200 Fall 2013 Monday October 28 2013 SS HTML Read Me Ruler Layout Font Styles Table List Merge Book ark HTML This document provides a set of rat rasio author your own HTML home pages m addition to the i bult HTML features in WP 3 5 WordPertect providesa sata TAr editing envronnernt along with a good set of tools for text manpulaion HTML has been and still is an obstacle and tune consuming process m producing a home page and WordPertect s HTML WYsl Wyo capabilities makes t easier and fasterto get the job done To insili fhe AT ATS Macros included with His Renee 1 Withtlis Read Mae document open choose Preferences irom the Edit menu then c lek the Librarian ron a Ghoose Macros fromthe Resource pop up menu at the top of the dialog box The list boxes will change to show macros The ha onthe let showsthe macros current by meta lled m yonr private library Library USA if you are using U S Enghsh software The ba box onthe night showethe macros contamed inthe document O Bold gt TooinstallotheoHTMLOMacrosGincludedo EJ o IMIndent Withthis ReadoMeodocumentGopen choose Bold Preferences i Bold from lt the Bold 2Edi Cros tromi thes Resource pop Req luprnienuttatothe lt toptofethe lt dialogbox i 9 The Web Formatting Tags in WordPerfect What you s
63. ument root folder is at Library WebServer Documents when the web server is started Applications J Screen Savers T C l Executables a Li cs125 j Current ep i A ScriptingAdditions apache_pb gif ci Developer j T Scripts 3 index htmi ca T Documents j T Spotlight i 3 index html cn E Library T Startupltems 3 index html cz _ System i T User Pictures 3 indek htmi de ci User Guide formation gt T WebObjects 3 index html dk J Users Webserver index html ee n D Widgets l j l index html el CS 200 Fall 2013 7 The Web Monday October 28 2013 Data Returned By Web Servers The files returned can be e web pages e pictures other stuff A web page is a TEXT file containing e text to be displayed text elements e tags eg lt html gt and lt p gt that control presentation of the text they e really styles links containing URLS eg lt a href gt and lt img src gt to other web pages to graphics for display on the page to sounds to be played when the page is viewed etc add post install plugins to handle new file types Library Internet Plug Ins or Library Internet Plug Ins on Macs e URL Uniform Resource Locator eg jcbServer cs uwaterloo ca cs200 index html aka URI Uniform Resource Indicator yuck CS 200 Fall 2013 8 Monday October 28 2013 The Web Formatting Tags in WordPerfect What you see here are proper
64. vaScript CS 200 Fall 2013 50 The Web Monday October 28 2013 CSS JavaScript To Switch Style Sheets Example switching style sheets dynamically e local e remote a0 0 Jen s Fake Home Page A http jcbserver cs uwaterloo ca cs2 Or Google Jen s Home Page Welcome to my Web page Warning This is not my rea home page It s just a little something I made up for the occasion But just in case you re interested I ll tell you a bit about me Places I ve Lived e Akron OH e Hudson OH South Bend IN e Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman And just for fun we choose a random color for the first paragraph Choose Style Sheet No Style Def s Style Def s 1 Style Def s 2 000 Jen s Fake Home Page hetp ficbserver cs uwaterloo ca cs2 Q Google Jen s Home Page Welcome to my Web page H Warning This is not my real home page It s just a little something I made up for the occasion But just in case you re interested I ll tell you a bit about me Places I ve Lived Akron OH Hudson OH South Bend IN Boston MA Adapted from Designing for the Web Getting Started ina New Medium by Jennifer Niederst and Edie Freedman And just for fun we choose a random color for the first paragraph Choose Style Sheet O No Style Def s Style Def s 1 Style Def s 2 S http 127 0 0 1 cs20
65. want to work outa convenient and efficient way of doing so Password protected demonstration solutions may be found in the Demo Solutions subfolder of the 200exams disk on jcbServer Copy them to your personal subfolder of 200exams before running them Demo Course Grades When the Do It button on the Choose layout is clicked grades for the course currently selected by the Which Course popup are written into a file called Data in the same folder Demo Make Histograms Click the Get Data button in any of the worksheets to open the Data file copy its contents into the Grades worksheet and then close it search people KIC CS 200 Fall 2013 32 The Web Monday October 28 2013 LabExam css Note the period that begins each style name e such styles can be used in any tag if they make sense lt DIV gt is effectively a replacement for lt P gt e with no default properties e some properties of built in tags like lt P gt can t be over ridden still e lt div gt and lt p gt are examples of block level tags or elements ie they cause a line break lt SPAN gt is an inline level tag aka an inline element e with no built in properties e does not cause a line break e lt strong gt lt em gt lt img gt and lt a gt are other examples STYLE is used to set CSS attributes for a particular tag only e eg lt div style color green gt blah blah blah lt
66. z com XyleScope a neat tool for dissecting the CSS in pages you encounter on the web 20 Mac only www culturedCode com xyle The Lorem ipsum generator at http www lipsum com CS 200 Fall 2013 42 The Web Monday October 28 2013 a0O0 Typetester Compare fonts for the screen I ajre http typetester marat7 com sample text about Lorem ipsum dolor sit amet consectetuer adipiscing elit Morbi lacus felis euismod at pulvinar Sit amet dapibus eu eros Etiam tellus Nam vestibulum porttitor urna Phasellus aliquet pretium quam Proin pharetra wisi nec tristique accumsan magna sapien pulvinar purus vel hendrerit ipsum tellus at ante recent Get C55 for lst 2nd Ghose typeface Foon thelist Andale Mono Ghose typeface Foon thelist Comic Sans MS OF SEGI yaur oum OF speciky yaur oum Comic Sans MS 7 Arno Pro 7 Loess T Te remem m ttr ang an COMM SeT Tings column settings size leading Tracking sem lem G alignment word space decoration center normal 7 hone gt background apply to Saluran aki size leading Tracking alignment word space decoration left normal none background gpply to Saluran a EES ES ad GF 2d48ff H GF srira JA Lorem ipsum dolor sit amet consectetuer adipiscing elit Morbi lacus felis euismod at pulvinar sit amet dapibus eu eros Etiam

as 1-up pdf - School of Computer Science Student WWW Server

Contents

Download Pdf Manuals

Related Search

Related Contents