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
560

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
340
Lecture 6: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
500
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
690
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
780
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
450
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
540
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
890
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
330

Other Decks in Education

See All in Education
2025-10-30 社会と情報2025 #05 CC+の代わり
Avatar for mapconcierge mapconcierge4agu
0
110
東大１年生にJulia教えてみた
Avatar for Yusuke Matsui matsui_528
7
12k
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.3k
【dip】「なりたい自分」に近づくための、「自分と向き合う」小さな振り返り
Avatar for ディップ株式会社 dip_tech
PRO
0
230
俺と地方勉強会 - KomeKaigi・地方勉強会への期待 -
Avatar for ふぁらお加藤 pharaohkj
1
1.6k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.2k
Chapitre_2_-_Partie_3.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
150
MySmartSTEAM 2526
Avatar for cbtlibrary cbtlibrary
0
190
160人の中高生にAI・技術体験の講師をしてみた話
Avatar for ShuntaToda shuntatoda
1
300
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
210
国際卓越研究大学計画｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
47k
【旧：ZEPメタバース校舎操作ガイド】
Avatar for aini school小中等部 ainischool
0
790

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
750
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
640
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.1k

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