Web1O1 - Session 1

395 views

Published on

Session 1 - general intro to CSS followed by workshop.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
395
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web1O1 - Session 1

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

×