SlideShare a Scribd company logo
Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society
Upsilon Pi Epsilon UPE is the Computer Science Honors Society. It is a national honors society, with over 120 University Chapters around the country. “New” to USC
Workshop series around web 2.0 technologies This is the first of many Future topics will include: Javascript, PHP, Ruby on Rails, and more.  Send us your ideas!
What is Web 2.0?
 
“Web 2.0, a phrase coined by O'Reilly Media in 2004, refers to a supposed second-generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that let people collaborate and share information online in previously unavailable ways.” - Wikipedia (a Web 2.0 organization)
Why should I care?
 
What We’ll Cover Today HTML (Hypertext Markup Language) DOM (Document Object Model - briefly) CSS (Cascading Style Sheets)
HTML
History of HTML Tim Berners-Lee created first HTML version in the late 1980s (as a subset of SGML) Needed a simple way to share research among colleagues; piggy backed off newly evolving Internet (previously just text) HTML spread as multiple proprietary versions; in 1993 the IETF published a working draft of the first “official” HTML
History of HTML Part 2 Simplicity made things easy for people new to computers and publishing Also left the “code” a mess, leaving every browser to handle different mistakes in its own way Soon, the World Wide Web Consortium (W3C) was created to draft a set of standards for all web browsers to adhere to
History of HTML Part 3 Features were added to HTML very quickly: tables, colors, backgrounds, fonts, etc. Web sites started becoming very complex It became impossible to manage all the HTML tags needed to style the content on multiple sites, code bases starting becoming huge, tables were being used to make better designs... things got ugly.
History of HTML Part 4 We needed a solution to this problem, and that solution was CSS. With the revolution of Cascading Style Sheets, HTML (and later XHTML) became about describing content, not presentation The look of a web page (the presentation) was left entirely to style sheets, which could be common to entire sites
Setting up a web “Presence” No point to a website if no one else can see it... USC lets every student create a web presence on the aludra.usc.edu server If you don't have it setup yet: telnet aludra.usc.edu type requestwww follow the instructions
Setup Part 2 To see your web presence, point browser to http://www-scf.usc.edu/~username To upload files to your web account, use an FTP client You can download COREFTP(PC) or Fetch(Mac) from usc.edu/software or poke around your PC for an app with "FTP" in title Login to aludra.usc.edu with usual USCWeb login Upload files to public_html folder
HTML: What is it? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file can be created using a simple text editor or a WYSIWIG editor
Hello World! <html> <head> <title>Hello World!</title> </head> <body> Hello World! </body> </html>
HTML Basics:  Tags/Attributes Tags/Attributes HTML tags are used to mark-up HTML elements Tags are surrounded by the two characters < and >, which are called angle brackets Tags normally come in pairs like <b> and </b>.  The text between the start and end tags is the element content Tags are not case sensitive, <b> means the same as <B>, but use lowercase: you’ll find out its better Tags often have attributes, which gives the browser additional information about displaying the element Attributes come in name-value pairs, with the value in double or single quotes (e.g. <img width=”100px”>)
HTML Basics: Formatting Tags Formatting Tags In HTML, formatting is not based on whitespace! (example) Use tags to format text: <p></p> - paragraph tag, optional align attribute <br> - line break tag <b></b> or <strong></strong> - boldface tag, <strong> is more standards-compliant now <i></i> or <em></em> - italics tag, <em> is more standards-compliant now <ul><li>blabla 1</li> .. </ul> - unordered list tag, creates bulleted list, can be nested <ol><li>blabla 1</li> .. </ol> - ordered list tag, creates numbered list, can be nested
HTML Basics:  Hyperlinks & Images Hyperlinks & Images Anchor tag can be used to create hyperlink or define an anchor within a page <a href=&quot; http://www.google.com &quot;>google</a> - creates hyperlink, optional target, title attributes, URL can be relative or absolute <a name=&quot;section2&quot;></a> - creates anchor in page <a href=&quot;index.html#section2&quot;>section2</a> - to link to in-page anchor <img src=&quot;URL.gif&quot;> - creates image, optional width/height attributes, alt attribute to provide alternate text, align attribute to specify around-text wrapping, border attribute Image tags can be nested in hyperlink tags to create hyperlinked images
HTML Basics: Tables/Frames Both of these are considered evil nowadays. Before <DIVS> were introduced, people used tables to layout websites (e.g. multi-column website) The HTML for tables is obtuse and prone to corruptibility (just try looking at the source of a fully tabled website) But it exists...and could be occasionally useful <table></table> - creates table, optional width/height/align/bgcolor attributes <tr></tr> - creates table row with the same attribute options <td></td> - creates table cell with the same attribute options Frames: web-designers used to use frames to separate the navigation page from the site's content (e.g. all CS websites!) Frames are generally a bad idea...  http://www.karlcore.com/articles/article.php?id=2  So we won't tell you tags for them.
HTML Basics: Forms Very common on the web as they provide interactivity <form></form> - defines form, optional method/name/action attributes to tell browser where to send results when submit pressed <input></input> - generic input tag, used always with type attribute to specify type (checkbox, radio, text, submit), also optional name/value attributes <textarea></textarea> - multi-line text area input, optional rows/cols attributes <select> <option>op1</option> ... </select> - creates combo/dropdown box
HTML Basics: Colors HTML Basics: Color Color is used extensively in HTML: text color, background color, border color, link color, hr color, etc Only 16 color names are approved by W3C - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow All other colors should be referred to by Hexadecimal codes (#RRGGBB) Always pick a pleasing color scheme for your site Color references:   http://w3schools.com/html/html_colors.asp   http://www.degraeve.com/color-palette/   http://wellstyled.com/tools/colorscheme2/index-en.html   http://wellstyled.com/tools/colorscheme2/index-en.html   http://www.siteprocentral.com/cgi-bin/feed/feed.cgi
HTML Basics: References http://w3schools.com/html/default.asp http://w3schools.com/html/html_quick.asp http://webmonkey.com/webmonkey/reference/html_cheatsheet/ http://www.htmlcodetutorial.com / http://validator.w3.org /
Standards Read the W3C Specs! Search them! Use the W3C Validator! Write valid XHTML Strict/Transitional (or HTML 4.1) whenever possible (always!) Separate content and presentation: use style sheets to change the look of your site!
Document Object Model A graph representation of the structure of an HTML/XHTML document An API for accessing and interacting with the graph and its elements The key ingredient to DHTML, AJAX, and this whole Web 2.0 thing Visualizer:  http://www.aharef.info/static/htmlgraph/
CSS
Cascading Style Sheets A standard method of applying style and appearance information to text and other elements of a web page Cascading means that properties “cascade” down through all child elements of a given element
Selectors Style sheets are made up of individual style elements that define size, color, fonts, etc. Each style has a unique name: a selector Selectors refer to specific elements, or sets of elements, in your (X)HTML files
Pseudo Selectors pseudo selectors can select specific parts of an element, or elements with specific properties allows us to create :hover effects
Syntax C style syntax almost never need the @media type declaration, but it is very useful to know - can target different types of devices easily adding a background color to the body: body { background: red; }
Style Sheets To style a webpage, you need lots of individual selectors and styles Create style sheets to contain all of these style definitions add them to your page a number of ways: <link rel=stylesheet href=&quot;whatever.css&quot; type=&quot;text/css&quot;> <style type=”text/css”> @import: url(aStyle.css) </style> or declare styles right in the style tag
CSS Layout There are two types of elements in the CSS world: box level elements, and inline elements tags that would normally cause a newline in html are generally block level elements <div> is the empty box element text it usually inline content <span> is the empty inline element Any element can be told to be a box
CSS Positioning There are a few different ways to position box elements: position absolute fixed relative float - most people are confused by this! left right
Box Model
CSS Properties http://www.ilovejackdaniels.com/css_cheat_sheet.pdf
Demo
Considerations CSS does not behave as expected if your  (X)HTML is not well formed: VALIDATE! There are more tags that you will ever memorize, so look things up with google CSS is complex - go home, read about it online, try things out.  The best way to learn is probably to look at existing web pages CSS and see what does what Oh, and its not exactly a standard...
CSS Standards CSS is a W3C standard Unfortunately, Internet Explorer decided not to implement the standard the correct way Generally, you will have to “hack” your CSS to get it to work the way you want in IE Furthermore, there are multiple levels of support, and every browser varies on this
CSS References http://www.ilovejackdaniels.com/css_cheat_sheet.pdf http://www.w3.org/Style/CSS/ http://www.w3schools.com/css/ http://www.csszengarden.com http://meyerweb.com/eric/css/edge/ http://jigsaw.w3.org/css-validator/
Questions?
Contact Pamela Fox:  [email_address] Ross Boucher:  [email_address] UPE:  [email_address] On the web:  http://pollux.usc.edu/~upe/

More Related Content

What's hot (20)

Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
Bootstrap ppt
Bootstrap pptBootstrap ppt
Bootstrap ppt
Ishtdeep Hora
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Lecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block BuildingLecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block Building
Mubashir Ali
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Rajnirani18
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
Html
HtmlHtml
Html
irshadahamed
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Html
HtmlHtml
Html
Nandakumar Ganapathy
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
Md. Sirajus Salayhin
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
sentayehu
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
satvirsandhu9
 
Web Development
Web DevelopmentWeb Development
Web Development
SabahtHussein
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Ravinder Kamboj
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Lecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block BuildingLecture-3: Introduction to html - Basic Structure & Block Building
Lecture-3: Introduction to html - Basic Structure & Block Building
Mubashir Ali
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
Pro Guide
 
WEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptxWEB DEVELOPMENT.pptx
WEB DEVELOPMENT.pptx
Rajnirani18
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
sentayehu
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Presentation on HTML
Presentation on HTMLPresentation on HTML
Presentation on HTML
satvirsandhu9
 

Viewers also liked (20)

Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
MayaLisa
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Shashank Skills Academy
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
Html Ppt
Html PptHtml Ppt
Html Ppt
vijayanit
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @media
Wynn Netherland
 
The importance of web design - Women Techmakers Galicia
The importance of web design - Women Techmakers GaliciaThe importance of web design - Women Techmakers Galicia
The importance of web design - Women Techmakers Galicia
Ana Cidre
 
Html css basic
Html css basicHtml css basic
Html css basic
健樺 古
 
Instagram workshop
Instagram workshopInstagram workshop
Instagram workshop
Bruno Bašić
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
WebDesignWorkshop
 
Instagram workshop for university post
Instagram workshop for university postInstagram workshop for university post
Instagram workshop for university post
Ida Blinkenberg Lidell
 
Website design and marketing workshop slides
Website design and marketing workshop slidesWebsite design and marketing workshop slides
Website design and marketing workshop slides
Livia Oldland
 
Facebook Workshop Powerpoint
Facebook Workshop PowerpointFacebook Workshop Powerpoint
Facebook Workshop Powerpoint
skagitmarketing
 
Facebook workshop
Facebook workshop Facebook workshop
Facebook workshop
Deepan Chakravarthy
 
HTML&CSS 태그, 속성, 셀렉터
HTML&CSS 태그, 속성, 셀렉터HTML&CSS 태그, 속성, 셀렉터
HTML&CSS 태그, 속성, 셀렉터
Booseol Shin
 
3-2. selector api
3-2. selector api3-2. selector api
3-2. selector api
JinKyoungHeo
 
Facebook Advertising Deep Dive Workshop
Facebook Advertising Deep Dive WorkshopFacebook Advertising Deep Dive Workshop
Facebook Advertising Deep Dive Workshop
Growth Hacking Asia
 
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1
Jae Woo Woo
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
MayaLisa
 
CSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @mediaCSS Metaframeworks: King of all @media
CSS Metaframeworks: King of all @media
Wynn Netherland
 
The importance of web design - Women Techmakers Galicia
The importance of web design - Women Techmakers GaliciaThe importance of web design - Women Techmakers Galicia
The importance of web design - Women Techmakers Galicia
Ana Cidre
 
Html css basic
Html css basicHtml css basic
Html css basic
健樺 古
 
Instagram workshop for university post
Instagram workshop for university postInstagram workshop for university post
Instagram workshop for university post
Ida Blinkenberg Lidell
 
Website design and marketing workshop slides
Website design and marketing workshop slidesWebsite design and marketing workshop slides
Website design and marketing workshop slides
Livia Oldland
 
Facebook Workshop Powerpoint
Facebook Workshop PowerpointFacebook Workshop Powerpoint
Facebook Workshop Powerpoint
skagitmarketing
 
HTML&CSS 태그, 속성, 셀렉터
HTML&CSS 태그, 속성, 셀렉터HTML&CSS 태그, 속성, 셀렉터
HTML&CSS 태그, 속성, 셀렉터
Booseol Shin
 
Facebook Advertising Deep Dive Workshop
Facebook Advertising Deep Dive WorkshopFacebook Advertising Deep Dive Workshop
Facebook Advertising Deep Dive Workshop
Growth Hacking Asia
 
[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1[WEB UI BASIC] CSS_1
[WEB UI BASIC] CSS_1
Jae Woo Woo
 
Ad

Similar to HTML & CSS Workshop Notes (20)

Download Workshop Lecture
Download Workshop LectureDownload Workshop Lecture
Download Workshop Lecture
webhostingguy
 
Html starting
Html startingHtml starting
Html starting
Rahul Dihora
 
Intro to html
Intro to htmlIntro to html
Intro to html
anshuman rahi
 
Intro to html
Intro to htmlIntro to html
Intro to html
anshuman rahi
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
Web Design-III IT.ppt
Web Design-III IT.pptWeb Design-III IT.ppt
Web Design-III IT.ppt
banu236831
 
WebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.pptWebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.ppt
SarikaPurohit1
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Lecture 4
Lecture 4Lecture 4
Lecture 4
uccwebcourses
 
Markup Documents
Markup DocumentsMarkup Documents
Markup Documents
Steven Cahill
 
1. HTML
1. HTML1. HTML
1. HTML
Pavle Đorđević
 
Introduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page DevelopmentIntroduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page Development
BhargaviDalal4
 
Supplement web design
Supplement web designSupplement web design
Supplement web design
shelly3160
 
Unit I- HTML, CSS, Bootstrap .pptx
Unit        I- HTML, CSS, Bootstrap .pptxUnit        I- HTML, CSS, Bootstrap .pptx
Unit I- HTML, CSS, Bootstrap .pptx
dikshaahire256
 
xhtml_css.ppt
xhtml_css.pptxhtml_css.ppt
xhtml_css.ppt
fakeaccount225095
 
Episode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for SalesforceEpisode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for Salesforce
Jitendra Zaa
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
peak3
 
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Salvatore Iaconesi
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Download Workshop Lecture
Download Workshop LectureDownload Workshop Lecture
Download Workshop Lecture
webhostingguy
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 
Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
abidibo Contini
 
Web Design-III IT.ppt
Web Design-III IT.pptWeb Design-III IT.ppt
Web Design-III IT.ppt
banu236831
 
WebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.pptWebDev Simplified Day 1 ppt.ppt
WebDev Simplified Day 1 ppt.ppt
SarikaPurohit1
 
Introduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page DevelopmentIntroduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page Development
BhargaviDalal4
 
Supplement web design
Supplement web designSupplement web design
Supplement web design
shelly3160
 
Unit I- HTML, CSS, Bootstrap .pptx
Unit        I- HTML, CSS, Bootstrap .pptxUnit        I- HTML, CSS, Bootstrap .pptx
Unit I- HTML, CSS, Bootstrap .pptx
dikshaahire256
 
Episode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for SalesforceEpisode 14 - Basics of HTML for Salesforce
Episode 14 - Basics of HTML for Salesforce
Jitendra Zaa
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
peak3
 
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3
Salvatore Iaconesi
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Ad

More from Pamela Fox (20)

Teaching Programming Online
Teaching Programming OnlineTeaching Programming Online
Teaching Programming Online
Pamela Fox
 
Engineering culture
Engineering cultureEngineering culture
Engineering culture
Pamela Fox
 
Django Admin: Widgetry & Witchery
Django Admin: Widgetry & WitcheryDjango Admin: Widgetry & Witchery
Django Admin: Widgetry & Witchery
Pamela Fox
 
A Year of Hermit Hacking
A Year of Hermit HackingA Year of Hermit Hacking
A Year of Hermit Hacking
Pamela Fox
 
The Developer Experience
The Developer Experience The Developer Experience
The Developer Experience
Pamela Fox
 
Making JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More Approachable
Pamela Fox
 
How I became a born again vegetable-tarian
How I became a born again vegetable-tarianHow I became a born again vegetable-tarian
How I became a born again vegetable-tarian
Pamela Fox
 
The Developer Experience
The Developer ExperienceThe Developer Experience
The Developer Experience
Pamela Fox
 
No, Really, I'm Shy
No, Really, I'm ShyNo, Really, I'm Shy
No, Really, I'm Shy
Pamela Fox
 
Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)
Pamela Fox
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
Pamela Fox
 
The Wonders of the "Onesie"
The Wonders of the "Onesie"The Wonders of the "Onesie"
The Wonders of the "Onesie"
Pamela Fox
 
I’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS WorldI’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS World
Pamela Fox
 
Google Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformGoogle Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, Platform
Pamela Fox
 
Collaborative Mapping with Google Wave
Collaborative Mapping with Google WaveCollaborative Mapping with Google Wave
Collaborative Mapping with Google Wave
Pamela Fox
 
Google Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google MapsGoogle Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google Maps
Pamela Fox
 
Google Products & Google Maps
Google Products & Google MapsGoogle Products & Google Maps
Google Products & Google Maps
Pamela Fox
 
Mashups & APIs
Mashups & APIsMashups & APIs
Mashups & APIs
Pamela Fox
 
A World of Words
A World of WordsA World of Words
A World of Words
Pamela Fox
 
Web APIs & Google APIs
Web APIs & Google APIsWeb APIs & Google APIs
Web APIs & Google APIs
Pamela Fox
 
Teaching Programming Online
Teaching Programming OnlineTeaching Programming Online
Teaching Programming Online
Pamela Fox
 
Engineering culture
Engineering cultureEngineering culture
Engineering culture
Pamela Fox
 
Django Admin: Widgetry & Witchery
Django Admin: Widgetry & WitcheryDjango Admin: Widgetry & Witchery
Django Admin: Widgetry & Witchery
Pamela Fox
 
A Year of Hermit Hacking
A Year of Hermit HackingA Year of Hermit Hacking
A Year of Hermit Hacking
Pamela Fox
 
The Developer Experience
The Developer Experience The Developer Experience
The Developer Experience
Pamela Fox
 
Making JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More Approachable
Pamela Fox
 
How I became a born again vegetable-tarian
How I became a born again vegetable-tarianHow I became a born again vegetable-tarian
How I became a born again vegetable-tarian
Pamela Fox
 
The Developer Experience
The Developer ExperienceThe Developer Experience
The Developer Experience
Pamela Fox
 
No, Really, I'm Shy
No, Really, I'm ShyNo, Really, I'm Shy
No, Really, I'm Shy
Pamela Fox
 
Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)Writing Apps the Google-y Way (Brisbane)
Writing Apps the Google-y Way (Brisbane)
Pamela Fox
 
