WebDev0

Information

Session 2: Follow these steps

  1. Download the text file called html.txt (On some browsers this will display and it will need to be copied into your text editor.)
  2. Read through the document, it contains a brief history of the HTML language.
  3. We will now mark this up as a HTML document.
  4. Change the extension and view the file in a browser.
  5. First put in the heading using h1-6 tag. Remember that the numbers indicate the level of the heading not a way to count them.
  6. Look for any lists, they should be marked up with ul for unordered list or ol for ordered lists.
  7. Mark up the paragraphs.
  8. Now look inside the paragraphs, are they any words which should be emphasised using the strong tag?
  9. Re-read the text, are there any places which can be enhanced by links out to other web sites? This uses the anchor tag (a). You might even do away with the sources area at the bottom of the file if they all can be included as anchors in the text.
  10. Don't forget to put in the structural tags (html, head, body).
  11. Now create a small navigation area at the top of the file using the nav tag and the two pages you have created as an unordered list. This is the way a navigation between pages of a web site is created in HTML. Later on this will be improved with CSS and perhaps Javascript.
  12. Now the page needs a doctype which will tell the browser which version of HTML to use.
  13. Download the text file template.txt. This page will be a practise area for you to develop a page to commercial standard. Mark this page up with HTML. The latin here is simply a place holder for text that may be provided later. This method of inserting latin helps some designers to design a page properly. HTML5 has commands header, footer and section which can be used to help provide structure inside the body tag.

Activity

The Internet isn't free. It just has an economy that makes no sense to capitalism.
Brad Shapcott, Senior Software Engineer, Amazon, 1995

Session 2: Common HTML and best practise

Tag/Element and attributes

The term tag or element is often interchangeable when people speak about HTML. In this course we will use the term tag when discussing the actual marking up of pages. However we will refer to them as elements when we discuss other features such as the difference between block and inline below.

All elements have attributes which can be attached to them. Elements like the anchor tag a must have the attribute href but can have other optional attributes as well. These are well documented in W3schools.

Attributes always follow the pattern of name/value pairs; the attribute is named followed by an equal sign and the value in quotes.

Validation

It is good practise to validate your web site. This involves checking that the HTML you have used is done correctly. In order to validate your site you must include a doctype which specifies which version of HMTL is being used. Some web authoring programs (like Dreamweaver) have validation built into the program.

There is an organisation called World Wide Web Consortium (W3C) which determines the standards for HTML, CSS and other web languages. All the major browser organisations are members and actively involved in the develop of the languages. However it is up to the browsers to work out how to use these standards and not all commands are done the same way. This is often frustrating for developers since they need to check their page in all browsers. Many browsers are ahead of the standards and offer features which are being considered. The site caniuse shows the current state play regarding new features of web languages and how they are supported by the browsers.

In regard to HTML the best validator is provided by W3C so it is best practise is to use that validator.

Block and inline elements

Some elements create a small area around them called a block or box. This block contains an area for a margin, padding and a border which can be styled using CSS. Other elements don't create this block and are called inline elements. It is good practise to place all inline elements inside a block element. Block elements can be placed inside other block elements.

Block elements include:

Inline elements include:

As you learn new elements you need to find out whether they are block or inline. As you get better with web development the relationship between block elements and CSS becomes more significant.

The Document Object Model (DOM)

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. (W3C)

In short, the DOM is an internal and abstract representation of HTML documents. Browsers, on receiving HTML documents from a server, create an internal (in-memory) representation of the document. This representation or model can then be manipulated using Javascript and CSS.

Understanding the DOM is also very important to the presentation of content. It is critical to applying CSS to your HTML documents. You will see later in this course how understanding the DOM makes it easier to apply styles to elements.

Every HTML document is a tree structure. The DOM is a browser's representation of that tree. Trees are made up of nodes. In the context of HTML, these nodes represent HTML elements.

Every HTML document must have a root element. In HTML it is the <html> element. All other elements are children of the root. The <html> element typically has two child elements - <head> and <body>. Conversely, the parent of <head> and <body> is <html>.

Note that the document type declaration are not considered a part of the DOM tree.

Special characters

On a html page your code will contain both markup and content. It is important that the browser does not get these confused. There are two ways to handle this. First every page needs a meta tag in the head section which tells the browser what type of characters are used to code the page. The other way is when you are writing content that contains any characters that are used in markup (especially <, < or ") you should use HTML Escape codes instead. Look at the source code of this section of the page to see how that was done.

Accessibility

Accessibility is all about designing pages with people with certain kinds of disabilities in mind. The disabilities can range from vision to motor disabilities.

There are very good reasons why you should design you pages for accessibility.

  1. A fair go! Everyone should be able to engage with web content. Even if you are blind.
  2. Economically, why would you want to rule out a large customer base? People with disabilities require information and services just like anyone else. The baby boomer demographic means increasing disability based on the aging process.
  3. Legally, you are required to make your pages as accessible as possible. This is especially so if the pages are for government, educational institutions and big business. In Australia we have the Disability Discrimination Act, and the US has Section 508.

Here's a great example of an accessible page. This is the home page of a disability civil rights law firm. You would expect the developers of this site to take special notice of accessibility practices - and they do. Have a look around the site, especially the help and accessibility page. What do you notice?

This resource has been developed to help web developers build web sites on the "principles of accessibility, universal design, and digital inclusion".

Try validating the markup and running it through an accessibility validator.

Australia has the dubious honour of the world's first big accessibility case. It's called Maquire v SOCOG, and occurred in the lead-up to the 2000 Sydney Olympics.

Read W3C's Cautionary tale on Maguire V SOCOG.

As you can see the main bone of contention was that SOCOG's pages used images for navigation. Images, by definition, cannot be 'seen' by the blind. That's why it is important to include the alt attribute on all inline images. This attribute (and its value) provides alternative text to screen reading devices so the blind user is able to hear what the image is about.

JAWS is a popular screen reader.

Throughout this course the pages will be have high accessibility by implementing the following practices:

  1. Writing well-structured semantic markup.
  2. Separating content from presentation.
  3. Including the alt attribute in inline images.

The Commonwealth Government has determined that all their sites must meet W3C accessibility standards.

Search Engine Optimisation

All commercial sites want to be found by search engines and want the top ranking. There are many companies that promise to do this for developers and there is a great deal of spam regarding this. However achieving SEO is surprising easy and following the best practise of this course is an excellent start. Google have produced a guide for web developers which show how to achieve SEO on the Google search engine. The basics are:

  1. Develop well formed Semantic HTML
  2. Ensure that the site follows best practise accessibility principles
  3. Include the meta tags for the search engine to use
  4. Use a well developed navigation scheme
  5. Inform the search engine that your site exists, rather than wait for the web crawler to find you
  6. Sites that link to your site provide higher ranking on search engines