Week 2

1,367 views
1,309 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,367
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Separation of presentation and structure (CSS and HTML);Separation of behavior and structure (JavaScript and HTML);Separation of behavior and presentation (JavaScript and CSS)
  • Week 2

    1. 1. Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 1
    2. 2. Some More About You
    3. 3. Median Rank 4 n = 37 3 2 2 2 2 1 1HTML CSS Javascript PhP MySQL Design SEO Mobile Apps
    4. 4. A Message From The Dean
    5. 5. Recap• Introductions• Class Objectives• XAMPP Review• Stuff about WWW & HTML• HTML Crash Course sections – Introduction to HTML – How to code a Web Page (partial)
    6. 6. Agenda• Continue HTML Crash Course sections – How to code a Web Page – How to code tables• CSS Crash Course sections – Introduction to CSS – How to work with CSS – How to code selectors – How to work with text & lists
    7. 7. Some stuff about Today• We will build and style Mike’s Bait & Tackle shop web app (pages 173-7) – Home page: index.html – About us page: about.html• You will need to use 2 image files emailed to you. – face.jpg – star.gif• For homework you will (1) refactor CSS code and create separate external link and (2) you will apply CSS styling to table in about.html in same fileMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 7
    8. 8. The HTML for home and about us pages <!DOCTYPE html> <html lang="en"> <!-- the head section --> <head> <title>Mikes Bait and Tackle Shop</title> <meta charset="UTF-8" /> </head> <!-- the body section --> <body> <section id="page">Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 8
    9. 9. The HTML for home and about us pages <header id="header"> </header> <section id="main"> <nav id="sidebar"> </nav> <article id="content"> </article> </section> <footer id="footer"> </footer> </section> </body> </html>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 9
    10. 10. Chapter 4 A crash course in XHTML*Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 10
    11. 11. *Updates for this class• XHMTL rules supersede by HTML5 and will be noted where appropriateMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 11
    12. 12. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes Þ Text Þ Lists · How to code tables · How to code formsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 12
    13. 13. Tags that create lists Tag Description <ul> Creates an unordered list. <ol> Creates an ordered list. <li> Creates a list item for an unordered or ordered list. <dl> Creates a definition list. It contains pairs of <dt> and <dd> tags. <dt> Creates a term in a definition list. <dd> Creates a definition in a definition list that’s indented.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 13
    14. 14. Examples of list tags <ul> <li>Unordered List</li> <li>Ordered List</li> <li>Definition List</li> </ul> <ol> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <dl> <dt>Local Area Network</dt> <dd>A network of computers directly connected to each other.</dd> <dt>Wide Area Network</dt> <dd>A network of LANs connected by routers.</dd> </dl>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 14
    15. 15. The lists in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 15
    16. 16. A little more about Lists1. Go to a breakfast meeting. <ol>2. Get a haircut at lunch. <li>Go to a breakfast meeting.</li>3. Go shopping after work and <li>Get a haircut at lunch.</li> buy: <li>Go shopping after work and buy: • French’s Frogs’ Legs <ul> • Spamburger Helper <li>Frenchs Frogs Legs</li> • Chemical Cola <li>Spamburger Helper</li> • Bucket of Lowfat Lard <li>Chemical Cola</li> <li>Bucket of Lowfat Lard</li> </ul> </li> </ol>
    17. 17. Exercise #2
    18. 18. The HTML list for the home page <article id="content"> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phils Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel – Black</li> </ul>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 18
    19. 19. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes Þ Text Þ Lists Þ Special Characters · How to code tables · How to code formsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 19
    20. 20. Common XHTML character entities Entity Character &amp; & &lt; < &gt; > &copy; © &reg; ® &trade; ™ &cent; ¢ &deg; º &plusmn; ± &nbsp; A non-breaking space that will always be displayed.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 20
    21. 21. Examples of character entities <h1>Mikes Bait &amp; Tackle Shop</h1> <p>Here is some sample HTML code:</p> <p><code>&lt;h1&gt;Heading 1 Goes Here&lt;/h1&gt;</code></p> <p>&nbsp;</p> <p>&copy; 2008 Mikes Bait &amp; Tackle Shop</p> The character entities in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 21
    22. 22. Exercise #3
    23. 23. The HTML for home and about us pages <head> <title>Mikes Bait &amp; Tackle Shop</title> <body> </section> <footer id="footer"> <p class="copyright">&copy; 2008 Mikes Bait &amp Tackle Shop</p> </footer>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 23
    24. 24. The HTML for the home page <article id="content"> <p class="first">Welcome to Mikes Bait &amp; Tackle Shop! We have all the gear youll need to make Your next fishing trip a great success!</p> <h2>New Products</h2> <ul> <li>Ultima 3000 Two-handed fly rod</li> <li>Phils Faux Shrimp Fly - Size 6</li> <li>Titanium Open Back Fly Reel – Black</li> </ul>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 24
    25. 25. The HTML for about us page <article id="content"> <h2 class="first">Sales</h2> <p>Big Mike says sales hit an all time high!</p> <p>&nbsp;</p>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 25
    26. 26. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes Þ Text Þ Lists Þ Special Characters Þ Links · How to code tables · How to code formsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 26
    27. 27. Attributes of the <a> tag Attribute Description href Specifies the URL for a link. target Specifies where the destination document should be loaded. name Creates an anchor within a web page.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 27
    28. 28. An absolute link to a web page on a different web site <p>Search for our books on <a href="http://www.amazon.com" target="_blank">Amazon.com</a>. </p>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 28
    29. 29. A document relative relative link to another web page in a different directory on our web site <p>Go view our <a href="../products.html">product list</a>.</p> A document relative link to another web page in the same directory on our web site <p>Read about the <a href="/services.html">services we provide</a>.</p>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 29
    30. 30. The <a> tags in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 30
    31. 31. More on Document Relative LinksDocument-relative links use directions from the source page to the destinationpage.Creating hyperlinks from sourcepage.html to other pages in thesite when Destination page is in the same directory folder assource page <a href="page1.html">Go To Page 1</a>Adapted from MediaCollege.com
    32. 32. More on Document Relative LinksDocument-relative links use directions from the source page to the destinationpage.Creating hyperlinks from sourcepage.html to other pages in thesite when Destination page is in a folder inside the sourcepages folder <a href="directory2/page2.html">Go To Page 2</a>Adapted from MediaCollege.com
    33. 33. More on Document Relative LinksDocument-relative links use directions from the source page to the destinationpage.Creating hyperlinks from sourcepage.html to other pages in thesite when destination page is in a folder outside the sourcepages folder using special instruction (../) <a href="../directory3/page3.html">Go To Page 3</a> <a href="../../index.html">Go To The Index Page</a>Adapted from MediaCollege.com
    34. 34. Site-Root Relative Links Site-root-relative links use a single forward-slash ( / ) to signify the instruction The link begins at the same level as your domain (mysite.com) and works down the path <a href="/main-directory/directory4/page4.html">Go To Page 4</a>Adapted from MediaCollege.com
    35. 35. Exercise #4
    36. 36. The HTML for home page <nav id="sidebar"> <ul class="nav"> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="about.html">About Us</a></li> </ul> Q: What type of link are these?Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 36
    37. 37. The HTML for About Us page <nav id="sidebar"> <ul class="nav"> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="index.html">Home</a></li> </ul>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 37
    38. 38. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes Þ Text Þ Lists Þ Special Characters Þ Links Þ Images · How to code tables · How to code formsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 38
    39. 39. Attributes of the <img> tag Attribute Description src The URL of the image to display. alt Alternate text to display in place of the image. This text is read aloud by screen readers. longdesc A long description of the image. height The height to use for the image in pixels or a percentage. width The width to use for the image in pixels or a percentage.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 39
    40. 40. An <image> tag <p><img src="../images/logo.gif" alt="Murach Logo" /></p> The image in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 40
    41. 41. Image files
    42. 42. Image formats supported by most browsers GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 42
    43. 43. Exercise #5
    44. 44. The HTML for about us page <article id="content"> <h2 class="first">Sales</h2> <p>Big Mike says sales hit an all time high!</p> <img src="face.jpg" alt="Mikes Face"> <p>&nbsp;</p>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 44
    45. 45. Agenda · Introduction to HTML · How to code a Web Page · How to code tables · How to code formsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 45
    46. 46. The tags for working with tables Tag Description <table> Marks the start and end of a table. <tr> Marks the start and end of each row. <th> Marks the start and end of each heading cell within a row. <td> Marks the start and end of each data cell within a row.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 46
    47. 47. Common attributes of the <table> tags Attribute Description border The thickness of the cell borders in pixels. cellspacing The space between table cells in pixels. cellpadding The padding between the cell borders and the contents of the cells. width The width of the table in pixels or a percentage. summary A text description of the contents of the table. Common attributes of the <table> and <tr> tags Attribute Description align Controls the horizontal alignment of the content in the row. valign Controls the vertical alignment of the content in the row.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 47
    48. 48. A little more on TablesTables are built horizontally, one row at a time – Rows get divided into columnsThe content of a table is not shown until the entire table isloaded – If you have extremely long pages, you should divide it into two or more tables - allows the user to start reading the upper content while the rest of the page is loading.
    49. 49. The tags for a simple table <table border="1" cellspacing="1" cellpadding="3" summary="First Quarter Sales By Region"> <tr align="center"> <th>Region</th> <th>Jan</th> <th>Feb</th> </tr> <tr align="right"> <th>West</th> <td>$15,684.34</td> <td>$18,467.86</td> </tr> <tr align="right"> <th>Central</th> <td>$22,497.14</td> <td>$13,371.34</td> </tr> </table>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 49
    50. 50. The table in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 50
    51. 51. Common attributes of the <th> and <td> tags Attribute Description colspan Causes a cell to span multiple columns. rowspan Causes a cell to span multiple rows. align Controls the horizontal alignment of the content of the cell. valign Controls the vertical alignment of the content of the cell.Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 51
    52. 52. A table with spanned columns and rows <table border="1" cellspacing="1" cellpadding="5" summary="First Quarter Sales By Region"> <tr align="center"> <th colspan="2" rowspan="2">Sales</th> <th colspan="3">First Quarter</th> </tr> <tr align="center"> <th>Jan</th> <th>Feb</th> <th>Mar</th> </tr> <tr align="right"> <th rowspan="3">Regions</th> <th>West</th> <td>$15,684.34</td> <td>$18,467.86</td> <td>$17,379.67</td> </tr>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 52
    53. 53. The table tags (continued) <tr align="right"> <th>Central</th> <td>$22,497.14</td> <td>$13,371.34</td> <td>$25,693.80</td> </tr> <tr align="right"> <th>East</th> <td>$25,741.06</td> <td>$31,633.25</td> <td>$26,712.55</td> </tr> </table>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 53
    54. 54. The table in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 54
    55. 55. Exercise #6
    56. 56. The HTML for about us page <article id="content"> <h2 class="first">Sales</h2> <p>Big Mike says sales hit an all time high!</p> <img src="face.jpg" alt="Mikes Face"> <p>&nbsp;</p> <table border="1" cellspacing="1" cellpadding="5" summary="First Quarter Sales By Region"> <tr align="center"> <th colspan="2" rowspan="2">Sales</th> <th colspan="3">First Quarter</th> </tr> <tr align="center"> <th>Jan</th> <th>Feb</th> <th>Mar</th> </tr>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 56
    57. 57. The HTML for about us page <tr align="right"> <th rowspan="3">Regions</th> <th>West</th> <td>$15,684.34</td> <td>$18,467.86</td> <td>$17,379.67</td> </tr> <tr align="right"> <th>Central</th> <td>$22,497.14</td> <td>$13,371.34</td> <td>$25,693.80</td> </tr> <tr align="right"> <th>East</th> <td>$25,741.06</td> <td>$31,633.25</td> <td>$26,712.55</td> </tr> </table>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 57
    58. 58. HTML5 &The Document Object Model
    59. 59. Web Technology Stack Data – What does it know? Behavior – What does it do? Behavior – What does it do? Presentation – What does it look like? Structure – What does this logically mean? Richness of theExperience
    60. 60. Quiz: Logical or Presentationsource: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
    61. 61. Quiz: Logical or Presentationsource: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
    62. 62. The stillbirth of Cascading Style Sheets• Created and did not published) style sheet language when inventing HyperText Markup Language in 1990 – Fundamental belief: User will want to control the styling
    63. 63. Reasons why CSS is the bastard child• Browsers implemented CSS incorrectly and patchy CSS support creates inconsistencies• Authors lack of familiarity with CSS syntax and required techniques• Poor support from authoring tools
    64. 64. Chapter 5 A crash course in CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 67
    65. 65. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 68
    66. 66. A web page before CSS has been appliedMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 69
    67. 67. The same page after CSS has been appliedMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 70
    68. 68. Agenda · Introduction to CSS · How to work with CSS Þ Basic Syntax · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 71
    69. 69. The parts of a CSS rule set selector h1 { color: blue; font-size: 14pt; declaration } property valueMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 72
    70. 70. Another CSS rule set body { margin-top: 0; background-color: dodgerBlue; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; } A CSS rule set with a complex selector h1, #footer, .gray { color: gray; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 73
    71. 71. A CSS comment /* This is a CSS comment */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 74
    72. 72. Terms · rule set – consists of a selector and declaration block · selector – HTML identifier · declaration block – a list of declarations · declaration – a property/value pair · property – attribute of a style · value – characteristic of the propertyMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 75
    73. 73. Agenda · Introduction to CSS · How to work with CSS Þ Basic Syntax Þ Linking · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 76
    74. 74. Two ways to include an external style sheet With the <link> tag (the best practice) <head> <link rel="stylesheet" href="../styles/main.css" /> </head> With the <style> tag and the @import directive <head> <style> @import "../styles/main.css";</style> </head>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 77
    75. 75. Embedding styles (not recommended) Embedding a style sheet in the head section <head> <style> h1 { color: blue; font-size: 14pt; } </style> </head> Using the style attribute of an inline tag <span style="color: red; font-size: 14pt;"> Warning!</span>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 78
    76. 76. Including external style sheets for specific media Including a style sheet for printing the page <link rel="stylesheet" href="../styles/main_print.css" media="print" /> Including a style sheet for a handheld device <link rel="stylesheet" href="../styles/main_handheld.css" media="handheld" />Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 79
    77. 77. CSS Media (Device) TypeType Description all All media type devices aural Speech and sound synthesizers braille Braille tactile feedback devices embossed Paged braille printers handheld Small or handheld devices print Printers projection Projected presentations (slides) screen Computer screens tty Fixed-pitch character grid devices (teletypes and terminals) tv Television-type devices
    78. 78. Agenda · Introduction to CSS · How to work with CSS Þ Basic Syntax Þ Linking Þ Measurements · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 81
    79. 79. Common units of measurement Symbol Name Type px pixels absolute pt points absolute em ems relative % percentages relative Four ways to specify font size font-size: 12pt; font-size: 16px; font-size: 1em; font-size: 100%; Two ways to specify width width: 760px; width: 80%;Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 82
    80. 80. Agenda · Introduction to CSS · How to work with CSS Þ Basic Syntax Þ Linking Þ Measurements Þ Colors · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 83
    81. 81. Three ways to specify colors With a color name color: silver; With an RGB (red-green-blue) value color: rgb(50%, 25%, 25%); color: rgb(128, 64, 64) /* Using three integers from 0 to 255 */ With an RGB value that uses hexadecimal numbers color: #cd5c5c; color: #a6f; /* Expands to #aa66ff */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 84
    82. 82. Agenda · Introduction to CSS · How to work with CSS · How to code selectors Þ Basic selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 85
    83. 83. Elements that can be selected by tag, id, or class <body> <div id="main"> <p>Here is a list of links:</p> <ul class="nav"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> </ul> </div> <div id="footer"> <p class="copyright inactive">Copyright 2009</p> </div> </body>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 86
    84. 84. CSS rule sets that select by tag, id or class Tag body { font-family: Arial, sans-serif;} Id #main { border: 2px solid black; padding: 0.2em;} Class .nav { list-style-type: square; } .copyright { text-align: right; } .inactive { color: gray; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 87
    85. 85. The elements displayed in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 88
    86. 86. A little more on tag-based selectors CSS rule sets that select by tag em { color: blue; }Adapted from Maxdesign.com.au
    87. 87. A little more on class-based selectors CSS rule sets that select by class .big {font-size: 110%; font-weight: bold;}Adapted from Maxdesign.com.au
    88. 88. Agenda · Introduction to CSS · How to work with CSS · How to code selectors Þ Basic selectors Þ Advance selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 91
    89. 89. Other ways to code selectors The universal selector * { color: black; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 92
    90. 90. A little more on universal selector * { color: blue; }Adapted from Maxdesign.com.au
    91. 91. Other ways to code selectors Descendant elements #footer p { font-size: 10pt; } ul a { color: green; } ul * { color: green; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 94
    92. 92. A little more on descendent selectors p em { color: blue; } ul em { color: blue; } Adapted from Maxdesign.com.au
    93. 93. Other ways to code selectors Child elements #main > p { font-size: 12pt; } ul.nav > li { margin-left: 20px; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 96
    94. 94. A little more on Child Selectors div > em { color: blue; }Adapted from Maxdesign.com.au
    95. 95. Other ways to code selectors Attributes input[type=submit] { border: 1px solid black; color: white; background-color: blue; } Tag and class ul.nav { list-style-type: square; } Multiple selectors h1, h2, h3 { color: blue; } p, ul.nav > li { font-family: "Times New Roman", serif; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 98
    96. 96. Agenda · Introduction to CSS · How to work with CSS · How to code selectors Þ Basic selectors Þ Advance selectors Þ Pseudo-selectors · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 99
    97. 97. Pseudo-class selectors Name Description :link A link that hasn’t been visited. :visited A link that has been visited. :hover An element when the mouse is hovering over it. :active An element that’s currently active. :first-child An element that’s the first child element.Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 100
    98. 98. XHTML for pseudo-class selectors <div id="main"> <p>Welcome to Mikes Bait and Tackle Shop. We have all the gear youll need to make your next fishing trip a great success!</p> <ul class="nav"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> </ul> <p><a href="contact.html">Contact us</a> to place your order today!</p> </div>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 101
    99. 99. The CSS for pseudo-class selectors a:link { color: black; } a:visited { color: gray; } a:hover { font-weight: bold; } a:active { color: green; } #main > p:first-child { text-indent: 1em; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 102
    100. 100. The pseudo-class selectors in a web browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 103
    101. 101. Agenda · Introduction to CSS · How to work with CSS · How to code selectors Þ Selectors for tags, ids, & classes Þ Other types of selectors Þ Pseudo-selectors Þ How cascade rules work · How to work with text & lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 104
    102. 102. Cascade is postponed to later
    103. 103. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists Þ Styling Fonts · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 106
    104. 104. Three of the five generic font families Name Description serif Fonts with tapered, flared, or slab stroke ends. sans-serif Fonts with plain stroke ends. monospace Fonts that use the same width for each character. Examples of three common font families Times New Roman is a serif font. It is the default for most web browsers. Arial is a sans-serif font. It is widely used. Courier New is a monospace font.Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 107
    105. 105. How to specify a font family font-family: "Times New Roman", Times, serif; font-family: Arial, Helvetica, sans-serif; font-family: "Courier New", Courier, monospace; How to specify font styles, weights, and variants font-style: italic; font-weight: bold; font-variant: small-caps;Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 108
    106. 106. How to specify font size and line height font-size: 12pt; font-size: 150%; font-size: 1.5em; /* same as 150% for font-size */ line-height: 14pt; line-height: 120%; line-height: 1.2em; /* same as 120% for line-height */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 109
    107. 107. The syntax for the shorthand font property font: [style] [weight] [variant] size[/line-height] family; How to use the shorthand font property font: italic bold 14px/16px Arial, sans-serif; font: small-caps 150% "Times New Roman", Times, serif; font: 90%/120% "Comic Sans MS", Impact, sans-serif;Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 110
    108. 108. Exercise #8
    109. 109. The CSS for the home page body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 81.25%; line-height: 1.4em; } h1, h2 { font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font-size: 150%; } h2 { font-size: 120%; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 112
    110. 110. The CSS for the home page a { font-weight: bold; } .copyright { font-size: 80%; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 113
    111. 111. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists Þ Styling Fonts Þ Formatting Fonts · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 114
    112. 112. How to transform text text-transform: uppercase; Valid values uppercase lowercase capitalize none How to add decorations to text text-decoration: underline; Valid values underline overline line-through blink noneMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 115
    113. 113. How to indent the first line of text text-indent: 2em; text-indent: 25px; text-indent: 10%; How to horizontally align text text-align: left; Valid values left center right justifyMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 116
    114. 114. The XHTML for one heading and three paragraphs <h3>Mikes Bait &amp; Tackle Shop</h3> <p>We have all the gear youll need to make your next fishing trip a great success!</p> <p class="contact"><a href="contact.html">Contact us</a> to place your order today!</p> <p class="copyright">&copy; 2008</p> The CSS for the text h3 { text-align: center; text-transform: uppercase; text-decoration: underline overline; } p { text-indent: 2em; } .contact { text-indent: 0em; } .copyright { text-align: right; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 117
    115. 115. The text in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 118
    116. 116. Exercise #9
    117. 117. The CSS for the home page a { text-decoration: none; } .copyright { text-align: right; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 120
    118. 118. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists Þ Styling Fonts Þ Formatting Fonts Þ Formatting Lists · How to work with Box Model · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 121
    119. 119. How to format the numbers for ordered lists list-style-type: decimal; /* default value, 1, 2, 3, ... */ list-style-type: decimal-leading-zero; /* 01, 02, 03, ... */ list-style-type: lower-alpha; /* a, b, c, ... */ list-style-type: upper-alpha; /* A, B, C, ... */ list-style-type: lower-roman; /* i, ii, iii, iv, v, ... */ list-style-type: upper-roman; /* I, II, III, IV, V, ... */ list-style-type: lower-greek; /* α, β, γ, δ, ε, ... */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 122
    120. 120. How to format the bullet for unordered lists list-style-type: disc; /* default value, solid circle */ list-style-type: circle; /* hollow circle */ list-style-type: square; /* square */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 123
    121. 121. XHTML for a list example <ol> <li>Windows</li> <li>Mac OS</li> <li>Linux</li> </ol> <ul> <li>Internet Explorer</li> <li>Firefox</li> <li>Safari</li> </ul> CSS for a list example ol { list-style-type: upper-alpha; } ul { list-style-type: circle; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 124
    122. 122. The list example displayed in a web browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 125
    123. 123. How to use an image as a bullet list-style-image: none; /* default value */ list-style-image: url("star.gif"); An image as a bullet in the web browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 126
    124. 124. Exercise #10
    125. 125. The CSS for the home page ul.nav { list-style-type: none; } #content ul { list-style-image: url("star.gif"); }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 128
    126. 126. Homework1. Refactor CSS code done in class and create main.css and create external link to both home and about web pages2. Apply CSS styling rules to table in about web page and place new styling rules in main.cssMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 129

    ×