---
# System prepended metadata

title: How to create a basic website

---

# How to create a basic website

## Introduction

We will show you what's behind all websites. After that you'll have the knowledge to understand the basic code.

## HTML the skeletton of your website

HyperText Markup Language provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.

HTML markup consists of several key components, including those called tags (and their attributes), character-based data types, character references and entity references. HTML tags most commonly come in pairs like `<h1>` and `</h1>`, although some represent empty elements and so are unpaired, for example `<img>`.

### Examples

#### Title
```
<h1>This is a title</h1>
```
#### Paragraph
```
<p>This is a paragraph</p>
```
#### Image
```
<img src="cats.jpg"/>
```

## CSS to add style

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.

### Examples

#### Background color
```
body {
    background-color: yellow;
}
```
#### Add a border to the image
```
img {
    border: 5px blue solid;
}
```
#### Center the page
```
body {
    margin: auto;
    width: 600px;
}
```
## Javascript to add interactivity

JavaScript enables interactive web pages and is an essential part of web applications. It's a programming language so it's more complex than the two langauge above.

### Example

#### Change background color

```
<button type="button" onclick='document.body.style.backgroundColor = "red"'>Turn background red</button>
```

# Final file
```
<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
    <style>
      body {
          background-color: yellow;
          margin: auto;
          width: 600px;
      }

      img {
          border: 5px blue solid;
      }
    </style>
  </head>
  <body>
    <h1>This is a title</h1>
    <p>This is a paragraph</p>
    <img src="cats.jpg"/>
    <button type="button" onclick='document.body.style.backgroundColor = "red"'>
      Turn background red
    </button>
  </body>
</html>
```