This website aims to take you on a journey of discovery by introducing structure to our web pages through (X)HTML and web page layout via CSS. For each of these disciplines we will start with the basics, introduce some more detailed concepts in the intermediate tutorials before going into some advanced techniques. Each part is cross referenced and complemented by the reference sections for HTML and CSS. The final section of the site is a Case Study where we build a basic website from scratch using the techniques we have learnt in the previous sections.
What are HTML and XHTML?
Hypertext Transfer Markup Language, more commonly known as HTML and Extensible Hypertext Transfer Markup Language known as XHTML are the language of the web. HTML and XHTML are what we use to give our web pages structure.
These lessons get us started with the tools we need and give basic guidelines on creating and updating files and folders. We then explain HTML syntax and then introduce some structure to our web documents. As the lessons progress and we learn more HTML tags and become more confident we start building up a nice little webpage. To summarize, we bring everything we have learnt from the HTML4 Basic Tutorials together, which will lead us nicely into the HTML4 Intermediate Tutorials.
We start the intermediate lessons with a discussion of the differences between HTML and XHTML. We then introduce some more structure to our web documents and some formatting tags. We take a final look at images and links, before introducing tables and forms. To summarize, we bring everything we have learnt from the HTML4 Intermediate section together, which will lead us nicely into the HTML4 Advanced Tutorials.
What is CSS?
Cascading Style Sheets, more commonly known as CSS are used to present our HTML and XHTML in exactly the way we want it to look. Whereas HTML and XHTML all all about the structure of our web pages, CSS is all about the presentation.
Our journey into the world of CSS, begins with these CSS 1/2 Basics lessons. The skill level is aimed at people with little or no CSS experience, although some basic knowledge of HTML is assumed. An introduction to HTML is given in the HTML4 Basics section of this website and is worth a visit if you are completely new to HTML as well as CSS. These lessons get us started with the tools we need and give basic guidelines on creating and updating files and folders. We then explain CSS syntax and introduce some textual and spacial CSS properties to our web documents. After this we discuss how all elements are contained in a type of box, commonly known as 'the box model'. We investigate 'the box model' and the basic CSS properties associated with it. To summarize, we bring everything we have learnt from the CSS basic tutorials together, which will lead us nicely into the CSS 1/2 Intermediate Tutorials.
In the CSS 1/2 Intermediate lessons we begin by looking at backgrounds and how they give our canvasses colour, take a final look at the CSS 'Box Model' before examining advanced tag selectors and pseudo selectors. We explain how inheritance works and then investigate specificity and the cascade. After this we explore how to position and display our elements and then bring everything together in the intermediate summary.
Our sojourn into the world of Cascading Style Sheets ends with these CSS 1/2 Advanced lessons. The skill level is aimed at people with CSS experience, or who have completed the basic and intermediate tutorials. We begin by looking at generated content and then take a final look at the CSS selectors by examining attribute selectors. We then see how to use CSS for styling lists and tables and then investigate navigation bars and page layout. After this we look at the printed page and the few CSS Properties we haven't covered before. We finish our exploration of CSS with a summary where we go over everything we have learned in this section. By the end of the CSS 1/2 Advanced Tutorials we will have covered all the CSS properties and selectors available for use in the 2.1 specification.
In this case study we build the home page of a website from scratch that has layout, navigation bars, side bars and everything else needed to make a decent looking website.
A fully linked set of references covering the lastest HTML 4.01, HTML5, CSS 2.1 and CSS3 W3 specifications. The references include all the HTML elements and CSS properties along with valid colours, selectors and much more. All the HTML elements and CCS properties are cross referenced alphabetically, by function and also by lesson so its easy to find what you need and how to use it.