Writing Apps the Google-y Way
Writing Apps the Google-y WayWriting Apps the Google-y Way
Writing Apps the Google-y Way
Pamela Fox
 
The Wonders of the "Onesie"
The Wonders of the "Onesie"The Wonders of the "Onesie"
The Wonders of the "Onesie"
Pamela Fox
 
I’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS WorldI’M A Barbie Girl In A CS World
I’M A Barbie Girl In A CS World
Pamela Fox
 
Google Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, PlatformGoogle Wave 20/20: Product, Protocol, Platform
Google Wave 20/20: Product, Protocol, Platform
Pamela Fox
 
Collaborative Mapping with Google Wave
Collaborative Mapping with Google WaveCollaborative Mapping with Google Wave
Collaborative Mapping with Google Wave
Pamela Fox
 
Google Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google MapsGoogle Products: Deep Dive on Google Maps
Google Products: Deep Dive on Google Maps
Pamela Fox
 
Google Products & Google Maps
Google Products & Google MapsGoogle Products & Google Maps
Google Products & Google Maps
Pamela Fox
 
Mashups & APIs
Mashups & APIsMashups & APIs
Mashups & APIs
Pamela Fox
 
A World of Words
A World of WordsA World of Words
A World of Words
Pamela Fox
 
Web APIs & Google APIs
Web APIs & Google APIsWeb APIs & Google APIs
Web APIs & Google APIs
Pamela Fox
 

