Chapter 3. HTML – How to make a website

home_page

Have you ever wondered how all of the wonderful websites that make up the World Wide Web are actually made? Have you ever wanted to have a go at creating a web page or website yourself? Well now you can.

Using clear, step-by-step instructions this chapter will show you how to go about doing just that. By the end, you will have learnt how to add headings, links, paragraphs and images to produce a fully functioning website for a fictional school called Blue Sky Primary. The website will be written completely in HTML code (without the need for any fancy software) and will look something like the example on the right.

Download the complete chapter (8.5 MB), or read it section by section…


Part 1. HTML and the Web: A brief history

What is the difference between the Internet and the World Wide Web? Who invented the Web and when? How are web pages made? Where are they stored? how do we access them? This and much more explained by clicking below.

Part 1. HTML and the Web: A brief history


Part 2. Show file extensions

When writing HTML in a text editor such as Notepad you need to be able to see the file extension so you can save your file as a .html web file. This short section will show you how to do just that.

Part 2. Show file extensions (explanation and instructions)


Part 3. Creating your first HTML web page

A quick guide, with step-by-step instructions, teaching you how to to use HTML code to create a basic web page.

Part 3. Creating your first HTML web page instructions

Click here to see what your web page should look like!


Part 4. Tags and styles

An introduction to HTML tags and how to use  inline styles to change the look of your web page.

Part 4. Tags and styles


Part 5. Setting up your page structure

An introduction to the Blue Sky Primary website building, with instructions for how to set up the homepage which will form the template for all the other pages in your site.

Part 5. Setting up your page structure


Part 6. Inserting an image into your web page

This section explains how to organise and re-name your images before adding them to your web page.

Part 6. Inserting an image into your web page

To find out how to resize an image click below:

How to resize an image


Part 7. Inserting navigation buttons into your web page

This section explains how to organise and insert buttons to your web page which will allow users to easily navigate from one page to the other.

Part 7. Inserting navigation buttons into your web page


Part 8. Creating the rest of your website

An explanation of how to create the remaining three pages of your website, using the home page as a template.

Part 8. Creating the rest of your website


Part 9. Using cascading style sheets

An explanation of how to use cascading style sheets (CSS) to style the content of your web pages in order to make them look more presentable.

Part 9. Using cascading style sheets


Part 10. Inserting a background image using CSS

How to use cascading style sheets to insert a background image into each page of your website.

Part 10. Using cascading style sheets


Part 11. Styling your navigation bar and heading with CSS

How to use cascading style sheets to style the look of your navigation bar and page heading

Part 11. Styling your navigation bar and heading with CSS


Part 12. Your finished website and glossary

Part 12. Your finished website and glossary

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>