PL-911 : Building Web Pages with HTML4 and CSS, and Search Engine Optimisation

1 - XML and data description structures.
Relevance to the main subject: a closely related introduction. Depth of coverage: medium.

Main objectives:
To introduce the trainee to the fundamentals of programming logic by having them use XML to build structures that describe different kinds of data, and to explain what a markup language is along with its syntax rules, in an environment that is clearer and less demanding than HTML.

This topic covers the following:
- A simple introduction to programming languages and their different types.
- A detailed introduction to XML, its syntax rules, its own terminology and its many uses.
- A range of examples showing different ways of describing data with XML structures.
- Individual exercises using XML structures to describe real-world data.

By the end of this section the trainee should be able to:
- Fully grasp the concept of a markup language and what it means, with a sufficient understanding of the types of programming language and the differences between them.
- Think in a way that fits programming logic to a reasonable degree.
- Know the syntax rules of XML thoroughly.

2 - X-HTML and building the structure of web pages.
(Main subject) Depth of coverage: deep.

Main objectives:
To bring the trainee to the fullest possible understanding of every core tag in
X-HTML 4.0 and how it is used to build the structure of web pages.

This topic covers the following:
- An introduction to HTML and X-HTML, the syntax rules and the w3c standards.
- A full account of every core tag in X-HTML 4, how it is used and worked with, and how the tags relate to one another.
- Practical exercises and examples combining tags to build simple web page structures, with basic styling, images and navigation between pages, and so on.
- An introduction to using tables to lay out page content and build more complex structures.
- Working with forms, frames and some of the more advanced tags.

By the end of this section the trainee should be able to:
- Fully understand the individual HTML tags, what each one is for and how it is used.
- Build complex structures in HTML.
- Have a first working knowledge of laying out a page with tables.

3 - CSS 1,2 for styling pages.
(Main subject) Depth of coverage: deep.

Main objectives:
For the trainee to understand how CSS is used to style a page completely, and to be able to lay out page content and position elements using modern CSS techniques rather than tables.

This topic covers the following:
- An introduction to CSS styles, what they are for, the syntax and the selectors.
- A detailed, hands-on account of most of the properties used in CSS and their effect on elements.
- The core ideas behind combining different properties, how they interact and how to use that to apply more advanced custom styling.
- The various ways of laying out pages and positioning elements with CSS.
- An introduction to the concept of "inheritance" in programming languages and how it applies in CSS.
- Practical exercises implementing advanced styling and CSS tricks.

By the end of this section the trainee should be able to:
- Fully grasp CSS syntax and use selectors efficiently.
- Apply complex styles to elements with CSS.
- Style and position elements on the page using CSS techniques instead of tables.
- Write concise, efficient code and apply the principles of inheritance through CSS styles.

4 - Workshop: building a simple website / CSS tricks.

Workshop content:
The workshop covers implementing a design for a simple multi-page website - 5 pages at most - using HTML to build the page structure and CSS to apply the styling and lay out the elements.

Each trainee works individually on the same overall design used by the group as a whole, with room for a few small changes of their own.

* No designs prepared in Photoshop or any similar program are used at this stage; instead a design is sketched on paper and implemented directly in code.

Main objectives:
To apply the concepts already studied in a practical setting, and to get hands-on experience of more advanced CSS methods and techniques.

* The aim is not to produce a perfect website or a polished design; it is simply to put the code and methods already studied to work in a complete practical setting and see how they interact with one another.

5 - The "artistic" standards of web design and the WEB 2.0 concept
Relevance to the main subject: highly relevant. Depth of coverage: introductory.

Main objectives:
To familiarise the trainee with modern standards in web design, and to develop an acceptable level of artistic sense and creativity.

This topic covers the following:
- Using colour and typography, ways of arranging elements on the page, and the geometric principles of design.
- A historical look at how designs have evolved, the WEB 2.0 concept and modern design standards.
- The different kinds of website from an artistic point of view.
- Reviews and informed discussion of inventive, inspiring designs.

By the end of this section the trainee should be able to:
- Know the established rules of sound design, both geometric and artistic.
- Draw some inspiration from following inventive work.

6 - Workshop: adapting ready-made templates and building more complex pages.

Workshop content:
The workshop is divided into two main stages:

First: the trainer takes one of the professional templates already designed as a PSD file and uses it to create a site for one of the suggested lines of business, converting it into a complete, fully styled web page and making every change needed to suit the proposed subject of the site, with a detailed explanation as the work goes on, while the trainees follow along and listen.

Second: once the trainees have followed the trainer's work, a range of inventive ready-made templates is presented, differing slightly among themselves in difficulty and complexity and serving several different lines of business. Each trainee proposes a field they are interested in, picks one of the templates, and converts it into a complete website the same way.

Main objectives:
To meet one of the central goals of the course: producing a designer who can turn any mock-up into a website using HTML and CSS.

7 - Improving website performance
Relevance to the main subject: highly relevant. Depth of coverage: medium.

Main objectives:
To equip the trainee to build websites that perform better in terms of speed and complexity, work across different operating environments, and sit well with search engines.

This topic covers the following:
- Writing more effective, less convoluted code.
- Reducing the size of the page and the assets attached to it.
- Compatibility and differences between browsers and across operating environments, and testing the page.
- Error pages, Meta tags and other parts of the site.
- An introduction to SEO and the practices to follow while designing.
- Older and newer techniques for search engines (robots.txt, sitemap, micro formats,..)
- Common misconceptions in web design.

By the end of this section the trainee should be able to:
- Write better code: more effective, less convoluted, and lighter pages.
- Build pages that are compatible and stable across different operating environments.
- Communicate well enough with search engines and design pages that work better with them