Welcome!

Wifi Network:

Wifi Password:

Beyond the Basics of HTML/CSS

Class 1

Welcome!

Welcome!

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
  Sublime Text 2 - Linux, Mac or Windows

Review: Anatomy of a 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

• A paragraph is your content

• Putting your content into an HTML tag to make it look like a paragraph is Structure

  <p>A paragraph is your content</p>

• Make the font of your paragraph blue and 18px is presentation

  A paragraph is your content

Anatomy of an HTML element

• Element
  • An individual component of HTML
  • Paragraph, heading, table, list, div, link, image, etc.
• Tag
  • Marks the beginning and end of an element
  • Opening tag and closing tag
  • Tags contain characters that indicate the tags purpose
  • Basic structure:

    <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>text goes here</p>) contains text
• Stand Alone Element
  • An element that cannot contain anything else
  • These elements are surrounded by self-closing tags
  • The image and break tags are self-closing:

    <br /> 
    <img src="your-image.jpg" />

    Not:

    <br></br> 
    <img src="your-image.jpg"></img>

Review: Anatomy of an HTML element

• Attribute
  • Provides additional information about the HTML element.
  • Class, ID, language, style, identity, source.
  • Placed inside an opening tag, before the right angle bracket.
• Value
  • Value is the value assigned to a given attribute.
  • Values must be contained inside quotation marks.

  <div id="copyright">© GDI 2013</div>
  <img src="your-image.jpg" />
  <a href="http://girldevelopit.com">GDI</a>

CSS: Review

• Cascading Style Sheets
• CSS is a "style sheet language" that lets you style the elements on your page.
• CSS works in conjunction with HTML, but is not HTML itself.

Review: The CSS Rule

selector {
  property: value;
}

Review: CSS Syntax

selector {
  property: value;
  property: value;
  property: value;
}

Review: Selector

Called a "selector" because it selects HTML elements.

Select all paragraph elements:

p {
  property: value;
}

Select all image elements:

img {
  property: value;
}

Review: IDs and Classes

ID example:

<p id="footer">Copyright 2011</p>

Class example:

<p class="warning">Run away!</p>

The difference: A class can be used many times on a page. An ID should only occur once on a page.

Review: IDs and Classes

IDs and classes can be used in your CSS as selectors.

Select the single element with an ID of "footer":

#footer {
  font-size: 14px;
}

Select all elements with the "warning" class:

.warning {
  color: red;
}

The difference: The '#' sign indicates an ID, whereas a period indicates a class in CSS.

Review: Selector Position

Select all strong elements that are within a paragraph:

p strong {
  color: yellow;
}

The associated HTML:

<p>This is <strong>important.</strong></p>

Standard Practices

Awesome, right?

But how do people use this really?

• Normalize and reset CSS files
• Standard widths and sizes
• Containers and wrappers

Reset CSS

Browsers apply default styles to HTML elements unless overriden.

Examples include:

One way to override the defaults: reset CSS

Reset CSS

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

list-style: none;

Normalize CSS

• CSS that overrides some browser defaults to make styles consistent across browsers.
• Keeps useful browser defaults.
• Fixes some bugs in different browsers.
• Created by two developers and available online.

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.

Containers/Wrappers

Containers/wrappers are a good way to center content if the screen width is wider than your content.

The HTML:

<body>
  <div class="wrapper">
    <!-- website content goes here -->
  </div>
</body>

The CSS:

.wrapper {
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
}

Let's Develop It

Getting our feet wet

• Download the practice files.
• Look through index.html in the browser and Sublime Text.
• Add a link to the normalize.css file in the head of the document immediately before the website stylesheet.
• Notice the changes to the layout.
• What happens if you add it after the website stylesheet?

Linking on pages

Two ways to link to another part of the same page:

<a href="#section">Go to the section ID!</a>

<a name="section">Go to the section ID!</a>

Example on Wikipedia

Adding Fonts

It's time to move beyond Times New Roman and Arial!

Two ways to add fonts:

• Use fonts hosted by online services, like Google Web Fonts.
• Add font files to our site files to be downloaded locally.

Fonts: Online Services

• A few examples: Goole Web Fonts (free!), Adobe Edge (free!), Typekit (paid).
• Choose your fonts.
• Paste the code the service provides you in the <head> of your HTML file before the stylesheet.

Demo: Goole Web Fonts

Example of a link provided by Google Web Fonts:

<link href="http://fonts.googleapis.com/css?family=Audiowide|Quicksand:300,400,700|Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css">

Fonts: @font-face

Download fonts and add them to the local site files.

To use the fonts, use @font-face at the very top of your CSS file:

@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;
}

Using Fonts

Use your new fonts throughout your CSS:

body {
  font-family: Lato, Arial, sans-serif;
}

Icon Fonts

• Think WingDings.

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 fonts on the site. The completed example uses:
  • Lato for the body
  • Audiowide for h1
  • Quicksand for h2
• Use the icon font EntypoRegular to change the bullets and jump up/down links.

HTML 5: What is it?

Browser Compatibility

HTML5: Helpful Resources

• W3C HTML5 specs
• http://www.html5rocks.com
• https://developer.mozilla.org
• http://html5doctor.com

The Benefits of HTML5

• Marks some old things obsolete
  • Deprecated items (e.g. frame, frameset, noframes)
  • Presentational elements and attributes replaced by CSS (e.g. font, big, center)
  • reference
• Gives some old elements semantic meaning and separates them from presentation (e.g. b, i, strong, em)

Benefits of HTML5: New Features

• Simpler and more semantic
• Features for offline web applications and storage
• Device access (e.g. file access for drag and drop)
• Connectivity (faster communication between client and server)
• Multimedia (video, audio elements)
• 3D and graphics (e.g. canvas)
• Performance

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).

Semantic HTML

• HTML5 adds more meaningful HTML tags.
• Easier to understand code for humans, machines, and screen readers.
• Improves accessibility, searchability, internationaliation, and interoperability.
• Adds more meaning to the structure (HTML) of your page.
• Presentation unaffected.

Semantic HTML: Example

Not semantic:

<div id="header"></div>

<div class="nav"></div>

<div id="footer"></div>

Semantic:

<header></header>

<nav></nav>

<footer></footer>

HTML5: Structural Elements

HTML5: Structural Elements

HTML5: Structural Elements

HTML5 Element Reference

HTML Element Index

HTML5 Element Flowchart

Semantic HTML: Example

Lots of divs (aka "divitis") lead to unsemantic code:

<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 HTML: Example

More semantic with HTML5 elements:

<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>

What about old browsers?

HTML5Shiv

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

Let's Develop It

Modify the site to use semantic HTML

• Change one pair of elements 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?