How to create WebPage using HTML

What is a web page?

A web page is a collection of code and information in a structured way visible in a web browser. There are a number of web browsers such as Firefox, Chrome, Safari, Opera, etc. You can create a web page in Hypertext Markup Language (HTML). HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. It can also be assisted by more advanced frameworks such as Spring, Angular, Bootstrap, etc. for developing advanced Web Applications. For creating a web page you will need a computer with text editor and a browser. Any computer with standard configuration is suitable for basic web development. A simple text editor such as notepad on windows or GEdit or vim on Linux or TextEdit on Mac is suitable for beginners to grasp the concepts of HTML. Any of the standard web browser mentioned above can be used for displaying your web page.

How to create a web page?

In this article, we will see how to create your first Web Page using HTML from scratch in following easy steps:

Step 1: Create HTML file inside web folder

Create a folder to store and organize all your web page related files together. I will create a folder “My First Web Page” on my desktop. Now create a text file inside the folder with .html or .htm extension. You can choose any of the .html or .htm extensions (it’s totally optional). Generally, the first html file is named “index.html” as it is the name which is initially searched or looked upon by web servers as the landing page of a website or Web application. You are free to choose any other name for your first web page. However, I will use “.html” as extension and “index” as primary file name for demonstration purpose in this article.

Open the folder, right click and create new text file. Rename it to “index.html”. Alternatively, you may open the text editor with a new file and save it as index.html. Remember, basic text editor chooses .txt file extension by default. Ensure that you rename .txt to .html or .htm.

After creating index.html file, open it in a basic text editor such as Notepad on Windows, vi on Linux or TextEdit on Mac for now. Later on when you gain some expertise on web development and progress towards developing more advanced websites, you may choose advanced code editors such as Visual Studio code or Notepad++.

Step 2: Define document type and basic structure of your web page

Define the document type in the very first line of your html file using the following command:

<!DOCTYPE html>

This is the first tag you should use on your web page to inform the browser for following basic HTML tests before displaying a web page. A HTML web page is made up of HTML Elements. An element is made up of opening and closing tags. A Tag is a piece of code encapsulated between < (Less Than) and > (Greater Than) sign. Each element in HTML will start with a opening tag <> and close with a closing tag </>. A closing tag appends a forward slash ‘/’ just after the less than sign and before the actual HTML command. Some tags may not need closing tags such as <img>. The browser reads the tags, formats the text between opening and closing tags and display the information by formatting as per properties of the tags or HTML elements.

Next, declare the basic structure of your web page by encapsulating entire contents between opening and closing <html> tags which is also known as root tag and contains the entire web page. Then, divide the web page with <head> and <body> elements. The content of <head> element describes the information about your web page and not the actual content. The <body> element contains the actual content of your web page.

Thus, the basic structure of your web page will be as following:

<!DOCTYPE html>
<html>
<head>
     <!-- Meta data is mentioned here using different HTML elements-->
</head>
<body>
     <!-- Actual Web Content goes here using different HTML elements-->
</body>
</html>

You may have noticed a new element <!– –> in the web page structure above. This element defines a comment on a web page. The content inside comment element is not visible on web browser. You can use comments to explain your code.

Step 3: Create web page metadata

Before creating the actual HTML content, we should first declare some information about our page. To display the title of your page use <title> tag. The text written inside the opening and closing title tags appears in the title bar of web browser.

<title>My First Web Page | About Me</title>

There are many other elements used in <head> element of web page. But as a beginner you may begin with <title> only.

Step 4: Create web page content

Now, let us talk about the content of your web page. Whatever you type in <body> element of your web page will appear in the visible content area of web browser.

To create content of the web page you need to use HTML elements inside <body> element of web page. Let us check it out with examples of some important HTML elements which are necessary to learn first:

Heading Elements:

There are six different levels of headings viz. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> available for use on web page. With increasing number after ‘h’ in the heading tags, the size of the heading reduces. You can use as many headings tags to arrange your content as per their importance on the web page. To display headings on your web page enclose the heading texts in opening and closing tags heading tags.

For e.g.

<h1>My first heading goes here</h1><h2>My second heading goes here</h2> and so on.

Check out two levels of headings i.e. h1 and h2 in the following web page image:

Paragraph Element:

Paragraph denoted as <p> is an HTML element used to display textual content in the form of paragraphs on your web page. Just write whatever you want as a paragraph content between the opening and closing tags of paragraph element.

For e.g.

<p>This is a paragraph</p>

The below image showing a web page contains two paragraphs:

Image element:

You can insert an image into your web page using <img> element. <img> element does not require a closing tag. To read the image it needs a “src” attribute to read and load the image in browser from its source. Put an image in the same folder where your web page resides and declare images name in the “src” attribute of <img> tag. For e.g. let’s say the image name is “myAvatar.png”.

To display it in web browser you will write <img src=”myAvatar.png” width=”100″> in the HTML source code.

You may note we also used “width” attribute to define the size of the image. Otherwise, the image will be displayed in full size and even cover the entire page. Defining image width will resize it proportionately to reduce the size. In the web page images above, you can see an avatar image on top of the web page before heading 1.

Table Element:

<table> is used to display data in tabular format as shown in below image:

