Introduction

Welcome to the HTML introduction and your first web page tutorial. In this short tutorial, I will try to present basic knowledge about HTML and help you to build a simple web page with a text editor like Notepad. These basic HTML codes you will learn here will be used under the hood when you later use a sophisticated product like Dreamweaver, Sublime Text, Visual Studio Code, or others web code editors.

Perquisites:-

For your kind information, in this tutorial I cannot teach you the basics of using a computer, so please make sure that you have met the following requirements:

• Known the use of any text editor like notepad, Wordpad, or else.
• Are able to open up a file using Google Chrome, Mozilla Firefox (or any other browser as you like)
• Known how to copy and paste text from a webpage to a text editor.

If you are lacking the ability of the above knowledge please contact a local geek and ask nicely for a quick lesson.

Tutorial Overview:

In this tutorial, you will be transcribing code into a notepad and then viewing it with a web browser. The code that I used here is HTML (HyperText Markup Language) and notepad is a commonly used text editor on Windows PCs.

HTML! – may seem confusing at first?

But don’t worry. We will help you understand how it works in this step-by-step tutorial of how to make your first web page.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language that is most widely used to develop web pages. HTML is written in the form of HTML elements consisting of several tags. A web browser reads the HTML file and interprets the content of the file to display the web page.

• HTML was created by Tim Berners-Lee
• November 24, 1995 HTML 2.0 was published.
• January 1997 HTML 3.2 was published as a W3C Recommendation.
• December 1997 HTML 4.0 was published as a W3C Recommendation.
• December 1999 HTML 4.01 was published as a W3C Recommendation.
• January 2008 HTML5 was published by the W3C.

The aims of HTML5 have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.).

Did You Know?

HTML tags will display enhanced text, photos, artwork, and external video clips. Tags are also used as hyperlinks to other web pages, multimedia clips, PDF files, PowerPoint slides, and other document files.

• HTML code is written by the HTML elements consisting of tags enclosed in angle brackets (like).
• Each HTML tag has is started by the starting tag (like,) and ends by the closing tag (like,) except for some tags which have only one tag (like,
  ).
• Between the starting tag and closing tag some contents exist.

Basic Structure of HTML

Your first HTML Code:-

Step-1: Open Editor

To write HTML code, you can open any text editor or any HTML code editor. For Windows environment Notepad and WordPad is a default text editor. If don’t want to use any text editor, you can use any HTML editor to write the code.

The advantage of the use of an HTML editor is that it is very flexible to write the code and each syntax is highlighted by a different color. By using a text editor, you can’t get this type of advantage.

Open Notepad or WordPad.

Change Extension of this text file .txt to .htm or .html

Step-2: Write Basic HTML code

File> Save and File>Exit to close the notepad.

Step-3: Run and view the output

Now time to run. Click the right button on the first.html and Open with it by choosing a browser. Following, the output in Mozilla Firefox…

Explanation of the HTML Code:

Line-1: The DOCTYPE tag defines the document type and HTML is inside it, as this is the HTML document.

Line-2 & 12: All HTML document enclose between startingtag and closingtag.

HTML document divided into two parts: one is HEAD and other is BODY

Line-3 & 8: Between the startingtag and closingtag contains all of the head elements, such as the title for the document, scripts, styles, meta information, and more.

Line-4: This meta tag uses for UTF-8 character set(it covers almost all of the characters and symbols in the world) attribute specifies the character encoding for the HTML document. 

Line-5:  The meta tags  to tell Microsoft Internet Explorer to use the latest rendering engine (edge)

Line-6: This gives the browser instructions on how to control the page's dimensions and scaling.

Line-7: A favicon is a little icon that browsers display next to a page’s title on a browser tab, or in the address bar next to its URL. It also is used when you bookmark a page

Line-8: Thetag defines the title of the document and text between the startingtag and closingtag is show on the browser toolbar.

Line-10 & 12: Between the startingtag and closingtag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Line-8:tag is paragraph tag. Text Between the starting tag and closing tag is displayed in the web browser page.

Well done! You have created a web page. Now let’s be sure that you remember what you learned in this lesson and try to be practiced by yourself.

So happy coding…. :)