How to create a web page with HTML

In this tutorial, we’ll build a simple web page using HTML. This is aimed at people who are starting with HTML but have a basic understanding of the syntax. If you’re new to HTML you can still follow and learn a few things.

Code Editors

Visual Studio Code.

CoffeeCup HTML Editor.

TextMate.

Bluefish.

Vim.

You can download the editors by clicking on the them.

We can use any of these code editors to create webpages using HTML. In this blog, I will show the most commonly used code editor.

Visual Studio Code:-

First of all download the Visual Studio Code (vs code) by clicking here.

Why Visual Code?

Because it is free of cost and easy to use. Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for J**avaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET). Begin your journey with VS Code.

1. Create a new HTML file

First, we’ll need to do is create a new folder on our system. Then we have to create a new document in that folder. There are a few ways we can create a document but I’ll be using the text editor VS Code to do this.

Here are the steps for creating a new file in VS Code.

Open VS Code
Select “New File” in the File menu or press Ctrl + N on Windows or Cmd + N on macOS.
Select “Save” in the File menu or press Ctrl + S on Windows or Cmd + S on macOS. You will then be prompted to enter the name of the file.

HTML documents should have .html file extensions.
Generally, the homepage of a site is named “index.html”. “index” indicates that this is the default file that the browser will load.
You should only use alphanumerics, dashes, underscores, or tildes in the page name.
Don’t use spaces in the file name
Use lowercase letters when naming HTML files. The name of an HTML resource is typically used in a URL. URLs are generally case-sensitive.

2. Create a simple HTML document

Now we have an HTML file. now we can start writing some HTML to create a web page.

Before writing HTML code let's discuss the boilerplate of HTML.

i) Boiler Plate in HTML

To create a boilerplate of HTML in VS Code we can use Emmet's to create easily. To create that we can use two methods first one is by writing html : 5 after typing that just press enter to create the boilerplate. Another method is through '!'.

After typing that we have to click on that or press enter to create boilerplate.

Now, let's discuss the boilerplate.

<!DOCTYPE html> :-

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is "information" to the browser about what document type to expect.

The HTML document type declaration, also known as DOCTYPE, is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.

In HTML 4.01, the DOCTYPE the declaration refers to a document type definition (DTD). A DTD defines the structure and the legal elements of an XML document. Because HTML 4.01 was based on the Standard Generalised Markup Language (SGML), referring to a DTD in the DOCTYPE the declaration was necessary.

Older HTML Documents

In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The <!DOCTYPE> the declaration is NOT case-sensitive.

Examples

<!DOCTYPE html>

<!DocType html>

<!Doctype html>

<!doctype html>

<html>

The <html> the tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag). You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

<head>

The <head> element is a container for metadata and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically defines the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>

<body> -
- The body element represents the contents of the document. There can only be one body element in a document.
- The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

<title>:-

The title element represents the name of the document and it is shown in the browser's title bar or in the page's tab. And it is used inside the head tag.

You can NOT have more than one <title> element in an HTML document.

<meta>

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element and are typically used to specify a character set, page description, keywords, author of the document, and viewport settings.

Metadata is used by browsers (how to display content or reload pages), search engines (keywords), and other web services. Metadata will not be displayed on the page but is machine parsable.

Preview in Browser By Live Server Extension

VS code provides some extensions, which are very helpful for us. let's see one of the famous extension called Live Server.

HTML Tags

To start learning HTML you need to start with HTML tags, there are various tags that we must consider and know about while starting to code in HTML.

HTML Tags: HTML tags are the keywords that are used to produce web pages in various formats. Opening tags and closing tags are found in the majority of tags. The concluding tags contain a forward slash (/), while the language of the beginning tags is the same. Certain tags don’t need to be closed.

Already, we have seen some basic and important tags on the boilerplate. Now we will discuss some more tags in HTML.

Heading tags

There are 6 heading tags available. Those are h1, h2, h3, h4, h5 & h6 elements -

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Paragraph tag

<p> tag is mostly used one. It defines the paragraph.

Output is

Live Server Demo VSCode

Srinath Sree's blog