Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lecture 8: CSCI E-1 Spring 2013

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

Lecture 8: CSCI E-1 Spring 2013

9e4d3e53f8525fdff00691a8b843e66b?s=128

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
80
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
200
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
160
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
170
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
99
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
140
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
200
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
370
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
300

Other Decks in Education

See All in Education
6f28e7e353184f96aa04cfccbf55da0f?s=48 pnuslide
0
6.1k
Fd6d65c0c678caeee88eaa8c520bdd2c?s=48 serzhenko
0
510
33246db62d13c2b91289bff69c485822?s=48 notsurprised
0
240
01092e4ff22045044d6ce79ce60ecdbc?s=48 codeforeveryone
0
230
0ac2c34602b0d0e2cdce205c5f0f945a?s=48 yylo
0
130
F740e6f6c5371763464126d2589ab7c2?s=48 rfdnxbro
0
430
9e8ae0d3302e5597599a63028c041896?s=48 shoichihasegawa
0
3k
C825832c4fc71ffdfd44905729281fb0?s=48 puhitaku
14
5.9k
5a4c918960e904370fb29905f0dc1d02?s=48 insightbo
0
940
18cdb6f294c8cb10a46167e462c2a51f?s=48 matleenalaakso
0
2.4k
8b8d433ca23ddb6d5c1949e121b57383?s=48 karte
0
330
18cdb6f294c8cb10a46167e462c2a51f?s=48 matleenalaakso
0
850

Featured

See All Featured
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.4k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.6k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
53
2.9k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
201
9.8k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.6k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
116
10k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
28
1.1k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
262
11k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
830
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
890k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
8
490

Transcript

  1. Computer Science E-1 Lecture 8: Web Development

  2. Exam II

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

  4. Web Server

  5. None

  6. HTML

  7. <h1>CSCI E-1</h1>

  8. <h1>CSCI E-1</h1>

  9. <h1>CSCI E-1</h1>

  10. <h1>CSCI E-1</h1>

  11. <!doctype html>

  12. <html>

  13. <head>

  14. <title>Page title</title>

  15. <body>

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

  17. <p>Paragraph text</p>

  18. <b>Bold text</b>

  19. <i>Italicized text</i>

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

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

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

  23. <table> <tr> <td>table cell</td> </tr> </table>

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

  25. <img src=“cat.jpg” />

  26. Example

  27. Valid HTML

  28. http://validator.w3.org/

  29. CSS

  30. Selectors

  31. Selectors • p

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

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

    • <p class=“bar”>

  34. Rules

  35. #foo { color: blue; }

  36. #foo { color: blue; }

  37. #foo { color: blue; }

  38. #foo { color: blue; }

  39. #foo { color: blue; }

  40. #foo { color: blue; }

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

  42. p { font-size: 18px; }

  43. Box Model

  44. Box Model

  45. #navbar a { margin: 10px; }

  46. h1, p { padding: 10px; }

  47. Block vs. Inline

  48. <style>

  49. Example

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

  51. Example

  52. Layout

  53. <div>

  54. <span>

  55. <!-- comments -->

  56. Example

  57. Bootstrap

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

  59. CSS Grid

  60. None
  61. None

  62. Example

  63. Flat UI

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

  65. Example

  66. Setting up a Website

  67. Setting up a Website • find a domain name

  68. http://instantdomainsearch.com/

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

  70. Setting up a Website • find a domain name •

    find a web host

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

    • Linode

  72. Setting up a Website • find a domain name •

    find a web host • point the domain to the host

  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. Computer Science E-1 Lecture 8: Web Development