DIGI 220 - Web Standards

VIU Media Studies Department - Robin Davies

Lecture Overview

  • The Internet & The Web
  • (X)HTML & W3C
  • XHTML 1.0
  • HTML 5
  • Markup Languages
  • URLs
  • In this Class...

Images to Consider I

a colourful visual map of the internet based on IP addresses and the nature of the connection, such as commercial or educational

Images to Consider II

B/W image showing global internet connections

Getting Started

http://www.commoncraft.com/video/world-wide-web

The World Wide Web

  • The World Wide Web is part of the larger structure known as the Internet
  • Technically, the W3 consists of three essential elements:
    • A uniform/universal naming scheme (URLs)
    • The protocols for accessing the resources (HTTP)
    • Hypertext to allow for the navigation that characterizes the W3 (HTML). This, alongside CSS, will be the focus of this course
  • The WWW couldn't exist without these elements, which is why we need to focus on their use before exploring other technologies

Browsers

  • The software that runs on our computers and accesses the web (reads HTML pages)
  • Major browsers include:
    • IE/Edge
    • Safari
    • Firefox
    • Opera
    • Chrome

Browser Wars - Some History?

Browser Wars

  • Basically, different companies' browsers behaved differently
  • Each browser had its own way of interpreting the W3's content
  • Caused chaos in the web design world, particularly with designers
  • Now, there is a strong push towards a standards-based approach to web authoring

HyperText Markup Language

  • The Internet existed prior to the W3, but there was no easy-to-use system for publishing and/or browsing documents
  • Tim Berners-Lee developed HTML while at CERN
  • HTML created a method to publish structured documents on the W3
  • HTML allowed documents to interconnect (hyperlinks)

Future Past

Taken from What Comes Next is the Future

World Wide Web Consortium (W3C)

  • Today, responsibility for creating W3 standards rests with the World Wide Web Consortium (W3C)
  • Sponsored by MIT & numerous public & private groups, and the IETF
  • The most recent HTML standard published by the W3C is HTML5.2
  • In this class we'll use HTML 5, an emerging standard...

HTML 5

  • An standard which incorporates previous versions of (X)HTML
  • XHTML introduced/standardized support for:
    • tables & lists
    • cascading style sheets
    • scripting & accessibility
  • HTML5 adds to this with new semantic elements and support for vector graphics, amongst other things

Interlude

That's a lot of information, let's have something a little lighter, please (viewer discretion).

What is a Markup Language?

  • Markup languages are used by authors to contextualize and describe a document's content by denoting structural and semantic information
  • HTML is only one example of a markup language (XML is another)
  • The Standard General Markup Language (SGML) is the system for defining markup languages

XML Constructs used in HTML

  • There are four XML constructs used directly in HTML:
    • Elements
    • Attributes
    • Values
    • Comments

Elements

  • Each element contains three parts: start tag, text content and end tag
  • Element names are case insensitive
  • Start tags may contain element-specific attributes:
<abbr title="Cascading Style Sheets">CSS</abbr>

Block vs Inline Elements

  • All elements (well, almost all) are either block level or inline level
  • Block level elements start on a new line (creating a block)
  • Inline elements don't start on a new line
<p>Inline elements such as <strong>strong</strong> are typically found in the middle of a block element, such as a paragraph.</p>

Attributes & Values

  • Elements have associated properties called attributes
  • Attributes may have values (by default, or set by author or script)
  • Attribute/value pairs appear before the final > of an element's start tag
  • Any number of attribute/value pairs, separated by spaces, may appear in an element

Attributes & Values

  • Attribute/value pairs may appear in any order
  • HTML requires that all values be enclosed in either single or double quotes
<a title="Follow us on Twitter" href="http://twitter.com/BetheMediaRadio"><img src="littleT.png" alt="a lowercase T, white on a black background" /></a>

Character References

  • Character references are numeric or symbolic names for characters that may be included in an HTML document
  • Useful for referring to special characters
  • Begin with & and end with ;
  • See this link for a rundown on character encoding
  • To write <, we type &lt;
  • To write >, we type &gt;
  • We can also write symbols like ⊇ and ⊄

Comments

  • HTML comments have the following syntax, and may be single or multiple lines in length
  • <!-- This is an HTML comment which
    spans more than one line -->
  • How and why should we use comments in our HTML documents?

Universal Resource Locators

  • We said earlier that the W3 consists of three essential elements:
    • A uniform/universal naming scheme (URLs)
    • The protocols for accessing the resources (HTTP)
    • Hypertext to allow for the navigation that characterizes the W3 (HTML)
  • Let's look for a moment at URLs

URL Structure

  • URLs typically consist of three pieces:
    • The naming scheme of access mechanism (protocol)
    • The name of the machine hosting the resource (server)
    • The name of the resource itself, given as a path

URL Structure Example

  • Consider the following URL example :
  • http://robin.learnnewmedia.ca/220/labs/lab01/index.html
  • The first part of the URL tells us that there is a document available via the http protocol
  • Other schemes (protocols) you may see in HTML documents include: mailto, ftp, gopher, news and telnet

URL Structure Example

  • http://robin.learnnewmedia.ca/220/labs/lab01/index.html
  • The second part of the URL tells us that the document resides on the (virtual) machine named robin at learnnewmedia.ca

URL Structure Example

  • http://robin.learnnewmedia.ca/220/labs/lab01/index.html
  • The third part of the URL tells us that the document is accessible via the path /220/labs/lab01/index.html

Absolute vs Relative URLs

  • The example we just looked at is an absolute URL
  • It contains all the information needed to find a unique page on the web
  • There are also relative URLs
  • Relative URLs only contain information to show how to find the resource relative to the current webpage/location
  • Read this link carefully - there may be a test!

Relative URLs

  • A relative URL doesn't contain any access scheme information (such as http)
  • Generally refers to a resource on the same machine as current document
  • May contain relative path components (e.g. .. to go up one level)
  • For instance, later in the course, you'll likely have a URL like this to tell an HTML file where to find its companion CSS file: "../css/lab08.css"

Resolving Relative URLs

  • Relative URLs are resolved to full URLs using a "base" URL
  • By default, the base URL is the URL of current document
  • The base element allows author to explicitly set the base URL. I've never used it, but I can see the benefits!

HTML Versions

  • There were three versions of XHTML - strict, transitional, and frameset - it was complicated
  • There is only one version of HTML 5

DOCTYPES

  • Every page you write will include a valid DOCTYPE declaration
  • This tells browsers reading your page which verson of HTML your page uses
  • This also allows you to use a validator to determine if your code is properly written
  • We'll look at validation next week

In This Class We Will:

  • Use HTML 5
  • Include a proper DOCTYPE in every page
  • Use CSS for all presentation
  • Use a bare minimum of deprecated or presentational elements
  • Name all files and directories with lowercase only
  • Use .html for ALL our html files (not .htm)