# 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> ```