Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam
April 17, 2013
Education
0
400

Lecture 8: CSCI E-1 Spring 2013

Tommy MacWilliam

April 17, 2013
Tweet

More Decks by Tommy MacWilliam

See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
tmacwill
0
300
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
440
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
490
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
530
Incorporating Version Control into Programming Courses
tmacwill
1
110
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
390
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
470
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
760
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320

Other Decks in Education

See All in Education
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.4k
技術を楽しもう/enjoy_engineering
studio_graph
1
420
Repaso electricidade e electrónica
irocho
0
190
LLMs for Social Simulation: Progress, Opportunities and Challenges
wingnus
1
100
(2024) Couper un gâteau... sans connaître le nombre de convives
mansuy
2
150
CompTIA Security+ SY0-601 Resumo
mariliarochas
2
2.6k
Web Application Frameworks - Lecture 4 - Web Technologies (1019888BNR)
signer
PRO
0
2.6k
HCI Research Methods - Lecture 7 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
700
Kindleストアで本を探すことの善悪 #Izumo Developers' Guild 第1回 LT大会
totodo713
0
130
Requirements Analysis and Prototyping - Lecture 3 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
800
ルクソールとツタンカーメン
masakamayama
1
810
Library Prefects 2024-2025
cbtlibrary
0
110

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
It's Worth the Effort
3n
183
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Adopting Sorbet at Scale
ufuk
73
9.1k
The Language of Interfaces
destraynor
154
24k
Faster Mobile Websites
deanohume
305
30k
Side Projects
sachag
452
42k
Code Review Best Practice
trishagee
64
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k

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