Lecture 8: CSCI E-1 Spring 2013

Transcript

1. Computer Science E-1 Lecture 8: Web Development
2. Exam II
3. Review 4/22 7:30-8:30pm
4. Web Server
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
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