DIGI 220 - Structure & Validation
VIU Media Studies Department - Robin Davies
- 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
Default "Home" or First Page
- When you type in a URL you can specify the web page you want to view:
- 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
- By default, the server shows us the default web page for that directory/folder on the server, which is very often
- 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:
HTML Document Structure
- There are Three Parts to an HTML Document:
- Version Information (
<!DOCTYPE> tag )
body are contained within a parent
HTML Version Information
- A valid HTML document identifies what version of HTML is used in the document
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
- Use this declaration:
- Pretty simple, eh?
The HTML Tree
You may wish to think of a tree when writing your markup:
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 goes in the
- 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>
- HTML allows for up to six levels of section headings with the heading element
<h1> My Great Heading </h1>
h6 in decreasing semantic sense of importance
- All paragraphs should be enclosed in a
<p> My great paragraph goes here. </p>
- Note that you cannot use
<p6> - there is only one level of paragraph
- You can give elements one of two types of names:
id that is unique within the document
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>
<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 (
article), and smaller pieces of content (
meter). See the full list here.
span, and newer elements like
section, are very useful as hooks for applying CSS to HTML
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!
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!
- 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
- 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
- IE (newest to oldest)
- 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