Download as PDF, PPTX
Uploaded byFrank Wu
Intro to Web Development
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.
![[Access U 2010] HTML5 & Accessibility](https://cdn.slidesharecdn.com/ss_thumbnails/accessuhtml5andaccessibilityv2-100511152310-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[SUTD GDSC] Intro to HTML and CSS](https://cdn.slidesharecdn.com/ss_thumbnails/introtohtml-230215093923-21d7cfc6-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to Web Development
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 9.
- 10. HTML! Is not aprogramming language
- 11.
- 12. How does thiswork?! ! Imagine that you see all of this on a website.
- 13. HTML <h1>How does thiswork?</h1>! ! <p>Imagine that you see all of this on a website.</p>
- 14. HTML Start Tag <h1>How doesthis work?</h1> End Tag
- 15.
- 16.
- 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.
- 20. HTML <a href=“http://google.com”>You should checkout 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.
- 23.
- 24. CSS! Is not aprogramming language
- 25.
- 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
- 27.
- 28.
- 29.
- 30.
- 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 adiv? ew n A as h foe ea pp a !! red
- 38.
- 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;! }
- 47.
- 48. CSS #column1 {! margin-right: 15px;! }! ! #column2{! margin-right: 15px;! }
- 49.
- 51. HTML <div class="column" id="column1">! <h2>Feature1</h2>! <img src="1.png"><br /><br />! Why we are the best.! </div>
- 53. HTML <body>! <div class="wrapper">! <div class=“top">! …! </div>! <divclass=“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 Responsivedesign CSS frameworks Forms
- 57.