Website Technology - PowerPoint PPT Presentation

aradia
website technology n.
Skip this Video
Loading SlideShow in 5 Seconds..
Website Technology PowerPoint Presentation
Download Presentation
Website Technology

play fullscreen
1 / 21
Download Presentation
Presentation Description
91 Views
Download Presentation

Website Technology

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Website Technology David Kim MIT SLP 2013

  2. What are some websites you use? • Baidu • Youku

  3. Why do people make websites? • Share information on the Internet (forums) • Communication (Facebook) • Cool programs! (games)

  4. Silicon Valley • Area in California, USA • Lots of famous technology companies! • Apple, Google, Facebook

  5. Netflix/Rdio • How do they make money? • Offer useful service: TV shows, movies • Pay to use


  6. Baidu/Google • How do they make money? • Offer useful service: web search • Advertisements

  7. HTML, CSS, and JavaScript • HTML: Content (text, pictures) <h1 id=“title”>Header</h1> • CSS: Style (colors, spacing) #title { color: red; } • JS: Behavior (click buttons) document.getElementById(“title”);

  8. HTML Tag <div> <!-- Content! --> </div>

  9. Basic HTML Document <html> <head> <title>David Kim</title> </head> <body> <p>Hello! My name is David!</p> </body> </html>

  10. That website is boring and ugly. • How do we make it pretty? • CSS (Cascading Style Sheets)!

  11. Making the website pretty <html> <head> <title>David Kim</title> </head> <body> <p>Hello! My name is David!</p> </body> </html>

  12. Making the website pretty <head> <title>David Kim</title> </head>

  13. Making the website pretty <head> <title>David Kim</title> <script> body { background-color: green; } p { color:white; } </script> </head>

  14. Making the website pretty <head> <title>David Kim</title> <script> body { background-color: green; } p { color:white; } </script> </head>

  15. CSS attributes • What can you style with CSS? • Background color background-color: <color>; • Text color color: <color>; • Font size font-size: <pixel count>px; • Position position: relative; left: <pixel count>px; • …and more!

  16. CSS Selectors • How do you change the color of just one thing? p { color: red; } • Changes the color of every paragraph to red • What if you just want the 2ndparagraph to be red?

  17. CSS Selectors • Give your paragraphs IDs: • HTML: <p id=“introduction”> Hello! My name is David! </p> • CSS: #introduction { color: red; }

  18. More colors background-color: red; • What if you want light or dark red? background-color: rgb(180, 0, 0); • Color: made of red, green, and blue rgb(<red 0 to 255>, <green 0 to 255>, <blue 0 to 255>); • 0 is darkest, 255 is lightest • http://colorpicker.com/

  19. Introduction Project • Make a website about your favorite food. • Must have: • Title • Picture • Header • Paragraph

  20. Final project • Webpage advertising a product • Components: • Technical (HTML/CSS code) • Communication (persuasive writing/speaking) • Design (website style)

  21. Let’s build a quick webpage • Short biography page about me