Download as PDF, PPTX
More Related Content
HTML & CSS
- 1. J 187 –Introduction to Interactive Media FROM DESIGN TO DEV
- 2. J 187 –Introduction to Interactive Media HTML: HyperText Markup Language CSS: Cascading StyleSheet JS: JavaScript What makes a webpage?
- 3. J 187 –Introduction to Interactive Media What do they do?
- 4. J 187 –Introduction to Interactive Media Coding: It’s like building a house
- 5. J 187 –Introduction to Interactive Media Essentially: HTML is how two computers speak to each other over the internet. Web sites are what they say. HTML is "spoken" by two computers: 1. Client The client is used by the person surfing the net, such as the computer you are looking at right now. 2. Server A server stores and distributes websites over the net. I have a server where I store this web site. How It Works
- 6. J 187 –Introduction to Interactive Media HTML
- 7. J 187 –Introduction to Interactive Media Why is HTML so important?
- 8. J 187 –Introduction to Interactive Media HTML Basics <tag> Text </tag> start tag end tagcontent HTML uses markup tags to describe elements on a page.
- 9. J 187 –Introduction to Interactive Media Basic HTML Document <!DOCTYPE html> <html> <head> <title>Example Web Page</title> </head> <body> <h1>Example Page</h1> <p>This is a paragraph</p> <a href=“link.html”>Web link</a> <! - - this is a comment in the code - -> </body> </html> = tag = text on webpage = comment
- 10. J 187 –Introduction to Interactive Media Two types of HTML Tags
- 11. J 187 –Introduction to Interactive Media There are about 80 HTML tags
- 12. J 187 –Introduction to Interactive Media CSS
- 13. J 187 –Introduction to Interactive Media What is CSS? • CSS describes how HTML elements are to be displayed on screen, paper, or in other media • CSS saves a lot of work. It can control the layout of multiple web pages all at once • Internal stylesheets are stored in the <head> part of the HTML file • External stylesheets are stored in CSS files (something.css)
- 14. J 187 –Introduction to Interactive Media CSS Basics h1 { color: red; font-size: 12px; } selector property declarations value property value
- 15. J 187 –Introduction to Interactive Media Basic CSS Document = selector = property = value body { font-size: 12px; color: red; } h1 { font-weight: bold; background- color: blue; } #myboxhere { width: 300px; height: 200px; } = declarations
- 16. J 187 –Introduction to Interactive Media There are endless CSS tags They are both pre-defined and self-defined
- 17. J 187 –Introduction to Interactive Media HTML and CSS working together
- 18. J 187 –Introduction to Interactive Media GETTING STARTED
- 19. J 187 –Introduction to Interactive Media What we need to write code • A text editor (especially one made for code writing) Komodo Edit: http://komodoide.com/komodo-edit/ • An Internet browser (preferably Google Chrome)
- 20. J 187 –Introduction to Interactive Media Staying Organized • Filenames / extensions • Naming conventions
- 21. J 187 –Introduction to Interactive Media Domain and Server Server: Webfaction.com Domain Name: name.com Cost: $10-12 per year for domain and $10 per month for server