Making a simple website

This is a tutorial on how to make a simple website using HTML. You can code it in a text editor like Notepad. This tutorial will have 3 parts. If you want to build a website visually, you can use Wix. Also, if you want to publish the website you made, you should look at Publishing your website tutorial.

## Part 1 - The layout of your website

First, you should make a layout for your website. It will have no styling, because it is a layout. In part 2, there will be a tutorial on how to use CSS and add some styling.

### Starting the file

Before you add elements to your website, make sure you have this in your HTML file:

```
<!DOCTYPE html>
<html>
<head>
<title>This is the text that will be displayed in the list of tabs in your browser</title>
</head>
<body>

<h1>Heading</h1>
<p>Paragraph</p>

</body>
</html>

```
Now that you got the file ready, it's time to start making the website!

### Basic syntax

This section shows some very basic HTML syntax.

#### Paragraph

To write a paragraph in HTML, you just need to use the **<p>** tag. Also, if you want an end of a paragraph, you need to use the **</p>** tag.

#### Headings

There are 6 types of headers in HTML. The biggest one is **<h1>** and the smallest one is **<h6>**. Here can be seen the use of every heading tag:

```
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

```

#### Images

You can also put images in HTML using the **<img>** tag! Here is an example:

```
<img src="example\_image.png" alt="An examle image" width="400" height="300">

```
Here is about the attributes:

src: The location of the image to display

alt: A text that serves as a placeholder when the image isn't available

width: The width of the image

height: The height of the image

#### Divider

It's possible to make a division line in HTML using the **<hr />** tag. It can be used to divide sections, links and images. It's also possible to make a list with it.

```
<p>This is some text in section 1</p>
<hr />
<p>This is some text in section 2</p>

```

#### Table

In HTML, you can make a table! It's a bit complicated though. An extra CSS is needed to display the borders of the table. Here is the code needed:

```
<style>
table, th, td {
 border: 1px solid black;
}
</style>

```
This is an example of a table's code:

```
<table>
  <tr>
    <th>Rank</th>
    <th>Username</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Player 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Player 2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Player 3</td>
  </tr>
</table>

```

#### Coloured text

In HTML, you can also make text coloured, thanks to the **<span>** tag. You can set a colour by typing a colour's name, or you can add your own colour using Hex colours!

```
<p>This is some <span style="color:red">red</span> text!</p>

```
Now you can get into building the layout!

## Part 2 - Styling your website using CSS

Now that you made a layout, it's time to do the styling! Or you can skip this part if you want your website without styling.

### A section for CSS

First, you need to create a section for the CSS style. It should look like this:

```
<!DOCTYPE html>
<html>
<head>
<title>This is the text that will be displayed in the list of tabs in your browser</title>
<style>
<!-- CSS code goes here -->
</style>
</head>
<body>
<!-- Your website's layout -->
</body>
</html>

```

Now that we have the section, let's start styling!

### Basic styling

#### Changing the font

In CSS, you can change the font of your website. Note that headers can have a different fonts. Also, you can change the colour of text in CSS! Here is an example:

```
h1 {
 color: black;
 font-family: arial
}

p {
 font-family: calibri;
 font-size: 20px;
}

```
You can also change the alignment of the text in CSS. There is a lot of options in CSS.

#### Page background

Now that we have the font and colour set, it's time to set the page background. You can set a colour as a background, or an image as a background.

##### Colour as a background

To set a colour as a background, you need to put this in the **<style>** section of your HTML file:

```
body {
 background-color: lightblue;
}

```
You can change the *lightblue* to the name of a colour, or a Hex code.

##### Image as a background

If you want an image as a background, you need to put this in the **<style>** section of your HTML file:

```
body {
 background-image: url("replaceme");
}

```
You need to replace the *replaceme* to the name of your image (it needs to be with the file extension, else the background will be white)

## Part 3 - Tweaking the website

In this part, we will add a favicon and fix the tables. The favicon is optional. Also, we will add a website title.

### What is a website title?

A website title is a text, which is displayed in the list of tabs.

### Adding a website title

To add a website's title, you need to use the **<title>** element in the **<head>** section. Here is an example:

```
<head>
<title>A website's title</title>
</head>

```

### Adding a favicon

To add a favicon, you need to have an image file, which you want as a favicon. Then, you need to use the **<link>** tag like this:

```
<link rel="icon" href="replaceme" type="image/extensionofimage">

```
You need to replace the *replaceme* with the name of your favicon image (it needs to be with the file extension) and the *extensionofimage* with the image's extension.

### Fixing the tables

You may notice if you use the **<table>** element that the tables look like this:

That is because there is no CSS used to style the table. Don't worry, we'll fix this! Just add this code into the **<style>** section:

```
table, th, td {
 border: 1px solid black;
}

```
Now, it's the end of the tutorial. You can also add more to your website, there is a good documentation of HTML on w3schools.