Web design tutorial

A web design tutorial is essentially an HTML and CSS tutorial, therefore those disciplines will be the core focus of this document. We will not examine any other such as Graphic design, Flash, JavaScript programming or server side scripting.

The concept behind every web page is deceptively simple. It is little more than a text file being transferred over the Internet. The local browser is in charge of rendering (displaying) the page according to the page layout defined within and HTML file. This file may reference other rich media resources such as images, videos and flash plug-ins which the local browser will also request from the remote web server.

For this tutorial, you will need to create 3 files now. Save them in a folder.

1. Index.html
   This is the main text for the web page. Start with an empty text file (created in notepad).
2. Styles.css
   This text file contains all of the styling for the web page. Again, it can be empty to start.
3. Picture.jpg
   Find a picture file on your computer and rename it.

Now open index.html in your browser. Follow the rest of this tutorial, and press the F5 key as you make changes to the file and see the result in the browser.

HTML Tutorial

HTML stands for “Hypertext markup language”. HTML tags are the building blocks behind all web pages. In this section we will explore the contents of a simple web page and a few basic tags within.

CSS Tutorial
As web design became standardized, “Cascading style sheets” were introduced. Among other things, it allowed web designers to separate markup from their styling.

This tutorial was a very brief overview of web design. Now that you understand how a web page is made, you can try install some web design software and examine the source code of websites online (right click just about anywhere on the page and select “view page source”).