Intro to Web Development
•
0 likes•1,065 views
The document provides an introduction to HTML and CSS for web development. It explains that HTML is used to structure content and CSS is used to style HTML. It covers key HTML tags like headings, paragraphs, links and divs. It then demonstrates how CSS can be used to style elements with selectors, properties and values. CSS concepts like padding, margin and classes vs IDs are explained. Finally, it mentions next steps like making the site dynamic, responsive, and adding forms.
Report
Share
Intro to Web Development
- 10. HTML! Is not a programming language
- 11. index.html
- 12. How does this work?! ! Imagine that you see all of this on a website.
- 13. HTML <h1>How does this work?</h1>! ! <p>Imagine that you see all of this on a website.</p>
- 14. HTML Start Tag <h1>How does this work?</h1> End Tag
- 15. HTML <b>Bold</b>! Bold ! <i>Italics</i>! Italics ! <h1>Header 1</h1>! Header 1 ! <h2>Header 2</h2> Header 2
- 17. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>! ! …! </html>
- 18. HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>! ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html>
- 19. HTML
- 20. HTML <a href=“http://google.com”>You should check out Google.</a> Most HTML tags can have attributes
- 21. 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>
- 22. HTML
- 24. CSS! Is not a programming language
- 26. <html>! ! <head>! ! ! <title>My Website</title>! ! ! <link rel="stylesheet" href=! ! ! "styles.css" />! ! </head>! ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html> HTML
- 30. CSS h1 {! color: red;! Property Value }
- 31. CSS h1 {! color: red;! ! text-align: center;! }
- 32. CSS h1 {! color: red;! ! text-align: center;! }
- 33. HTML <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>
- 34. CSS body {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;! }! ! h1 {! font-size: 50px;! }
- 35. CSS body {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;! }! ! h1 {! font-size: 50px;! }
- 36. 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>
- 37. What is a div? ew n A as h foe ea pp a !! red
- 39. CSS .top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;! }
- 40. CSS .top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;! }
- 41. 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>
- 42. CSS a {! color: #D7E0E6;! }! ! .wrapper {! margin: 0 auto;! width: 900px;! }
- 43. CSS a {! color: #D7E0E6;! }! ! .wrapper {! margin: 0 auto;! width: 900px;! }
- 44. <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> HTML
- 45. CSS .about {! display: inline-block;! margin: 15px 0 0 0;! }
- 46. CSS .column {! background-color: #CE4D4F;! color: #263039;! height: 210px;! width: 260px;! float: left;! padding: 20px 15px;! text-align: center;! }
- 48. CSS #column1 {! margin-right: 15px;! }! ! #column2 {! margin-right: 15px;! }
- 49. .class vs #id
- 51. HTML <div class="column" id="column1">! <h2>Feature 1</h2>! <img src="1.png"><br /><br />! Why we are the best.! </div>
- 53. 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>
- 54. CSS .bottom {! color: #D7E0E6;! background-color: #092F4B;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;! }
- 55. CSS .bottom {! color: #D7E0E6;! background-color: #092F4B;! margin: 15px 0 0 0;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;! }
- 56. Now what? Dynamic Database Optimization Buttons Server side Responsive design CSS frameworks Forms