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
570

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
350
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
700
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
460
Lecture 3: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
550
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
高校数学B「統計的な推測」 分野の問題と課題
Avatar for Shimizu Dan shimizudan
1
120
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
Interactive Tabletops and Surfaces - Lecture 5 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
1
2k
バージョン管理とは / 01-a-vcs
Avatar for kaityo256 kaityo256
PRO
1
210
滑空スポーツ講習会2025(実技講習）EMFT講習　実施要領/JSA EMFT 2025 procedure
Avatar for JSA seminar jsaseminar
0
150
ブランチ操作 / 02-a-branch
Avatar for kaityo256 kaityo256
PRO
0
210
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
栃木県警サイバーセキュリティ研修会2026
Avatar for Nomizo Nomizo nomizone
0
360
栃木にいても「だいじ」だっぺ〜！ 栃木＆全国アジャイルコミュニティへの参加・運営の魅力
Avatar for sasakendayo sasakendayo
1
180
インシデント対応
Avatar for akira345 akira345
0
300
P3NFEST 2026 Spring ハンズオン「ハッキング・ラブ！はじめてのハッキングをやってみよう」資料
Avatar for Nomizo Nomizo nomizone
0
340
Surviving the surfaceless web
Avatar for Jono Alderson jonoalderson
0
740

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
130
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
480
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
140
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
700
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
140
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
400

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