GDI Seattle Intermediate HTML and CSS Class 1
2 likes798 views
The document provides an overview of an intermediate HTML and CSS class. It begins with introductions and setting ground rules. It then reviews key terms like web design, development, front end and back end. It reviews common tools like browsers, development toolkits, and text editors. It reviews the anatomy of a website, HTML elements, and CSS syntax. It covers techniques like resets, standard widths, wrappers, pseudo-selectors, linking pages, and using custom fonts. Finally, it provides a brief introduction to HTML5 and highlights new semantic elements.
![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”](https://image.slidesharecdn.com/intermediatehtmlcssclass1-130704002336-phpapp02/85/GDI-Seattle-Intermediate-HTML-and-CSS-Class-1-73-320.jpg)
GDI Seattle Intermediate HTML and CSS Class 1
- 1. INTERMEDIATE HTML AND CSS CLASS 1Intermediate HTML/CSS ~ Girl Develop It ~
- 3. 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
- 4. WELCOME! Tell us about yourself. Who are you? What do you hope to get out of the class? What is your favorite dinosaur?
- 5. 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.
- 6. REVIEW: TOOLS Browser Chrome Firefox Development Toolkit Chrome - Inspector Firefox - Firebug Text Editor TextWrangler - Mac Notepad ++ - Windows Sublime Text - Mac or Windows
- 7. 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.
- 8. 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>
- 9. 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>
- 10. 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/>
- 11. 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"/>
- 12. 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.
- 13. 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; }
- 14. 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; }
- 15. REVIEW: SELECTOR: ELEMENT Selects all paragraph elements. Selects all image elements. p { property: value; } img { property: value; }
- 16. REVIEW: SELECTOR: ID Selects all elements with an id of "footer". The associated HTML. #footer { property: value; } <p id="footer">Copyright 2011</p>
- 17. SELECTOR: CLASS Selects all elements with a class of "warning". The associated HTML. .warning { color: red; } <p class="warning">Run away!</p>
- 18. 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>
- 19. STANDARD PRACTICES Awesome, right? But how do people use this REALLY? Reset CSS files Standard widths and sizes Wrappers
- 20. 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
- 21. RESET CSS Most elements: Lists: margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none;
- 22. 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.
- 23. 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; }
- 24. 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
- 25. LINKING ON PAGES <a href = "#section">Go to Section!</a> <a name= "section"></a> Example on Wikipedia
- 26. 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>
- 27. @FONTFACE The world of HTML has progressed beyond Times New Roman and Arial Yay! How do we use new and cool fonts?
- 28. @FONTFACE Use font from outside sources (like Google Web Fonts) In our example, we use Audiowide, Quicksand and Lato http://www.google.com/webfonts <link href="http://fonts.googleapis.com/css?family=Audiowide|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?
- 29. @FONTFACE 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; }
- 30. @FONTFACE Using the fonts body{ font-family: 'Lato', Arial, sans-serif; }
- 31. 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
- 32. 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
- 33. HTML5 SPECIFICATIONS 2004 - started work 2008 - first public working draft 2011 - last call 2012 - working draft 2014 - planned for stable recommendation
- 34. WHAT ABOUT THE BROWSERS? Chrome Firefox Internet Explorer Safari Opera
- 35. HTML5 & CSS3 READINESS HTML5 & CSS3 Readiness
- 37. CAN I USE? Can I Use?
- 43. W3C HTML5 specs
- 47. SO WHAT'S SO COOL ABOUT IT?
- 48. Too much to cover in our time together But here are some highlights:
- 50. 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
- 51. REDEFINES A FEW THINGS Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)
- 52. ADDS A BUNCH OF NEW FEATURES semantics offline & storage device access connectivity multimedia 3D & graphics performance presentation
- 53. HTML5 DOCTYPE Minimum information required to ensure that a browser renders using standards mode <!DOCTYPE html>
- 54. OLD DOCTYPES <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 55. 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
- 56. SEMANTICS Give meaning to structure
- 57. NOT SEMANTIC <div id="header"></div> <div class="nav"></div> <div id="footer"></div>
- 60. <SECTION> Group together thematically related content Similar to prior use of the div, but div has no semantic meaning
- 61. <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
- 62. <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
- 63. <ASIDE> Tangentially related content E.g. sidebar, pull quotes
- 64. <NAV> Contains major navigational information Usually a list of links Often lives in the header E.g. site navigation
- 65. <ARTICLE> Self-contained related content E.g. blog posts, news stories, comments, reviews, forum posts
- 67. 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>
- 68. 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>
- 69. SEMANTIC <body> <header> <h1>Hi, I'm a header!</h1> <nav> <ul> <li><a href="http://www.foo.com">foo</a></li> <li><a href="http://www.bar.com">bar</a></li> </ul> </nav> </header> <section> <article>foo</article> <article>bar</article> </section> <footer>Hi, I'm a footer!</footer> </body>
- 70. SEMANTIC MARKUP ENHANCES Accessibility Searchability Internationalization Interoperability It also helps treat the plague of div-itis!
- 73. 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”
- 74. 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
- 75. QUESTIONS? ?