HTML & CSS Tutorial

Welcome to my HTML & CSS tutorial! In this tutorial you will learn how to make a modern web site that conforms to all standards. We will be using html and cascading style sheets to create a web site that is well structured and displays to same in all modern browsers.
There are a number of ways to create a web site. You can make your life easier by using a so called WYSIWYG editor. WYSIWYG stands for “what you see is what you get”, a term that is used a lot in the computer and publishing industry. In this tutorial however we will not use such an editor. The reason is simple: you need to learn to basics to undestand what you are doing. If you are seriously trying to learn about web design, you’ve got to know the basic. And take this from me: it will pay off in the long run, most web designers will agree with this. If it is your intention to build just a single site and then move on with your life, you might be better of using a WYSIWYG editor though. Recommendations to look into are NVU, Microsoft Frontpage or Dreamweaver.
If you hope to learn a bit more about web design, web pages and the simple HTML codes that are that are building blocks of a web site, this tutorial is for you though!

In this tutorial I do not want to overwhelm you with information. I will teach you HTML and CSS in small steps. Especially in the beginning I will leave out details that might otherwise be confusion. You will also notice that keywords are bold and that the tutorial has a clear structure. All this is done you can easilly skip parts or quickly find already discussed topics.
If there is anything that is not clear, please tell me! I can not improve this tutorial without feedback so whatever comment or question you might have, just shoot and I will answer.

Basic skills

In this tutorial I will assume that you have some basic computer skills like downloading and installing software and using a text editor.

Introduction

A web page is basically just a text document with some code in it. Your web browser, like Internet Explorer, Firefox or Safari, converts this code into a web page. This code is called HTML, which is short for HyperText Markup Language. HTML is a markup language. With HTML, you can enrich simple text with colors, links and multimedia elements like images, video and so on.

A modern web page usually consists of two parts:

  • the content
  • the layout or markup

In the first versions of HTML, content and markup were not seperated at all. This leads to messy pages of code and text that can get really ugly and unreadable. Adapting such a mess a year later can be incredibly challenging. Luckily, these days we can seperate content from layout much better.  This can be achieved by the use of cascading style sheets. A cascading style sheet is a file that contains instructions about the layout of a page. The page itself mostly contains the content and a reference to the style sheet.
The seperation of content and layout has a lot of advantages that might not say much to you right now. But later on you will start to appreciate these advantages. let’s list a few:

  • your pages will be easier to change
  • your layout will be more consistent throughout your site
  • your site will rank better in search engines
  • your site will load faster because you need less code

To be continued VERY soon..