What is html & how to create and view an html file?9 min read

Introduction

  • HTML stands for HyperText Markup Language. HTML was developed specifically for use on the World Wide Web.
  • Hypertext has the ability to be connected to other texts and it can be navigated by a system of links, which can be non-sequential in order.
  • Vannevar Bush is attributed with coining the term “memex” to describe the first hypermedia system.
  • Ted Nelson coined the term “hypertext” to characterize his proposed “Xanadu” system in 1965. In 1980, IBM sought to create a documentation system that allowed us to designate titles, headings, paragraphs, and font type selections.
  • They release a set of markup systems known as the General Markup Language (GML). This notion was taken up by the International Standardizing Organization (ISO) in 1986, and it was standardized as a Standard Generalized Markup Language (SGML).
  • In 1989 Tim Berners Lee and his team in the European laboratory for practical physic (CERR) designed the present form of the document language is called HTML.

Features of HTML

  1. HTML uses a set of tags that are used to create documents and then it can be published on the World Wide Web.
  2. HTML is platform Independent. It is supported by all types of Operating systems and browsers.
  3. HTML lets users jump from topic to topic or page by page rather than finding and reading information linearly by means of a hyperlink.
  4. Documents prepared in HTML include reference graphics and formatting tag
  5. It helps in creating or building a Table either with Symmetrical or Asymmetrical sharing
  6. HTML supports the concept of Frames, Images, and Animating effects.
  7. It contains powerful Formatting facilities for Text, Images,
  8. It is used to improve the appearance of web pages.
  9. It supports various types of image formats like IPG and animated Gif images.
  10. HTML supports forms that make it possible to create a document that collaborates and processes user input.

Advantages

  1. For creating an HTML document, only a text editor is needed. No special software is required. For example in Windows, the Notepad editor is sufficient for creating HTML documents.
  2. HTML contains powerful formatting facilities by means of various formatting tags.
  3. Linking to various pages and thus one can navigate all the web pages.
  4. It is used to learn and master a high-level programming language.

Disadvantages

  1. HTML does not offer programming language features and capabilities.
  2. Any simple calculation cannot be done in HTML.
  3. HTML lacks structure.
  4. It cannot be used to display event dates and times.
  5. The interactive web pages can not be built in HTML.
  6. The web pages developed in HTML cannot behave like an application.
  7. The web pages developed in HTML do not have their own interface.
  8. HTML lacks syntactic checking i.e. you can not validate HTML code and required special types of software like scripting. languages (VBScript, JavaScript are required for handling different events and validations.

Steps to Create and View an HTML Document

Step 1: Open a Text Editor, for example, Notepad.
Step 2: Write the below HTML code.

Create and view an html file
<HTML>
    <HEAD>
        <TITLE>
            DEMO OF HTML
        </TITLE>
    </HEAD>
  
    <BODY>
        <B> HELLO WORLD </B>
    </BODY>
  
</HTML>

Step 3: Save the code in the file extension.HTML

Create and view an html file

Step 4: Double-click on the saved file.

Step 5: Now the web page will be displayed on the screen.

create and view an html file

Basic Structure of an HTML Program

An HTML document or web page is comprised of two basic elements:

  1. Contents: It may comprise text and images to be displayed on a web page
  2. Tags/Elements: It is an instruction that is followed by the Web Browser to display the contents in a particular manner.

Every HTML document has the same general structure and it consists of a few tags that define the page as a whole. The primary parts are denoted by <HTML>, <HEAD>, <TITLE>, <BODY> tags. Each of these tags is known as a document structure tag.

This <HEAD>, <TITLE>, and <BODY> tags are enclosed in <HTML> </HTML> tag.


Classification of HTML Tags

Tags can be classified as –

  1. Document Section Tags (<HEAD> </HEAD>)
  2. Body Section Tags (<BODY> </BODY>)
  1. The Head <HEAD>: It is like an introduction to the page. It generally consists of the title of the page. To define the head add the <HEAD> tag at the beginning and the </HEAD> tag at the end. To define title we can enclose the document in between <TITLE> and </TITLE> tag.
  2. The Body <BODY>: In this user enters the text, images, sound, and other animated tags that will appear on the web page. To define the body, place the <BODY> tag at the beginning and </BODY> at the end, after the head.

Tags and Tag Attribute

  • An HTML tag is a code that describes how a web page is formatted. A tag is a single unit of markup. It is a set of symbols defined in HTML to have special meaning.
  • Tags are commands or instructions that are written directly into a text editor. Tags start with an open-angle bracket (<) followed by a keyword and end with a close-angle bracket (>).
  • Tags are not displayed in the web browser but their effects are displayed on the web page.

Thus, the web browser interprets Tags defined within o bracket (<>) as special text rather than considering it as simple text.
Syntax: <TAG>
Example: <B> Bold </B>


Types of Tags

The two types of tags present are:

1) Pair Tags

