Download - Intro to Web Development
![Page 1: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/1.jpg)
Introduction to
DevelopmentWeb
![Page 2: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/2.jpg)
Everyone!can do it
![Page 3: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/3.jpg)
ruleslearn the
![Page 4: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/4.jpg)
toolslearn the
![Page 5: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/5.jpg)
languagelearn the
![Page 6: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/6.jpg)
Request
Response
![Page 7: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/7.jpg)
![Page 8: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/8.jpg)
![Page 9: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/9.jpg)
HTML!HyperText Markup Language
![Page 10: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/10.jpg)
HTML!Is not a programming language
![Page 11: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/11.jpg)
index.html
![Page 12: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/12.jpg)
How does this work?!!
Imagine that you see all of this on a website.
![Page 13: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/13.jpg)
HTML
<h1>How does this work?</h1>!!
<p>Imagine that you see all of this on a website.</p>
![Page 14: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/14.jpg)
<h1>How does this work?</h1>
HTML
Start Tag
End Tag
![Page 15: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/15.jpg)
HTML
<b>Bold</b>!!
<i>Italics</i>!!
<h1>Header 1</h1>!!
<h2>Header 2</h2>
Bold
Italics
Header 1
Header 2
![Page 16: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/16.jpg)
HTML
<html>!! …!</html>
![Page 17: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/17.jpg)
HTML
<html>!! <head>!! ! <title>My Website</title>!! </head>!! …!</html>
![Page 18: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/18.jpg)
HTML<html>!! <head>!! ! <title>My Website</title>!! </head>!! <body>!! ! <h1>Main heading</h1>!! ! <p>Hi! Welcome!</p>!! </body>!</html>
![Page 19: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/19.jpg)
HTML
![Page 20: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/20.jpg)
<a href=“http://google.com”>You should check out Google.</a>
Most HTML tags can have attributes
HTML
![Page 21: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/21.jpg)
HTML<html>!! <head>!! ! <title>My Website</title>!! </head>!! <body>!! ! <h1>Main heading</h1>!! ! <p>Hi! Welcome! <a href=“http://!! ! ! google.com”>You should check!! ! ! out Google.</a>!! ! </p>!! </body>!</html>
![Page 22: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/22.jpg)
HTML
![Page 23: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/23.jpg)
CSS!Cascading Style Sheets
![Page 24: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/24.jpg)
CSS!Is not a programming language
![Page 25: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/25.jpg)
CSS!Styles your HTML!
![Page 26: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/26.jpg)
HTML<html>!! <head>!! ! <title>My Website</title>!! ! <link rel="stylesheet" href=!! ! "styles.css" />!! </head>!! <body>!! ! <h1>Main heading</h1>!! ! <p>Hi! Welcome!</p>!! </body>!</html>
![Page 27: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/27.jpg)
CSS
h1 {! color: red;!}
styles.css
![Page 28: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/28.jpg)
CSS
h1 {! color: red;!}
styles.css
![Page 29: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/29.jpg)
CSS
h1 {! color: red;!}
Selector
Declaration
![Page 30: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/30.jpg)
CSS
h1 {! color: red;!} Property Value
![Page 31: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/31.jpg)
CSS
h1 {! color: red;!! text-align: center;!}
![Page 32: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/32.jpg)
CSS
h1 {! color: red;!! text-align: center;!}
![Page 33: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/33.jpg)
<html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>! <body>! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </body>!</html>
HTML
![Page 34: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/34.jpg)
CSSbody {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;!}!!
h1 {! font-size: 50px;!}
![Page 35: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/35.jpg)
CSSbody {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;!}!!
h1 {! font-size: 50px;!}
![Page 36: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/36.jpg)
HTML
<html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>! <body>! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </body>!</html>
![Page 37: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/37.jpg)
What is a div?
A new foe has appeared!!
![Page 38: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/38.jpg)
.wrapper
.top
#column2#column1 #column3
.bottom
body
![Page 39: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/39.jpg)
CSS
.top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;!}
![Page 40: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/40.jpg)
CSS
.top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;!}
![Page 41: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/41.jpg)
HTML<html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>! <body>! <div class="wrapper">! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </div>! </body>!</html>
![Page 42: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/42.jpg)
CSS
a {! color: #D7E0E6;!}!!
.wrapper {! margin: 0 auto;! width: 900px;!}
![Page 43: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/43.jpg)
CSS
a {! color: #D7E0E6;!}!!
.wrapper {! margin: 0 auto;! width: 900px;!}
![Page 44: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/44.jpg)
HTML <body>! <div class="wrapper">! <div class=“top">!! ! …! </div>!! <div class="about">! <div class="column" id="column1">! <h2>Feature 1</h2>! </div>! <div class="column" id="column2">! <h2>Feature 2</h2>! </div>! <div class="column" id="column3">! <h2>Feature 3</h2>! </div>! </div>! </div>! </body>
![Page 45: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/45.jpg)
CSS
.about {! display: inline-block;! margin: 15px 0 0 0;!}
![Page 46: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/46.jpg)
CSS
.column {! background-color: #CE4D4F;! color: #263039;! height: 210px;! width: 260px;! float: left;! padding: 20px 15px;! text-align: center;!}
![Page 47: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/47.jpg)
Padding
Margin
Div
![Page 48: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/48.jpg)
CSS
#column1 {! margin-right: 15px;!}!!
#column2 {! margin-right: 15px;!}
![Page 49: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/49.jpg)
.class
#idvs
![Page 50: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/50.jpg)
![Page 51: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/51.jpg)
HTML
<div class="column" id="column1">! <h2>Feature 1</h2>! <img src="1.png"><br /><br />! Why we are the best.! </div>
![Page 52: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/52.jpg)
![Page 53: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/53.jpg)
HTML
<body>! <div class="wrapper">! <div class=“top">! …! </div>! <div class=“about">! …! </div>! <div class="bottom">! <h2>You'll love our awesome features.</h2>! </div>! </div>!</body>
![Page 54: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/54.jpg)
CSS
.bottom {! color: #D7E0E6;! background-color: #092F4B;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;!}
![Page 55: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/55.jpg)
CSS
.bottom {! color: #D7E0E6;! background-color: #092F4B;! margin: 15px 0 0 0;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;!}
![Page 56: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/56.jpg)
Now what?Dynamic
Server side
Database
Responsive designCSS frameworks
Buttons
Forms
Optimization
![Page 57: Intro to Web Development](https://reader033.vdocuments.us/reader033/viewer/2022051323/54956c72ac7959482e8b4d8a/html5/thumbnails/57.jpg)
Frank Wu!frankjwu.com!
@frankjwu