Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Lecture 8: CSCI E-1 Spring 2013
Search
Tommy MacWilliam
April 17, 2013
Education
0
480
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
320
Lecture 6: CSCI E-1 Spring 2013
tmacwill
1
470
Lecture 7: CSCI E-1 Spring 2013
tmacwill
0
580
Lecture 5: CSCI E-1 Spring 2013
tmacwill
1
630
Incorporating Version Control into Programming Courses
tmacwill
1
120
Lecture 4: CSCI E-1 Spring 2013
tmacwill
0
420
Lecture 3: CSCI E-1 Spring 2013
tmacwill
0
510
Lecture 2: CSCI E-1 Spring 2013
tmacwill
0
830
Lecture 1: CSCI E-1 Spring 2013
tmacwill
0
320
Other Decks in Education
See All in Education
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
17
6k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
410
i-GIP 2025 中高生のみなさんへ資料
202200
0
320
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
310
探究的な学び:Monaca Educationで学ぶプログラミングとちょっとした課題解決
asial_edu
0
360
America and the World
oripsolob
0
460
SARA Annual Report 2024-25
sara2023
1
130
SkimaTalk Tutorial for Students
skimatalk
0
1.7k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
日本電子専門学校ネットワークセキュリティ科_学科紹介.pdf
ccyc
0
860
演習問題
takenawa
0
170
Prógram La Liberazione
olafurtr90
0
190
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.6k
Documentation Writing (for coders)
carmenintech
71
4.8k
Speed Design
sergeychernyshev
29
940
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Docker and Python
trallard
44
3.4k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
How to Ace a Technical Interview
jacobian
276
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
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