How to create a web page

2021-07-09 - Korey Earl

Today, you are going to learn how to create your very own web page. It’s not going to be the fanciest web page ever, but hey, everybody’s gotta start somewhere so let’s get going.

This topic also assumes you know how to create a raw text file. Find Out How

Step 1

Copy the following code, and paste it into your text editor.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Step 2

Save your text file as first.html

Step 3

Open your text file using your web browser. Find Out How

You should get a page that looks something like this:

Hello World Web Page

How does it work?

Hyper Text Markup Language (HTML)

When you open a text file with an extension of .html or .htm in your browser, the file is interpreted by your browser and converted into what you see. There are many different web browsers available and each one converts an html file differently. Let’s look line by line to learn how most browsers interpret your file.

<!DOCTYPE html>

This line tells the browser exactly which standard to use to interpret your text file. In this case it’s HTML version 5.

<html>

This line is the root tag of an html document. Every other tag is placed within the opening and closing html tags.

<head>

Is an opening tag that lets the browser know that this is the beginning of the head(er) section of our html document. A tag is a block of text starting with a “<” and ending with a “>” symbol. The browser knows to interpret the next lines as part of the head of your document which is interpreted differently than the body of your document.

    <title>My First Webpage</title>

The opening title tag, <title>, tells the browser what to name the tab that your web page is shown in. The other tag, </title>, is called a closing tag.

Take note of the “/” character before the word title in the closing tag. Every letter, number or symbol in an html document is interpretted by the browser and a single character can make a big difference.

The words between the opening and closing tags are known as text and can be whatever you want as long as it doesn’t contain any “<” or “>” characters.

Most browsers will limit the amount of text in a tab title so a short descriptive title is important.

</head>

A closing head tag that tells the browser we are are finished with the head section.

<body>

The opening body tag that begins the body or our web page. Essentially everything that we want to user to see in the largest section of our web browser.

    <h1>Hello, World!</h1>

The h1 tag tells the browser to display everything between the tags in a large bold font or Heading. There are six levels of headers, h1 being the largest, h6 the smallest.

  </body>
</html>

The rest of the lines are closing tags to complement the opening body tag and opening html tags.

One thing to remember with tags is that each one has an opening and closing tag. An opening tag that appears after another opening tag, must have a closing tag that appears before the first tags closing tag. For example:

    <body>
        <h1>
    </body>
        </h1>

is invalid.

Challenge

Try to edit first.html using the h1 through h6 tags so that it looks like this.

Page with Headers

Conclusion

We just learned the basics of creating a web page. We walked through the structure of an HTML Document. At the heart of every web page on the internet, is the same basic HTML structure. Next, we’ll explore some more of the basics of a web page when we look into Cascading Style Sheets and JavaScript.

today-i-learned

A blog about computers, and stuff.