HTML and CSS

Transcript

1. 
   Wednesday, September 19, 12
   

   View Slide

2. What is HTML?
   What is CSS?
   Wikipedia: The purpose of a web browser is to read HTML
   documents and compose them into visual or audible web pages.
   The browser does not display the HTML tags, but uses the tags
   to interpret the content of the page.
   Web browsers can also refer to Cascading Style Sheets (CSS) to
   define the appearance and layout of text and other material. The
   W3C, maintainer of both the HTML and the CSS standards,
   encourages the use of CSS over explicitly presentational HTML
   markup.
   It primarily exists to separate the content from the presentation.
   Better question: What is HTML for?
   Wednesday, September 19, 12
   

   View Slide

3. Anatomy of HTML Elements
   Google
   Content
   
   Wednesday, September 19, 12
   

   View Slide

4. Anatomy of an HTML file
   • Elements (or tags) My paragraph.
   • Attributes click here
   
   
   
   Simple Title
   
   
   
   Google
   
   
   Wednesday, September 19, 12
   

   View Slide

5. p {
   color: red;
   }
   
   
   Simple Title
   
   
   
   Google
   
   
   How to use a CSS file
   index.html
   stylesheet.css
   HTML
   CSS
   Wednesday, September 19, 12
   

   View Slide

6. This is an HTML paragraph.
   Welcome!
   HTML in action
   p {
   color: blue;
   font-weight: bold;
   }
   h1 {
   background: gray;
   }
   CSS in action
   Wednesday, September 19, 12
   

   View Slide

7. HTML CSS
   defines the structure defines the appearance
   HyperText Markup Language Cascading Style Sheets
   what is presented how it’s presented
   -VS-
   this is a paragraph all paragraphs are red
   Wednesday, September 19, 12
   

   View Slide

8. Old and Busted New Hotness
   Types of Markup Structural markup only!
   HTML HTML
   Not much Handles all presentation code
   CSS CSS
   • Structural
   • Presentational
   
   o hai
   
   Methodologies
   Wednesday, September 19, 12
   

   View Slide

9. Why does this matter?
   • Looks nasty
   • Hard to maintain
   • Repetitive
   Old
   • Compatibility
   • Organization
   • Reusability
   New
   old_html.html
   new_html.html
   new_stylesheet.css
   Structural and presentational markup together
   Structural
   Presentational
   
   o hai
   
   o hai
   p {
   color: red;
   }
   Wednesday, September 19, 12
   

   View Slide

10. Why does it matter?
    Never gonna give you up,
    Never gonna let you down,
    Never gonna run around and desert you.
    Never gonna make you cry,
    Never gonna say goodbye,
    Never gonna tell a lie and hurt you.
    p {
    color: ;
    } Never gonna give you up,
    Never gonna let you down,
    Never gonna run around and desert you.
    Never gonna make you cry,
    Never gonna say goodbye,
    Never gonna tell a lie and hurt you.
    output
    red
    blue
    Never gonna give you up,
    Never gonna let you down,
    Never gonna run around and desert you.
    Never gonna make you cry,
    Never gonna say goodbye,
    Never gonna tell a lie and hurt you.
    output
    Wednesday, September 19, 12
    

    View Slide

11. HTML Tags
    Doctype:
    Strict, Traditional,
    Frameset
    Wednesday, September 19, 12
    

    View Slide

12. CSS Properties
    CSS 1
    or
    CSS 2
    Wednesday, September 19, 12
    

    View Slide

13. br/>"http://www.w3.org/TR/html4/loose.dtd">
    
    
    Hello World!
    
    
    Just saying hi.
    
    
    !
    DOCTYPE
    Wednesday, September 19, 12
    

    View Slide

14. "OJOTUSVDUJPOUIBUBTTPDJBUFTBQBSUJDVMBS4(.-PS9.-EPDVNFOU
    GPSFYBNQMF BXFCQBHF
    XJUIB%PDVNFOU5ZQF%FpOJUJPO %5%
    GPS
    FYBNQMF UIFGPSNBMEFpOJUJPOPGBQBSUJDVMBSWFSTJPOPG)5.-
    
    doc•type dec•la•ra•tion
    noun c㷦EÅLU⒒Q㷧EFLMⓒ㷦S⒑TIⓒOc
    "OJOTUSVDUJPOUIBUBTTPDJBUFTBQBSUJDVMBS4(.-PS9.-EPDVNFOU
    GPSFYBNQMF BXFCQBHF
    XJUIB%PDVNFOU5ZQF%FpOJUJPO %5%
    GPS
    FYBNQMF UIFGPSNBMEFpOJUJPOPGBQBSUJDVMBSWFSTJPOPG)5.-
    
    (or Doctype)
    markup languages
    HTML v4.01,
    HTML v5,
    XHTML 1.1, etc
    Wednesday, September 19, 12
    

    View Slide

15. Doctypes tell your browser how to render your code.
    Wednesday, September 19, 12
    

    View Slide

16. br/>"http://www.w3.org/TR/html4/loose.dtd">
    
    HTML 4.01 DOCTYPES
    HTML5 DOCTYPE
    
    LAME!
    Wednesday, September 19, 12
    

    View Slide

17. 
    
    "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
    BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
    
    HTML 4.01 Strict Doctype
    Wednesday, September 19, 12
    

    View Slide

18. So, why use a doctype?
    Using a doctype ensures maximum
    compatibility across browsers.
    Think of a doctype as a set of rules
    by which all browsers must play.
    Q:
    A:
    Wednesday, September 19, 12
    

    View Slide

19. 
    Wednesday, September 19, 12
    

    View Slide

20. View Slide

21. Thank you!
    Ryan L. Cross
    Cylence, Inc. (cylence.com)
    Twitter: @slant, @cylenceinc
    Upcoming Enclave Discussions
    May
    iOS
    June
    UX
    July
    jQuery
    August
    Photoshop
    enclavecoop.com/discussions
    Wednesday, September 19, 12
    

    View Slide