Change
Rename the game
Change the heading, paragraph and button text.
HTML 1
Build Your First Web Page
Learn one tag at a time. See what it does. Then put the pieces together into a real HTML page.
1 · Heading
2 · Paragraph
3 · Button
4 · Page Structure
HTML 1.1
1. H1 = Heading
The <h1> tag makes a large main heading.
Code
<h1>My Game</h1>
ResultWhat the browser shows
Try it
Copy the tag. Change My Game to the name of your own game.
HTML 1.2
2. P = Paragraph
A <p> tag is for normal text or a paragraph.
Code
<h1>My Game</h1> <p>Welcome to my game!</p>
ResultNow we added text
Try it
Add your own sentence underneath the heading using <p>.
HTML 1.3
3. Button
The <button> tag puts a button on the page. It does not do anything yet. We will make buttons work when we learn JavaScript.
Code
<h1>My Game</h1> <p>Welcome to my game!</p> <button>Start Game</button>
ResultYour first mini page
Try it
Change the button text. Try PLAY, START, or invent your own.
HTML 1.4
4. The Basic Page Structure
Now we put our code inside the normal structure of a real HTML page.
Complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Game Title</title>
</head>
<body>
<h1>My Game</h1>
<p>Welcome to my game!</p>
<button>Start Game</button>
</body>
</html>
ResultThe page still looks simple
Why do we need all this?
Think of it as the basic frame of a web page. It tells the browser how the page is organised. Browsers can sometimes fix incomplete HTML for us, but this is the correct way to build a page.
<!DOCTYPE html>
This tells the browser to use modern HTML. Put it at the very top of the file.
<html lang="en">
This is the outer container for the whole HTML page. lang="en" says that the main language of the page is English. The closing </html> tag goes right at the bottom.
<head>
The head contains information about the page. Most things in the head are not shown inside the page itself.
<title>My Game Title</title>
The title appears on the browser tab.
<body>
The body contains the things we actually put on the page: headings, paragraphs, buttons, images, games and more.
Practice
Build it yourself
Use the tags you just learned. Copying tags is fine. The important thing is knowing what each one does.
Add
Add more text
Add a second paragraph underneath the first.
Build
Make a title screen
Start with the basic page structure and create your own heading, description and Play button.