1 / 21

Creating Engaging Websites: A Guide to HTML, CSS, and Web Design Basics

This overview introduces the essentials of web development, highlighting why websites are made and the importance of sharing information and communication online. It covers how technology companies like Apple and Google monetize their services and presents the key components of a basic HTML document. The guide also emphasizes the role of CSS in styling websites, offering tips on changing colors and fonts. Finally, it includes a mini-project suggestion to create a personal webpage, merging technical skills with design and communication.

aradia
Télécharger la présentation

Creating Engaging Websites: A Guide to HTML, CSS, and Web Design Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related