Your SlideShare is downloading. ×
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Week 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week 2

1,252

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,252
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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)
  • Transcript

    • 1. Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 1
    • 2. Some More About You
    • 3. Median Rank 4 n = 37 3 2 2 2 2 1 1HTML CSS Javascript PhP MySQL Design SEO Mobile Apps
    • 4. A Message From The Dean
    • 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. 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. 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. 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. 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. Chapter 4 A crash course in XHTML*Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 10
    • 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. 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. 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. 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. The lists in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 15
    • 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. Exercise #2
    • 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. 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. 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. 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. Exercise #3
    • 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. 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. 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. 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. 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. 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. 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. The <a> tags in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 30
    • 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. 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. 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. 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. Exercise #4
    • 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. 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. 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. 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. 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. Image files
    • 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. Exercise #5
    • 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. 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. 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. 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. 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. 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. The table in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 50
    • 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. 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. 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. The table in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 54
    • 55. Exercise #6
    • 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. 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. HTML5 &The Document Object Model
    • 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. Quiz: Logical or Presentationsource: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
    • 61. Quiz: Logical or Presentationsource: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
    • 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. 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. Chapter 5 A crash course in CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 67
    • 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. A web page before CSS has been appliedMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 69
    • 67. The same page after CSS has been appliedMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 70
    • 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. 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. 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. A CSS comment /* This is a CSS comment */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 74
    • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. The elements displayed in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 88
    • 86. A little more on tag-based selectors CSS rule sets that select by tag em { color: blue; }Adapted from Maxdesign.com.au
    • 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. 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. Other ways to code selectors The universal selector * { color: black; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 92
    • 90. A little more on universal selector * { color: blue; }Adapted from Maxdesign.com.au
    • 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. A little more on descendent selectors p em { color: blue; } ul em { color: blue; } Adapted from Maxdesign.com.au
    • 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. A little more on Child Selectors div > em { color: blue; }Adapted from Maxdesign.com.au
    • 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. 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. 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. 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. 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. The pseudo-class selectors in a web browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 103
    • 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. Cascade is postponed to later
    • 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. 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. 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. 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. 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. Exercise #8
    • 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. 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. 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. 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. 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. 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. The text in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 118
    • 116. Exercise #9
    • 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. 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. 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. 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. 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. The list example displayed in a web browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 125
    • 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. Exercise #10
    • 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. 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

    ×