HTML & CSS: Introduction and Setup

If you've found your way to this tutorial series, the chances are that you probably know what your getting into already, but in case you don't, this tutorial functions as an introduction to what we'll be doing and the languages we'll be using. In this tutorial series we will be learning how to create websites and webpages using HTML & CSS - two very important languages used by pretty much every website on the web today.

HTML stands for Hyper Text Markup Language. It's generally used to create structure of some kind (in the way we will be studying it - it will bring structure and provide the content for our web pages). This structure is created through a number of 'tags' called markup tags. Each part of the structure usually (but not always) consists of a pair of tags - a start tag and an end tag. A whole section or component of this structure (for example a start tag, end tag, and everything in-between) creates what is called an element.

These tags usually consist of a keyword of some kind within triangular (angle) brackets. For example the 'strong' element opens like this:

1

<strong>

And the element then ends with a closing tag, with a simple "/" in front of the word "strong" (this is the case with a lot of tags):

1

</strong>

The basic point of HTML is to be able to create structured web pages with different elements, but you've probably noticed that this section is called "HTML & CSS"... what's CSS and what do we need it for?

Well CSS is for the styling and decoration of the webpages. Back in the day people used different parts of HTML for styling webpages, however now these parts aren't supported in the new standards (this is called deprecation) and the styling is all handled by CSS, which is a really good thing as it allows us to separate a page's structure from its decoration! CSS stands for "Cascading Style Sheets", and in CSS you generally specify a section for certain styling, specify something you want to customise, and then actually set a detail of whatever specific property you are styling. We'll cover this in a lot more detail in the CSS Basics tutorial later in the series.

Web standards (including specifications about different versions of HTML and CSS) are managed by W3C and these specifications are then read by developers (like us!) who make web pages, and by people/companies like Mozilla and Google who makes web browsers. Web browsers are simply programs which interpret HTML and CSS code to display the page, as written in the code, to the user. The ability to write HTML and CSS code in a way that makes web browsers spit out a nice result to the user is really what web design and development is all about.