Recently uploaded (20)

Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Gihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai TechnologyGihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai Technology
zainkhurram1111
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
STKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 versionSTKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 version
Dr. Jimmy Schwarzkopf
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
The case for on-premises AI
The case for on-premises AIThe case for on-premises AI
The case for on-premises AI
Principled Technologies
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 
Cyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptxCyber Security Legal Framework in Nepal.pptx
Cyber Security Legal Framework in Nepal.pptx
Ghimire B.R.
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Gihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai TechnologyGihbli AI and Geo sitution |use/misuse of Ai Technology
Gihbli AI and Geo sitution |use/misuse of Ai Technology
zainkhurram1111
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
SDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhereSDG 9000 Series: Unleashing multigigabit everywhere
SDG 9000 Series: Unleashing multigigabit everywhere
Adtran
 
STKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 versionSTKI Israel Market Study 2025 final v1 version
STKI Israel Market Study 2025 final v1 version
Dr. Jimmy Schwarzkopf
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Contributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptxContributing to WordPress With & Without Code.pptx
Contributing to WordPress With & Without Code.pptx
Patrick Lumumba
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 

HTML & CSS Workshop Notes

  • 1. Sponsored by Upsilon Pi Epsilon The Computer Science Honors Society
  • 2. Upsilon Pi Epsilon UPE is the Computer Science Honors Society. It is a national honors society, with over 120 University Chapters around the country. “New” to USC
  • 3. Workshop series around web 2.0 technologies This is the first of many Future topics will include: Javascript, PHP, Ruby on Rails, and more. Send us your ideas!
  • 4. What is Web 2.0?
  • 5.  
  • 6. “Web 2.0, a phrase coined by O'Reilly Media in 2004, refers to a supposed second-generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that let people collaborate and share information online in previously unavailable ways.” - Wikipedia (a Web 2.0 organization)
  • 7. Why should I care?
  • 8.  
  • 9. What We’ll Cover Today HTML (Hypertext Markup Language) DOM (Document Object Model - briefly) CSS (Cascading Style Sheets)
  • 10. HTML
  • 11. History of HTML Tim Berners-Lee created first HTML version in the late 1980s (as a subset of SGML) Needed a simple way to share research among colleagues; piggy backed off newly evolving Internet (previously just text) HTML spread as multiple proprietary versions; in 1993 the IETF published a working draft of the first “official” HTML
  • 12. History of HTML Part 2 Simplicity made things easy for people new to computers and publishing Also left the “code” a mess, leaving every browser to handle different mistakes in its own way Soon, the World Wide Web Consortium (W3C) was created to draft a set of standards for all web browsers to adhere to
  • 13. History of HTML Part 3 Features were added to HTML very quickly: tables, colors, backgrounds, fonts, etc. Web sites started becoming very complex It became impossible to manage all the HTML tags needed to style the content on multiple sites, code bases starting becoming huge, tables were being used to make better designs... things got ugly.
  • 14. History of HTML Part 4 We needed a solution to this problem, and that solution was CSS. With the revolution of Cascading Style Sheets, HTML (and later XHTML) became about describing content, not presentation The look of a web page (the presentation) was left entirely to style sheets, which could be common to entire sites
  • 15. Setting up a web “Presence” No point to a website if no one else can see it... USC lets every student create a web presence on the aludra.usc.edu server If you don't have it setup yet: telnet aludra.usc.edu type requestwww follow the instructions
  • 16. Setup Part 2 To see your web presence, point browser to http://www-scf.usc.edu/~username To upload files to your web account, use an FTP client You can download COREFTP(PC) or Fetch(Mac) from usc.edu/software or poke around your PC for an app with &quot;FTP&quot; in title Login to aludra.usc.edu with usual USCWeb login Upload files to public_html folder
  • 17. HTML: What is it? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file can be created using a simple text editor or a WYSIWIG editor
  • 18. Hello World! <html> <head> <title>Hello World!</title> </head> <body> Hello World! </body> </html>
  • 19. HTML Basics: Tags/Attributes Tags/Attributes HTML tags are used to mark-up HTML elements Tags are surrounded by the two characters < and >, which are called angle brackets Tags normally come in pairs like <b> and </b>. The text between the start and end tags is the element content Tags are not case sensitive, <b> means the same as <B>, but use lowercase: you’ll find out its better Tags often have attributes, which gives the browser additional information about displaying the element Attributes come in name-value pairs, with the value in double or single quotes (e.g. <img width=”100px”>)
  • 20. HTML Basics: Formatting Tags Formatting Tags In HTML, formatting is not based on whitespace! (example) Use tags to format text: <p></p> - paragraph tag, optional align attribute <br> - line break tag <b></b> or <strong></strong> - boldface tag, <strong> is more standards-compliant now <i></i> or <em></em> - italics tag, <em> is more standards-compliant now <ul><li>blabla 1</li> .. </ul> - unordered list tag, creates bulleted list, can be nested <ol><li>blabla 1</li> .. </ol> - ordered list tag, creates numbered list, can be nested
  • 21. HTML Basics: Hyperlinks & Images Hyperlinks & Images Anchor tag can be used to create hyperlink or define an anchor within a page <a href=&quot; http://www.google.com &quot;>google</a> - creates hyperlink, optional target, title attributes, URL can be relative or absolute <a name=&quot;section2&quot;></a> - creates anchor in page <a href=&quot;index.html#section2&quot;>section2</a> - to link to in-page anchor <img src=&quot;URL.gif&quot;> - creates image, optional width/height attributes, alt attribute to provide alternate text, align attribute to specify around-text wrapping, border attribute Image tags can be nested in hyperlink tags to create hyperlinked images
  • 22. HTML Basics: Tables/Frames Both of these are considered evil nowadays. Before <DIVS> were introduced, people used tables to layout websites (e.g. multi-column website) The HTML for tables is obtuse and prone to corruptibility (just try looking at the source of a fully tabled website) But it exists...and could be occasionally useful <table></table> - creates table, optional width/height/align/bgcolor attributes <tr></tr> - creates table row with the same attribute options <td></td> - creates table cell with the same attribute options Frames: web-designers used to use frames to separate the navigation page from the site's content (e.g. all CS websites!) Frames are generally a bad idea... http://www.karlcore.com/articles/article.php?id=2 So we won't tell you tags for them.
  • 23. HTML Basics: Forms Very common on the web as they provide interactivity <form></form> - defines form, optional method/name/action attributes to tell browser where to send results when submit pressed <input></input> - generic input tag, used always with type attribute to specify type (checkbox, radio, text, submit), also optional name/value attributes <textarea></textarea> - multi-line text area input, optional rows/cols attributes <select> <option>op1</option> ... </select> - creates combo/dropdown box
  • 24. HTML Basics: Colors HTML Basics: Color Color is used extensively in HTML: text color, background color, border color, link color, hr color, etc Only 16 color names are approved by W3C - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow All other colors should be referred to by Hexadecimal codes (#RRGGBB) Always pick a pleasing color scheme for your site Color references: http://w3schools.com/html/html_colors.asp http://www.degraeve.com/color-palette/ http://wellstyled.com/tools/colorscheme2/index-en.html http://wellstyled.com/tools/colorscheme2/index-en.html http://www.siteprocentral.com/cgi-bin/feed/feed.cgi
  • 25. HTML Basics: References http://w3schools.com/html/default.asp http://w3schools.com/html/html_quick.asp http://webmonkey.com/webmonkey/reference/html_cheatsheet/ http://www.htmlcodetutorial.com / http://validator.w3.org /
  • 26. Standards Read the W3C Specs! Search them! Use the W3C Validator! Write valid XHTML Strict/Transitional (or HTML 4.1) whenever possible (always!) Separate content and presentation: use style sheets to change the look of your site!
  • 27. Document Object Model A graph representation of the structure of an HTML/XHTML document An API for accessing and interacting with the graph and its elements The key ingredient to DHTML, AJAX, and this whole Web 2.0 thing Visualizer: http://www.aharef.info/static/htmlgraph/
  • 28. CSS
  • 29. Cascading Style Sheets A standard method of applying style and appearance information to text and other elements of a web page Cascading means that properties “cascade” down through all child elements of a given element
  • 30. Selectors Style sheets are made up of individual style elements that define size, color, fonts, etc. Each style has a unique name: a selector Selectors refer to specific elements, or sets of elements, in your (X)HTML files
  • 31. Pseudo Selectors pseudo selectors can select specific parts of an element, or elements with specific properties allows us to create :hover effects
  • 32. Syntax C style syntax almost never need the @media type declaration, but it is very useful to know - can target different types of devices easily adding a background color to the body: body { background: red; }
  • 33. Style Sheets To style a webpage, you need lots of individual selectors and styles Create style sheets to contain all of these style definitions add them to your page a number of ways: <link rel=stylesheet href=&quot;whatever.css&quot; type=&quot;text/css&quot;> <style type=”text/css”> @import: url(aStyle.css) </style> or declare styles right in the style tag
  • 34. CSS Layout There are two types of elements in the CSS world: box level elements, and inline elements tags that would normally cause a newline in html are generally block level elements <div> is the empty box element text it usually inline content <span> is the empty inline element Any element can be told to be a box
  • 35. CSS Positioning There are a few different ways to position box elements: position absolute fixed relative float - most people are confused by this! left right
  • 38. Demo
  • 39. Considerations CSS does not behave as expected if your (X)HTML is not well formed: VALIDATE! There are more tags that you will ever memorize, so look things up with google CSS is complex - go home, read about it online, try things out. The best way to learn is probably to look at existing web pages CSS and see what does what Oh, and its not exactly a standard...
  • 40. CSS Standards CSS is a W3C standard Unfortunately, Internet Explorer decided not to implement the standard the correct way Generally, you will have to “hack” your CSS to get it to work the way you want in IE Furthermore, there are multiple levels of support, and every browser varies on this
  • 41. CSS References http://www.ilovejackdaniels.com/css_cheat_sheet.pdf http://www.w3.org/Style/CSS/ http://www.w3schools.com/css/ http://www.csszengarden.com http://meyerweb.com/eric/css/edge/ http://jigsaw.w3.org/css-validator/
  • 43. Contact Pamela Fox: [email_address] Ross Boucher: [email_address] UPE: [email_address] On the web: http://pollux.usc.edu/~upe/