➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
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
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
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
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