Intermediate HTML and CSS

Class 1

Welcome!

About Me!

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
  TextWrangler - Mac
  Notepad ++ - Windows
  Sublime Text - 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

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

Review: The CSS Rule

selector {
  property: value;
}

Review: CSS Syntax

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

Review: Selector: Element

p {
  property: value;
}

Selects all paragraph elements.

img {
  property: value;
}

Selects all image elements.

Review: Selector: ID

#footer {
  property: value;
}

Selects all elements with an id of "footer".

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

The associated HTML.

Selector: Class

.warning {
  color: red;
}

Selects all elements with a class of "warning".

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

The associated HTML.

Review: Selector: Position

p em {
  color: yellow;
}

Selects all em elements that are within a paragraph

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

The associated HTML.

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

  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

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

http://www.google.com/webfonts

In our example, we use Audiowide, Quicksand and Lato

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

@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 W3C’s specification 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

HTML5 Specifications

• 2004 - started work
• 2008 - first public working draft
• 2011 - last call
• 2012 - working draft
• 2014 - planned for stable recommendation

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

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>

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

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

also known as div-itis

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!

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?