web1o1 - session 1
DESCRIPTION
Session 1 - general intro to CSS followed by workshop.TRANSCRIPT
MeetupWeb 1O1 – Session 01
katarina milkovat: twitter.com/katmilk
What is the Web?
• It’s magic!
• Network of a collection of interlinked hypertext documents accessed via internet
• Consists of web servers, IP (internet protocol), DNS (domain name service) and pixie dust
Web
• Consists of many languages – HTML, CSS, JS, PHP, etc.
• Every language has it’s own syntax and semantics• Syntax: – the study of grammar – (how you say something)
• Semantics: – the study of meaning – (meaning behind what you say)
What is HTML?
• HyperText Markup Language• Content layer (content)• Defines structure and semantics• Consists of tags and rules• Most commonly used today is the new, more
structured way of writting HTML: xHTML Extensible HyperText Markup Language
What is CSS?
• Cascading Style Sheets• Presentation layer (style) • Style language that defines presentation
semantics of documents (HTML, XHTML, XML)• Recommended way to control presentation of
web document• Own language with own syntax
What is CSS?
• External– Best way to included CSS in document– Typically loaded in the <head> tag of HTML doc
• Embedded– Override any similar rules in external sheet– Styles stay with HTML page and don’t carry over
• Inline– Worst way to include CSS
*avoid if possible, but there are some exceptions
CSS Syntax
#element-id {color: #fff;font-size: 12px;
}
.element-class {color: #f00;font-weight: 700;
}
(selectors, properties and values)
What is JS?
• Programming (scripting) language that adds functionality to website
• Behavior layer (functionality)
• Common Libraries: jQuery, MooTools
What is Web 1.0?
• Read only content and static HTML websites
What is Web 2.0?
• User-generated content and social networks
What is Web 3.0?
• Referred to as the semantic web• Machines can read data
• Are we there yet?
Tools to Have
• Web Developer Toolbar for Firefox– Link:
https://addons.mozilla.org/en-us/firefox/addon/web-developer/
• Firebug for Firefox– Link:
https://addons.mozilla.org/en-US/firefox/addon/firebug/