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
570
0

Lecture 8: CSCI E-1 Spring 2013

Avatar for Tommy MacWilliam

Tommy MacWilliam

April 17, 2013

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
350
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
510
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
700
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
790
Incorporating Version Control into Programming Courses
Avatar for Tommy MacWilliam tmacwill
1
130
Lecture 4: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
470
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
560
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
900
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
330

Other Decks in Education

See All in Education
栃木県警サイバーセキュリティ研修会2026
Avatar for Nomizo Nomizo nomizone
1
380
事業紹介資料（トレーナー養成講座）
Avatar for 須藤賢太郎 kentaro1981
0
140
【ZEPメタバース校舎操作ガイド】
Avatar for aini school小中等部 ainischool
1
160
応募課題（’25広島）
Avatar for BocchiMan forget1900
0
980
Lenguajes de Programacion (Ingresantes UNI 2026)
Avatar for Abraham Zamudio robintux
0
150
[2026前期火５] 論理学（京都大学文学部 前期 第1回）「ハルシネーションを外部世界との対応を考えずに見分ける方法」
Avatar for Shunsuke Yatabe yatabe
0
250
共感から、つくる: 変わり続ける自分と、誰かのための創造
Avatar for Mick Etoh micknerd
1
280
計算物理におけるGitの使い方 / 01-c-compphys
Avatar for kaityo256 kaityo256
PRO
2
540
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
310
AI進化史：LLMからAIエージェントへ
Avatar for MIKIO KUBO mickey_kubo
0
110
SSH_handshake_easy_explain
Avatar for KenBo kenbo
0
960
Measuring what matters
Avatar for Jono Alderson jonoalderson
0
160

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Done Done
Avatar for chrislema chrislema
186
16k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
870

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