Introduction to HTML and your first web page



Welcome to 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. This basic HTML codes you will learn in here will be used under the hood when you later use a sophisticated product like Dreamweaver, or others web code editor.


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

  • Known the use of any text editor like notepad, wordpad or else.
  • Are able to open up a file using Internet Explorer (or any other browser as you like)
  • Known how to copy and paste text from a webpage to 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 notepad and then viewing it with a web browser. The code that I used in here is HTML (Hyper Text Markup Language) and notepad is a commonly used text editor on Window 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 most widely used to develop web pages. HTML is written in the form of HTML elements consisting of several tags. A web browser read the HTML file and interpret 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 the 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 <html>).
  • Each HTML tag has is started by the starting tag (like, <html>) and end by the closing tag (like, </html>) except some tags which has only one tag (like, <br/>) .
  • Between the starting tag (<h1>) and closing tag (</h1>) some contents are exist.
  • HTML Opening and Closing Tag

    Basic Structure of HTML

    HTML Tag scope for an webpage

    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 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 HTML editor is that it is very flexible to write the code and each syntax is highlighted by different color. By the using text editor you can’t get this type of advantages.

    Open Notepad or WordPad.

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

    Convert a file extension .txt to .html

    N.B: Here icon for the .html file is doesn’t matter, main things is file extension (i.e, .html)

    Step-2: Write Basic HTML code

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

    Basic HTML code that is written in a text file

    Step-3: Run and view the output

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

    Run basic HTML code in a web browser

    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 & 10: All HTML document enclose between starting <html> tag and closing </html> tag.

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

    Line-3 & 6: Between the starting <head> tag and closing </head> tag contains all of the head elements, such as title for the document, scripts, styles, meta information and more.

    Line-4: A favicon is the 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-5: The <title> tag defines the title of the document and text between the starting <title> tag and closing </title> tag is show on the browser toolbar.

    Line-7 & 9: Between the starting <body> tag and closing </body> tag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

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

    Inspect HTML element

    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 practices by yourself.

    So happy coding…. 🙂