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.
Hypertext Transfer Protocol, more commonly known as HTTP and Extensible Hypertext Transfer Protocol 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 HTML basic tutorials together, which will lead us nicely into the HTML 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 HTML Intermediate section together, which will lead us nicely into the HTML Advanced Tutorials.
In Basic HTML tutorials we explored basic HTML structure, its now time to introduce the other structural tags. In this lesson we learn about the <div> and <span> tags and how they affect the structure of our HTML.
How to emphasise text using the <em> and <strong> HTMl tags. In this lesson we introduce a lot more tags that change the appearance of our text.
We need a way to show tabular data on our web pages in neat rows and columns, possibly with headers and footers. We can do this in HTML using the <table> element. This element has several tags associated with it and numerous attributes available to alter the table dynamics. This lesson goes into the basics of table formation and how to use the tags.
We begin with a lesson on how to import CSS and JavaScript files into our HTML documents and how to insert meta information. After this we take a look at interactive images and embedded objects. We take a final look at tables and forms and bring everything we have learnt from the HTML Advanced section together in the summary. Lastly we go through the list of tags in HTML to avoid, which will end our exploration of HTML.
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 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 HTML 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 Intermediate Tutorials.
In the CSS intermediate 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 specifity 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 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 Advanced Tutorials we will have covered all the CSS properties and selectors available for use in the 2.1 specification.
In 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 and CSS 2.1 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.
