Lecture 8: CSCI E-1 Spring 2013

9e4d3e53f8525fdff00691a8b843e66b?s=47 Tommy MacWilliam
April 17, 2013
Education
0
56

Lecture 8: CSCI E-1 Spring 2013

9e4d3e53f8525fdff00691a8b843e66b?s=128

Tommy MacWilliam

April 17, 2013
Tweet

Want more?

9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
57
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
190
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
120
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
10
540
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
2
280
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
180
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
350
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
220
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
310
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
580
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
170
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250

Transcript

  1. 1.

    Computer Science E-1 Lecture 8: Web Development

  2. 2.

    Exam II

  3. 3.

    Review 4/22 7:30-8:30pm

  4. 4.

    Web Server

  5. 5.
    None
  6. 6.

    HTML

  7. 7.

    <h1>CSCI E-1</h1>

  8. 8.

    <h1>CSCI E-1</h1>

  9. 9.

    <h1>CSCI E-1</h1>

  10. 10.

    <h1>CSCI E-1</h1>

  11. 11.

    <!doctype html>

  12. 12.

    <html>

  13. 13.

    <head>

  14. 14.

    <title>Page title</title>

  15. 15.

    <body>

  16. 16.

    <!doctype html> <html> <head>...</head> <body>...</body> </html>

  17. 17.

    <p>Paragraph text</p>

  18. 18.

    <b>Bold text</b>

  19. 19.

    <i>Italicized text</i>

  20. 20.

    <b><i>Bold and italic</i></b>

  21. 21.

    <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

  22. 22.

    <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

  23. 23.

    <table> <tr> <td>table cell</td> </tr> </table>

  24. 24.

    <a href=“http://google.com”>Google</a>

  25. 25.

    <img src=“cat.jpg” />

  26. 26.

    Example

  27. 27.

    Valid HTML

  28. 28.

    http://validator.w3.org/

  29. 29.

    CSS

  30. 30.

    Selectors

  31. 31.

    Selectors • p

  32. 32.

    Selectors • p • #foo • <p id=“foo”>

  33. 33.

    Selectors • p • #foo • <p id=“foo”> • .bar

    • <p class=“bar”>
  34. 34.

    Rules

  35. 35.

    #foo { color: blue; }

  36. 36.

    #foo { color: blue; }

  37. 37.

    #foo { color: blue; }

  38. 38.

    #foo { color: blue; }

  39. 39.

    #foo { color: blue; }

  40. 40.

    #foo { color: blue; }

  41. 41.

    .bar { background: red; width: 300px; }

  42. 42.

    p { font-size: 18px; }

  43. 43.

    Box Model

  44. 44.

    Box Model

  45. 45.

    #navbar a { margin: 10px; }

  46. 46.

    h1, p { padding: 10px; }

  47. 47.

    Block vs. Inline

  48. 48.

    <style>

  49. 49.

    Example

  50. 50.

    <link rel=“stylesheet” href=“...” />

  51. 51.

    Example

  52. 52.

    Layout

  53. 53.

    <div>

  54. 54.

    <span>

  55. 55.

    <!-- comments -->

  56. 56.

    Example

  57. 57.

    Bootstrap

  58. 58.

    http://twitter.github.io/bootstrap/

  59. 59.

    CSS Grid

  60. 60.
    None
  61. 61.
    None
  62. 62.

    Example

  63. 63.

    Flat UI

  64. 64.

    http://designmodo.github.io/Flat-UI/

  65. 65.

    Example

  66. 66.

    Setting up a Website

  67. 67.

    Setting up a Website • find a domain name

  68. 68.

    http://instantdomainsearch.com/

  69. 69.

    Registrars • GoDaddy • NameCheap • Network Solutions • Name.com

  70. 70.

    Setting up a Website • find a domain name •

    find a web host
  71. 71.

    Web Hosts • 1&1 • BlueHost • DreamHost • HostGator

    • Linode
  72. 72.

    Setting up a Website • find a domain name •

    find a web host • point the domain to the host
  73. 73.

    Setting up a Website • find a domain name •

    find a web host • point the domain to the host • upload files via FTP/SFTP
  74. 74.

    Computer Science E-1 Lecture 8: Web Development