What is a website?
A website is a group of web pages that share one address on the internet. In this lesson you will learn how websites work, how to write the basic parts of a page in HTML, and which tool to write it in.
A website is a set of connected pages
Think of a website like a book. Each page of the book is a web page. The whole book is the website. Anyone with the address can open it.
Web page
One single page you can see on the screen. It can have text, pictures, links and buttons.
Example: the “About us” page of a shop.
Website
Many web pages that are linked together and live under the same address.
Example: the whole shop with its Home, About and Contact pages.
Browser
The app you use to open websites. It reads the code and shows you the page.
Example: Chrome, Safari, Edge, Firefox.
Server
A computer that is always on. It keeps the files of a website and sends them to you.
Example: a computer in a data center.
Every page has an address called a URL
URL means “Uniform Resource Locator”. It tells the browser where to go. A URL has three main parts.
ProtocolThe rules for talking to the server. https means the connection is secure.
DomainThe name of the website. It is like the street name of a home.
PathWhich page you want inside the website. It is like the house number.
What happens when you open a website?
It takes less than a second, but four things happen one after another.
-
You ask
You type a URL or tap a link in your browser.
-
The browser sends a request
It asks the server that owns that address for the page.
-
The server answers
It sends back the page files, mostly HTML, CSS and JavaScript.
-
The browser shows the page
It reads the code and draws the page on your screen.
A web page is built with three languages
Imagine you are building a house. Each language does a different job.
HTML
The walls and roomsHTML gives the page its structure and content: headings, paragraphs, links and pictures.
CSS
The paint and furnitureCSS controls how things look: colors, fonts, spacing and layout.
JavaScript
The lights and doorsJavaScript makes the page do things, like open a menu or react to a click.
HTML basics
HTML means HyperText Markup Language. “Hypertext” is text with links. “Markup” means you put labels around your text so the browser knows what each piece is.
The parts of an HTML element
The skeleton of every web page
Every HTML page starts with the same basic shape. You can copy it again and again.
- <!DOCTYPE html>
- Tells the browser: “this page uses modern HTML.”
- <html>
- The outside box. Everything else goes inside it.
lang="en"says the page is in English. - <head>
- Information about the page. You do not see it on the screen.
- <meta charset>
- Lets the page show letters and symbols correctly.
- <title>
- The name shown on the browser tab.
- <body>
- Everything you can see: text, links, pictures.
Elements sit inside other elements
HTML is like a set of boxes. A box can hold other boxes. This is called nesting.
- Close what you openMost tags come in pairs:
<p>and</p>. - Use lowercaseWrite
<p>, not<P>. It is easier to read. - Put values in quotesWrite
class="intro"with double quotes. - Indent nested tagsAdd two spaces inside a box. Your code stays tidy.
Common tags: tap one to see what it does
Your tool: the code editor
A code editor is a program for writing code. You could use a simple text app, but a code editor helps you write faster and make fewer mistakes.
| Feature | Simple text app | Code editor |
|---|---|---|
| Colors for tags and words | No | Yes |
| Line numbers | No | Yes |
| Closes tags for you | No | Yes |
| Shows mistakes | No | Yes |
| Shows all files in a folder | No | Yes |
Editors you can choose from
Visual Studio Code
Free and popular. Has many add-ons that make coding easier.
Windows, Mac, Linux
Sublime Text
Fast and light. Free to try, and you buy a license to keep using it.
Windows, Mac, Linux
Notepad++
Free and simple. A good choice for an older or slower computer.
Windows only
Online editors
Work inside your browser, so you install nothing. Good for quick tests.
Any device with internet
Make your first page: 8 steps
These steps use Visual Studio Code, but other editors work in a similar way. Tick each step when you finish it.
Tip: Name your home page index.html. Web servers look for this name first, so it becomes the front door of your website. For a page that refreshes by itself each time you save, try the add-on called Live Server in Visual Studio Code.
How your folder can look
Four shortcuts to learn first
| What it does | Windows | Mac |
|---|---|---|
| Save the file | Ctrl + S | Cmd + S |
| Undo | Ctrl + Z | Cmd + Z |
| Turn a line into a comment | Ctrl + / | Cmd + / |
| Tidy up the code | Shift + Alt + F | Shift + Option + F |
A comment is a note for people. The browser ignores it. In HTML it looks like this:
Try it yourself
Change the code on the left. The page on the right updates as you type. You cannot break anything, so try new things.
Tip: press Tab to indent. To leave the code box with the keyboard, press Esc first, then Tab.
Mini challenge
Make a page that has all four things below. Each one gets a check mark when you add it.
- A big heading with
<h1> - A paragraph with
<p> - A link with
<a href="..."> - A list with
<ul>and<li>
Quick quiz
Seven questions. Pick one answer for each. You will see right away if you are correct.
What you learned
- A website is a group of linked web pages under one address. A browser shows them, and a server stores them.
- A URL has a protocol, a domain and a path.
- HTML builds the structure, CSS adds the style, and JavaScript adds the actions.
- An HTML element has an opening tag, content and a closing tag. Tags can have attributes.
- Every page needs
html,headandbody. The body holds what people see. - A code editor like Visual Studio Code gives you colors, line numbers and auto-closing tags.
- Save your home page as
index.htmland open it in the browser.