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
500

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
610
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
650
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
440
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
520
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
860
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
探査機自作ゼミ2025スライド
Avatar for sksat sksat
3
670
プレゼンテーション実践
Avatar for リスナビ takenawa
0
12k
Info Session MSc Computer Science & MSc Applied Informatics
Avatar for Beat Signer signer
PRO
0
200
2025年度春学期　統計学　第11回　分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
Avatar for Akira Asano akiraasano
PRO
0
150
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.1k
Common STIs in London: Symptoms, Risks & Prevention
Avatar for Medical Dental medicaldental
0
140
JPCERTから始まる草の根活動～セキュリティ文化醸成のためのアクション～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
210
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
Avatar for kaityo256 kaityo256
PRO
7
1.4k
令和政経義塾第2期説明会
Avatar for 一般財団法人 nxji
0
130
Pythonパッケージ管理 [uv] 完全入門
Avatar for MIKIO KUBO mickey_kubo
22
20k
2025年度春学期　統計学　第8回　演習(1) 問題に対する答案の書き方（講義前配付用） (2025. 5. 29)
Avatar for Akira Asano akiraasano
PRO
0
130
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
770

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
It's Worth the Effort
Avatar for 3n 3n
185
28k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k

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