Lecture 8: CSCI E-1 Spring 2013

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

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
62
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
190
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
140
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
160
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
1
99
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
140
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
190
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
350
9e4d3e53f8525fdff00691a8b843e66b?s=48 tmacwill
0
300

Other Decks in Education

See All in Education
17cbb387ced351dafe3b30e39b3ed9f7?s=48 mokomoka
0
170
B9ade6772136154da028ffd0a006eb8f?s=48 antoinephi
0
240
49152f9ea4577167477f76489a4bbbf3?s=48 asial_edu
0
110
561e6d8dd0ddabe944f15555056ab170?s=48 futurimmediat
0
190
6343f364a3255a731c4a7c42ef03738d?s=48 divinorestaurantepub1
0
140
D6c9d1a45d364ec4b332ba25f1421cb9?s=48 fmasanori
0
310
6bd63bb363d2cb9933b263463f6305cf?s=48 matsui_528
0
720
90dbb09b0b4f8813b450189422c67a0e?s=48 ravicot
1
150
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
4
450
60c54dec6329cd29ecf6ce8fa2584e6c?s=48 marusya82
0
190
41c58ae6e4497a176b4b7e4948083d7b?s=48 kikagaku_0117
0
320
5fdf4afd4f96fd9145a7233bd755f77f?s=48 jsfry19
0
150

Featured

See All Featured
Ecdea9b9714877b86cee08458f085481?s=48 trallard
9
380
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
13
480
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
257
24k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
250
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
340
282d599b414022eba5096510f675b6e2?s=48 chrislema
170
14k

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