as 1-up pdf - School of Computer Science Student WWW Server
Contents
1. http jcbserver cs uwaterloo ca 5 Jen s gt Home Page Welcome to my Web page Warning This is not my real home page It s just a little something I made LP 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 Choose A Font O Arial Palatino OQ Comic Sans MS 51 S http 127 0 0 1 cs200 switchingFontsWithJavascript JensHomePage html http jcbserver cs uwaterloo ca cs200 switchingFontsWithJavascript JensHomePage html Jen s Fake Home Page L gt Le http jcbserver cs uwaterloo ca EN Q Google Jen s NY 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 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 O Arial O 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 Arial sans serif gt eee Notice tha2. line height 15px Note the period that begins each style name margin top 7px e such styles can be used in any tag if they make sense font family Palatino serif line height 15px lt DIV gt is effectively a replacement for lt P gt margin top 5px margin left 25px e with no default properties e some properties of built in tags like lt P gt can t be over ridden still ns a serif e lt div gt and lt p gt are examples of block level tags or elements ee i ie they cause a line break font family Palatino serif font size 10pt lt SPAN gt is an inline level tag aka an inline element pa ns i eEmphasize font style italic e with no built in properties e does not cause a line break eShout e lt strong gt lt em gt lt img gt and lt a gt are other examples font weight bold 600 Lab Exam Task A 4 gt M amp M M MO nup icbserver uwaterloo ca cs200 SampleExams LabExam Taskl Q Goc STYLE is used to set CSS attributes for a particular tag only e eg lt div style color green gt blah blah blah lt div gt e eg lt p style color green gt good stuff lt p gt e ntoducien prenminaries TaskA Task tascc Sample Lab Exam Task B This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of e eg lt li style color green gt clear desk lt li gt stone PRET home To use comp
3. 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 e 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 bugs CS 200 Fall 2014 47 The Web XML lt xml version 1 0 encoding UTF 8 gt lt xml stylesheet type text css href ToyTable css gt lt doc gt ToyTable xml lt xmlTable gt lt row gt lt cell gt X lt cell gt lt cell gt lt cell gt lt cell gt O lt cell gt lt row gt lt row gt lt cell gt lt cell gt lt cell gt lt cell gt lt cell gt O lt cell gt lt row gt lt row gt lt cell gt O lt cell gt lt cell gt lt cell gt lt cell gt X lt cell gt lt row gt lt xmlTable gt lt example gt This text is centered WITHIN the space occupied by the amp ltjexample amp gt amp lt example amp gt block lt example gt lt doc gt CS 200 Fall 2014 48 The W
4. taste but we re all adults here well Vv v Show Web Inspector Show Error Console Show Snippet Editor Start Debugging JavaScript Start Profiling JavaScript XO dP Disable Caches Disable Images Disable Styles Disable JavaScript Disable Runaway JavaScript Timer Disable Site specific Hacks html gt body div pl wra CS 200 Fall 2014 43 The Web 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 html Properties Introduction the Complete CSS Guide s section on CSS attributes at http www westciv com style_master academy css_tutorial properties index html 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 fo
5. 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 CS 200 Fall 2014 53 paragraph is chosen randomly 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 An Illustration of aa Fonts amp Menus An Illustration of Dynamic Fonts amp Menus Larger Title Smaller Title UofW Other sites e Daring Fireball e Mac Geekery e Ars Technica CS 200 Fall 2014 The Web 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 lt l gt lt style gt CS 200 Fall 2014 body font family menuOne display menuTwo display title font size font weight margin bottom text align content position left top background color padding sans serif none none 15pt bold 15pt center absolute 2 5in 0 5in FFFF00 25px 55 S The Web lt body gt The Content for this Exa
6. Gaulish tribes to the north lt a href fragments bio biography html gt John C Beatty lt A gt fragments bio biography html 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 2014 The Web Relative vs Absolute Paths 1 The web root folder 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 ist Year A 2nd Year CS200 html hBook html hPage html CS120 htmI einen CS 200 Fall 2014 20 The Web Relative vs Absolute Paths 2 A link in CS100 html to CS200 html could be written as WH ist Year A 2nd Year e lt a href 2nd 20Year cs200 cs200 html gt CS200 lt a gt 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 Oras e lt ahref 2nd 20Year cs200 cs200 html gt CS200 lt a gt CS200 html hBook html hPage html CS100 html e Notetheinitial CS120 html e This is a relative path means go up one level to the parent folder Means go up two levels etc note for security reasons the web server application will preve
7. by Eric Meyer 2002 See www newriders com amp www ericmeyeroncss com http jcbserver uwaterloo ca cs200 ericMeyer ericMeyer html CS 200 Fall 2014 38 The Web T body background color font family div wrap background color margin p margin padding text indent line height h1 h2 margin padding div p1 margin CS 200 Fall 2014 O46 0 02 209 div p2 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 0 div menu a 25em 1em Q 25em 1em display 1 25em text align 120 gt a padding sE 0 margin 0 25em 5em 25em 5em padding text align font style 2em 10em color The style Sheet ess tor dv rypa 10em 2em right Sem top right bottom left 0 Q 1 5em 25em Q 5em 3px solid rgb 50 50 175 white block center Q 2em O 5em O 2em O 5em 11em 2em Q 2em Q 5em center italic rgb 128 128 128 Gi Other Selectors What we ve seen pie sets attributes for all lt p gt tags p name sets attributes for all lt p class name 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 t
8. items are separated by too little white space lly none beyond the current line to line e eg lt meta name author value Bugs Bunny gt e eg lt title gt lt title gt shows up in most browsers title bar ae p 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 ee entire blank line a e 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 2014 14 The Web 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 IE specific tags don t screw up Netscape amp vice versa etc 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 DOCTYPE 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 2014 15 The Web A Simpl
9. 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 ata bar chart like the example on the right showing the distribution of marks for a course how many people received marks between 70 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 CS 200 Fall 2014 36 open the Data file copy its contents into the Grades worksheet and then close it 7 A4 The Web TaskB html the body part of the web page 2 lt I gt lt DIV CLASS Block gt Password pro
10. 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 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 http en wikipedia org wiki Mark_twain The Web URLs Uniform Resource Locators CS 200 Home Page a le http jchserver cs uwaterloo ca cs200 index shtml math uwaterloo ca computer Science Waterloo descriptions administrivia lectures resources project exams surveys marks CS 200 CS 200 Home Page Concepts for Advanced Computer Usage Use the orange menu bar at the top ofthis page to locate information UW Angel CS 200 message board and online component can be found here no menu version cs home 200 home seaggh people Reviews of Backup Software for Windows PC Magazine has a fairly recent August 2005 article on backup practices and software for Windows including a review of Retrospect 7 for Windows pen http jcbserver cs uwaterloo ca cs200 search search shtml in a new window behind the current window For lt a href
11. 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 ata bar chart like the example on the right showing the distribution of marks for a course how many people received marks between 70 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 out a 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 pen the Data file copy its contents into the Grades worksheet and then close it _ 34 The Web LabExam css font family Palatino serif
12. 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 2014 3 The Web 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 2014 4 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 2014 5 The Web Assumptions You have an understanding of e Tables e Styles e Indirection CS 200 Fall 2014 6 The Web Things to Think About e How does the manipulation of data objects differ from other applications e Is this there more than one way to manipulate a data object CS 200 Fall 2014 7 The Web 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 mo
13. 4 e080 Jen s Fake Home Page Q Jen s Fake Home Page Jen s 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 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 12 The Web 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 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 L l gt Hudson OH lt LI gt lt L gt Sourth Bend IN lt LI gt lt 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
14. CS 200 Lecture 07 The Web HTML CGls amp CSS The Web 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 com 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 html 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 2014 2 The Web Administrivia Please read and high light before lab e Assignment 5 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 server paradigm e putting HTML in context e relative vs absolute URLs e tables as a layout
15. CS 200 please enter your last name case doesn t matter and student id in the boxes shown below e check boxes Then click on the Search button ordinarily it shouldn t take more than thirty seconds e radio buttons or so for your marks to come back Please be patient I m only a Mac IIfx 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 ooococpo Fetch Marks CS 200 Fall 2014 23 The Web Forms and CGIs Web Servers can t know in advance e what forms data will be sent to them what should be done with it So there s a convention the Common Gateway Interface e for identifying the particular application e to which form data should be sent for processing Actually the CGI scheme is more general than this a web server can run any application and return its output When the submit button is pressed e the data is sent to a web server e the web server forwards the data to a cgi a separate program e the cgi processes the data amp returns a web page to the server e the server passes that response on to the browser Plug ins CS 200 Fall 2014 mac6001 Client CELLES Et a a pie ME ig A Lab Macintosh 4s network connection a jcbServer Server enue eer ey See oe a ign ALL E ReportMarks cgi lt _ gt University4 DS Syb
16. CS 200 Fall 2014 13 The HTML for our Toy Web Page Readably Formatted The Web Discussion Points 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 g y e paragraphs are separated by too much white space typically an i entire blank line whose definitions are supplied by the browser e and list items are separated by too little white space typically none beyond the current line to line leading same web page different browser 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 e be prepared for XHTML XML amp CSS entire blank line e and list items are separated by too little w vhite space typically lt HEAD gt lt HEAD gt Omniweb e lt HEAD gt does not mean header If you view this page in any of the common browsers you e lt HEAD gt lt HEAD gt contain information about the page Will find that they share two major deficiencies eg lt meta name description value a paragraph gt e paragraphs are separated by too much white space typically an entire blank line e and list
17. Character Codes lt span gt lt br gt lt span style font size 14pt font weight normal gt Chttp jcbServer cs uwaterLoo ca cs125 asciiCodes2 htm1 lt span gt jicodes fancySelectors html lt td gt ascitCodes fancydSelectors ntm lt tr gt ASCII Character Codes http jcbServer cs uwaterloo ca cs125 asciiCodes2 html Decimal Value Bits Char Abbr Meaning lt tr gt 0010 0000 space 0010 0001 lt td gt Decimal Value lt td gt 0010 0010 lt td gt lt a name table gt Bits lt a gt lt td gt 0010 0100 lt td gt Char lt td gt 0010 0101 lt td gt Abbr lt td gt lt td gt Meaning lt td gt lt tr gt CS 200 Fall 2014 58 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 0010 001 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 QQ10 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 011 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
18. N 2 gt lt STRONG gt Whi ch 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 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 2014 29 The Web 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 2014 30 The Web 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 2014 31 The Web Cascading Style Sheets Style defini
19. ToyTableNoCSS xml file Volumes TRANSFER 20Teachit B Q Google J lt xmlTable gt lt row gt X O O O X This text is centered WITHIN the space occupied lt cell gt X lt cell gt by the lt example gt lt example gt block lt cell gt lt cell gt lt cell gt O lt cell gt lt row gt lt row gt lt cell gt lt cell gt lt cell gt lt cell gt lt cell gt O lt cell gt lt row gt lt row gt lt cell gt O lt cell gt lt cell gt lt cell gt lt cell gt X lt cell gt lt row gt lt xmlTable gt lt example gt This text is centered WITHIN the space occupied by the amp ltjexample amp gt amp lt example amp gt block lt example gt lt doc gt CS 200 Fall 2014 50 The Web CSS JavaScript To Change The Default Font Example changing the font locally e local e remote Jen s Fake Home Page L gt Le http jcbserver cs uwaterloo ca 2 Jen s 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 e Akron OH e Hudson OH e South Bend IN e Boston MA Adapted from Designing for the Web Getting Started in a New Medium by Jennifer Niederst and Edie Freedman Choose A Font Arial O Palatino O Comic Sans MS CS 200 Fall 2014 Jen s Fake Home Page aj
20. amed simple css SPAN COLOR green P TEXT ALIGN center A FONT WEIGHT bold B P P FONT STYLE italic e An example html file that uses simple css lt HTML gt lt HEAD gt lt LINK REL stylesheet TYPE text css HREF simple css 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 Notice that all four paragraphs are centered and in Myriad Pro e 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 e Inner elements inherit properties from outer elements containing them when that makes sense CS 200 Fall 2014 33 The Web CS 200 Fall 2014 A Larger Example Task B from the Winter 98 Lab Exam T pare gy B aed amm cbserver uwaterloo ca cs200 SampleExams LabExam Taski Pa Waterloo 3 CS 200 cs home 200 home search people 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 the leading wrong To use computers effectively it is important
21. ase a a Students na DE Re gister html FN S a a the File web server app Maker LR i A Marks 24 The Web Root html Assignments The CS 200 request marks form simplified 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 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 Ilfx 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 2014 25 ane Request Your Marks in CS 200 h e hup icbserver cs200 200request htmi Q To retrieve your marks to date in CS 200 please enter your la
22. ayout tool in word processors HTML Tables can be nested and HTML cells can be merged horizontally colspan n and or vertically rowspan n No L shaped regions however so CS 200 Fall 2014 17 ID Number Final Grade 94010203 81 98102030 75 96000123 67 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 limpse of him He had dozens of amous 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 x BE x Pen Names Clemens maintained that his primary pen name Mark Twain came from his years working on Mississippi riverboats where two fathoms d2 feet approximately 3 7 meters or safe water was measured on the sounding line The
23. bbery 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 pi a colada Most varieties are grown with liberal quantities of what I 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 fungus 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 l Il 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 z PEPES zRo poems thinks computers are run by evil pixies so I try to keep the source in mind I 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 Adapted from Eric Meyer On CSS
24. 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 86 Lab Exam Task A lt DIV CLASS Block style font style italic gt This page is best displayed with e lt DIV gt lt DIV CLASS Block gt To use computers effectively it is important lt DIV gt lt IMG SRC TaskB1small gif align right gt lt DIV CLASS Block gt lt SPAN class Shout gt The problem lt SPAN gt As a teacher you often want e lt DIV gt lt DIV CLASS Block gt lt SPAN class Shout gt The solution lt SPAN gt You have a FileMaker table ee e lt DIV gt cs home 200 home search people e http jcbserver uwaterloo ca cs200 SampleExams LabExam TaskI Qr Google math uwaterloo ca computer science descriptions administrivia lectures resources project exams surveys marks Introduction Preliminaries TaskA Task B Sample Lab Exam Task B This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of the leading wrong 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
25. bution of marks for a course how many people received marks between 70 and 75 how many between 75 and 80 etc an NESENSES 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 out a 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 CS 200 Fall 2014 37 open the Data file copy its contents into the Grades worksheet and then close it The Web Another Example from Eric Meyer on CSS A Simple Eric Meyer CSS Example Dynamic Non Tabular Layout http jcbserver cs uwaterloo ca cs200 ericMeyer ericMeyer html much room to think Sometimes find myself wondering about the stuff we eat Take mushrooms for example They re kind of ru
26. cript gt var currentFontSize 15 function changeFontSize delta var titleElement document getELementByIdC title style currentFontSize currentFontSize delta titleElement fontSize currentFontSize pt i function toggleMenuC menuClicked processOneMenuC menuOne menuClicked processOneMenuC menuTwo menuClicked function processOneMenu menuToCheck menuClicked var menuClickedStyles document getElementById menuClicked style var menuToCheckStyles document getElementById menuToCheck style 1fC menuClicked menuToCheck 1fC menuClickedStyles display block menuClickedStyles display none else menuClickedStyles display block else menuToCheckStyles display none function setContentToC theURL var theDiv document getElementById content theDiv src theURL lt script gt lt head gt CS 200 Fall 2014 57 S The Web An example of exotic selectors in use lt html gt lt head gt lt style gt lt 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 0 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
27. dPerfect What you see 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 2014 eee ML Read Me Ruler Layout Font Styles Table List Merge BookMark HTML This document provides a set of macrosto author your own HTML home pages in addition to the built in HTML features in WP 3 5 WordPerfect providesa WYSIWYG editing environment along with a good set of tools for text marupuletion HTML has been and still is an obstacle and time consuming process in producing a home page and WordPerfect s HTML WYSIWYG capabilities makes tt easier and fasterto get the job done To install the HTML Macros included with this Readme 1 Withthis Read Me document open choose Prefere es ronn the Edit menu then click the Librarian icon 2 Choose Macros fromthe Resource pop up menu at the top of the dialog box The list boxes will change to show macros The lig onthe left showsthe macros current hr installed in your private library Library USA if you are using U S English software The lis box onthe right showsthe macros contained inthe document ub Sub Head gt Mark off 2 gt BookMark Install the HTML Macros gt Bold gt To InstallOtheOHTML Macros included Font Size 12 Set Font Times Pi lt gt Indent withothisoReadOMeOdocumentopen chooseO Bold Preferences fromthe Edi con HE cros gt fromothe gt Resou
28. ding the server app dia osx wek saver abat bd L e usually this web root folder can be set usr sbin httpd the default web document root folder is at Library when the web server is started A Applications 3 Screen Savers gt 4 I CGI Executables ha cs125 2 Current CS ScriptingAdditions apache_pb gif LS Developer C3 Scripts index html ca LS Documents L Spotlight index html cn Library 3 Startupitems 1 index html cz LB System 3 User Pictures index html de 42 User Guide formation 3 WebObjects J Users 2 WebServer i LS Widgets L4 Il 1 index html dk 1 index html ee index html el CS 200 Fall 2014 9 The Web Data Returned By Web Servers The files returned can be e web pages e pictures e 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 re really styles links containing URLS eg lt a href e e e gt and lt img src e e e 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 2014 10 The Web Formatting Tags in Wor
29. e HTML Table lt xml version 1 0 encoding utf 8 gt lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http ww 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 CS200 Marks lt H2 gt 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 lt TH gt Final Grade lt TH gt 94010203 81 lt TR gt 98102030 75 OF lt TR ALIGN center gt 96000123 _ 67 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 96000123 lt TD gt lt TD gt 67 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 gt CS 200 Fall 2014 16 The Web HTML Table Tags Top CS 200 Marks 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 l
30. eb 600 ToyTable xmi OY a e c S Le Lel Lf 9 Theweb toyDocuments ToyTable xml ORQ ToyTablexml doc font family Comic Sans MS sans serif font size 20pt xmlTable display table color black background color yellow Use LR margins of auto margin top lem to center a block level margin left auto element within its parent margin right auto lt xml version 1 0 encoding UTF 8 gt lt xml stylesheet type text css href ToyTable css gt row display table row lt doc gt lt xmlTable gt cell lt row gt display table cell Sree ri i i lt cell gt lt cell gt padding right 0 2em O2 cel padding left 0 2em lt row gt padding top 0 2em ds n padding bottom 0 2em Use text align canter Siis width 1 5em to center text within lt cell gt O lt cell gt text align center an element lt row gt lt row gt lt cell gt O lt cell gt example lt cell gt lt cell gt display block lt cell gt X lt cell gt i i lt row gt padding 0 5em P a background color cyan margin left 0 lt example gt margin right 50 Lite text is centered WITHIN e space occupied by the text align center lt amp ltjexample amp gt amp lt example amp gt block lt example gt lt doc gt CS 200 Fall 2014 49 The Web XML w o the lt xml stylesheet gt lt xml version 1 0 encoding UTF 8 gt lt doc gt
31. gt lt html gt CS 200 Fall 2014 this browser doesn t implement the IFRAME onclick setContentTo http onclick setContentTo http onclick setContentTo http onclick setContentTo http onclick setContentToC http onclick setContentToC http onclick setContentToC http jcbServer cs uwaterloo ca J www math uwaterloo ca 1e oscar cs uwaterloo ca L www uwaterloo ca daringfireball net gt www macgeekery com Je arstechnica com index ars J gt www SLashdot com gt www appLle com gt www microsoft com gt www mozilla org J gt SRC width 70 height 100 gt tag cs CS 200 CS 230 CS 436 jcbServer Math Oscar UofW Daring Fireball Mac Geekery Ars Technica Slashdot Apple Microsoft Mozilla lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt lt a gt S lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt 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 56 The Web The JavaScript for this Example lt script Language JavaS
32. 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 html 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 DraqThing dma gt lt a gt CS 200 Fall 2014 18 The Web Another example THE FOURTH PART of GAUL ei de eme ad rue age ee md de epa werap 6 om aeeoa ee Wed Editorial Note Prologue Another Example URL 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 by John a PART Gaul in 56 BC Purchase from Amazon 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
33. itle attributes for all tags lt p title gt ie lt p gt tags having a title attribute p title important attributes for all tags lt p title important 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 matches 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 2014 40 The Web The HTML lt html gt lt head gt lt title gt A Simple Eric Meyer lt title gt lt LINK REL STYLESHEET HREF ericMeyer css gt lt head gt lt body gt lt div class wrap id p1 gt lt hi gt much room to think lt h1 gt lt p gt Sometimes I find myself eee lt p gt lt p gt I suppose it s the taste e lt p gt lt div gt lt div class wrap id p2 gt lt h2 gt a fun guy lt h2 gt lt div id menu g
34. m 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 O Style Def s 2 aj CA http jcbserver cs uwaterloo ca cs2 5 Q7 Jen s Home Page Welcome to my Web page 1 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 e 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 O No Style Def s Style Def s 1 Style Def s 2 800 Jen s Fake Home Page gt http jchserver cs uwaterloo ca cs20N Qe y Re 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 e 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 And just for fun we choose a random color for the first paragraph Choose Style Sheet e No Style Def s Style Def s 1 o Style
35. ment word space decoration center normal none color background apply to column Lorem ipsum dolor sit amet consectetuer adipiscing elit Morbi lacus felis euismod at pulvinar sit amet dapibus eu eros Etiam 45 Choose typeface From the list Arial 7 OF specify your own Scrivano cS size leading tracking dlignmen word space decoration t left normal lt none color background apply to column 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 jt won t complain about spaces in URLs it won t 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 html 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 2014 46 The Web
36. mple lt div id title gt An Illustration of Dynamic Fonts amp amp Menus lt div gt lt p gt lt A href onclick changeFontSize 3 gt Larger Title lt a gt lt p gt lt p gt lt A href onclick changeFontSize 3 gt Smaller Title lt a gt lt p gt lt h3 gt lt a href onclick toggleMenuC menuOne gt UofW lt a gt lt h3 gt lt ul id menuOne gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt ul gt lt a lt a lt a lt a lt a lt a lt a lt a H RH EH i a HK href href href href href href href href onclick setContentTo http onclick setContentTo http onclick setContentToC http onclick setContentToC http onclick setContentToC http onclick setContentToC http onclick setContentToC http onclick setContentToC http VVVVVVV V www cs uwater loo ca jcbServer cs uwaterloo ca cs200 jcbServer cs uwaterloo ca cs230 jcbServer cs uwater loo ca cs436 lt h3 gt lt a href onclick toggleMenu menuTwo gt Other sites lt a gt lt h3 gt lt ul id menuTwo gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt li gt lt ul gt lt a lt a lt a lt a lt a lt a lt a href href href href href href href lt IFRAME id content Oops lt IFRAME gt lt body
37. nt 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 CS 200 Fall 2014 21 The Web 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 2014 22 The Web An HTML form is a web page JOE m with interface widgets for supplying data j Cj EG Google e text edit boxes To retrieve your marks to date in
38. nts side by side in your browser typetester maratz 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 2014 44 The Web REGULAR sample text 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 Typetester Compare fonts for the screen requirements Phasellus aliquet pretium quam Proin pharetra wisi nec tristique accumsan magna Sapien pulvinar purus vel hendrerit ipsum tellus at ante Choose typeface From the list Comic Sans MS OF specify your own Comic Sans MS size leading tracking alignment word space decoration left normal none color background apply fo column 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 CS 200 Fall 2014 step by step resources tools reset settings on this computer recent most wanted settings et CSS for 1st 2nd 3rd column Choose typeface From the list Andale Mono n OF specify your own Arno Pro size leading tracking align
39. r 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 Assignments Q Midterm Final Q Course Mark Fetch Marks lt HTML gt lt The beginning of the web page the FORM 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 in 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 2014 28 The Web lt FORM ACTION http ReportMarks cgi METHOD POST gt lt INPUT TYPE hidden NAME course VALUE cs200 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 surname SIZE 33 gt lt TD gt lt TR gt lt TR gt lt TD gt lt STRONG gt Your ID Number lt STRONG gt lt TD gt lt TD gt lt INPUT TYPE text NAME idnumber SIZE 33 gt lt TD gt lt TR gt lt TR gt lt TD COLSPA
40. rably 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 2014 42 The Web Advanced Universal Access M Never use font sizes smaller than l Press Tab to highlight each item on a webpage Option Tab highlights each item uff we eat Take mushrooms for example They re kind of ause it s nasty They re shaped like little umbrellas but you lost varieties are grown with liberal quantities of what I like hich our mothers always warned would kill us Heck some t mushrooms that so many of us like us understand that grasshoppers can be very tasty too so eird stuff But fungus don t know Maybe the morel is that you see what mean It could be that the mushroom eaters Aliens who are secretly planning to take over the world Just er when I ll get my instructions from the mothership Style sheet _jcbDocs css H4 Proxies Change Settings M Show Develop menu in menu bar 7ming It s been said that should ae View History Bookmarks Develop Window Help D Open Page With User Agent just stop with this ade Web pixies so try to keep the sourd
41. rce pop lReq lupomenudatotheotopoofotheddialogbox Pwillchange gt too gt show Omacros o TheSlistOonotheo leftoshows theOmacros currently bte library Library O USA OifoyouoareOusingOU S OEnglishOsoftware OTheolist gene KE Wj 11 The Web A Toy Web Page The HTML for this web page 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 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 LIl gt Hudson OH lt LI gt lt LI gt Sourth Bend IN lt LI gt lt LI 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 Yuck Recall that browsers ignore e multiple blanks e carriage returns e blank lines Use these to make your HTML more readable e You ll lose marks in CS 200 if you don t e You ll make your life difficult if you don t CS 200 Fall 201
42. st 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 discrepency please notify the course tutor as soon as possible Your Last Name Daly Your ID Number 00000000 Fetch Marks Note the use of a hidden parameter that the user never sees so forms for different courses can use the same cgi 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 What comes back stuff are part of 606 Mark Report the CS M Mer ReportMarks cgi course cs200 amp surname Daly 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 ser
43. t lt a href test2 html gt stories lt a gt lt a href test3 html gt poems lt a gt lt a href test4 html 1d lastlink gt art lt a gt lt div gt lt p gt Good evening my name is Rootsy e lt p gt lt div gt CS 200 Fall 2014 41 lt div class wrap id footer gt Adapted from Eric Meyer On CSS by Eric Meyer amp copy 2002 lt br gt See www 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 applied to lt div class wrap id p1 gt when that happens they re merged if there s a conflict the more specific wins eg pl 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 conside
44. t the CSS lt h2 gt Choose A Font lt h2 gt attribute font family lt p gt becomes fontFamily in lt form gt Javascript because is illegal in a variable lt input type radio name chooseFont name checked onclick elt document getELementByIdC all elt style fontFamily Arial sans serif gt Arial lt input type radio name chooseFont onclick elt document getELementByIdC all elt style 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 CS 200 Fall 2014 52 JavaScript The Web CSS JavaScript To Switch Style Sheets Example switching style sheets dynamically e local e remote 000 Jen s Fake Home Page 6800 Jen s Fake Home Page S http 127 0 0 1 cs200 switchingStyleSheets JensHomePage html http jcbserver cs uwaterloo ca cs200 switchingStyleSheets JensHomePage html C http jcbserver cs uwaterloo ca cs2 4 Qr Jen s 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 ll tell you a bit about me Places I ve Lived Akron OH Hudson OH e South Bend IN e Boston MA Adapted fro
45. tected demonstration solutions e lt DIV gt lt DIV CLASS Item1 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 Item1 gt lt SPAN class Shout gt Demo Make Histograms lt SPAN gt Click the Get Data button in any eee Lab Exam Task A al e http jcbserver uwaterloo ca cs200 SampleExams LabExam TaskI Q7 Google lt DIV gt lt DIV CLASS Item1 gt The charts in By 5 and By 10 can e CS lt DIV gt lt I gt lt DIV CLASS Block gt AON You are to duplicate the behaviour ee e 200 home lt DIV gt oe lt DIV CLASS Block gt The relative weight of important pieces eee lt DIV gt Waterloo math uwaterloo ca computer science descriptions administrivia lectures resources project exams surveys marks Introduction Preliminaries TaskA TaskB Sample Lab Exam Task B This page is best displayed with Internet Explorer 4 or 5 Netscape 4 gets some of the leading wrong To use computers effectively it is 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 distri
46. tions 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 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 lt HEAD gt BODY FONT FAMILY Myriad Pro sans serif lt HEAD gt lt BODY gt lt P gt COLOR green TEXT ALIGN center FONT WEIGHT bold FONT STYLE italic 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 lt BODY gt lt HTML gt CS 200 Fall 2014 This word will be lt SPAN gt green lt SPAN gt 800 simpleHeadCSSexample html This paragraph will be centered This paragraph will be centered and bold This paragraph will be centered anditalic This word will be green 32 lt P gt lt P gt lt P gt lt P gt The Web External CSS files This paragraph will be centered Or style definitions may be EXTERNAL to a web page This paragraph will be centered and bold e so that multiple web pages can use them This paragraph will be centered and italic e much more important for HTML than for word processing This word will be green e An example style sheet file BODY FONT FAMILY Myriad Pro sans serif n
47. unting a share point use the Finder s Go gt Connect to Server menu item creates a network disk on your client machine an icon appears 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 2014 8 The Web The Web like file sharing has a client server model Many of the machines on the Internet are web servers oscar cs uwaterloo ca Server 200 request html Li Exp gt Mist html Ss Schedule Server e any machine client on the web can ask them for data e actually they re asking a particular application running on that machine for data which is identified by a port html 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 user preferences e browsers are often but not always consistent in how they do this For security e aweb server can only return files in the server subtree e sometimes that s rooted in the folder hol
48. uters effectively it is 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 s tyle color gt Good kl lt datheteoameontenaomnghedann eg lt span style color green gt Good Work lt span gt of marks or a course how many people received marks alt between 70 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 R you need to transfer data between FileMaker Excel and Mirosof Word s you Block level tags generate automatic line breaks before amp after Work Because Yau and your leagues oe oten you vant Owon outa convenient and efficient way of doing si Password protected demonstration solutions may be found in the Demo Solutions Inline tags do not one can follow another on the same line Dr on Servar Copy iher Yr mer subkeldar 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 4 open the Data file copy its contents into the Grades worksheet and then close it LY CS 200 Fall 2014 35 The Web TaskB html the
49. ver why the path to the cgi had better not contain a question mark CS 200 Fall 2014 26 The Web 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 Keep 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 Mark Report Rad GC bhttp jcbserver ReportMarks cgi Q ERS SS SSS SSS But you do need to know that 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 rT Daly and therefore cannot be bookmarked Assignment Mark 98 CS 200 Fall 2014 27 The Web 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 you
Download Pdf Manuals
Related Search