Back to blog

HTML Basics for Beginners: How to create a website using HTML?

Abhinav Girdhar
By Abhinav Girdhar | Last Updated on April 28th, 2024 8:36 am | 6-min read
HTML Basics| How to create a website using HTML

In this post, we are going to cover the basics of HTML, teach some simple website HTML codes, basic HTML tags, basic HTML codes and everything else that you need to know for creating a simple HTML page.

What is HTML?

HTML or HyperText Markup Language is a computer programming language used primarily for creating websites and web applications. The websites created with HTML can include text, links, images, audios, and videos.

HTML Basics| How to create a website using HTML

Pick an HTML Editor

Before you start creating your HTML web pages, you would first need to select an HTML editor. A good HTML editor can help you in the following ways:

  • Keeps your code clean

  • Prevents bugs by automatically closing the tags you opened

  • Reduces the required amount of typing

  • Gives you a web page preview with the ease of WYSIWYG

Here is a list of some of the most popular HTML editors

  • HTML-Kit

  • CoffeeCup

  • KompoZer

  • Komodo Edit

  • Notepad++

  • Bluefish

  • CodeLobster

HTML Basics| How to create a website using HTML

How to make a website with HTML – HTML Basics

The fun with HTML is in its potential of creating beautiful and simple HTML pages with basic HTML codes. To help you get started, we have included a step by step process, a brief note about all the basic HTML tags, and a bunch of simple HTML code tutorial videos.

Here are the steps to help you create your first HTML document:

  1. Open Notepad on your PC or TextEdit on your Mac

  2. Write or copy and paste some basic HTML codes into Notepad

  3. Save the document

  4. Open and view the HTML in your preferred browser

Here, we have a great video that will help you create your first HTML document.

(Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

Basic HTML Tags

As a beginner, you need to know and understand basic HTML tags. The HTML tags tell the browser that the document is in HTML. An HTML tag begins with the “<” character and ends with “>” character, which collectively are called angle brackets.

Here is a list of the basic HTML tags:

  • Bold

    • To write the sentence “Make an App” in bold format, we will be using <b> tag. This means if we write <b>Make an App</b>, the browser will translate it to Make an App.

  • Italics

    • If you want to write the same sentence in italics, you will have to use the tag <i> . Hence, writing <i>Make an App</i>  will translate to Make an App.

  • Hyperlink

    • The tag for hyperlink is <href>. So, we can write <a href=https://www.appypie.com/app-builder/appmaker/>Make an App</a> will come up as Make an App.

Understanding Elements

An element in HTML is a combination of the content with the opening and closing tag. For example, in “Make an App”, the HTML version would be <b>Make an App</b>. This entire piece including the opening tag, the sentence itself and the close tag forms an element.

Now that you know the basic HTML tags and know what an element is, you are ready to go ahead and create your own basic HTML document. Let’s get started!

Creating HTML <head> Element

The first thing that you need to do when you are creating an HTML document is to create the <head>  element. The <head>  element carries the metadata in it. Metadata includes information like the character set, document title, document styles, scripts and more.

Certain elements in the <head>  include title, which is created using the <title>  tag. This title appears in the browser tab. This title is important as it is indexed as the page title by the search engine bots, when they crawl your website.

This also includes <meta> elements, used generally to provide information (like description, keywords, author information and more) that can be used by search engines to create a description for your website’s listing.

Creating Headings in HTML

Whenever you are writing any content, it is important that you put in appropriate headlines, which makes it easy for the readers to scan through and make sense of the content. This is true for websites as well. Adding headings on your website not only makes it readable for the users, they also tell the search engines how the website is structured. It is safe to say that the headings on your website play a critical role in your ranking.

There are 6 heading tags  <h1> to <h6> with <h1> indicating the most important heading and <h6> the least.

Here’s a video to help you understand the process of creating HTML headings.

(Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

  • Creating paragraphs

    • To create paragraphs, you need to use <p> tag and for line breaks you will have to use <br> tag. To get text looking like the following

    “Making an app is as easy as pie.
    Use Appy Pie’s no code app builder.
    Create your app for free.”

    Your HTML would look like this

    <p>Making an app is as easy as pie.<br> Use Appy Pie’s no code app builder.<br> Create your app for free.</p>

    <br> is an empty tag, so you don’t need to close it.

    Here’s a video to help you understand the process of creating paragraphs in HTML.

    (Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

  • Formatting text

    • The importance of formatting in any content is paramount. You may need the text to be bold, italicized, underlined, subscripted, superscripted etc.

    To make your text bold, use <b>

    To italicize your text, use <i>

    To underline text, use <u>

    For subscript, use <sub>

    For superscript, use <sup>

  • Ordered and unordered lists

    • It is natural that you would need to include ordered or unordered lists. An ordered list looks like this:

    1. Point 1
    2. Point 2
    3. Point 3

    To create this list you will need to write it in this way:

    <ol>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
    </ol>

    Here’s a video to help you understand the process of creating ordered or numbered lists in HTML.

    (Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

    An unordered list looks something like this

    • Point 1
    • Point 2
    • Point 3

    To create an unordered list, you need to write this way:
    <ul>
    <li>Point 1</li>
    <li>Point 2</li>
    <li>Point 3</li>
    </ul>

    Here’s a video to help you understand the process of creating unordered or bulleted lists in HTML.

    (Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

Nested Lists

Nested lists are those that have a list within a list. For example

  • Point 1
    • Point 1 nested
    • Point 2 nested
    • Point 3 nested
  • Point 2
  • Point 3

To do this, you will need to write this way

<ul>
<li>Point 1
<ul>
<li>Point 1 nested</li>
<li>Point 2 nested</li>
<li>Point 3 nested</li>
</ul>
</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>

Though the example here is that of an unordered list, you can also apply the same for an ordered list with <ol> tag instead of <ul>

Hyperlinking

It is natural that you would want to include some links in your pages whether for external linking or internal. This link that connects your pages to an external page is called a hyperlink. Though this hyperlinking is mostly done with text, it can also be done for any other HTML element, even images.

The tag for links in HTML is <a> and href is used for specifying the destination page. The link is put into the tag, with quotes after “=” sign, before closing the tag.

For example, to create a link you will be writing it like this:

<a href=”https://www.appypie.com/app-builder/appmaker”>Make an App</a> so that you get something like this Make an App.

Here’s a video that will give you detailed information about adding links in HTML.

(Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

Using images

To add images on your page, the HTML tag is <img>. This is yet another empty tag which doesn’t need to be closed.

Here’s a detailed video that tells you how to add an image using <img> tag in HTML.

(Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

Creating tables

If your web page needs information to be structured in a certain way, you would want to include tables. The tag for tables in HTML is <table>. The headers in a table are specified using <th> tag and <tr> is used to specify table rows and <td> for table data.

Watch this detailed video to understand how you can create tables in HTML.

(Above video is a part of a more elaborate course on Academy by Appy Pie. To access the complete course, please Click Here, or continue reading below.)

Conclusion

This is a basic guide for HTML and HTML is way more complicated than what you see in this guide. However, if you are looking for information on HTML basics, basic HTML tags and want to know the basics of how to create a website using HTML code, this is the perfect resource for you.

HTML forms the foundation for creating the webpages and its knowledge is critical if you want to spend a lot of time developing the perfect webpage for your business.

However, if you don’t have much time or skills, you must create a website using Appy Pie’s website builder. The no code platform lets you create website in minutes and has no dearth of features!

You May Also Like:

Take a deeper dive into the digital ecosystem and start expanding your business with these helpful resources:

Related Articles

Abhinav Girdhar

Founder and CEO of Appy Pie

App Builder

Take a Related Course

Most Popular Posts