• Save
GDI Seattle Intermediate HTML and CSS Class 1
Upcoming SlideShare
Loading in...5

GDI Seattle Intermediate HTML and CSS Class 1






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    GDI Seattle Intermediate HTML and CSS Class 1 GDI Seattle Intermediate HTML and CSS Class 1 Presentation Transcript

    • INTERMEDIATE HTML AND CSS CLASS 1Intermediate HTML/CSS ~ Girl Develop It ~
    • 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
    • WELCOME! Tell us about yourself. Who are you? What do you hope to get out of the class? What is your favorite dinosaur?
    • 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.
    • REVIEW: TOOLS Browser Chrome Firefox Development Toolkit Chrome - Inspector Firefox - Firebug Text Editor TextWrangler - Mac Notepad ++ - Windows Sublime Text - Mac or Windows
    • 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.
    • 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>
    • 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>
    • 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/>
    • 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"/>
    • 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.
    • 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; }
    • 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; }
    • REVIEW: SELECTOR: ELEMENT Selects all paragraph elements. Selects all image elements. p { property: value; } img { property: value; }
    • REVIEW: SELECTOR: ID Selects all elements with an id of "footer". The associated HTML. #footer { property: value; } <p id="footer">Copyright 2011</p>
    • SELECTOR: CLASS Selects all elements with a class of "warning". The associated HTML. .warning { color: red; } <p class="warning">Run away!</p>
    • 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>
    • STANDARD PRACTICES Awesome, right? But how do people use this REALLY? Reset CSS files Standard widths and sizes Wrappers
    • 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
    • RESET CSS Most elements: Lists: margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none;
    • 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.
    • 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; }
    • 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
    • LINKING ON PAGES <a href = "#section">Go to Section!</a> <a name= "section"></a> Example on Wikipedia
    • 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>
    • @FONT­FACE The world of HTML has progressed beyond Times New Roman and Arial Yay! How do we use new and cool fonts?
    • @FONT­FACE 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?
    • @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; }
    • @FONT­FACE Using the fonts body{ font-family: 'Lato', Arial, sans-serif; }
    • 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
    • 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
    • HTML5 SPECIFICATIONS 2004 - started work 2008 - first public working draft 2011 - last call 2012 - working draft 2014 - planned for stable recommendation
    • WHAT ABOUT THE BROWSERS? Chrome Firefox Internet Explorer Safari Opera
    • HTML5 & CSS3 READINESS HTML5 & CSS3 Readiness
    • CAN I USE? Can I Use?
    • HTML5 PLEASE HTML5 Please
    • W3C HTML5 specs
    • http://www.html5rocks.com
    • https://developer.mozilla.org
    • http://html5doctor.com
    • Too much to cover in our time together But here are some highlights:
    • 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
    • REDEFINES A FEW THINGS Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)
    • ADDS A BUNCH OF NEW FEATURES semantics offline & storage device access connectivity multimedia 3D & graphics performance presentation
    • HTML5 DOCTYPE Minimum information required to ensure that a browser renders using standards mode <!DOCTYPE html>
    • 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">
    • 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
    • SEMANTICS Give meaning to structure
    • NOT SEMANTIC <div id="header"></div> <div class="nav"></div> <div id="footer"></div>
    • SEMANTIC <header></header> <nav></nav> <footer></footer>
    • <SECTION> Group together thematically related content Similar to prior use of the div, but div has no semantic meaning
    • <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
    • <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
    • <ASIDE> Tangentially related content E.g. sidebar, pull quotes
    • <NAV> Contains major navigational information Usually a list of links Often lives in the header E.g. site navigation
    • <ARTICLE> Self-contained related content E.g. blog posts, news stories, comments, reviews, forum posts
    • element index sectioning flowchart
    • 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>
    • 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>
    • 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>
    • SEMANTIC MARKUP ENHANCES Accessibility Searchability Internationalization Interoperability It also helps treat the plague of div-itis!
    • 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”
    • 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
    • QUESTIONS? ?