Your first web page
In this lesson
- How a web page reaches you
- Elements and tags
- Two elements to start with
- Comments
- Common mistakes
Practise this in the Code Studio
open the exercise for this lesson. You type real code in your browser, see the result at once, and the tasks tick themselves when your code is right. Nothing to install.
Every website you have ever opened, from a news site to your favourite social app, is built from the same three languages:
| Language | Its job | Think of a house |
|---|---|---|
| HTML | The content and structure | The walls and rooms |
| CSS | How it looks | The paint and furniture |
| JavaScript | What it does when you click | The lights and taps |
This course teaches HTML, the one every page starts with. HTML stands for HyperText Markup Language. It is not a programming language: it is a way of marking up text so the browser knows what each piece is.
How a web page reaches you
- You type an address, or click a link.
- Your browser (Chrome, Edge, Safari, Firefox) asks a computer called a server for the page.
- The server sends back a file of HTML.
- The browser reads the HTML from top to bottom and draws the page.
A web page is just a text file. Anyone can write one, including you.
Elements and tags
HTML is made of elements. Most elements have three parts:
<h1>Thabo Mokoena</h1>| Part | Example | Meaning |
|---|---|---|
| Opening tag | <h1> | "A main heading starts here" |
| Content | Thabo Mokoena | What people see |
| Closing tag | </h1> | "The heading ends here" (note the slash) |
Tags are written inside angle brackets. People never see the tags, only the result.
Two elements to start with
<h1>Thabo Mokoena</h1>
<p>I am learning to code.</p>
<p>This is my first web page.</p><h1>is the main heading of the page. It is big and bold.<p>is a paragraph. Each paragraph starts on its own line with a gap around it.
Watch out
Spaces and new lines do not matter. The browser ignores extra spaces and blank lines in your HTML. To start a new paragraph you need a new
<p>, not the Enter key.
Comments
A comment is a note for people who read the code. The browser does not show it.
<!-- This is a comment -->Common mistakes
- Forgetting the closing tag. Without
</h1>the whole page becomes a heading. - Forgetting the slash.
<p>Hello<p>opens two paragraphs and closes none. - Typing tags in the wrong order. Close the last one you opened first.
Try it
- Write a page with your name as the main heading and two paragraphs about yourself.
- Delete the
</h1>and watch what happens to the result. Put it back. - Put ten spaces between two words in a paragraph. How many spaces does the browser show?
Check yourself
What do the letters HTML stand for?
HyperText Markup Language.
What is the difference between a tag and an element?
A tag is the part in angle brackets, such as <p> or </p>. An element is the whole thing: opening tag, content and closing tag.
How many spaces does the browser show for ten spaces in a row?
One. The browser squeezes any run of spaces and new lines into a single space.
