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
580
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
360
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
710
Lecture 5: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
1
800
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
570
Lecture 2: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
920
Lecture 1: CSCI E-1 Spring 2013
Avatar for Tommy MacWilliam tmacwill
0
340

Other Decks in Education

See All in Education
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.2k
LinkedIn
Avatar for Matleena Laakso matleenalaakso
0
4.2k
!コスパよくインターンに受かる方法！
Avatar for るりいろぼうや ruribou
0
220
SSH_handshake_easy_explain
Avatar for KenBo kenbo
0
970
アラムコSTEAMチャレンジ　実践報告書
Avatar for みんなのコード codeforeveryone
0
110
fake vs real
Avatar for Olivier Latourelle latrrr
0
140
生成AI時代のエンジニア育成について考えてみた
Avatar for Daisuke Akagawa (Akasan) akasan
0
120
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
1
2.2k
Lectura 2 (PIT : Python Basico)
Avatar for Abraham Zamudio robintux
0
320
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
150
コミュニティを通じた_キャリア設計のススメ_20260424.pdf
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
280
応募課題（’25広島）
Avatar for BocchiMan forget1900
0
1.3k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
180
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
190
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
310
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
130
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.9k

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