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
510

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
490
Lecture 7: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
630
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
670
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
530
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
870
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
320

Other Decks in Education

See All in Education
サンキッズゾーン 春日井駅前 ご案内
Avatar for Sanyo Homes sanyohomes
0
1.1k
GOVERNOR ADDRESS：2025年9月29日合同公式訪問例会：2720 Japan O.K. ロータリーEクラブ、2025年10月6日卓話：藤田 千克由 氏（国際ロータリー第2720地区 2025－2026年度 ガバナー・大分中央ロータリークラブ・大分トキハタクシー（株）顧問）
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
140
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
0
2.6k
【Discordアカウント作成ガイド】
Avatar for aini school小中等部 ainischool
0
190
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
Avatar for sasakendayo sasakendayo
0
270
Online Privacy
Avatar for Takahito Sakamoto takahitosakamoto
1
120
H5P-työkalut
Avatar for Matleena Laakso matleenalaakso
4
40k
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
240
みんなのコード 2024年度活動報告書/ 2025年度活動計画書
Avatar for みんなのコード codeforeveryone
0
320
核燃料政策を問う─英国の決断と日本
Avatar for HKano hide2kano
0
200
ハッカソンを活用したモノづくり教育について
Avatar for ISHIGO Yusuke yusk1450
PRO
2
110
ARアプリを活用した防災まち歩きデータ作成ハンズオン
Avatar for daisuke nro2daisuke
0
180

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
950
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k

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