How to make your first web page (HTML)

Name: make your first web page (HTML)
Prep time: 20 min
Total time: 20 min
Ingredients: Notepad; Web browser; PC

created 7.3 y • edited 7 y by Richard Foulon • Updates history (11)

● Easy 🚩 10 steps 🕗 20 minutes

To make your first web page (HTML), you need 3 things:

Notepad ▼

shoppingbag View guides which use Notepad blueprint Find info page about Notepad workbench Find a guide to know how to make a Notepad Find a guide to know how to find a Notepad

Web browser ▼

shoppingbag View guides which use Web browser blueprint Find info page about Web browser workbench Find a guide to know how to make a Web browser Find a guide to know how to find a Web browser

PC ▼

shoppingbag View guides which use PC blueprint Find info page about PC workbench Find a guide to know how to make a PC Find a guide to know how to find a PC

This guide will allow you to create your first web page using HTML.

All you need is a text editor like Windows Notepad.

The goal of this guide is to allow you to understand the basics of a web page and how it works. So the page you will create doesn't need to be online. You just need to open it with your browser like a "real" web page. The browser will read it directly from your PC, instead of getting it from a web server. So the page you will create will be only accessible for you, unless you decide to upload it to a web server so everyone can view it. The good thing is you can practice HTML offline simply with a text editor and a browser to render the page

Let's make your first HTML page!

Open Notepad

Open windows notepad or any basic text editor of your choice.

By basic text editor i mean a very basic notepad, with no styling possible (don't use Wordpad, Word, open office etc. which are more for making styled documents)

Understand the tags structure

Everything in HTML is made with tags. That's how you tell the browser were the things are. Its like putting traffic cones on the road to help drivers to go somewere or to define a specific area.

Each tag allow to do a particular thing or define a particular zone in the page.

So how tags works? It's simple: you write the start and the end of the markup, simply where it needs to be.

For example imagine someone has made an apple pie and asks how big you want your slice. So you use your fingers to tell them where the slice starts and where it ends so the person can cut out the perfect slice for you. It's the exact same thing for web pages, but instead of using your fingers you will use a HTML tag to start the markup, and another one to end the markup zone.

Write the first tag, which is for telling the browser the language used (HTML).

So you need to write the *start*, add few blank lines, then the *end* tag.

The end tag is the same as the start tag, but it has a `/` in it.

<html>

</html>

Write the HEAD tag

An HTML page can contain lots of information not visible for the users, but useful for the browsers or the search engines.

All this stuff will go in the head tag. But for now just write this tag without anything in it.

Add the

<head>

tag INTO the previous tag (html):

<html>
<head>
</head>
</html>

(?) — Now we can add the most important tag: the *body* tag. The Body tag contains pretty much all the page's content.

Just add the *body* tag inside the *html* tag, AFTER the *head* tag:

<html>

<head>
</head>

<body>
</body>

</html>

You can add spaces and blank lines for a more understandable tag structure.

The HTML page contains the page's text seen by the users. But it doesn't contain the images, videos etc. It has only their URL address for the browser to get them and show them in the page.

Add some text

Ok so now we have the base structure.

You can now add some text in the body tag!

<html>

<head>
</head>

<body>
Hello my name is John and this is my first HTML page!
</body>

</html>

View your page

Save the HTML as

mypage.html

on your computer and open it in your web browser so you can see what your page looks like to an user.

To open your HTML page in a web browser, find the

.html

file you saved on your computer, right-click it, then Open with > Google Chrome or another web browser you have installed.

If you play around with the code to see how the browser renders it, remember to always 💾 Save (

Ctrl

) the changes in the text editor, then on the browser 🔄 Refresh (

) the page. Otherwise you will not see the changes you made

Try simple tags / Format your text

To format your text, just add the corresponding tag around the desired word or paragraph.

Let's make the word "John" bold for example. Just add <b> before John and </b> after:

<html>

<head>
</head>

<body>
Hello my name is <b>John</b> and this is my first HTML page!
</body>

</html>

Save the code, refresh the browser and you will see the bold text

Here are some tags you can test around:

<h1></h1> Makes a big title
<i></i> Italic
<p></p> Makes a paragraph
<blockquote></blockquote> Quote some text from someone or a page
<code></code> Makes the text look like programing code

Try "single" tags

Some tags doesn't need to be closed, because it's not necessary to know where their markup ends.

Some of "single" tags:
<hr> Makes an horizontal line
<br> Makes a line break