<table> element is further divided in table header and table body. Table header is defined between opening and closing <thead>tags while table body is defined between opening and closing <tbody> tags. The table data is defined in terms of row and column. Each new row in a table is defined between opening and closing <tr> element. Cells in each row is defined between opening and closing <td> tags in table body. Whereas, each cell in table header is defined between opening and closing <th> tags.

A standard table structure can seen as following:

<table>

     <thead>

          <tr><th>Column 1 Heading</th><th>Column 2 Heading</th></tr>

     </thead>

     <tbody>

          <tr><td>Row 1 Column 1</td><td>Row 1 Column 2</td></tr>

          <tr><td>Row 2 Column 1</td><td>Row 2 Column 2</td></tr>

          <tr><td>Row 3 Column 1</td><td>Row 3 Column 2</td></tr>

          <tr><td>Row 4 Column 1</td><td>Row 4 Column 2</td></tr>

          ...................

          <tr><td>Row n Column 1</td><td>Row n Column 2</td></tr>

     </tbody>

</table>

List Elements:

There are two type of lists in HTML. Ordered lists and Unordered Lists. Ordered lists have numerical values while Unordered lists have bullets to represent each list item. The two type of lists are shown in below image:

Let us first check out how to create an Ordered List on web page. An ordered list automatically inserts numbers in ascending order before each list item. For creating an ordered list you will need two HTML elements i.e. <ol> and <li>. Where, <ol> element defines an ordered list. Items between opening and closing tags of <ol> will be considered as list items. Each list item is enclosed between <li> & </i> i.e. opening and closing tags of list item element. For example, to create an ordered list with three items as shown in above image, write the following code:

<ol>
     <li>Certified Web Developer</li>
     <li>Certified Java Programmer</li>
     <li>Certified System Administrator</li>
</ol>

Now let us check out how to create an Unordered list on web page. An unordered list automatically inserts a bullet before each list item. For creating an unordered list you will need two HTML elements i.e. <ul> and <li>. Where, <ul> element defines an unordered list. Items between opening and closing tags of <ul> will be considered as list items. Each list item is enclosed between <li> & </i> i.e. opening and closing tags of list item element. For example, to create an unordered list with three items as shown in above image, write the following code:

<ul>
     <li>HTML</li>
     <li>CSS</li>
     <li>JavaScript</li>
     <li>BootStrap</li>
</ul>

You can also create a list inside another list. This is also known as Nested list. You can create nested lists for both ordered and unordered lists. To create nested lists, create an ordered or unordered list using <ul> or <ol> elements. Then before using the closing tags </ul> or </ol> open another list using opening list element tag <ol> or <ul>. In unordered nested lists bullets are changed with shifting right level of list items. Let us see the code for how create a nested list or a list inside another list as shown in above figure.

<ul>
     <li>Web Technologies
          <ul>
               <li>HTML</li>
               <li>CSS</li>
               <li>JavaScript</li>
               <li>BootStrap</li>
          </ul>
     </li>
     <li>Programming
          <ul>
               <li>C++</li&gt
               <li>Java</li>
               <li>Python</li>
          </ul>
     </li>
     <li>Database
          <ul>
               <li>PostGreSQL</li>
               <li>MySQL</li>
               <li>MariaDB</li>
          </ul>
     </li>
</ul>

Hyperlink Link element:

<a> element is used with “href” attribute to create a clickable link to other website or resources. The text written between opening and closing tags of <a> element appears as the clickable text. You can also use <button> element to create a clickable button instead of text link. For e.g.

For clickable text link:

<a href=”https://www.techsolveprac.com”>Click here</a>

For clickable button:

<a href=”https://www.techsolveprac.com”><button>Click Me</button></a>

Reference: Most important HTML tags every web development beginner must learn to use:

The following is not a comprehensive list of HTML tags, but they are the most used tags you should be familiar with to begin your web development journey:

Tag	Description
<!–…–>	Comment
<!DOCTYPE>	Document type
<a>	Hyperlink
<b>	Bold Text
<body>	Document’s body
<br>	Single line break
<button>	Clickable button
<div>	Section in a document
<em>	Emphasized text
<embed>	Container for external application
<h1> <h2> <h3> <h4> <h5> <h6>	Headings
<head>	Metadata or information of the document
<html>	Root of an HTML document
<i>	Italics
<img>	Image
<li>	List Item
<ol>	Ordered List
<p>	Paragraph
<strong>	Important text
<table>	Table
<tbody>	Table body
<td>	Table data
<th>	Table header cell
<title>	Title of the document
<tr>	Table row
<u>	Underline text
<ul>	Unordered list

For further reference you may check out a comprehensive list of HTML Tags at W3Schools HTML reference page.

You may check out the practical demonstration of how to create your first web page in HTML and using a little bit CSS in the following video:

You can download the sample First Web Page folder and use it by customizing for further learning. Download the zip file, unzip it and open index.html file in web browser to view content of the web page. Open the index.html file in text editor to view and modify the html code. You may also replace the image in the folder with your own pic.

We hope the above information was useful for you. Alas! Information keeps on updating. Follow us on social media, subscribe to our blog or subscribe our YouTube Channel to receive latest updates.