Home / HTML5 / Stepwise instructions to Create a Web Page with HTML

Stepwise instructions to Create a Web Page with HTML

Wednesday July 7, 2021
14 minutes read
128 Views
html page

We’ll use HTML to create a simple web page in this tutorial. This tutorial is intended for persons who are new to HTML but have a basic understanding of the syntax. You may still follow along and learn a few things if you’re absolutely new to HTML. If you’re looking for a more in-depth look at HTML, the W3C introduction is a good place to start.

Table Of Contents

  • What is an HTML file and how can I make one?
  • How to make an HTML document from scratch
  • Sections, headings, and content in paragraphs
  • How do I see a preview of a web page?
  • Putting together a list
  • Text formatting Hyperlinks
  • Styling basics
  • Including images

1- Create a new HTML file

To begin, we’ll need to create a new document. We can build a document in a variety of methods, but I’ll be utilizing the text editor VS Code to do it. You are free to use any text editor you like.

The processes for creating a new file with VS Code are as follows.

  • VS Code is now open.
  • Press Ctrl + N on Windows or Cmd + N on macOS to open a new file from the File menu.
  • Choose “Save” from the File menu, or press Ctrl + S (Windows) or Cmd + S (macOS) on your keyboard. After that, you’ll be asked to give the file a name.
create-html-page-vs-code
  • The file extensions for HTML publications should be .html.
  • The default name for a website’s homepage is “index.html.” The term “index” denotes that this is the browser’s default file.
  • Only alphanumerics, dashes, underscores, and tildes should be used in the page name.
  • In the file name, there should be no spaces.
  • When naming HTML files, use lower case letters. In most cases, the name of an HTML resource is utilised in the URL. In most cases, URLs are case-sensitive.

2- Make a simple HTML document.

We can now begin writing HTML to develop our web page now that we have an HTML file. We’ll begin by including a few elements that are common in HTML files.

  • <!DOCTYPE html> – The DOCTYPE specifies which rendering mode should be used. This is essential for legacy reasons, but it’s not anything you should worry about if you’re just starting off. <!DOCTYPE html> HTML5 recommends it, and that’s what you’ll use for most projects, as well as for this guide. It must be the first thing in the HTML file, and no closing tag is required.

Add the DOCTYPE to the HTML file:

<!DOCTYPE html>
  • <html> – The root of the document is represented by the html element. The html element is the ancestor of all other elements. This essentially tells the browser that everything within this element is html. A closing tag is usually present in the html element, however it is not always essential. It also features a lang attribute that assists with speech synthesis by indicating the document’s language.

Now add the HTML element to your file as below:

<!DOCTYPE html>
<html lang="en"></html>
  • <head> – The info about the document is stored in the head element. This machine-readable information is used to set up the presentation or behaviour of the content, as well as the document’s relationship to other papers. This could include information such as the title, scripts, CSS style sheets, and analytics, among other things.

Add the head element inside the HTML element as it is below:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
</html>
  • <body> – The document’s content is represented by the body element. A document can only have one body element.

Add the body element inside the HTML element right after the head as it is shown:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body></body>
</html>
  • <title> – The title element will reflect the document’s name, which will be displayed in the browser tab. Because the title element contains metadata, it is utilised within the head element. Each document should only have one title element.

Add the title element inside the head element and name it however you’d like example is below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

You’ll note that some of the elements have been indented to make the code more readable. Indenting is a contentious coding topic. Everyone has their own personal tastes, but as long as they are consistent and serve to improve readability, go ahead and use any style you choose. I’m using Prettier, a code formatter, for this example, and it’s set to automatically format the HTML document when I save it.

We’ll add one more piece to this basic layout that you’ll encounter on a regular basis.

  • <meta> – Different sorts of metadata are represented by the meta element. There are a variety of uses for the meta tag, but there are two that you’ll see frequently (especially if you’re utilising HTML snippets), and these are the ones we’ll go through.

Add the following two meta elements to the head element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

A character encoding declaration is the first meta element containing the attribute charset=" UTF-8,” which indicates which character encoding is used to store or transport the document. If you’re just getting started, don’t worry too much about the technical features of this element, but if you see it, it’s a good idea to know what it does.

The viewport meta tag is the second meta element, and it was developed by Apple to allow developers to change the viewport size and scale. While the requirement to support mobile devices has made this meta tag highly popular, it is not required for all websites.

3- Sections, headings & paragraph text

You wouldn’t see anything rendered in the viewport if you looked at this website in a browser. Because we haven’t contributed any content to the body element, this is the case. So, let’s start filling in the blanks on this webpage.

  • <section> – A section element can be used to represent a specific document portion. The web page will feature an introduction portion, a camping gear section, and a photo section in this example.
  • h1, h2, h3, h4, h5 & h6 elements – These are the document’s headings, which are an important aspect of a web page. The importance of headlines for SEO and accessibility cannot be overstated. In future lectures, we’ll learn more about semantics and structuring web pages, but for now, keep in mind that headings are critical components of any web page.
  • <p> – The p element in HTML represent paragraph text.

Let’s begin by adding the first section and its elements; feel free to follow along with this example or customize the web page to your liking.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
  </body>
</html>

4- Preview in the browser

Let’s have a look at how it looks in the browser now that we have some content in the document’s body. Drag the HTML file into an open browser tab is one of the simplest ways to achieve this.

preview-in-browser

To see any changes you’ve made to the HTML, you’ll need to restart the browser tab. Another approach is to use a live preview. For example, VS Code offers a popular addon called Live Server that allows you to examine the file by clicking a button and will listen for changes and update accordingly.

