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

Lecture 8: CSCI E-1 Spring 2013

Avatar for Tommy MacWilliam Tommy MacWilliam
April 17, 2013
Education
0
490

Lecture 8: CSCI E-1 Spring 2013

Avatar for Tommy MacWilliam

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
330
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
480
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
600
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
640
Incorporating Version Control into Programming Courses
Avatar for Tommy MacWilliam tmacwill
1
120
Lecture 4: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
430
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
510
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
850
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
データ分析
Avatar for リスナビ takenawa
0
4.9k
教員向け生成AI基礎講座（2025年3月28日 東京大学メタバース工学部 ジュニア講座）
Avatar for Lui Yoshida luiyoshida
1
560
生成AI
Avatar for リスナビ takenawa
0
4.9k
Common STIs in London: Symptoms, Risks & Prevention
Avatar for Medical Dental medicaldental
0
130
実務プログラム
Avatar for リスナビ takenawa
0
4.9k
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
Avatar for Seungmin 마량 maryang
0
110
技術文章を書くための執筆技術と実践法（パラグラフライティング）
Avatar for Hisashi Ishihara hisashiishihara
18
6.5k
2025年度春学期　統計学　第10回　分布の推測とは ー 標本調査，度数分布と確率分布 (2025. 6. 12)
Avatar for Akira Asano akiraasano
PRO
0
130
第1回大学院理工学系説明会｜東京科学大学（Science Tokyo）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
3.8k
2025年度春学期　統計学　第5回　分布をまとめるー記述統計量（平均・分散など） (2025. 5. 8)
Avatar for Akira Asano akiraasano
PRO
0
110
IMU-00 Pi
Avatar for kanaya kanaya
0
360
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.4k

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k

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