HTML and CSS Tutorials

HTML Doctor

This website aims to take you on a journey of discovery by introducing structure to our web pages through 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 is HTML?

Hypertext Markup Language, more commonly known as HTML is the language of the web.

HTML is what gives our web pages structure.

HTML5 Basics

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 HTML5 Basic Tutorials together, which will lead us nicely into the HTML4 Intermediate Tutorials.

HTML5 Intermediate

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.

HTML5 Advanced

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 HTML4 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.

What is CSS?

Cascading Style Sheets, more commonly known as CSS are used to present our HTML in exactly the way we want it to look. Whereas HTML is about the structure of our web pages, CSS is all about the presentation.

CSS Basics

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 HTML5 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.

CSS Intermediate

In the CSS 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.

CSS Advanced

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.

Case Study

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.

Reference

A fully linked set of references covering the lastest HTML 4.01, HTML5, CSS 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.

Quizzes

Quizzes on what we learnt in the HTML and CSS sections of the site.