DIGI 220 - Structure & Validation

VIU Media Studies Department - Robin Davies

Lecture Overview

  • Creating & Organizing Web Pages
  • HMTL Document Structure
  • Validating HTML Documents

Creating a New Web Page

  • All HTML pages are plain text files
  • You can use a simple text editor (Wordpad or TextEdit), or a more feature rich editor
  • For PC, try Brackets or Notepad++
  • On the Mac, TextWrangler (now BBEdit) is both powerful and free, and Brackets works there as well
  • In this class, please DO NOT use Word, Dreamweaver, or any other WYSIWYG HTML editor
  • Some may ask: Why not?

Saving & Naming

  • Make sure you save your file as a plain text (text-only) file
  • In this class:
    • Use the .html extension for all html-formatted pages
    • Use only lower case letters for file names
    • Remove spaces from file names
    • It's too easy for computers (such as servers) to think that a space is the start of a new instruction, as opposed to a continuation of the same information
    • My Page.htm
    • mypage.html

Default "Home" or First Page

  • When you type in a URL you can specify the web page you want to view:
    • www.disney.com/mickey.html
  • However, often we simply type in the website (a directory or folder or "box") without telling the browser what page we want to view:
    • www.disney.com or just disney.com
  • By default, the server shows us the default web page for that directory/folder on the server, which is very often index.htm, index.html, index.php...
  • URLs are thereby kept simpler, which is always a goal!

Organizing Your Files I

  • It is a good idea to figure out how you are going to organize your files before you have too many files!
  • In this class, the way in which you organize your files will help determine the technical component of your assignment mark
  • Your site should use a logical, simple, easily-understood structure
  • Remember: lowercase; simple names; no outrageous characters!

Organizing your files II

You may wish to think of a tree when building your file/folder structure:

The main folder of the site is called root, and is the trunk of the tree.  Each HTML page within the main folder is attached to the trunk.  Also branches attached to the trunk are folders for images and CSS.  Each of these branches has sub-branches, any of the folders within.

HTML Document Structure

  • There are Three Parts to an HTML Document:
    • Version Information ( <!DOCTYPE> tag )
    • The <head> section
    • The <body> section
  • The head and body are contained within a parent html element

HTML Version Information

  • A valid HTML document identifies what version of HTML is used in the document
  • The DOCTYPE names the Document Type in use
  • There have been half a dozen different versions of HTML since the web was born (including a few versions XHTML)
  • Currently (and thankfully) designers at the moment only need to worry about one...

HTML 5

  • HTML 5
  • Use this declaration:
    • <!DOCTYPE html>
  • Pretty simple, eh?

The HTML Tree

You may wish to think of a tree when writing your markup:

The HTML element is considered the root of the tree, with the head and body elements being the two main branches.  The head branch contains a few branches of its own, such as the title and style elements.  The body contains branch contains many branches, such as divs, which in turn contain paragraphs, headings, and other elements.  Note that if you are traversing the outside of the tree, and looking at all the branches, you must complete any single branch and all its sub-branches before moving on to the next branch.

In particular, consider the genealogical relationships amongst the HTML elements. We very often use parent/child/sibling terminology to describe elements' locations within the tree. To visit a new family in the tree, you may first need to exit many of the branches you took to arrive at your current position.

Title Element

  • The <title> element goes in the <head> section
  • The title element is required
  • The title is important for search engines, as it describes your page
  • The title is also what shows up in history lists on users' browsers
  • <title> My Great Page <title>

Section Headings

  • HTML allows for up to six levels of section headings with the heading element
  • <h1> My Great Heading </h1>
  • Use h1 through h6 in decreasing semantic sense of importance

Paragraphs

  • All paragraphs should be enclosed in a <p> element

<p> My great paragraph goes here. </p>

  • Note that you cannot use <p1> through <p6> - there is only one level of paragraph

Naming Elements

  • You can give elements one of two types of names:
    • An id that is unique within the document
    • A class that identifies them as belonging to a particular class of elements
  • If you name your elements, you can easily apply unique styles to them
  • Remember - no two elements in the same document can be given the same id

<p id="introduction"> ... < /p>
<p class="internal"> ... < /p>

div & span

  • The <div> and <span> elements can be used to create block and inline level divisions in your page
  • These elements are important when using CSS as they allow us to break our content into sections and then apply unique formatting to those sections
  • HTML 5 provides a number of new elements for indicating both large sections of a document (header, article), and smaller pieces of content (time, meter). See the full list here.
  • div, span, and newer elements like section, are very useful as hooks for applying CSS to HTML

Break Element

  • The br element is used to create a line break within a document
  • This element isn't used all that often, but is sometimes semantically useful
  • Often, we can use CSS to better control the spacing of content
  • Note the use of the closing slash!

<br />

Debugging Your Webpages

  • Start from a perfect template, and work incrementally
  • Carefully check for typographical errors (hopefully your text editor or the browser will help!)
  • In CSS, make sure the selector is working (brute force, turn everything red)
  • Take breaks when you get tired/frustrated
  • Sometimes you're simply too close to the screen!

File Issues

  • New coders can have many frustrating problems relating to file handling
  • Be sure:
    • you're typing the file name correctly
    • that you have saved any changes in the text editor
    • that exactly the same file is uploaded to the server (if applicable)
    • auxillary files are where they need to be (CSS files or images)

Validating Your Code

  • We can validate HTML documents to ensure we have written them correctly
  • Validation, along with browser testing, is an essential check on your HTML documents!
  • First, validate and fix the HTML
  • Then, validate and fix the CSS
  • Bookmark these validator links for easy use
  • Firefox and Chrome have a great Add-on which includes (fast and very handy!) shortcuts for validating files

Browser Testing

  • The last step in debugging is testing the page in browsers you've specified for your project, and/or browsers your users are likely to use!
  • Start with the most compliant browsers first, and then tackle the funky ones
    • Firefox/Safari/Chrome/Edge
    • IE (newest to oldest)
    • ...?

Browser Variation

  • Remember, not all browsers support all standards, particularly emerging standards - the War persists...
  • First check to see what the browser supports
  • Design your pages so that even if a feature is not supported, the page degrades gracefully, and adequately conveys the necessary information.
  • Keep your design simple. Simple design is easier to make cross-browser friendly