Introduction to

HTML5 & CSS3

History of HTML

  • 1991 - HTML first published - Tim Berners Lee
  • 1995 - HTML2.0
  • 1997 - HTML3.2
  • 1999 - HTML4.01

    After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.

  • 2000 - XHTML1.0
  • 2002 to 2009 - XHTML2.0

    XHTML 2.0 had even stricter standards than 1.0, rejecting web pages that did not comply. It fell out of favor gradually and was abandoned completely in 2009.

  • 2012 - HTML5

    HTML5 is much more tolerant and can handle markup from all the prior versions.

    Though HTML5 was published officially in 2012, it has been in development since 2004.

  • 2012 - HTML5 Final Specification

What is HTML5

  • HTML5 is the newest version of HTML, only recently gaining partial support by the makers of web browsers.
  • It incorporates all features from earlier versions of HTML, including the stricter XHTML.
  • It adds a diverse set of new tools for the web developer to use.
  • No browsers have full HTML5 support. It will be many years – perhaps not until 2018 or later - before being fully defined and supported.

Goals of HTML5

  • Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites.
  • Reduce the need for external plugins and scripts to show website content.
  • Improve the semantic definition (i.e. meaning and purpose) of page elements.
  • Make the rendering of web content universal and independent of the device being used.
  • Handle web documents errors in a better and more consistent fashion.

New Elements in HTML5

  • <article>
  • <aside>
  • <audio>
  • <canvas>
  • <datalist>
  • <figure>
  • <ficaption>
  • <footer>
  • <header>
  • <mark>
  • <nav>
  • <progress>
  • <section>
  • <source>
  • <svg>
  • <time>
  • <video>

These are just some of the new elements introduced in HTML5.

Explore More here: Mozilla Developer Network

Basic HTML5 webpage

<!DOCTYPE html>
    <html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible"/>
        <meta name="description" content="goes here..."/>
        <meta name="keywords" content="keyword 1, keyword 2"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta name="robots"/>
    
        <link rel="stylesheet" href="your-single-deployment-stylesheet.css">
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
        <!-- JS Links should sit on the bottom of the page! -->
    </head>
    <body>
    ... content
    <script src="yourJavascript.js"></script>
    </body>
    </html>

First Look at HTML5

Doctype declaration prior to HTML5 version

 

 

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

 

 

 

The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

HTML5 Semantic

HTML5 Markup Best Practices

Semantic Markup
HTML provides a number of semantic constructs that allow automated tools like search engines and screen readers to make sense of the document and to understand relationships between pieces of content.

 

HTML Standards and Browser Support
All markup will be written using the latest HTML5 markup specifications from the W3C, as implemented by browsers and devices that meet project requirements.

 

Doctype
Always include a proper doctype to trigger standards mode. Omitting the doctype triggers quirks mode and should always be avoided.

Optional and Self-closing Tags
While current standards designate certain closing elements and even document level elements as optional, use all open and closing elements nested in the correct ways to ensure maximum compatibility and clarity of document structure

 

Validation
Valid markup is a goal but not a mandate. However, be aware validation can be an excellent starting place while debugging a Web page — especially if the problems are unusual.

 

IDs vs. Classes
HTML elements can be identified by using the id and class attributes. An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.

HTML5 Detection

When your browser renders a web page, it constructs a Document Object Model, a collection of objects that represent the HTML elements on the page. Every element is represented in the DOM by a different object.

In browsers that support HTML5 features, certain objects will have unique properties. A quick peek at the DOM will tell you which features are supported.

[Modernizr] is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. To use it, include the following <script> element at the top of your page...

Modernizr runs automatically. When it runs, it creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect. 

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

Exercise

Write HTML structure for below layout

The separation of document content from document presentation including aspects such as the layout, colors, and fonts.

Cascading Stylesheet Helps

  • Provide flexibility & control in the specification of presentation characteristics
  • Enable multiple HTML pages to share formatting (via a single .css file)
  • Reduce complexity and repetition in the structural content
  • Display content on a broad range of devices
  • Content accessibility

Who creates and maintain CSS?

  • W3C's CSS Working Group, this group propose new CSS features
  • Once agreed features are implemented by the main browsers (Safari, Chrome, Firefox and IE/Edge etc.)
  • Now browser companies have realised that standards are a good thing, CSS has grown rapidly over the past few years.
  • Content accessibility

Bad ways to set CSS?

Inline styles hard to maintain

 

<h1 style="font-size: 22px; colour: red; padding: 10px 15px;">
    Welcome to the  Lancashire Digital website
</h1>

Internal style Better, but still hard to maintain

 

<html>
<head>
    <style>
    h1 {
         font-size: 22px;
         color: red;
         padding: 10px;
    }    
    </style>
</head>
<body>
<h1>Welcome to the  Lancashire Digital website</h1>
</body>
</html>

Via JS. Very hard to maintain.

 

var pageHeading = document.getElementsByTagName('h1')[0];
pageHeading.style.fontSize = '22px';
pageHeading.style.color = 'red';
pageHeading.style.padding = '10px';

What's the current state of play?

  • Major browser vendors are all communicating and their rendering engines - Chrome (blink), Safari (webkit), Firefox (Gecko), IE (Trident), Edge (Edge HTML) - offer very similar results
  • Internet Explorer 7/8 and 9 usage are dwindling at ~6% (Aug 2015, w3c browser stats) - YES

Best way to write CSS...

  • Always use external CSS* (where possible)
<html>
<head>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- you style elements in here via CSS -->
</body>
</html>
  • Setup a master CSS file and apply to your HTML
/* External main.css file */
.main-title {
     font-size: 22px;
     color: red;
     padding: 10px;
}
<!-- HTML body tag -->
<h1 class=“main-title”>Welcome to the Lancashire Digital website</h1>

