GDI Seattle Intermediate HTML and CSS Class 1


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

GDI Seattle Intermediate HTML and CSS Class 1

  1. 1. INTERMEDIATE HTML AND CSS CLASS 1Intermediate HTML/CSS ~ Girl Develop It ~
  2. 2. WELCOME! Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction. Some "rules" We are here for you! Every question is important Help each other Have fun
  3. 3. WELCOME! Tell us about yourself. Who are you? What do you hope to get out of the class? What is your favorite dinosaur?
  4. 4. REVIEW: TERMS Web design The process of planning, structuring and creating a website Web development The process of programming dynamic web applications Front end The outwardly visible elements of a website or application Back end The inner workings and functionality of a website or application.
  5. 5. REVIEW: TOOLS Browser Chrome Firefox Development Toolkit Chrome - Inspector Firefox - Firebug Text Editor TextWrangler - Mac Notepad ++ - Windows Sublime Text - Mac or Windows
  6. 6. REVIEW: ANATOMY OF A WEBSITE Your Content + HTML: Structure + CSS: Presentation = Your Website A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.
  7. 7. REVIEW: ANATOMY OF A WEBSITE Concrete example A paragraph is your content Putting your content into an HTML tag to make it look like a paragraph is Structure Make the font of your paragraph blue and 18px is presentation A paragraph is your content <p>A paragraph is your content</p>
  8. 8. REVIEW: ANATOMY OF AN HTML ELEMENT Element An individual component of HTML Paragraph, Table, List Tag Markers that signal the beginning and end of an element Opening tag and Closing Tag <tagname>Stuff in the middle</tagname> <p>This is a sample paragraph.</p>
  9. 9. REVIEW: ANATOMY OF AN HTML ELEMENT Container Element An element that can contain other elements or content A paragraph (<p>) contains text Stand Alone Element An element that cannot contain anything else <br/> <img/>
  10. 10. REVIEW: ANATOMY OF AN HTML ELEMENT Attribute Each element can have a variety of attributes Language, style, identity, source Value Value is the value assigned to a given attribute. <p lang="fr">C'est la vie</p> <img src="my.picture.jpg"/>
  11. 11. CSS: REVIEW CSS = Cascading Style Sheets CSS is a "style sheet language" that lets you style the elements on your page. CSS is works in conjunction with HTML, but is not HTML itself.
  12. 12. REVIEW: THE CSS RULE A block of CSS is a rule block. The rule starts with a selector. It has sets of properties and values. A property-value pair is a declaration. selector { property: value; }
  13. 13. REVIEW: CSS SYNTAX Declarations: Property and value of style you plan use on HTML element. Declarations end with a semicolon Declarations can be grouped and are surrounded by curly brackets. selector { property: value; property: value; property: value; }
  14. 14. REVIEW: SELECTOR: ELEMENT Selects all paragraph elements. Selects all image elements. p { property: value; } img { property: value; }
  15. 15. REVIEW: SELECTOR: ID Selects all elements with an id of "footer". The associated HTML. #footer { property: value; } <p id="footer">Copyright 2011</p>
  16. 16. SELECTOR: CLASS Selects all elements with a class of "warning". The associated HTML. .warning { color: red; } <p class="warning">Run away!</p>
  17. 17. REVIEW: SELECTOR: POSITION Selects all em elements that are within a paragraph The associated HTML. p em { color: yellow; } <p>This is <em>important.</em></p>
  18. 18. STANDARD PRACTICES Awesome, right? But how do people use this REALLY? Reset CSS files Standard widths and sizes Wrappers
  19. 19. RESET CSS Even though HTML is the structure and CSS is the design, some HTML elements have default styles Examples include: Bulleted lists like this one have standard bullets Paragraphs have default padding Links are blue and underlined
  20. 20. RESET CSS Most elements: Lists: margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none;
  21. 21. STANDARD WIDTHS AND SIZES Some sizes that are good to know about A standard font size is usually 12px Screens vary greatly in width! Standardize your design a couple ways Set the body width to a specific width Set the content area width to 100%, with max- width of around 1200px/1400px and a min-width of around 960px.
  22. 22. WRAPPERS Wrappers are a good way to center content if the screen width is wider than your content. .wrapper{ width: 100%; max-width:1400px; margin: 0 auto; }
  23. 23. LET'S DEVELOP IT Getting our feet wet Download practice files Look through the page Add a link to the reset.css file in the head of the document Notice the changes to the layout
  24. 24. LINKING ON PAGES <a href = "#section">Go to Section!</a> <a name= "section"></a> Example on Wikipedia
  25. 25. PSEUDO SELECTORS In addition to applying css to elements, classes and ids, you can apply css on certain events. Most notably, hover I will only turn blue on hover .turn-blue:hover{ background-color: lightblue; color: grey } <div class = "turn-blue">I will only turn blue on hover</div>
  26. 26. @FONT­FACE The world of HTML has progressed beyond Times New Roman and Arial Yay! How do we use new and cool fonts?
  27. 27. @FONT­FACE Use font from outside sources (like Google Web Fonts) In our example, we use Audiowide, Quicksand and Lato <link href="|Quicksand:300,400,700|Lato:100,300,400,700,900,100 italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css"> What does that do?
  28. 28. @FONT­FACE Download fonts locally In our example, we downloaded 'Entypo' To use it, add the following to css: @font-face { font-family: 'EntypoRegular'; src: url('font/Entypo-webfont.eot'); src: url('font/Entypo-webfont.eot?#iefix') format('embedded-opentype'), url('font/Entypo-webfont.woff') format('woff'), url('font/Entypo-webfont.ttf') format('truetype'), url('font/Entypo-webfont.svg#EntypoRegular') format('svg'); font-weight: normal; font-style: normal; }
  29. 29. @FONT­FACE Using the fonts body{ font-family: 'Lato', Arial, sans-serif; }
  30. 30. LET'S DEVELOP IT Use your new-found knowledge! Update the links in the header and footer to jump to the corresponding section Update the links in the site to change color on hover. Try to update the background color too! Update the font of the site. The completed example uses: Lato for the body Audiowide for h1 Quicksand for h2 EntypoRegular for the bullets and jump up/down links
  31. 31. HTML 5: WHAT IS IT? Formally, HTML5 is the for the next version of HTML. Informally, people use "HTML5" to refer to a whole set of new web standards and abilities: HTML5 CSS3 JavaScript W3C’s specification
  32. 32. HTML5 SPECIFICATIONS 2004 - started work 2008 - first public working draft 2011 - last call 2012 - working draft 2014 - planned for stable recommendation
  33. 33. WHAT ABOUT THE BROWSERS? Chrome Firefox Internet Explorer Safari Opera
  34. 34. HTML5 & CSS3 READINESS HTML5 & CSS3 Readiness
  35. 35. CAN I USE? Can I Use?
  36. 36. HTML5 PLEASE HTML5 Please
  38. 38. W3C HTML5 specs
  39. 39.
  40. 40.
  41. 41.
  43. 43. Too much to cover in our time together But here are some highlights:
  44. 44. MARKS SOME OLD THINGS OBSOLETE EXAMPLES Deprecated items (e.g. frame, frameset, noframes) Presentational elements and attributes replaced by CSS (e.g. font, big, center) reference
  45. 45. REDEFINES A FEW THINGS Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)
  46. 46. ADDS A BUNCH OF NEW FEATURES semantics offline & storage device access connectivity multimedia 3D & graphics performance presentation
  47. 47. HTML5 DOCTYPE Minimum information required to ensure that a browser renders using standards mode <!DOCTYPE html>
  48. 48. OLD DOCTYPES <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ""> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  49. 49. SEMANTIC HTML “The use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation (look).” -Wikipedia
  50. 50. SEMANTICS Give meaning to structure
  51. 51. NOT SEMANTIC <div id="header"></div> <div class="nav"></div> <div id="footer"></div>
  52. 52. SEMANTIC <header></header> <nav></nav> <footer></footer>
  54. 54. <SECTION> Group together thematically related content Similar to prior use of the div, but div has no semantic meaning
  55. 55. <HEADER> Container for a group of introductory or navigational aids Document can have multiple header elements E.g. One for the page, one for each section
  56. 56. <FOOTER> Contains information about its containing element E.g. who wrote it, copyright, links to related content, etc. Document can have multiple footer elements E.g. One for the page, one for each section
  57. 57. <ASIDE> Tangentially related content E.g. sidebar, pull quotes
  58. 58. <NAV> Contains major navigational information Usually a list of links Often lives in the header E.g. site navigation
  59. 59. <ARTICLE> Self-contained related content E.g. blog posts, news stories, comments, reviews, forum posts
  60. 60. element index sectioning flowchart
  61. 61. NOT SEMANTIC <body> <div id="header"> <h1>Hi, I'm a header!</h1> <div id="nav"> <ul> <li><a href="foo">foo</a></li> <li><a href="bar">bar</a></li> </ul> </div> </div> <div id="main"> <div class="article">foo</div> <div class="article">bar</div> </div> <div id="footer">Hi, I'm a footer!</div> </body>
  62. 62. A LOT OF DIVS also known as div-itis <body> <div id="header"> <h1>Hi, I'm a header!</h1> <div id="nav"> <ul> <li><a href="foo">foo</a></li> <li><a href="bar">bar</a></li> </ul> </div> </div> <div id="main"> <div class="article">foo</div> <div class="article">bar</div> </div> <div id="footer">Hi, I'm a footer!</div> </body>
  63. 63. SEMANTIC <body> <header> <h1>Hi, I'm a header!</h1> <nav> <ul> <li><a href="">foo</a></li> <li><a href="">bar</a></li> </ul> </nav> </header> <section> <article>foo</article> <article>bar</article> </section> <footer>Hi, I'm a footer!</footer> </body>
  64. 64. SEMANTIC MARKUP ENHANCES Accessibility Searchability Internationalization Interoperability It also helps treat the plague of div-itis!
  66. 66. HTML5SHIV HTML5 IE enabling script HTML5Shiv <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]--> “polyfill (n): a JavaScript shim that replicates the standard API for older browsers”
  67. 67. LET'S DEVELOP IT Modify the site to use semantic HTML Change one small thing at a time Remember to modify the CSS to match the HTML You have 10-15 minutes to get started You won't be able to change everything - if we have time, you can continue at the end of the workshop
  68. 68. QUESTIONS? ?