html & css

J 187 – Introduction to Interactive Media

FROM DESIGN TO DEV


HTML: HyperText Markup Language

CSS: Cascading StyleSheet

JS: JavaScript

What makes a webpage?


What do they do?


Coding: It’s like building a house


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. ServerA server stores and distributes websites over the net.

I have a server where I store this web site.

How It Works


HTML


Why is HTML so important?


HTML Basics

<tag> Text </tag>

start tag end tagcontent

HTML uses markup tags to describe elements on a page.


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


Two types of HTML Tags


There are about 80 HTML tags


CSS


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)


CSS Basics

h1 { color: red; font-size: 12px; }

selector

property

declarations

value property value


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


There are endless CSS tags

They are both pre-defined and self-defined


HTML and CSS working together


GETTING STARTED


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)

http://komodoide.com/komodo-edit/


Staying Organized

• Filenames / extensions

• Naming conventions


Domain and Server

Server: Webfaction.com

Domain Name: name.com

Cost: $10-12 per year for domain and $10 per month for server

html & css

Design