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.
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.
13.
14.
15. Example, refined … <body> <a name=" top "> <h1> Cinderella </h1> </a> <a href=" cinderella2.htm#para1 "> Paragraph #1 </a><br> <a href=" cinderella2.htm#para2 "> Paragraph #2 </a><br> <a href=" cinderella2.htm#credits "> Credits </a><br> <a name=" para1 " /> <p> … </p> <p><a href=" cinderella2.htm#top "> Back to top </a></p> <a name=" para2 "/> <p> … </p> <p><a href=" cinderella2.htm#top "> Back to top </a></p> <a name=" credits "/> <br/><h6> credit to <a href=" http://www.childrensbooksonline.org " target=" _blank "> Children’s Online Books </a> </h6> <p><a href=" cinderella2.htm#top "> Back to top </a></p> </body> Cinderella, version 2
16.
17.
18. Example <html> <head> <title> Cast for Cinderella </title> </head> <body> <p> Cast of voices for Disney's Cinderella (1950) </p> <table border=" 1 "> <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.
20.
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.
23. Example Conferences: <ul> <li><img src=" NFC.gif "> NFC <ul> <li> NFC East </li> <li> NFC North </li> <li> NFC South </li> <li> NFC West </li> </ul> </li> <li><img src=" AFC.gif "> 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=" SEA.gif "> (x) Seattle </li> <li><img src=" STL.gif "> St. Louis </li> <li><img src=" ARI.gif "> Arizona </li> <li><img src=" SF.gif "> San Francisco </li> </ol> Enhanced NFL Standings
24.
25.
26.
27.
28. Example <html> <head><title> Cast for Cinderella </title></head> <body> <p> Cast of voices for Disney's Cinderella (1950) </p> <div align=" left "> <table border=" 1 "> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> … </table></div> <div align=" center "> <table border=" 1 "> <tr><th> CHARACTER </th><th> VOICE TALENT </th></tr> <tr><td> Cinderella </td><td> Ilene Woods </td></tr> … </table></div> <div align=" right "> <table border=" 1 "> <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.
30.
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=" text " name=" q " /> <!-- submit button to send the query --> <input type=" submit " name=" submitbtn " value=" Press here! " /> </form> </body> </html> Initial Search Page
32.
33.
34. Example <html> <head> <title> Search the Internet </title> </head> <body> <h1> CS301 -- Internet Search Page </h1> <table border=" 0 "> <tr><td><big> Powered by: </big></td> <td><img src=" http://www.google.com/intl/en/logos/Logo_25wht.gif "> </td> </tr> </table> <!-- give a destination URL for this form --> <form action=" http://www.google.com/search " method=" get "> Search for: <input type=" text " name=" q " /> <input type=" submit " value=" submit " /> </form> </body> </html>
48. Example <html> <head> <title> Restaurant Survey </title> </head> <body bgcolor=" lightyellow "> <h1> Thank you! </h1> <p> Please fill out this survey </p> <form action=" thanks.htm "> <table> <tr><th> </th><th colspan=" 2 "> Lowest </th> <th> </th><th colspan=" 2 "> Highest </th></tr> <tr><th> </th><th> 1 </th><th> 2 </th> <th> 3 </th><th> 4 </th><th> 5 </th></tr> <tr><td> Service </td> <td><input type=" radio " name=" service "/></td> <td><input type=" radio " name=" service "/></td> <td><input type=" radio " name=" service "/></td> <td><input type=" radio " name=" service "/></td> <td><input type=" radio " name=" service "/></td></tr> <input type=" submit" value=" submit" /> </table> </form> </body></html>
49.
50.
51.
52.
53.
54.
55.
56.
57.
58. Example <html> <head> <title> Simple CSS Test </title> <style type= "text/css" > .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= "global" > Heading for this page </h1> <p class= "center" > Cool Main Title in the Center </p> <p class= "left" > Interesting text on the left </p> <p class= "right" > other stuff on the right </p> <h4> is this blue? </h4> </body> </html> Classes
59.
60.
61.
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. Example <html> <head> <title>Simple CSS Test</title> <style type=" text/css "> 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=" bcolor "> This is a simple test of style sheets </p> <p class=" bgimage "> This is <br> another <br> simple <br> test <br> of style <br> sheets </p> </body> </html> Backgrounds
64. Another Example <html> <head> <title> Simple CSS Test </title> <style type ="text/css" > 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 ="lgrey" > This is a simple test of style sheets </p> <p class ="orange" > This is <br> another <br> simple <br> test <br> of style <br> sheets </p> </body> </html> Background2
65.
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. Example <html> <head> <title> Simple CSS Test </title> <style type=" text/css "> p.squish {letter-spacing: -5px} p.expand {letter-spacing: 25px} p.wrdspace { word-spacing: 20px} </style> </head> <body> <h1> CSS TEST </h1> <p class=" squish "> This is a simple test </p> <p class=" expand "> This is a simple test </p> <p class=" wrdspace "> This is another simple test </p> </body> </html> Texts
68.
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. Example <html> <head> <title> Simple CSS Test </title> <style type ="text/css" > body { font-family: "Bookman Old Style", Arial, Helvetica, sans-serif } p.ariel { font-family: sans-serif } p.code { font-family: courier } </style> </head> <body> <h1> CSS TEST </h1> <p class ="ariel" > This is a simple test of style sheets </p> <p class ="code" > This is a simple test of style sheets </p> <p> This is another simple test of style sheets </p> </body> </html> Fonts
71.
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. Example <html> <head> <title> Simple CSS Test </title> <style type ="text/css" > 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.
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. Example <html> <head> <title> NFL Standings </title> <style type=" text/css "> 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=" nfc "> <li> NFC East </li> <li> NFC North </li> <li> NFC South </li> <li> NFC West </li> </ul></li> <li> AFC <ul class=" afc "> <li> AFC East </li> <li> AFC North </li> <li> AFC South </li> <li> AFC West </li> </ul></li> </ul> Lists
77.
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 %
81. Example 1 <html> <head> <style type="text/css"> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p><b><a href=" http://www.whitworth.edu "> 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
![HTML and CSS ,[object Object],[object Object],[object Object],[object Object]](https://image.slidesharecdn.com/HTML_CSS-090224183818-phpapp01/85/HTML-CSS-1-320.jpg)
![Markup Languages ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)