Learning to build a website - Lesson Two

Posted on 06-11-19 in Computing

This post is part 2 of the Introduction to website design" series
Learning to build a website - Lesson One

Introduction to what a website is and what they include

Learning to build a website - Lesson Two

Basic Introduction to making a website

In this lesson we will :

  1. Create an account on neocities
  2. Complete the basic introduction tutorial
  3. Begin designing our own website

Getting Started

HTML is the language which will hold the content and the structure of our webpage. If you have not done so already, register an account at neocities. There is a beginner's tutorial there I would highly recommend ensuring you have completed.

Once this is done, create a new directory on your computer. Into this directory we will add two files :

  • index.html
  • style.css

Basic Structure

HTML is a rather forgiving language but it will help if we keep our code looking tidy. How you do this is upto you but for me, I'm going to stick to tabs! A basic example will look like :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Page</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <marquee>Site Under Construction!</marquee>
    <p>This is a simple example!</p>
  </body>
</html>

We will discuss what style.css does in a future class. If we manage to get this working correctly, open the index.html file with your web browser. You should be greeted with the following!

embedded video, no alt provided

Let's go through this code and see if we can understand what's going on. Firstly everything is wrapped in <html> tags. This understandably just tells the computer we're writing HTML! Next we can see the code is grouped into two sections; head and body.

What goes in the head?

The head contains all the bits of the webpage that describe things about the whole page and for things outside the browser window. Notice how <title> tag has changed the title in the tab and titlebar of the browser. We'll come back to the other commands. Sufficed to say, just copy and paste them for now.

What goes in the body?

This is where the content of your website should go. There are many(!) tags we can use. Let's learn a few of the more common and useful ones.

  • img
  • a
  • ol / li
  • ul / li
  • br

How to structure your page

Unless we just want lots and lots of text, which admittedly isn't the worst website design, we're going to need to learn how to structure a page. For this we will use <div> tags. These define divisions on our page, allowing us to group content in a useful way. Consider

diagram showing how we might structure a webpage

If we want to do this, we'll need to create div tags for all these bits.