Pair tags consist of the following.

  1. Start tags
  2. End tags

Start tags are used to begin an effect and end tags are used to end that effect. The name of an end tag is the same as the start tag but the name of the end tag is preceded by a forward slash (/). Tags that include pair tags are called container tags, as they hold or contain the text and other HTML elements between the two tags.
Syntax: <TAG> CONTENTS <TAG>
Example: <B> Hello World </B>
<b> is bold tag. The text written between start <B> and end tag </B> will be displayed in bold.

2) Singular Tags

This kind of tag consists of only start tags and does not need to end with end tags and is known as a standalone tag. These tags do not contain any content and are hence known as Empty Tags.

Example: <BR> which helps to break the current line.


Tag Attribute

Attributes are the properties/elements/parameters of the tag. It is placed within tags. It modifies the effect of a tag. A general Syntax is Tag Attributes “Value” Attribute2″Value” ….AttributeN”value”>

An attribute value must be enclosed either within single or double quotes but if the value itself contains double quotes then one must enclose the entire value within single quotes. Attributes within the tag are separated by a single space.

Some important features of tags are:

  1. Some tags have no attributes. For example: <BR>
  2. One may specify multiple attributes with a single tag and they may appear in any order.

Example:
BODY BGCOLOR=”GREEN” BACKGROUND=”COMPUTER.GIF” TEXT=”RED”>


HTML Layout Tag

It is also known as Structure Tags. A document page has the following basic elements:

<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>

HTML Tag

This tag indicates to the browser that the file is an HTML file. A basic HTML document consist of opening <HTML> and closing <HTML> tags. All the content of the web page is contained within these two tags.
Example:

<HTML>
    HTML TAGS and Contents
</HTML>

HEAD Tag

A HTML document has a pair of opening <HEAD> and closing </HEAD> tag. Any information typed here will appear in the viewing area of the web browser. The <HEAD> tag contains the optional <TITLE> tag
Example:

<HTML>
    <HEAD>
        <TITLE>
            Demo of HTML
        </TITLE>
    </HEAD>
</HTML>

TITLE Tag

The content of this tag is displayed in the Title bar of any web browser window. It should be unique and descriptive because it is used by search engines as a search criterion for any information. In the absence of this tag, the web browser displays the entire path of the HTML file.
Example:

<HTML>
    <HEAD>
        <TITLE> Demo of HTML </TITLE>
    </HEAD>
</HTML>

BODY Tag

The body tag is basically a block-level tag that specifies what the web browser should display in the web browser window. Styles and formatting are applied to the content using tags, such as heading tags, paragraph tags, and font tags. Most of the tags are a part of the <BODY> tag. Some examples of tags that are part of the <BODY> tag are –

<H2>Heading Levels
<Br>Break Line
<Hr>Horizontal Rule
<FORM>Insert Forms
<P>Paragraph

Share:

Leave a Reply