![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)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to HTML & CSS
Recently uploaded
Recently uploaded (20)
HTML & CSS
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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>
- 39. Example <html> <head> <title> PHP Self Description </title> </head> <body> <form action=" thanks.htm " method=" POST "> Name: <input type=" textbox " name=" name " /> <br /> Password: <input type=" password " name=" password " /> <br /> Description: <textarea rows=" 10 " cols=" 30 " name=" description "> </textarea> <br /><input type=" submit " value=" submit " /> </form> </body> </html>
- 41. Example <form action= "thanks.htm" method= "get" > Search for: <input type= "text" name= "q" /> <br /> Choose a search engine: <br /><input type= "radio" name= "engine" value= "google" checked= "checked" /> Google <br /><input type= "radio" name= "engine" value= "yahoo" /> Yahoo <br /><input type= "radio" name= "engine" value= "A9" /> A9 <br /><input type= "checkbox" name= "new" checked= "checked" /> Checkbox that does nothing (sorry) <br /><input type= "reset" text= "clear" /> <input type= "submit" value= "submit" /> </form>
- 44. Example <form action= "thanks.htm" method= "get" > Search for: <input type= "text" name= "q" /> <br /> Choose a search engine: <br /> <select name= "engine" > <option value= "google" selected= "selected" > Google </option> <option value= "yahoo" > Yahoo </option> <option value= "A9" > A9 </option> </select> <br /> <input type= "checkbox" name= "new" checked= "checked" /> Checkbox that does nothing (sorry) <br /><input type= "reset" text= "clear" /> <input type= "submit" value= "submit" /> </form>
- 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>
- 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
- 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
- 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
- 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
- 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
- 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
- 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. Example <html> <head> <title> Simple CSS Test </title> </head> <body> <h1 style=" text-align: center; color: darkred "> Go Bucs! </h1> <p style=" text-align: center "> <img src=" main_logo.gif "></img> </p> <p style=" text-align: center "> <img src=" main_logo.gif " style=" width: 50; height: 50 "> </img> <img src=" main_logo.gif " style=" width: 100; height: 100 "> </img> <img src=" main_logo.gif " style=" width: 150; height: 150 "> </img> <img src=" main_logo.gif " style=" width: 200; height: 200 "> </img> </p> </body> </html> Dimensions
- 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
- 82. Example 2 <html><head> <style type="text/css"> 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="one" href="default.asp"> changes color </a></b></p> <p><b><a class="two" href="default.asp" > changes font-size </a></b></p> <p><b><a class="three" href="default.asp"> changes background-color </a></b></p> <p><b><a class="four" href="default.asp"> changes font-family </a></b></p> </body> </html> anchor2 Slightly modified from W3Schools.com
- 88. Simple PHP script <html> <head> <title> Simple PHP </title> </head> <body> </body> </html> Simple PHP <p>Hello world</p> PHP Interpreter <?php echo " <p>Hello world</p> "; ?> IIS myfile.php
- 90. Handling Input Example <html> <head> <title> Simple PHP </title> </head> <body> <?php echo "<p>Hello world</p>"; if (isset($_REQUEST["name"])) { echo "<p>Welcome back " . $_REQUEST["name"]; } else { ?> <form action="name.php" method="GET"> <input type="textbox" name="name"> <br /><input type="submit" value="Login"> </form> <?php } ?> </body> </html> Name PHP
- 97. Example <html> <head> <title> Personal Information </title> <script language=" JavaScript "> function validate_email() { if (document.email_addr.email.value == "" ){ alert( " Email must be filled out! " ) document.email_addr.email.focus() return false } else { return true } } </script> </head> <body> <form name=" email_addr " action=" thanks.htm " action=" get " onsubmit=" return validate_email() "> Email: <input type=" text " name=" email "/> <input type=" submit " value=" submit "/> </form> </body> </html>