How to Create a Simple Web Page Using HTML

Although this is not the right time to create an HTML/Web page, but I thought you should practice a bit the lessons you already learned from our site, even you should know about what you are actually learning. That’s why I decided to write this post.

No style need to use here. We will just use the following elements ─

Note: If you missed to learn anything from the list, then read that one right now.

What You Need to Do

Basic HTML Code Example

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>A simple HTML document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Definition and Usage

  • DOCTYPE: Each HTML document requires a document type declaration. It tells the Browser what type of the document is. Here the <!DOCTYPE html> is used for HTML5.
  • html: The <html> element is the document root. It is recommended to specify the page language using lang="". This element comes immediately after the doctype, and all other elements will go into the <html> and </html> tags.
  • head: The <head> element contains metadata about the HTML document. The tags describe metadata such as <title>, <style>, <meta>, <link>, <script> are inserted into the <head> and </head> tags. Metadata is not displayed.
    title: The <title> element defines the document’s title, which is displayed on the Browser tab, in search engine results and when it is added to favorites. It is required in all HTML/XHTML documents.
  • body: All the contents of an HTML document you see in the Browser, such as headings, paragraphs, lists, links, images, tables are contained inside the <body> element.

Insert the Elements into <body>

Now we are going to insert the other elements into the <body> element those are visible. This time I will follow the order listed above. It will be just a simple html page. After completing everything you can download the full code from bottom.

HTML Headings

HTML Headings are defined by six levels from <h1> to <h6> tags. The <h1> is the most important heading and <h6> is the least important heading on a page. So The <h1> should be main heading for an HTML page.

<h1>The main Heading of this page</h1>
Warning: The h1 element should not be used more than once on every HTML page.

Insert Images

Insert an image in your HTML document. You just need to put the image path into the src attribute of the <img> tag .

Example Try this Code
<img src="/wp-content/uploads/2016/06/Simple-HTML-Page-Layout.jpg"
alt="Simple HTML Page Layout" width="320">

Insert Paragraph Element

Insert the <p> element just after <h1> element. You can generate demo text from Lorem Ipsum.

Example Try this Code
<p>In mollis gravida vestibulum. Vestibulum velit dui,
sollicitudin sed elementum non, fringilla quis sapien.
Praesent maximus finibus enim sed volutpat. Pellentesque
mollis nulla id lectus vulputate, vulputate placerat lacus
tristique. Sed malesuada ultricies congue. Phasellus semper
auctor neque quis fermentum.</p>

Create a Hyperlink

I will just insert a hyperlink (simply called “Link“) into the paragraph element. Read ─ HTML Links to learn more about it.

The following “READ MORE” text is a Link/hyperlink.

Example Try this Code
<p>In mollis gravida vestibulum. Vestibulum velit dui,
sollicitudin sed elementum non, fringilla quis sapien.
Praesent maximus finibus enim sed volutpat.
Pellentesque mollis nulla id lectus vulputate,
vulputate placerat lacus tristique.
Sed malesuada ultricies congue. Phasellus semper
auctor neque quis fermentum.
Suspendisse quis mi eget purus viverra
ornare ac nec eros... <a href="#">READ MORE</a></p>

Formatting Text

To make any text bold, italic, mark, subscript, superscript in the document, there have some Text Formatting Elements with special meaning. I inserted some of them here.

Example Try this Code
<h2>HTML Text Formatting Elements</h2>
<p><b>This text is bold</b><br/>
<strong>This text is strong</strong><br/>
<i>This text is italic</i><br/>
<em>This text is emphasized</em><br/>
This is <mark>Marked</mark> text<br/>
This is <small>Small</small> text<br/>
This is <del>Deleted</del> text<br/>
This is <ins>Inserted</ins> text.<br/>
This is <sub>Subscripted</sub> text<br/>
This is <sup>Superscripted</sup> text</p>

Create Ordered List

By default, the ordered lists are marked with numbers (1, 2, 3, …).

Example Try this Code
<h2>HTML Ordered List</h2>
<ol>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee Beans</li>
</ol>

Create Unordered List

By default, the unordered lists are marked with bullets (•).

Example Try this Code
<h2>HTML Unordered List</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee Beans</li>
</ul>

That’s it. Hope you enjoyed this tutorial. If you like then share it with your friends.


Download the Full Code

Download and see the demo by clicking on the buttons below.