Why is this better?

  • MUCH easier to maintain
  • Faster load times as CSS loaded in one-shot from the head tag
  • Easier to collaborate with others
  • Better for version control systems

Classes & IDs

Classes

.my-class-name

Used for multiple elements within the page with shared characteristics.

prefix with " . "

IDs

#myID

Use for individual elements within the page.

IDs are unique, you should only have one per page.

prefix with "#"

The general recommendation is to only use classes as these are more flexible.

If you're absolutely sure an element will only ever be a single instance, IDs are fine.

Naming Conventions

Classes

Use lowercase letters and dashes instead of spaces.

Try to use generic names where possible.

IDs

Use CamelCase.

Very useful when working as a team. There are differing opinions, the main thing is choose a convention and stick to it.

<!-- HTML example -->
<h2 class="section-title">What we do</h2>
/* CSS example */
.section-title {
    color: blue;
    padding: 20px 0;
}
<!-- HTML example -->
<h2 id="WhatWeDoTitle">What we do</h2>
/* CSS example */
#WhatWeDoTitle {
    color: red;
    margin: 15px 0 15px 0;
}

Add a prefix to stop any

name clashes with frameworks etc.

/* inherited from a framework e.g. Bootstrap */
.modal{
    position:fixed;
    top:0;
    right:0;
    bottom:0;left:0;
    z-index:1050;
    display:none;
    overflow:hidden;
    outline:0;
}

/* LDL specific CSS example */
.modal {
    /* would affect all Bootstrap modals */
}
.ldl-modal {
    /* we can set our own css properties here
    and be sure we do not mess with anything major */
}

Chaining Classes

Chaining can be thought of as inheritance.

We chain by adding a space between each class name.

<!-- HTML chaining example -->
<div class="box"></div>

<div class="box green-box"></div>

<div class="box red-box round-corners"></div>

<div class="box blue-box round-corners"></div>

How do you know what to use when?

HTML CSS JS
It's a structural building block of my page/app It's purely style related  It's accessing data or manipulating the DOM in some way

Shorthand

Use shorthand to quickly set properties

/* CSS long winded example */
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    
    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 0px;

    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    
    border-width: 10px;
    border-style: dotted;
    border-color: black;
}
/* CSS concise example */
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    padding: 10px 5px 10px 0;
    border: 10px solid black;
}

Remember value order

Some properties have a designated order

/* CSS margin/padding order examples */
.box {
    /* top/bottom 0, left/right auto */
    margin: 0 auto;
    
    /* top 10px, right 5px, bottom 10px, right 0 */
    padding: 10px 5px 10px 0;
}

Some  CSS3 modules

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • Media queries (layouts)
  • @font-face
  • flexbox
  • less/sass

Default browser CSS

Browsers come with a default stylesheet.

/* CSS to reset body tags default margin/padding */
body {
    margin:0;
    padding: 0;
}
  • Use CSS normalize
  • Most CSS Framework have included
  • https://necolas.github.io/normalize.css/
  • http://meyerweb.com/eric/tools/css/reset/

CSS Selectors

ID

Class

Attribute

Universal

Pseudo

Selector Example Example description
. class .intro Selects all elements with class="intro"
# id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element> element div > p Selects all <p> elements where the parent is a <div> element
element+ element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~ element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[ attribute] [target] Selects all elements with a target attribute
[ attribute= value] [target=_blank] Selects all elements with target="_blank"
[ attribute~= value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[ attribute|= value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[ attribute^= value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
Selector Example Example description
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified

Media queries

@media queries allow us to adapt the CSS rules dependant

on the device viewing the page

/* from 0 zero up to 500px wide */
@media (min-width: 0px) and (max-width: 500px) {
    .block {
        width:100%;
        font-size: 30px;
        height: auto;
    }
}

/* from 501px up to 700px do this */
@media (min-width:501px) and (max-width: 700px) {
    .block {
        width:50%;
        font-size: 20px;
    }
}

Powerful detection

@media can detect a wide-range of features

  • width
  • Height
  • Orientation
  • Aspect Ratio
  • Resolution
  • Print

Transforms

CSS3 has given us the ability to transform elements

/* CSS 2D transforms */
.block {
    transform: rotate(145deg);

    transform: skew(145deg);

    transform: scale(0.5,0.5);
}

Fonts

With CSS3 came web fonts

/* bold version of font */
@font-face {
    font-family: 'ubuntu-web';
    src: url('/assets/fonts/ubuntu-bold-webfont.eot');
    src: url('/assets/fonts/ubuntu-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('/assets/fonts/ubuntu-bold-webfont.woff') format('woff'),
         url('/assets/fonts/ubuntu-bold-webfont.ttf') format('truetype'),
         url('/assets/fonts/ubuntu-bold-webfont.svg#ubuntubold') format('svg');
    font-weight: 700;
    font-style: normal;
}
/* normal version of font */
@font-face {
    font-family: 'ubuntu-web';
    src: url('/assets/fonts/ubuntu-light-webfont.eot');
    src: url('/assets/fonts/ubuntu-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/ubuntu-light-webfont.woff2') format('woff2'),
         url('/assets/fonts/ubuntu-light-webfont.woff') format('woff'),
         url('/assets/fonts/ubuntu-light-webfont.ttf') format('truetype'),
         url('/assets/fonts/ubuntu-light-webfont.svg#ubuntulight') format('svg');
    font-weight: 300;
    font-style: normal;
}
/* using a array of fonts we can set our preference, should one font fail to believe */
p, h2 {
    font-family: 'ubuntu-web', 'arial', sans-serif;
}

p {
    font-weight: 300;
}

Exercise

Made with Slides.com