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: 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    tag. Also, if you want an end of a paragraph, you need to use the    tag.

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

Images
You can also put images in HTML using the   tag! Here is an example: 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   tag. It can be used to divide sections, links and images. It's also possible to make a list with it.

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: This is an example of a table's code:

Coloured text
In HTML, you can also make text coloured, thanks to the    tag. You can set a colour by typing a colour's name, or you can add your own colour using Hex colours! 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:

Now that we have the section, let's start 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: 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   section of your HTML file: 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   section of your HTML file: 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   element in the   section. Here is an example:

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   tag like this: 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 ''' 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.