Codes Explanation
How do you build a web page using HTML?
HTML stands for HyperText Markup Language. It is the basic language that gives a web page its structure: headings, paragraphs, images, links and much more.
This page is made for absolute beginners. You can read the explanation, then copy the examples into the Sandbox and change them step by step.
HTML uses tags to describe content
An HTML page is made of elements. Each element starts with an opening tag and ends with a closing tag. For example:
<h1>This is a heading</h1>
<p>This is a paragraph with some text.</p>
<a href="https://playcode123.com">This is a link</a>The browser reads these tags and knows which text is a heading, which is a paragraph and which part is a clickable link.
Many HTML tags come in pairs, like
<h1>...</h1> and
<p>...</p>. The first tag opens the element,
the second tag closes it.
Every HTML page has a simple skeleton
A complete HTML page always has a <head> and a
<body>. The head contains information about the
page (like the title), the body contains everything you see on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first web page</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is my first page.</p>
</body>
</html>You can copy this code into the Playcode123 Sandbox and change the text to see what happens.
In real projects, extra things are often added in the
<head> (like a link to a CSS file), but this simple
example already shows the core structure.
What can you try yourself?
- Change the text inside the
<h1>tag. - Add another paragraph with
<p>...</p>. -
Add a link to your favorite site with
<a href="URL">Link text</a>.
Use the Sandbox to experiment: you cannot break anything, you just learn by playing with the code.
Continue your HTML learning path
After you understand the basic structure, continue with these steps:
- Try more HTML examples: go to the HTML codes page and copy complete pages into the Sandbox.
- Add some style: read about CSS in the “How can CSS style a web page?” explanation.
- Practise with assignments: open the HTML, CSS and JavaScript exercises (PDF) and build your own small pages.
Take it step by step. First structure with HTML, then add colors and layout with CSS, and later make your pages interactive with JavaScript.