Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Lecture 8: CSCI E-1 Spring 2013
Tommy MacWilliam
April 17, 2013
Education
0
140
Lecture 8: CSCI E-1 Spring 2013
Tommy MacWilliam
April 17, 2013
Tweet
Share
More Decks by Tommy MacWilliam
See All by Tommy MacWilliam
Lecture 9: CSCI E-1 Spring 2013
tmacwill
0
140
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
260
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
220
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
230
Incorporating Version Control into Programming Courses
tmacwill
1
100
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
200
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
260
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
460
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
300
Other Decks in Education
See All in Education
フォトディレクトリってなに?〜みんなで写真をアップしてみよう!〜|WordPress Mega Meetup Japan 2022 Spring
shuseitoda
0
190
多様なメンター、多様な基準
yasulab
4
14k
【3分でわかるNCS総合研究所】サービス概要
kojiyamamura222
0
100
革新技術と社会共創A「AIと地図」
furuhashilab
1
180
Baparekraf Developer Day 2022 - Front-End (Sandhika Galih)
dicodingevent
0
540
Острые кишечные инфекции
msalavei
0
360
Gesture-based Interaction - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
680
Monaca Education EdTech導入補助金を活用した 無料導入説明会
asial_edu
0
460
(広く皆さんに支えられて)勝手にやっています
usamiko
0
3.8k
VT22 - DA395A - jQuery & Ajax
tibbelit
0
160
Data Management and Analytics Specialisation
signer
PRO
0
410
東京大学深層学習(Deep Learning基礎講座2022)深層学習と自然言語処理
verypluming
25
18k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Agile that works and the tools we love
rasmusluckow
319
19k
The Invisible Customer
myddelton
110
11k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Thoughts on Productivity
jonyablonski
43
2.3k
Support Driven Design
roundedbygravity
86
8.5k
The Cult of Friendly URLs
andyhume
68
4.8k
Making Projects Easy
brettharned
98
4.3k
The Pragmatic Product Professional
lauravandoore
19
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Navigating Team Friction
lara
175
11k
Transcript
Computer Science E-1 Lecture 8: Web Development
Exam II
Review 4/22 7:30-8:30pm
Web Server
None
HTML
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<h1>CSCI E-1</h1>
<!doctype html>
<html>
<head>
<title>Page title</title>
<body>
<!doctype html> <html> <head>...</head> <body>...</body> </html>
<p>Paragraph text</p>
<b>Bold text</b>
<i>Italicized text</i>
<b><i>Bold and italic</i></b>
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
<table> <tr> <td>table cell</td> </tr> </table>
<a href=“http://google.com”>Google</a>
<img src=“cat.jpg” />
Example
Valid HTML
http://validator.w3.org/
CSS
Selectors
Selectors • p
Selectors • p • #foo • <p id=“foo”>
Selectors • p • #foo • <p id=“foo”> • .bar
• <p class=“bar”>
Rules
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
#foo { color: blue; }
.bar { background: red; width: 300px; }
p { font-size: 18px; }
Box Model
Box Model
#navbar a { margin: 10px; }
h1, p { padding: 10px; }
Block vs. Inline
<style>
Example
<link rel=“stylesheet” href=“...” />
Example
Layout
<div>
<span>
<!-- comments -->
Example
Bootstrap
http://twitter.github.io/bootstrap/
CSS Grid
None
None
Example
Flat UI
http://designmodo.github.io/Flat-UI/
Example
Setting up a Website
Setting up a Website • find a domain name
http://instantdomainsearch.com/
Registrars • GoDaddy • NameCheap • Network Solutions • Name.com
Setting up a Website • find a domain name •
find a web host
Web Hosts • 1&1 • BlueHost • DreamHost • HostGator
• Linode
Setting up a Website • find a domain name •
find a web host • point the domain to the host
Setting up a Website • find a domain name •
find a web host • point the domain to the host • upload files via FTP/SFTP
Computer Science E-1 Lecture 8: Web Development