0
HTML and CSS <ul><li>by Peter Tucker </li></ul><ul><li>Associate Professor of Math and Computer Science </li></ul><ul><li>...
Markup Languages <ul><li>A  markup language  embeds tags within regular text </li></ul><ul><ul><li>Text file -> edit with ...
HTML Editors <ul><li>HTML Files are simply text files </li></ul><ul><ul><li>Notepad and WordPad are fine text editors </li...
Server basics <ul><li>HTML file is requested by user </li></ul><ul><li>Request travels over internet to proper machine </l...
Markup Tags <ul><li>Tags   are used to separate structure from content </li></ul><ul><ul><li>Usually placed inside < > </l...
More On Tags <ul><li>Tags are not case-sensitive </li></ul><ul><ul><li><html>  =  <HTML>  =  <hTmL> </li></ul></ul><ul><ul...
HTML Skeleton Page <ul><li>html  indicates the type of markup used </li></ul><ul><li>head  contains header information </l...
Our First Page <ul><li>Defines an HTML greeting page </li></ul><ul><ul><li><html> </li></ul></ul><ul><li>Sets Title Bar te...
In-class Exercise <ul><li>On your own </li></ul><ul><li>Type in the given web page </li></ul><ul><li>Save the file, and do...
HTML Tags <ul><li>Headings:  <h1> ,  <h2> , …,  <h6> </li></ul><ul><ul><li>Various headings in your document </li></ul></u...
Example <html> <head> <title> Cinderella </title> </head> <body> <h1> Cinderella </h1> <!-- subtitle --> or,  <b> The Litt...
Text-formatting Tags <ul><li>Many formatting tags in HTML </li></ul>Wrap text with tags:  <big> CS301 is a great Jan Term ...
In-class Exercise <ul><li>Enhance the web page you designed earlier </li></ul><ul><li>Try some of the different tags liste...
HTML Links <ul><li>Linking to other pages is the point of the Internet </li></ul><ul><li>Anchor:  <a> </li></ul><ul><ul><l...
Example, refined … <body> <a name=&quot; top &quot;> <h1> Cinderella </h1> </a> <a href=&quot; cinderella2.htm#para1 &quot...
In-class Exercise <ul><li>Try out anchors </li></ul><ul><li>Design a new web page that has links to six of your favorite w...
Tables <ul><li>We want to display tabular data </li></ul><ul><li>Tags: </li></ul><ul><ul><li><table>  Define a table </li>...
Example <html> <head> <title>  Cast for Cinderella  </title> </head> <body> <p> Cast of voices for Disney's Cinderella (19...
In-class Exercise <ul><li>Design a web page that displays the point totals for each quarter and the whole game for three b...
Lists <ul><li>Display a marked list of items </li></ul><ul><li>Unordered List:  <ul> </li></ul><ul><ul><li><li> : list ite...
Example Conferences: <ul> <li> NFC East </li> <li> NFC North </li> … </ul> Standings: <ul> <li> NFC East <ol> <li> (*) NY ...
Images <ul><li>Text is boring </li></ul><ul><li>Images make a web site more interesting </li></ul><ul><li>Tag:  <img> </li...
Example Conferences: <ul> <li><img src=&quot; NFC.gif &quot;> NFC <ul> <li> NFC East </li> <li> NFC North </li> <li> NFC S...
In-class Exercise <ul><li>Modify your basketball scoreboard page </li></ul><ul><ul><li>Add team logos on the score pages <...
Images as Links <ul><li>We've seen how to link to other pages </li></ul><ul><ul><li><a href=&quot; http://www.whitworth.ed...
In-class Exercise <ul><li>Open the &quot;bookmark&quot; page you constructed </li></ul><ul><li>Instead of using text for t...
HTML  <div>  tag <ul><li>Defines a generic container </li></ul><ul><ul><li>Allows us to set up tags as a group (e.g. menu ...
Example <html> <head><title> Cast for Cinderella </title></head> <body> <p> Cast of voices for Disney's Cinderella (1950) ...
HTML Forms <ul><li>Many Internet applications require user input </li></ul><ul><ul><li>E.g. Search engine pages, customer ...
Form Input Objects <ul><li>Forms need objects to get information from users </li></ul><ul><li>Usually use  <input>  tag </...
Simple form – search engine page <html> <head> <title> Search the Internet </title> </head> <body> <h1> CS301 -- Internet ...
In-class Exercise <ul><li>Design a form  </li></ul><ul><ul><li>Get the user's name and password in a textbox  (e.g.  <inpu...
Form options <ul><li>Our form doesn’t (yet) do anything </li></ul><ul><li>We need to direct its values to some destination...
Example <html> <head> <title> Search the Internet </title> </head> <body> <h1> CS301 -- Internet Search Page </h1> <table ...
In-class Exercise <ul><li>Create a simple web page that says &quot;thank you for your input&quot; </li></ul><ul><ul><li>Si...
Form Methods <ul><li>The  method  attribute accepts two values,  get  and  post </li></ul><ul><li>get   </li></ul><ul><ul>...
Form Controls <ul><li>Forms must have more than text boxes and buttons </li></ul><ul><li>We want check boxes, radio button...
Text Boxes <ul><li>Text field:  <input type= &quot;text&quot; </li></ul><ul><ul><li>Default (but don’t rely on it) </li></...
Example <html> <head> <title> PHP Self Description </title> </head> <body> <form action=&quot; thanks.htm &quot; method=&q...
Buttons <ul><li>Submit:  <input type= &quot;submit&quot; </li></ul><ul><ul><li>Submit form information to action URL </li>...
Example <form action= &quot;thanks.htm&quot;  method= &quot;get&quot; > Search for: <input type= &quot;text&quot;  name= &...
In-class Exercise <ul><li>Design a form that uses radio buttons to list your classes for spring semester </li></ul><ul><li...
List Boxes <ul><li>Drop-down list:  <select> </li></ul><ul><ul><li>Give user list of options </li></ul></ul><ul><ul><li>At...
Example <form action= &quot;thanks.htm&quot;  method= &quot;get&quot; > Search for: <input type= &quot;text&quot;  name= &...
In-class Exercise <ul><li>Design a form that lists ice cream flavors </li></ul><ul><li>Ask the user to choose their favori...
Page and Form Layout <ul><li>Common use for HTML tables is for page layout </li></ul><ul><ul><li>Generally, programmers ha...
Making Forms More Readable <ul><li>Example: Form for a restaurant survey </li></ul><ul><li>Need to rate things on scale of...
Example <html> <head> <title> Restaurant Survey </title> </head> <body bgcolor=&quot; lightyellow &quot;> <h1> Thank you! ...
Now we need the DIV and SPAN tags <ul><li>Recall  <div>  marks areas with a name </li></ul><ul><li><span>  is similar, but...
What is CSS <ul><li>CSS –  Cascading Style Sheets </li></ul><ul><li>Problem: HTML developers have little control of how th...
Motivation –  CS Student Research Page <ul><li>Page with a number of papers listed, by class </li></ul><ul><li>Three versi...
Next Motivation –  CSS Zen Garden <ul><li>Zen Garden is a great illustration of the power of CSS </li></ul><ul><ul><li>www...
CSS Syntax <ul><li>Values in a style sheet have the following syntax: selector {property: value} </li></ul><ul><li>Where: ...
Examples <ul><li>p {color: green} </li></ul><ul><ul><li>Make contents of  <p>  green typeface </li></ul></ul><ul><li>p {  ...
Applying CSS <ul><li>Embedded in HTML page ( Internal ) </li></ul><ul><li>Linked into HTML page ( External ) </li></ul><he...
In-class Exercise <ul><li>Construct a style sheet internally to one of your existing web pages </li></ul><ul><ul><li>Choos...
CSS Classes <ul><li>We may not want a single style for all instances of a tag </li></ul><ul><ul><li>E.g.  <p>  is very com...
Example <html> <head> <title> Simple CSS Test </title> <style type= &quot;text/css&quot; > .global {color: darkred} p {col...
Inline Styles <ul><li>We can also embed styles into a single tag </li></ul><ul><ul><li>We lose many advantages of style sh...
Which style to choose <ul><li>Possible conflict of styles </li></ul><ul><ul><li>external vs. internal vs. inline </li></ul...
OK, Now We Need Specifics <ul><li>We know how to use CSS </li></ul><ul><li>Real Power – one CSS file controls pages on ent...
Background Property Description Values background-attachment Does background image scroll? scroll fixed background-color B...
Example <html> <head> <title>Simple CSS Test</title> <style type=&quot; text/css &quot;> p.bcolor {background-color: light...
Another Example <html> <head> <title> Simple CSS Test </title> <style  type =&quot;text/css&quot; > p.lgrey { background-c...
In-class Exercise <ul><li>Experiment with the background settings </li></ul><ul><ul><li>Use different browsers </li></ul><...
Text Property Description Values color Text color color-rgb color-# color-name letter-spacing Spacing between letters norm...
Example <html> <head> <title> Simple CSS Test </title> <style type=&quot; text/css &quot;> p.squish {letter-spacing: -5px}...
In-class Exercise <ul><li>Experiment with the text settings </li></ul>Property Description Values color Text color color-r...
Font Property Description Values font-family Prioritized, comma-separated list of font names family-name generic-name font...
Example <html> <head> <title> Simple CSS Test </title> <style  type =&quot;text/css&quot; > body { font-family: &quot;Book...
In-class Exercise <ul><li>Experiment with the font settings </li></ul>Property Description Values font-family Prioritized,...
Border Property Description Values border-color Color for border color border-style Style for border none, hidden, dotted,...
Example <html> <head> <title> Simple CSS Test </title> <style  type =&quot;text/css&quot; > th {  border-width : thick;  b...
In-class Exercise <ul><li>Experiment with borders </li></ul>Property Description Values border-color Color for border colo...
Lists Property Description Values list-style-image Image for items in a list none url list-style-position Where marker sho...
Example <html> <head> <title> NFL Standings </title> <style type=&quot; text/css &quot;> ul {list-style-type: hebrew } ul....
In-class Exercise <ul><li>Experiment with lists </li></ul>Property Description Values list-style-image Image for items in ...
Dimension Property Description Values height Height of an image auto length % width Width of an image auto length % line-h...
Example <html> <head> <title> Simple CSS Test </title> </head> <body> <h1 style=&quot; text-align: center; color: darkred ...
Pseudo-classes <ul><li>Some selectors can have special effects </li></ul><ul><li>Anchor (<a>) is one such selector </li></...
Example 1 <html> <head> <style type=&quot;text/css&quot;> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {colo...
Example 2 <html><head> <style type=&quot;text/css&quot;> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:...
Final word on div tag <ul><li>The <div> tag allows positioning of a group of HTML elements </li></ul>. classes  { position...
Final word on span tag <ul><li>The  <span>  tag also allows you to apply classes within a tag </li></ul><ul><ul><li>No eff...
We want to control what happens with form data <ul><li>Currently our form just sends results to Google </li></ul><ul><li>I...
Server basics <ul><li>HTML file is requested by user </li></ul><ul><li>Request travels over internet </li></ul><ul><li>Int...
A Brief Word on PHP <ul><li>PHP is a C-like language that runs on the internet server (CS1 for us) </li></ul><ul><li>PHP s...
Simple PHP script <html> <head> <title> Simple PHP </title> </head> <body> </body> </html> Simple PHP <p>Hello world</p> P...
Main Motivation –  Processing Form Data <ul><li>We really want that data that users gave us </li></ul><ul><ul><li>Don’t ju...
Handling Input Example <html> <head> <title> Simple PHP </title> </head> <body> <?php echo  &quot;<p>Hello world</p>
&quot...
Scripting on the Client <ul><li>We would like an interactive web page </li></ul><ul><ul><li>For example, input validation ...
JavaScript Basics <ul><li>JavaScript is a simple programming language </li></ul><ul><ul><li>It is  not   Java </li></ul></...
What can we do in JavaScript? <ul><li>JavaScript is a programming language for HTML developers </li></ul><ul><ul><li>Like ...
Embedding JavaScript <ul><li>JavaScript is embedded anywhere in HTML using the  <script>  tag </li></ul><ul><li>For now, w...
Input Validation <ul><li>OK, now for the most common use for JavaScript </li></ul><ul><li>A form has a number of fields </...
JavaScript Input Validation <ul><li>Requirements </li></ul><ul><ul><li>JavaScript function that: </li></ul></ul><ul><ul><u...
Example <html> <head>   <title> Personal Information </title>   <script language=&quot; JavaScript &quot;>   function vali...
Upcoming SlideShare
Loading in...5
×

HTML & CSS

13,877

Published on

A presentation by Peter Tucker, associate professor of math and computer science at
Whitworth University as presented in February 2009 to the Online Journalism Lab.

Published in: Education, Technology, Design
4 Comments
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,877
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1,185
Comments
4
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "HTML & CSS"

  1. 1. HTML and CSS <ul><li>by Peter Tucker </li></ul><ul><li>Associate Professor of Math and Computer Science </li></ul><ul><li>Whitworth University </li></ul><ul><li>As presented February 2009 to Online J-Lab </li></ul>
  2. 2. Markup Languages <ul><li>A markup language embeds tags within regular text </li></ul><ul><ul><li>Text file -> edit with notepad </li></ul></ul><ul><li>SGML – Standard Generalized Markup Language </li></ul><ul><ul><li>Generic language conceived in the 60’s </li></ul></ul><ul><ul><li>Language to separate content and structure </li></ul></ul><ul><ul><li>Elements identify text objects </li></ul></ul><ul><li>HTML – Hypertext Markup Language </li></ul><ul><ul><li>Based on SGML </li></ul></ul><ul><ul><li>Most common markup language for Internet pages </li></ul></ul><ul><li>XML – Extensible Markup Language </li></ul><ul><ul><li>Also based on SGML </li></ul></ul><ul><ul><li>Very flexible </li></ul></ul><ul><ul><li>Commonly used for information exchange </li></ul></ul>
  3. 3. HTML Editors <ul><li>HTML Files are simply text files </li></ul><ul><ul><li>Notepad and WordPad are fine text editors </li></ul></ul><ul><ul><li>Emacs and XEmacs are good, and also work in Linux </li></ul></ul><ul><li>Many freeware HTML editors exist </li></ul><ul><ul><li>CoffeeCup is a good free version (and better commercial version…) </li></ul></ul><ul><ul><li>Many others: search for “HTML Editor” on www.download.com </li></ul></ul><ul><ul><ul><li>Be sure to check the licensing agreements </li></ul></ul></ul><ul><li>Commercial software </li></ul><ul><ul><li>Microsoft Expression Studio is on these machines </li></ul></ul><ul><ul><li>Macromedia DreamWeaver is on these machines </li></ul></ul><ul><ul><li>Visual Studio is also on these machines </li></ul></ul>
  4. 4. Server basics <ul><li>HTML file is requested by user </li></ul><ul><li>Request travels over internet to proper machine </li></ul><ul><li>Internet server computer locates file and responds </li></ul>Internet Internet Server Software file.html <html>...
  5. 5. Markup Tags <ul><li>Tags are used to separate structure from content </li></ul><ul><ul><li>Usually placed inside < > </li></ul></ul><ul><ul><ul><li>E.g. <html> defines the start of an HTML page </li></ul></ul></ul><ul><ul><li>Closed with </ > </li></ul></ul><ul><ul><ul><li>E.g. </html> closes an HTML page </li></ul></ul></ul><ul><ul><li>Generally: <tag> content </tag> </li></ul></ul><ul><ul><ul><li>content is processed/displayed according to the meaning of tag </li></ul></ul></ul><ul><li>Tags may be nested </li></ul><ul><ul><li><tag> content <tag2> more </tag2> more </tag> </li></ul></ul><ul><ul><li>Nesting must be &quot;balanced&quot; </li></ul></ul><ul><li>Tags with no content can optionally close themselves </li></ul><ul><ul><li>E.g. <br /> same as <br> </br> </li></ul></ul>
  6. 6. More On Tags <ul><li>Tags are not case-sensitive </li></ul><ul><ul><li><html> = <HTML> = <hTmL> </li></ul></ul><ul><ul><li>Lower case is preferred </li></ul></ul><ul><li>Tags often contain attributes </li></ul><ul><ul><li>Specify specific behavior for tag </li></ul></ul><ul><ul><li>Attribute values contained in “”s </li></ul></ul><ul><ul><li>E.g. <table border=&quot;0&quot;> </li></ul></ul><ul><li>Whitespace (space, tab, enter) ignored (except the first) </li></ul><ul><ul><li>“ This is spaced” = “This is spaced” = “This is spaced” </li></ul></ul>
  7. 7. HTML Skeleton Page <ul><li>html indicates the type of markup used </li></ul><ul><li>head contains header information </li></ul><ul><ul><li>title gives page title (window title bar) </li></ul></ul><ul><li>body contains main content </li></ul><html> <head> <title> </title> </head> <body> </body> </html>
  8. 8. Our First Page <ul><li>Defines an HTML greeting page </li></ul><ul><ul><li><html> </li></ul></ul><ul><li>Sets Title Bar text </li></ul><ul><ul><li><title> </li></ul></ul><ul><li>Display Paragraph </li></ul><ul><ul><li><p> </li></ul></ul><ul><li>White space ignored by browser </li></ul><html> <head> <title> My First Page </title> </head> <body> <p> Hello World! Welcome to CS301 </p> </body> </html> First page
  9. 9. In-class Exercise <ul><li>On your own </li></ul><ul><li>Type in the given web page </li></ul><ul><li>Save the file, and double-click on it </li></ul><ul><ul><li>Modify the title </li></ul></ul><ul><ul><li>Modify the content </li></ul></ul><html> <head> <title> My First Page </title> </head> <body> <p> Hello World! </p> </body> </html>
  10. 10. HTML Tags <ul><li>Headings: <h1> , <h2> , …, <h6> </li></ul><ul><ul><li>Various headings in your document </li></ul></ul><ul><ul><ul><li>E.g. title <h1> , chapters <h2> , sections <h3> , subsections <h4> </li></ul></ul></ul><ul><li>Paragraphs: <p> </li></ul><ul><ul><li>Define new paragraph </li></ul></ul><ul><ul><li>New line before and after </li></ul></ul><ul><li>Line break: <br> </li></ul><ul><ul><li>New line, but not new paragraph </li></ul></ul><ul><li>Horizontal rule: <hr> </li></ul><ul><ul><li>Draw horizontal line across page </li></ul></ul><ul><li>Comment: <!-- … --> </li></ul><ul><ul><li>Ignored by browser </li></ul></ul>
  11. 11. Example <html> <head> <title> Cinderella </title> </head> <body> <h1> Cinderella </h1> <!-- subtitle --> or, <b> The Little Glass Slipper </b> <h2> Chapter 1 </h2> <hr /> <p> There lived once a gentleman who married for his second wife the proudest woman ever seen. She had two daughters of the same spirit, who were indeed like her in all things. … </p> <p> No sooner was the wedding over than the stepmother began to show her ill-temper; she could not bear her young step-daughter's gentle ways, … </p> <br /> <h6> credit to www.childrensbooksonline.org </h6> </body> </html> Cinderella, version 1
  12. 12. Text-formatting Tags <ul><li>Many formatting tags in HTML </li></ul>Wrap text with tags: <big> CS301 is a great Jan Term class! </big> Tag Description <b> Defines bold text <big> Defines big text <em> Defines emphasized text  <i> Defines italic text <small> Defines small text <strong> Defines strong text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text
  13. 13. In-class Exercise <ul><li>Enhance the web page you designed earlier </li></ul><ul><li>Try some of the different tags listed </li></ul><ul><ul><li>Give six different formatted versions of “Hello World!” </li></ul></ul><ul><ul><li>Add comments describing the difference between each version </li></ul></ul><ul><ul><li>Try nesting some of the tags </li></ul></ul>
  14. 14. HTML Links <ul><li>Linking to other pages is the point of the Internet </li></ul><ul><li>Anchor: <a> </li></ul><ul><ul><li>Common attributes: </li></ul></ul><ul><ul><ul><li>href – destination page </li></ul></ul></ul><ul><ul><ul><li>target – Where to open page (e.g. target=&quot; _blank &quot; opens a new browser window) </li></ul></ul></ul><ul><ul><ul><li>name – Anchor on this page </li></ul></ul></ul><ul><li>Examples: </li></ul><ul><ul><li><a href=&quot; http://www.whitworth.edu &quot; target=&quot; _blank &quot;> Go to our school! </a> </li></ul></ul><ul><ul><li><a name=&quot; start &quot;/> </li></ul></ul><ul><ul><li><a href=&quot; mypage.htm#start &quot;> Go to start </a> </li></ul></ul>
  15. 15. Example, refined … <body> <a name=&quot; top &quot;> <h1> Cinderella </h1> </a> <a href=&quot; cinderella2.htm#para1 &quot;> Paragraph #1 </a><br> <a href=&quot; cinderella2.htm#para2 &quot;> Paragraph #2 </a><br> <a href=&quot; cinderella2.htm#credits &quot;> Credits </a><br> <a name=&quot; para1 &quot; /> <p> … </p> <p><a href=&quot; cinderella2.htm#top &quot;> Back to top </a></p> <a name=&quot; para2 &quot;/> <p> … </p> <p><a href=&quot; cinderella2.htm#top &quot;> Back to top </a></p> <a name=&quot; credits &quot;/> <br/><h6> credit to <a href=&quot; http://www.childrensbooksonline.org &quot; target=&quot; _blank &quot;> Children’s Online Books </a> </h6> <p><a href=&quot; cinderella2.htm#top &quot;> Back to top </a></p> </body> Cinderella, version 2
  16. 16. In-class Exercise <ul><li>Try out anchors </li></ul><ul><li>Design a new web page that has links to six of your favorite web pages </li></ul><ul><ul><li>Sort of a “bookmark” page </li></ul></ul>
  17. 17. Tables <ul><li>We want to display tabular data </li></ul><ul><li>Tags: </li></ul><ul><ul><li><table> Define a table </li></ul></ul><ul><ul><ul><li>Attributes: border – border thickness </li></ul></ul></ul><ul><ul><li><tr> Define a table row </li></ul></ul><ul><ul><li><td> Define table data </li></ul></ul><ul><ul><ul><li>Attributes: colspan – # of columns to cover with this data rowspan – # of rows to cover with this data </li></ul></ul></ul><ul><ul><li><th> Define table heading </li></ul></ul>
  18. 18. Example <html> <head> <title> Cast for Cinderella </title> </head> <body> <p> Cast of voices for Disney's Cinderella (1950) </p> <table border=&quot; 1 &quot;> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> <tr><td> Lady Tremaine </td><td> Eleanor Audley </td></tr> <tr><td> Drizella </td><td> Rhoda Williams </td></tr> <tr><td> Anastasia </td><td> Lucille Bliss </td></tr> </table> </body> </html> Cinderella cast
  19. 19. In-class Exercise <ul><li>Design a web page that displays the point totals for each quarter and the whole game for three basketball games </li></ul><ul><ul><li>Get data from http://sports.espn.go.com/nba/scoreboard </li></ul></ul>
  20. 20. Lists <ul><li>Display a marked list of items </li></ul><ul><li>Unordered List: <ul> </li></ul><ul><ul><li><li> : list item </li></ul></ul><ul><li>Ordered List: <ol> </li></ul><ul><ul><li><li> : list item </li></ul></ul><ul><li>Definition List: <dl> </li></ul><ul><ul><li><dt> : Dictionary Term </li></ul></ul><ul><ul><li><dd> : Dictionary Definition </li></ul></ul>
  21. 21. Example Conferences: <ul> <li> NFC East </li> <li> NFC North </li> … </ul> Standings: <ul> <li> NFC East <ol> <li> (*) NY Giants </li> <li> (x) Philadelphia </li> <li> Dallas </li> <li> Washington </li> </ol></li> … </ul> <dl> <dt> x </dt><dd> clinched playoff </dd> <dt> z </dt><dd> clinched division </dd> <dt> * </dt><dd> clinched homefield through playoffs </dd> </dl> NFL Standings
  22. 22. Images <ul><li>Text is boring </li></ul><ul><li>Images make a web site more interesting </li></ul><ul><li>Tag: <img> </li></ul><ul><ul><li>Attributes: src , alt </li></ul></ul><ul><li>src is a URL </li></ul><ul><li>alt is for text-only browsers, &quot;hovering&quot; </li></ul>
  23. 23. Example Conferences: <ul> <li><img src=&quot; NFC.gif &quot;> NFC <ul> <li> NFC East </li> <li> NFC North </li> <li> NFC South </li> <li> NFC West </li> </ul> </li> <li><img src=&quot; AFC.gif &quot;> AFC <ul> <li> AFC East </li> <li> AFC North </li> <li> AFC South </li> <li> AFC West </li> </ul></li> </ul> Standings: <ol> <li><img src=&quot; SEA.gif &quot;> (x)&nbsp;Seattle </li> <li><img src=&quot; STL.gif &quot;> St.&nbsp;Louis </li> <li><img src=&quot; ARI.gif &quot;> Arizona </li> <li><img src=&quot; SF.gif &quot;> San&nbsp;Francisco </li> </ol> Enhanced NFL Standings
  24. 24. In-class Exercise <ul><li>Modify your basketball scoreboard page </li></ul><ul><ul><li>Add team logos on the score pages </li></ul></ul>
  25. 25. Images as Links <ul><li>We've seen how to link to other pages </li></ul><ul><ul><li><a href=&quot; http://www.whitworth.edu &quot;> Go to Whitworth</a> </li></ul></ul><ul><li>We've also seen how to put images on the screen </li></ul><ul><ul><li><img src=&quot; WhitworthLogo.gif &quot; /> </li></ul></ul><ul><li>We can put the two together </li></ul><ul><ul><li><a href=&quot; http://www.whitworth.edu &quot;> <img src=&quot; WhitworthLogo.gif &quot; /> </a> </li></ul></ul><ul><ul><li><a href=&quot; http://www.whitworth.edu &quot;> <img src=&quot; WhitworthLogo.gif &quot; /> Go Bucs! <img src=&quot; WhitworthLogo.gif &quot; /> </a> </li></ul></ul>
  26. 26. In-class Exercise <ul><li>Open the &quot;bookmark&quot; page you constructed </li></ul><ul><li>Instead of using text for the links, </li></ul><ul><ul><li>where appropriate, use an image. </li></ul></ul><ul><ul><li>Maybe an image is available on that site that makes sense? </li></ul></ul>
  27. 27. HTML <div> tag <ul><li>Defines a generic container </li></ul><ul><ul><li>Allows us to set up tags as a group (e.g. menu bar, image list, …) </li></ul></ul><ul><li>Attributes </li></ul><ul><ul><li>align ( left , center , right , justify ) </li></ul></ul><ul><ul><li>class </li></ul></ul><ul><li>For now, it isn't much help </li></ul><ul><li>When we learn CSS, styles can be applied to div </li></ul><ul><ul><li>It'll come up a bit Thursday </li></ul></ul>
  28. 28. Example <html> <head><title> Cast for Cinderella </title></head> <body> <p> Cast of voices for Disney's Cinderella (1950) </p> <div align=&quot; left &quot;> <table border=&quot; 1 &quot;> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> … </table></div> <div align=&quot; center &quot;> <table border=&quot; 1 &quot;> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> … </table></div> <div align=&quot; right &quot;> <table border=&quot; 1 &quot;> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> … </table></div> </body> </html> Cast_div
  29. 29. HTML Forms <ul><li>Many Internet applications require user input </li></ul><ul><ul><li>E.g. Search engine pages, customer support, Blogs </li></ul></ul><ul><li>HTML uses forms to set up user input </li></ul><ul><ul><li>Many different form controls </li></ul></ul><ul><li>Tag <form> begins a form section </li></ul><ul><ul><li>Attributes: name , action , method , id </li></ul></ul>
  30. 30. Form Input Objects <ul><li>Forms need objects to get information from users </li></ul><ul><li>Usually use <input> tag </li></ul><ul><ul><li>Attributes: name , type , value , id </li></ul></ul><ul><li>Type attribute specifies the kind of input object </li></ul><ul><ul><li>submit , text , textarea , checkbox , radio , … </li></ul></ul><ul><li>We'll discuss these in more detail soon </li></ul>
  31. 31. Simple form – search engine page <html> <head> <title> Search the Internet </title> </head> <body> <h1> CS301 -- Internet Search Page </h1> <!-- for now, don't do anything --> <form> Search for: <!-- text box for user search query --> <input type=&quot; text &quot; name=&quot; q &quot; /> <!-- submit button to send the query --> <input type=&quot; submit &quot; name=&quot; submitbtn &quot; value=&quot; Press here! &quot; /> </form> </body> </html> Initial Search Page
  32. 32. In-class Exercise <ul><li>Design a form </li></ul><ul><ul><li>Get the user's name and password in a textbox (e.g. <input type=&quot; text &quot; name=&quot; user &quot; /> ) </li></ul></ul><ul><ul><li>Include a &quot;submit&quot; button (e.g. <input type=&quot; submit &quot; name=&quot; submitbtn &quot; value=&quot; Press here &quot; /> ) </li></ul></ul>
  33. 33. Form options <ul><li>Our form doesn’t (yet) do anything </li></ul><ul><li>We need to direct its values to some destination site </li></ul><ul><ul><li>Once the user hits the submit button </li></ul></ul><ul><li>action , method attributes of <form> specify this </li></ul><ul><ul><li>action : URL to destination site </li></ul></ul><ul><ul><li>method : how to send the data (get, post) </li></ul></ul><ul><li>Example: <form action=&quot; mydest.htm &quot; method=&quot; get &quot;> </li></ul>Search Page #2
  34. 34. Example <html> <head> <title> Search the Internet </title> </head> <body> <h1> CS301 -- Internet Search Page </h1> <table border=&quot; 0 &quot;> <tr><td><big> Powered by: </big></td> <td><img src=&quot; http://www.google.com/intl/en/logos/Logo_25wht.gif &quot;> </td> </tr> </table> <!-- give a destination URL for this form --> <form action=&quot; http://www.google.com/search &quot; method=&quot; get &quot;> Search for: <input type=&quot; text &quot; name=&quot; q &quot; /> <input type=&quot; submit &quot; value=&quot; submit &quot; /> </form> </body> </html>
  35. 35. In-class Exercise <ul><li>Create a simple web page that says &quot;thank you for your input&quot; </li></ul><ul><ul><li>Similar to the &quot;hello world&quot; page </li></ul></ul><ul><li>Modify your form to use the &quot;thank you&quot; page as the action of the form </li></ul><ul><li>Try it out </li></ul><ul><ul><li>When you press submit, then you should see your thank you page </li></ul></ul>
  36. 36. Form Methods <ul><li>The method attribute accepts two values, get and post </li></ul><ul><li>get </li></ul><ul><ul><li>Submitted URL contains name/value pairs for each control on web page </li></ul></ul><ul><ul><li>Users bookmarks contain query answers </li></ul></ul><ul><ul><li>Users see URL – security issues? </li></ul></ul><ul><li>post </li></ul><ul><ul><li>Submitted URL does not contain control values </li></ul></ul><ul><ul><li>User bookmarks do not keep query results </li></ul></ul><ul><ul><li>Users do not see URL </li></ul></ul>Get Search Page #2 Post Search Page #2
  37. 37. Form Controls <ul><li>Forms must have more than text boxes and buttons </li></ul><ul><li>We want check boxes, radio buttons, password fields, multi-line fields, … </li></ul><ul><li>HTML provides all of these with the <input> tag </li></ul><ul><ul><li>Using the type attribute to choose the control </li></ul></ul><ul><ul><li>Use the name attribute to name it (for later) </li></ul></ul>
  38. 38. Text Boxes <ul><li>Text field: <input type= &quot;text&quot; </li></ul><ul><ul><li>Default (but don’t rely on it) </li></ul></ul><ul><li>Password: <input type=&quot; password&quot; </li></ul><ul><ul><li>Uses ‘*’ for each input character </li></ul></ul><ul><ul><li>Should you use get or post ? </li></ul></ul><ul><li>Multi-line field: Tag <textarea> </li></ul><ul><ul><li>Not <input type=…> </li></ul></ul><ul><ul><li>Attributes name , rows , cols </li></ul></ul>Text Box Controls
  39. 39. Example <html> <head> <title> PHP Self Description </title> </head> <body> <form action=&quot; thanks.htm &quot; method=&quot; POST &quot;> Name: <input type=&quot; textbox &quot; name=&quot; name &quot; /> <br /> Password: <input type=&quot; password &quot; name=&quot; password &quot; /> <br /> Description: <textarea rows=&quot; 10 &quot; cols=&quot; 30 &quot; name=&quot; description &quot;> </textarea> <br /><input type=&quot; submit &quot; value=&quot; submit &quot; /> </form> </body> </html>
  40. 40. Buttons <ul><li>Submit: <input type= &quot;submit&quot; </li></ul><ul><ul><li>Submit form information to action URL </li></ul></ul><ul><li>Reset: <input type= &quot;reset&quot; </li></ul><ul><ul><li>Clear out information on form </li></ul></ul><ul><li>Radio: <input type= &quot;radio&quot; </li></ul><ul><ul><li>Option buttons (choose one) </li></ul></ul><ul><li>Checkbox: <input type= &quot;checkbox&quot; </li></ul><ul><ul><li>Choose zero or more options </li></ul></ul>Button Controls
  41. 41. Example <form action= &quot;thanks.htm&quot; method= &quot;get&quot; > Search for: <input type= &quot;text&quot; name= &quot;q&quot; /> <br /> Choose a search engine: <br /><input type= &quot;radio&quot; name= &quot;engine&quot; value= &quot;google&quot; checked= &quot;checked&quot; /> Google <br /><input type= &quot;radio&quot; name= &quot;engine&quot; value= &quot;yahoo&quot; /> Yahoo <br /><input type= &quot;radio&quot; name= &quot;engine&quot; value= &quot;A9&quot; /> A9 <br /><input type= &quot;checkbox&quot; name= &quot;new&quot; checked= &quot;checked&quot; /> Checkbox that does nothing (sorry) <br /><input type= &quot;reset&quot; text= &quot;clear&quot; /> <input type= &quot;submit&quot; value= &quot;submit&quot; /> </form>
  42. 42. In-class Exercise <ul><li>Design a form that uses radio buttons to list your classes for spring semester </li></ul><ul><li>Have the user choose the course they're about to attend, then hit submit </li></ul>
  43. 43. List Boxes <ul><li>Drop-down list: <select> </li></ul><ul><ul><li>Give user list of options </li></ul></ul><ul><ul><li>Attribute name defines control name </li></ul></ul><ul><li><option> to define each option </li></ul><ul><ul><li>Attributes: value , selected </li></ul></ul>New Search Page
  44. 44. Example <form action= &quot;thanks.htm&quot; method= &quot;get&quot; > Search for: <input type= &quot;text&quot; name= &quot;q&quot; /> <br /> Choose a search engine: <br /> <select name= &quot;engine&quot; > <option value= &quot;google&quot; selected= &quot;selected&quot; > Google </option> <option value= &quot;yahoo&quot; > Yahoo </option> <option value= &quot;A9&quot; > A9 </option> </select> <br /> <input type= &quot;checkbox&quot; name= &quot;new&quot; checked= &quot;checked&quot; /> Checkbox that does nothing (sorry) <br /><input type= &quot;reset&quot; text= &quot;clear&quot; /> <input type= &quot;submit&quot; value= &quot;submit&quot; /> </form>
  45. 45. In-class Exercise <ul><li>Design a form that lists ice cream flavors </li></ul><ul><li>Ask the user to choose their favorite ice cream </li></ul>
  46. 46. Page and Form Layout <ul><li>Common use for HTML tables is for page layout </li></ul><ul><ul><li>Generally, programmers have no layout control over their pages </li></ul></ul><ul><ul><li>E.g. 2-column newspaper </li></ul></ul><ul><li>We’ll see later that <div> is also very useful, especially with CSS </li></ul><ul><li>border=&quot; 0 &quot; ( why? ) </li></ul><ul><li>td supports width , bgcolor , colspan attributes </li></ul>
  47. 47. Making Forms More Readable <ul><li>Example: Form for a restaurant survey </li></ul><ul><li>Need to rate things on scale of 1-5 </li></ul><ul><ul><li>Service </li></ul></ul><ul><ul><li>Food quality </li></ul></ul><ul><ul><li>Price </li></ul></ul>Layout
  48. 48. Example <html> <head> <title> Restaurant Survey </title> </head> <body bgcolor=&quot; lightyellow &quot;> <h1> Thank you! </h1> <p> Please fill out this survey </p> <form action=&quot; thanks.htm &quot;> <table> <tr><th> &nbsp; </th><th colspan=&quot; 2 &quot;> Lowest </th> <th> &nbsp; </th><th colspan=&quot; 2 &quot;> Highest </th></tr> <tr><th> &nbsp; </th><th> 1 </th><th> 2 </th> <th> 3 </th><th> 4 </th><th> 5 </th></tr> <tr><td> Service </td> <td><input type=&quot; radio &quot; name=&quot; service &quot;/></td> <td><input type=&quot; radio &quot; name=&quot; service &quot;/></td> <td><input type=&quot; radio &quot; name=&quot; service &quot;/></td> <td><input type=&quot; radio &quot; name=&quot; service &quot;/></td> <td><input type=&quot; radio &quot; name=&quot; service &quot;/></td></tr> <input type=&quot; submit&quot; value=&quot; submit&quot; /> </table> </form> </body></html>
  49. 49. Now we need the DIV and SPAN tags <ul><li>Recall <div> marks areas with a name </li></ul><ul><li><span> is similar, but works within a tag </li></ul><div class=&quot; header &quot;> <img class=&quot; watermark &quot; src=&quot; WUcolorMarkOnly.jpg &quot; width=&quot; 150 &quot; height=&quot; 150 &quot; alt=&quot; Whitworth - Founded 1890 &quot;> <img class=&quot; logo &quot; src=&quot; whit_main_logotype.gif &quot; width=&quot; 326 &quot; height=&quot; 137 &quot; alt=&quot; Whitworth - An Education of Mind & Heart &quot;> <p class=&quot; caption &quot;> Classroom Research conducted by Students in the Math and Computer Science Department at Whitworth University </p> </div> <ul><li>We will see that, by marking groups, we can easily make display changes </li></ul><span class=&quot; journaltitle &quot;><a name=&quot; CS374_2008 &quot;> Fall 2008 -- CS374: Database Management Systems </a></span> <span class=&quot; editor &quot;> Edited by Peter A. Tucker </span><br> Austin Abelar, <a href=&quot; 2008/CS374/Abelar.pdf &quot;> Parallel Query Processing Using Various Techniques of Multicore Technology </a><br>
  50. 50. What is CSS <ul><li>CSS – Cascading Style Sheets </li></ul><ul><li>Problem: HTML developers have little control of how things look </li></ul><ul><ul><li>Modifying a page’s format through HTML can be very messy </li></ul></ul><ul><li>Solution: Cascading style sheets </li></ul><ul><ul><li>tell the browser how to display objects </li></ul></ul><ul><li>Style sheets can be embedded in the HTML file or saved externally </li></ul><ul><li>We will focus on CSS1 </li></ul><ul><ul><li>More widely accepted than CSS2 </li></ul></ul>
  51. 51. Motivation – CS Student Research Page <ul><li>Page with a number of papers listed, by class </li></ul><ul><li>Three versions </li></ul><ul><ul><li>First , littered with table data tags to place items </li></ul></ul><ul><ul><li>Second and third , same HTML, different style sheets </li></ul></ul>
  52. 52. Next Motivation – CSS Zen Garden <ul><li>Zen Garden is a great illustration of the power of CSS </li></ul><ul><ul><li>www.csszengarden.com </li></ul></ul><ul><li>Let's take a look </li></ul>
  53. 53. CSS Syntax <ul><li>Values in a style sheet have the following syntax: selector {property: value} </li></ul><ul><li>Where: </li></ul><ul><ul><li>selector : the HTML tag to specify </li></ul></ul><ul><ul><li>property : the property of tag to set </li></ul></ul><ul><ul><li>value : the new value for that tag’s property </li></ul></ul><ul><ul><li>Semi-colon delimited list ( tag {p1: v1; p2: v2; …} ) </li></ul></ul>
  54. 54. Examples <ul><li>p {color: green} </li></ul><ul><ul><li>Make contents of <p> green typeface </li></ul></ul><ul><li>p { text-align: center; color: green } </li></ul><ul><ul><li>Multiple property settings ( <p> centered, green) </li></ul></ul><ul><li>h1,h2,h3,h4,h5,h6,p { text-align: center; color: green } </li></ul><ul><ul><li>Grouping of multiple tags </li></ul></ul>
  55. 55. Applying CSS <ul><li>Embedded in HTML page ( Internal ) </li></ul><ul><li>Linked into HTML page ( External ) </li></ul><head> <title> Simple CSS Test</ title> <style type= &quot;text/css&quot; > h1,h2,h3,h4,h5,h6,p {text-align: center; color: green} </style> </head> <head> <title> Simple CSS Test </title> <link rel= &quot;stylesheet&quot; type= &quot;text/css&quot; href= &quot;simple.css&quot; /> </head> Internal External h1,h2,h3,h4,h5,h6,p { text-align : center; color : green}
  56. 56. In-class Exercise <ul><li>Construct a style sheet internally to one of your existing web pages </li></ul><ul><ul><li>Choose tags, and some color </li></ul></ul><ul><ul><li>Reload it in a browser </li></ul></ul><ul><li>Construct an external style sheet </li></ul><ul><ul><li>Write it using any text editor (notepad, Expression Web, VS.NET, …) </li></ul></ul><ul><ul><li>Link it into another one of your existing web pages </li></ul></ul><ul><ul><li>Hang onto these files for later work </li></ul></ul>
  57. 57. CSS Classes <ul><li>We may not want a single style for all instances of a tag </li></ul><ul><ul><li>E.g. <p> is very common </li></ul></ul><ul><li>Classes specify different kinds of styles for a tag </li></ul><ul><ul><li>Syntax: selector.class {prop: val} </li></ul></ul><ul><li>Usage: </li></ul><ul><li>Both selector and class are optional </li></ul><ul><ul><li>Missing selector: applies to all tags with class=“c” </li></ul></ul><ul><ul><li>Missing class: applies to all instances of a tag </li></ul></ul><ul><ul><li>p.right {text-align: right} p.center {text-align: center} </li></ul></ul><p class= &quot;right&quot; > Right-aligned </p> <p class= &quot;center&quot; > Centered </p>
  58. 58. Example <html> <head> <title> Simple CSS Test </title> <style type= &quot;text/css&quot; > .global {color: darkred} p {color: green} p.center {text-align: center} p.right {text-align: right} p.left {text-align: left} </style> </head> <body> <h1 class= &quot;global&quot; > Heading for this page </h1> <p class= &quot;center&quot; > Cool Main Title in the Center </p> <p class= &quot;left&quot; > Interesting text on the left </p> <p class= &quot;right&quot; > other stuff on the right </p> <h4> is this blue? </h4> </body> </html> Classes
  59. 59. Inline Styles <ul><li>We can also embed styles into a single tag </li></ul><ul><ul><li>We lose many advantages of style sheets </li></ul></ul><ul><ul><li>Limited use </li></ul></ul><ul><li>Syntax: <tag style=&quot; p1:v1; p2:v2 &quot;> </li></ul><ul><li>Example: </li></ul><p style= &quot;color: sienna; margin-left: 20px&quot; > This is a paragraph </p>
  60. 60. Which style to choose <ul><li>Possible conflict of styles </li></ul><ul><ul><li>external vs. internal vs. inline </li></ul></ul><ul><li>Order: </li></ul><ul><ul><li>Browser default </li></ul></ul><ul><ul><li>External Style Sheet </li></ul></ul><ul><ul><li>Internal Style Sheet (inside the <head> tag) </li></ul></ul><ul><ul><li>Inline Style (inside HTML element) </li></ul></ul>
  61. 61. OK, Now We Need Specifics <ul><li>We know how to use CSS </li></ul><ul><li>Real Power – one CSS file controls pages on entire site </li></ul><ul><ul><li>Easy to update entire look </li></ul></ul><ul><li>What are the possibilities? </li></ul><ul><ul><li>What properties can be set for various tags? </li></ul></ul>
  62. 62. Background Property Description Values background-attachment Does background image scroll? scroll fixed background-color Background color color-rgb color-# color-name transparent background-image URL to image url background-position Position of background image top right top left … background-repeat Is image repeated? How? repeat repeat-x …
  63. 63. Example <html> <head> <title>Simple CSS Test</title> <style type=&quot; text/css &quot;> p.bcolor {background-color: lightgrey} p.bgimage { background-image: url( 'main_logo.gif' ); background-position: center; background-repeat: no-repeat; } </style> </head> <body> <h1> CSS TEST </h1> <p class=&quot; bcolor &quot;> This is a simple test of style sheets </p> <p class=&quot; bgimage &quot;> This is <br> another <br> simple <br> test <br> of style <br> sheets </p> </body> </html> Backgrounds
  64. 64. Another Example <html> <head> <title> Simple CSS Test </title> <style type =&quot;text/css&quot; > p.lgrey { background-color: lightgrey } p.orange { text-align: center ; color: orange ; font-weight: bolder ; } body { background-image: url('http://www.whitworth.edu/…/Logo.gif') ; background-position: center ; background-repeat: no-repeat ; } </style> </head> <body> <h1> CSS TEST </h1> <p class =&quot;lgrey&quot; > This is a simple test of style sheets </p> <p class =&quot;orange&quot; > This is <br> another <br> simple <br> test <br> of style <br> sheets </p> </body> </html> Background2
  65. 65. In-class Exercise <ul><li>Experiment with the background settings </li></ul><ul><ul><li>Use different browsers </li></ul></ul>Property Description Values background-attachment Does background image scroll? scroll fixed background-color Background color color-rgb color-# color-name transparent background-image URL to image url background-position Position of background image top right top left … background-repeat Is image repeated? How? repeat repeat-x …
  66. 66. Text Property Description Values color Text color color-rgb color-# color-name letter-spacing Spacing between letters normal Length text-align Aligns text in element left right center justified word-spacing Spacing between words normal length
  67. 67. Example <html> <head> <title> Simple CSS Test </title> <style type=&quot; text/css &quot;> p.squish {letter-spacing: -5px} p.expand {letter-spacing: 25px} p.wrdspace { word-spacing: 20px} </style> </head> <body> <h1> CSS TEST </h1> <p class=&quot; squish &quot;> This is a simple test </p> <p class=&quot; expand &quot;> This is a simple test </p> <p class=&quot; wrdspace &quot;> This is another simple test </p> </body> </html> Texts
  68. 68. In-class Exercise <ul><li>Experiment with the text settings </li></ul>Property Description Values color Text color color-rgb color-# color-name letter-spacing Spacing between letters normal Length text-align Aligns text in element left right center justified word-spacing Spacing between words normal length
  69. 69. Font Property Description Values font-family Prioritized, comma-separated list of font names family-name generic-name font-size Size of font xx-small … xx-large font-style Style of font normal italic oblique font-variant Small-caps? normal small-caps font-weight Weight of a font normal bold bolder lighter
  70. 70. Example <html> <head> <title> Simple CSS Test </title> <style type =&quot;text/css&quot; > body { font-family: &quot;Bookman Old Style&quot;, Arial, Helvetica, sans-serif } p.ariel { font-family: sans-serif } p.code { font-family: courier } </style> </head> <body> <h1> CSS TEST </h1> <p class =&quot;ariel&quot; > This is a simple test of style sheets </p> <p class =&quot;code&quot; > This is a simple test of style sheets </p> <p> This is another simple test of style sheets </p> </body> </html> Fonts
  71. 71. In-class Exercise <ul><li>Experiment with the font settings </li></ul>Property Description Values font-family Prioritized, comma-separated list of font names family-name generic-name font-size Size of font xx-small … xx-large font-style Style of font normal italic oblique font-variant Small-caps? normal small-caps font-weight Weight of a font normal bold bolder lighter
  72. 72. Border Property Description Values border-color Color for border color border-style Style for border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-width Width of all four borders thin medium thick border-XXXX-YYYY Specific border settings XXXX={left, right, top, bottom} YYYY={color, style, width}
  73. 73. Example <html> <head> <title> Simple CSS Test </title> <style type =&quot;text/css&quot; > th { border-width : thick; border-style : ridge; } td { border-style : dashed; border-color : darkslategray; } p { border-bottom-style : outset; background-color : lightyellow; color : darkslategray; } </style> </head> <body> <p> CS301 - Internet Application Development </p> <table> <tr> <th> Title </th> <th> Author </th> <th> Track </th> </tr> <tr> <td> Foundation Flash CS3 for Designers </td> <td> T. Green, D. Stiller </td> <td> Flash </th> </tr> <tr> <td> ASP.NET 3.5 Unleashed </td> <td> S. Walther </td> <td> ASP.NET </th> </tr> </table> </body> </html> Borders
  74. 74. In-class Exercise <ul><li>Experiment with borders </li></ul>Property Description Values border-color Color for border color border-style Style for border none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-width Width of all four borders thin medium thick border-XXXX-YYYY Specific border settings XXXX={left, right, top, bottom} YYYY={color, style, width}
  75. 75. Lists Property Description Values list-style-image Image for items in a list none url list-style-position Where marker should be located inside outside list-style-type Type of marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana
  76. 76. Example <html> <head> <title> NFL Standings </title> <style type=&quot; text/css &quot;> ul {list-style-type: hebrew } ul.nfc {list-style-image: url(' NFC.gif ')} ul.afc {list-style-image: url(' AFC.gif ')} </style></head> <body> <h1> NFL Standings as of 21 December 2006 </h1> Conferences: <ul> <li> NFC <ul class=&quot; nfc &quot;> <li> NFC East </li> <li> NFC North </li> <li> NFC South </li> <li> NFC West </li> </ul></li> <li> AFC <ul class=&quot; afc &quot;> <li> AFC East </li> <li> AFC North </li> <li> AFC South </li> <li> AFC West </li> </ul></li> </ul> Lists
  77. 77. In-class Exercise <ul><li>Experiment with lists </li></ul>Property Description Values list-style-image Image for items in a list none url list-style-position Where marker should be located inside outside list-style-type Type of marker none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana
  78. 78. Dimension Property Description Values height Height of an image auto length % width Width of an image auto length % line-height Height of lines normal number length %
  79. 79. Example <html> <head> <title> Simple CSS Test </title> </head> <body> <h1 style=&quot; text-align: center; color: darkred &quot;> Go Bucs! </h1> <p style=&quot; text-align: center &quot;> <img src=&quot; main_logo.gif &quot;></img> </p> <p style=&quot; text-align: center &quot;> <img src=&quot; main_logo.gif &quot; style=&quot; width: 50; height: 50 &quot;> </img> <img src=&quot; main_logo.gif &quot; style=&quot; width: 100; height: 100 &quot;> </img> <img src=&quot; main_logo.gif &quot; style=&quot; width: 150; height: 150 &quot;> </img> <img src=&quot; main_logo.gif &quot; style=&quot; width: 200; height: 200 &quot;> </img> </p> </body> </html> Dimensions
  80. 80. Pseudo-classes <ul><li>Some selectors can have special effects </li></ul><ul><li>Anchor (<a>) is one such selector </li></ul><ul><ul><li>It supports link, visited, hover and active </li></ul></ul><ul><ul><li>Note: a:hover MUST come after a:link </li></ul></ul><ul><ul><li>Note: a:active MUST come after a:hover </li></ul></ul><ul><li>We may want different behaviors for each case </li></ul><ul><li>Syntax: </li></ul><ul><ul><li>selector:pseudo-class {property: value} </li></ul></ul><ul><ul><li>selector.class:pseudo-class {property: value} </li></ul></ul>
  81. 81. Example 1 <html> <head> <style type=&quot;text/css&quot;> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href=&quot; http://www.whitworth.edu &quot;> This is a link </a></b></p> <p><b> Note: </b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! </p> <p><b> Note: </b> a:active MUST come after a:hover in the CSS definition in order to be effective!! </p> </body> </html> Slightly modified from W3Schools.com anchor1
  82. 82. Example 2 <html><head> <style type=&quot;text/css&quot;> a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} </style> </head> <body> <p> Mouse over the links to see them change layout. </p> <p><b><a class=&quot;one&quot; href=&quot;default.asp&quot;> changes color </a></b></p> <p><b><a class=&quot;two&quot; href=&quot;default.asp&quot; > changes font-size </a></b></p> <p><b><a class=&quot;three&quot; href=&quot;default.asp&quot;> changes background-color </a></b></p> <p><b><a class=&quot;four&quot; href=&quot;default.asp&quot;> changes font-family </a></b></p> </body> </html> anchor2 Slightly modified from W3Schools.com
  83. 83. Final word on div tag <ul><li>The <div> tag allows positioning of a group of HTML elements </li></ul>. classes { position: fixed ; width: 170px ; top: 250px ; font-style: oblique ; } . papers { text-align: left ; position: relative ; left: 190px ; } < div class= &quot;classes&quot; >< p > < a href= &quot;#top&quot; >top</ a > < br > < a href= &quot;#CS374_2008&quot; >CS374: Fall 2008</ a > < br > < a href= &quot;#CS499_2008&quot; >CS499: Spring 2008</ a > < br > < a href= &quot;#CS374_2007&quot; >CS374: Fall 2007</ a > < br > < a href= &quot;#CS374_2006&quot; >CS374: Fall 2006</ a > < br > < a href= &quot;#MA430_2006&quot; >MA430W: Spring 2006</ a >< br > < a href= &quot;#CS499_2006&quot; >CS499: Spring 2006</ a > < br > < a href= &quot;#CS374_2005&quot; >CS374: Fall 2005</ a > < br > </ p ></ div > < div class= &quot;papers&quot; > … </ div > Student Research
  84. 84. Final word on span tag <ul><li>The <span> tag also allows you to apply classes within a tag </li></ul><ul><ul><li>No effect on style of text ( <div> includes <p> ) </li></ul></ul>. journaltitle { font-size: large ; font-weight: bold ; color: black ; font-variant: small-caps ; } . editor { font-size: small ; font-style: italic ; font-variant: small-caps ; color: black ; } < span class= &quot;journaltitle&quot; > < a name= &quot;CS374_2008&quot; >Fall 2008 -- CS374: Database Management Systems </ a > </ span > < span class= &quot;editor&quot; >Edited by < a href= &quot;http://www.whitworth.edu/...&quot; > Peter A. Tucker </ a > </ span >< br > Student Research
  85. 85. We want to control what happens with form data <ul><li>Currently our form just sends results to Google </li></ul><ul><li>It's more fun if we can control how the data is processed </li></ul><ul><ul><li>We sure don't want login information to go to Google </li></ul></ul><ul><ul><li>We would really like to store customer information in our own database </li></ul></ul><ul><ul><li>For example, what if users could select their search engine? </li></ul></ul><ul><li>We need a way to respond to form inputs </li></ul><ul><ul><li>Must happen on the server </li></ul></ul><ul><ul><li>Many server-side options: Perl, PHP, Python, ASP.NET </li></ul></ul><ul><li>We’ll take a quick tour of PHP to handle our form results </li></ul>
  86. 86. Server basics <ul><li>HTML file is requested by user </li></ul><ul><li>Request travels over internet </li></ul><ul><li>Internet server locates file and responds </li></ul>Internet Internet Server Software file.html <html> <body> <p>Hello World!</p> </script> </body> </html>
  87. 87. A Brief Word on PHP <ul><li>PHP is a C-like language that runs on the internet server (CS1 for us) </li></ul><ul><li>PHP scripts are embedded in HTML code </li></ul><ul><ul><li>File extension .php </li></ul></ul><ul><ul><li>Inside <?php … ?> tag </li></ul></ul><ul><li>A script’s output is pasted into the HTML </li></ul>Internet Internet Server Software PHP Interp myfile.php <html> <body> <p>Hello World!</p> </body> </html> <html> <body> <?php echo &quot;<p>Hello World!</p>&quot;; > </script> </body> </html>
  88. 88. Simple PHP script <html> <head> <title> Simple PHP </title> </head> <body> </body> </html> Simple PHP <p>Hello world</p> PHP Interpreter <?php echo &quot; <p>Hello world</p> &quot;; ?> IIS myfile.php
  89. 89. Main Motivation – Processing Form Data <ul><li>We really want that data that users gave us </li></ul><ul><ul><li>Don’t just send it to Google! </li></ul></ul><ul><li>The input names will be useful </li></ul><ul><ul><li>We can use $_REQUEST to read that data </li></ul></ul>
  90. 90. Handling Input Example <html> <head> <title> Simple PHP </title> </head> <body> <?php echo &quot;<p>Hello world</p> &quot;; if (isset($_REQUEST[&quot;name&quot;])) { echo &quot;<p>Welcome back &quot; . $_REQUEST[&quot;name&quot;]; } else { ?> <form action=&quot;name.php&quot; method=&quot;GET&quot;> <input type=&quot;textbox&quot; name=&quot;name&quot;> <br /><input type=&quot;submit&quot; value=&quot;Login&quot;> </form> <?php } ?> </body> </html> Name PHP
  91. 91. Scripting on the Client <ul><li>We would like an interactive web page </li></ul><ul><ul><li>For example, input validation </li></ul></ul><ul><li>HTML is static </li></ul><ul><ul><li>Nothing changes </li></ul></ul><ul><li>Server-side scripting gave some interactivity </li></ul><ul><ul><li>But required trips to the server and back </li></ul></ul><ul><li>Client-side scripting languages give us more flexibility </li></ul><ul><ul><li>Processed by browser – no trips to the server and back </li></ul></ul><ul><ul><li>Many languages (VBScript, JavaScript, DHTML) </li></ul></ul><ul><ul><li>We’ll focus on JavaScript </li></ul></ul>
  92. 92. JavaScript Basics <ul><li>JavaScript is a simple programming language </li></ul><ul><ul><li>It is not Java </li></ul></ul><ul><li>JavaScript is embedded in HTML </li></ul><ul><li>Most browsers support JavaScript </li></ul><ul><ul><li>Though not all! </li></ul></ul>
  93. 93. What can we do in JavaScript? <ul><li>JavaScript is a programming language for HTML developers </li></ul><ul><ul><li>Like us </li></ul></ul><ul><li>JavaScript can … </li></ul><ul><ul><li>dynamically put text into an HTML page </li></ul></ul><ul><ul><li>react to events </li></ul></ul><ul><ul><li>read and write HTML elements </li></ul></ul><ul><ul><li>be used to validate data </li></ul></ul>
  94. 94. Embedding JavaScript <ul><li>JavaScript is embedded anywhere in HTML using the <script> tag </li></ul><ul><li>For now, we will only put code in the <body> section </li></ul><ul><ul><li>We’ll see other options later </li></ul></ul><ul><li>For example, the following outputs “Hello World!” on a web page: </li></ul><html> <body> <script type=&quot; text/javascript &quot;> document.write(&quot; <p>Hello World!</p> &quot;); </script> </body> </html> hello.html
  95. 95. Input Validation <ul><li>OK, now for the most common use for JavaScript </li></ul><ul><li>A form has a number of fields </li></ul><ul><li>Some are required, others are not </li></ul><ul><li>If we send all the data to the server, then validate, we waste time </li></ul><ul><ul><li>If there is invalid input, then we should try to catch it before going to the server </li></ul></ul><ul><li>JavaScript can do this for us </li></ul>
  96. 96. JavaScript Input Validation <ul><li>Requirements </li></ul><ul><ul><li>JavaScript function that: </li></ul></ul><ul><ul><ul><li>returns true if all inputs are valid </li></ul></ul></ul><ul><ul><ul><li>returns false if any input is invalid </li></ul></ul></ul><ul><ul><li>Form has a name associated with it </li></ul></ul><ul><ul><li>Form uses the JavaScript function for its onSubmit event <form name=&quot; myform &quot; … onSubmit=&quot; return fn() &quot;> </li></ul></ul><ul><ul><li>Input control values can be accessed in JavaScript: document.myform.myinput.value </li></ul></ul>Email
  97. 97. Example <html> <head> <title> Personal Information </title> <script language=&quot; JavaScript &quot;> function validate_email() { if (document.email_addr.email.value == &quot;&quot; ){ alert( &quot; Email must be filled out! &quot; ) document.email_addr.email.focus() return false } else { return true } } </script> </head> <body> <form name=&quot; email_addr &quot; action=&quot; thanks.htm &quot; action=&quot; get &quot; onsubmit=&quot; return validate_email() &quot;> Email: <input type=&quot; text &quot; name=&quot; email &quot;/> <input type=&quot; submit &quot; value=&quot; submit &quot;/> </form> </body> </html>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×