5- Create a list

The second section of this page’s content will be a list of equipment you could require for winter camping. Let’s take a look at the components we’ll need to put this together.

  • <ul> – The ul element, which stands for unordered list, depicts a list of things in which the order of the contents is irrelevant.
  • <li> – A list item is represented by the li element.

Now that we know what elements we’ll be using, let’s go ahead and make a new section for our camping gear list:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        Winter camping requires a bit more gear than a summer camping trip
        would. It's important to be prepared for the cold temperatures which can
        become dangerous. Here is a list of gear that would be helpful when
        winter camping.
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>Winter tent</li>
        <li>Cold-weather sleeping bag</li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

6- Formatting the text

Let’s add some formatting to the text now that we have a little more content. The appearance of the text will be altered, and the page will become more readable as a result of the formatting. We can utilize a number of different elements to accomplish this:

  • <b> – Bold text is represented by this element. It’s used to call attention to or emphasise a certain piece of text.
  • <strong> – This will have the same effect as the <b> element, but <strong> is semantic and aids in the description of the content it surrounds.
  • <i> – Italic text is represented by this element, which is intended to create a different mood from the standard text.
  • <em> – This indicates that the text should be highlighted.
  • <mark> – This is text that has been highlighted or noted for future reference.
  • <small> – This is for side-comments, and the text it surrounds will be reduced in size.
  • <del> – This is the text that has been removed.
  • <ins> – This is used to represent text that has been inserted. Both ins and del are used to keep track of a document’s modifications.
  • <sub> – Subscript text is represented by this element. The text in subscripts is smaller and the baseline is decreased.
  • <sup> – Superscript text is represented by this element. With a raised baseline and smaller letters, the text is rendered.

Let’s go ahead and incorporate a few of these features into the preceding paragraph part.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>Winter tent</li>
        <li>Cold-weather sleeping bag</li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

7- Create a hyperlink

The capacity to define links from one website to another and follow those links at the click of a button was the beginning of the World Wide Web. The hyperlink is the name of the program.

World Wide Web Consortium (W3C)

Hyperlinks are what make a website a website, and they are an essential component of any web page. Almost any sort of material can be converted into a hyperlink, directing users to a different URL when they click on it.

The following elements can be used to make a hyperlink:

  • <a> – The href property on the an element or anchor element provides a hyperlink when utilised.

Take a look at the following example:

<a href="https://www.w3.org/">the World Wide Web Consortium homepage</a>.

As a result of this,

the main page of the World Wide Web Consortium

Let’s add a couple of additional links to the list of winter camping gear now that we’ve covered the fundamentals. When a user activates them, they will be taken to a different location.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

8- Style the web page

If we look at the web page right now, we can see that it isn’t that entertaining to look at. By adding some fundamental styles to the HTML content, we can change that. To accomplish this, we’ll add a style> element to the HTML content, which will allow us to incorporate CSS.

The style element will be added to the HTML document’s head element. I won’t go into great depth regarding the CSS I’ve provided; if you have any questions, consult the MDN CSS reference documents.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
    <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
  </body>
</html>

9- Add an image to the page

Because web pages without photos can be somewhat boring at times, let’s go ahead and add an image to this one. We’ll utilize the img element to add an image.

  • <img> – An image is represented by this element. The src attribute, which specifies the picture URL, must be present. We’ll also employ the alt attribute, which is crucial for accessibility. We create an alternate text for the image so that even if all of the images are missing, the alt property will still convey the same message.

We’ll use a winter camping image from a stock photo website in this example, but you could also use a locally saved image. Let’s add another part, complete with a heading, a brief description of the section, and our image:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
    <style>
      html {
        max-width: 800px;
      }
      body {
        background-color: white;
        margin: 0 4rem;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.15rem;
      }
      section {
        border-bottom: lightblue solid 2px;
      }
      h1 {
        font-size: 3em;
      }
      ul,
      li {
        list-style: square;
      }
      em {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Winter Camping for Beginners</h1>
    <section>
      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>
    </section>
    <section>
      <h2>Winter Camping Gear</h2>
      <p>
        <mark>Winter camping</mark> requires a bit more gear than a summer
        camping trip would. It's <strong>important to be prepared</strong> for
        the cold temperatures which <em>can become dangerous.</em> Here is a
        list of gear that would be helpful when <mark>winter camping.</mark>
      </p>
      <ul>
        <li>Snowshoes</li>
        <li>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season"
            >Winter tent</a
          >
        </li>
        <li>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories"
            >Cold-weather sleeping bag</a
          >
        </li>
        <li>Insulated sleeping pad</li>
        <li>Handwarmers & footwarmers</li>
        <li>Winter boots</li>
      </ul>
    </section>
    <section>
      <h2>Winter camping pics</h2>
      <p>Here are some of my fav photos from winter camping!</p>
      <img
        src="https://images.unsplash.com/photo-1455496231601-e6195da1f841?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        alt="a picture of a tent during a winter snow storm"
      />
    </section>
  </body>
</html>

Let us have a look at what the web page you created looks like now.

web-page

Conclusion

We learned how to make an HTML document and about several common features including lists, images, hyperlinks, headings, and paragraphs in this session. To make the building more appealing, we applied some basic styles and formatting to the text.

From here, I recommend rolling up your sleeves and creating your own HTML page from the ground up. Build something more complex using only HTML once you’ve gained some confidence. There are a lot of popular frameworks, libraries, and other gear out there to help you construct web pages, but you can do some amazing things with HTML alone, and honing your HTML abilities will make you a better developer and the internet a better place.


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *