Intro to HTML and CSS – What about the browsers? – Helpful Resources

Intro to HTML and CSS

Journalism + Design: Course II

Welcome!

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

Outline

• Homework/Readings review
• Practice with Github
• HTML/CSS Lesson (web-intro-2)
• Practice with HTML/CSS (practice | completed)

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

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

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

  • <br/>
    <img/>

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

Anatomy of Style: CSS

The CSS Rule

selector {
  property: value;
}

CSS Syntax

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.

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

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

Practice Time

Test out the practice files

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

Practice Time

learn by editing the practice files

• 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

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>

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

Practice

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 minutes to get started
• You won't be able to change everything - if we have time, you can continue at the end of the class

Questions?