Intro to HTML and CSS

Metrics and Data Viz I

Welcome!

In this class we'll review some basics of HTML/CSS, languages for writing content to the web.

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
```
<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, Table, List
Tag
- Markers that signal the beginning and end of an element
- Opening tag and Closing Tag
```
<tagname>Stuff in the middle</tagname>
```
- Paragraph tags/element
```
<p>This is a sample paragraph.</p>
```

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
- Like an image or break tag:
```
<br/>
<img/>
```

Anatomy of an HTML element

Attribute
- Each element can have a variety of attributes
- 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.
```
<p lang="fr">C'est la vie</p>
<img src="my.picture.jpg"/>
```

Doctype

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
        4.01 Transitional//EN" "http://
        www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.

HTML Tag

After <doctype>, the page content must be contained between <html> tags.

<!DOCTYPE html>
  <html>
  </html>

Head and Body Tags

Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.

Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.

Head and Body Tags: Example

Head and Body Tags

<!DOCTYPE html>
   <html>
    <head>
      <title>Title of the page </title>
    </head>
    <body>
       The page content here.
    </body>
  </html>

Nesting

All elements "nest" inside one another

Nesting is what happens when you put other containing tags inside other containing tags.

For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>

Nesting Order

Whichever element OPENS first CLOSES last

Nesting: Example

Elements are 'nested' inside the <body> tag.

<body>
    <p>A paragraph inside the body tag</p>
</body>

Paragraphs 'nested' inside list items.

<ul>
  <li>
    <p>A paragraph inside a list item</p>
  </li>
</ul>

HTML Elements

Element: Paragraph

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

<p>Paragraph 1</p> <p>Paragraph 2</p>  <p>Paragraph 3</p>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

<p>Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

* White space is only for humans. You can write your code with any spacing.

Example: Paragraphs

Paragraphs allow you to format your content in a readable fashion.

* You can edit how paragraphs are displayed with CSS

Element: Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

* Heading number indicates hierarchy, not size. Think of outlines from high school papers

Example: Headings

Formatted text

<p>
 Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>

Here is a paragraph with Emphasized text and Important text.

* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.

Element: Link

Links have three components

Tag: <a></a>
Href attribute: "http://www.girldevelopit.com"
Title attribute: "Girl Develop It"

<a href="http://aureliamoser.com/web-html/#/7" title="Web HTML/CSS">Web Slides</a><

Web Slides

The <a> tag surrounds text or images to turn them into links

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.

<a href="home.html" target="_blank">Link Text</a>

Link opens in a new window/tab with target="_blank"

<a href="mailto:sponsorships@girldevelopit.com">E-mail us!</a>

Adding mailto: directly before the email address means the link will open in the default email program.

Relative vs. Absolute paths for links & images

Relative
Relative paths change depending upon the page the link is on.
- Links within the same directory need no path information. "filename.jpg"
- Subdirectories are listed without preceding slashes. "img/filename.jpg"
Absolute
- Absolute paths refer to a specific location of a file, including the domain.
- "http://aureliamoser.com/web-html/#/7"
- Typically used when pointing to a link that is not within your own domain.

Element: Image

Images have three components

Tag: <img />
Src attribute: "https://assets.brandfolder.com/4btx26fz/original/circle-gdi-logo.png"
Alt attribute: "Girl Develop It logo"

<img src="https://assets.brandfolder.com/4btx26fz/original/circle-gdi-logo.png"
 alt="Girl Develop It logo"/>

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

Element: Line Break

<p>
Imagine there's no Heaven <br/>
 It's easy if you try <br/>
 No hell below us  <br/>
 Above us only sky
</p>

Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky

Element: Unordered and ordered lists

<ul>
  <li>List Item</li>
  <li>AnotherList Item</li>
</ul>

<ol>
  <li>List Item</li>
  <li>AnotherList Item</li>
</ol>

Unordered list (bullets)

List Item
Another List Item

Ordered list (sequence)

List Item
Another List Item

Lists: Examples

Lists can be used to organize any list of items.

You'd be surprised how often lists are used in web design.

Comments

You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.

<!-- Comment goes here -->

Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.

<!-- Beginning of header -->
          <div id="header">Header Content </div>
          <!-- End of header -->

          <!--
          <ol>
          <li>List Item</li>
          <li>Another List Item</li>
          </ol>
          -->

Tables

Tables are a way to represent complex information in a grid format.

Tables are made up of rows and columns.

<table>
          <tr>
          <th>Head</th>
          <th>Head</th>
          </tr>
          <tr>
          <td>Data</td>
          <td>Data</td>
          </tr>
          </table>

Head	Head
Data	Data

Tables: Examples

Tables can be styled with CSS to add zebra striping or to highlight important rows/columns.

Character codes

There are character codes for many different characters in many different languages

Delta: δ δ
Copyright symbol: © ©
Grave: &grave; `
An grave a: à à
A full list is available at htmlandcssbook.com

CSS

CSS = 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.

The CSS Rule

selector {
  property: value;
}

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.

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

Selector: Element

p {
  property: value;
}

Selects all paragraph elements.

img {
  property: value;
}

Selects all image elements.

Selector: ID

#footer {
  property: value;
}

Selects all elements with an id of "footer".

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

The associated HTML.

Class

.warning {
  color: red;
}

Selects all elements with a class of "warning".

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

The associated HTML.

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

Most elements:


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

Lists:


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

PlayTime

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>

I will only turn blue on hover

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

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

Playtime

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

What about the browsers?

HTML5 & CSS3 Readiness

Can I Use?

HTML5 Please

Helpful Resources

W3C HTML5 specs

http://www.html5rocks.com

https://developer.mozilla.org

http://html5doctor.com

So what's so cool about it?

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


  <!DOCTYPE html>

Minimum information required to ensure that a browser renders using standards mode

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>

New Structural Elements

<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

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

What about old browsers?

HTML5Shiv

HTML5 IE enabling script

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

polyfill (n): a JavaScript shim that replicates the standard API for older browsers

Playtime

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