Introduction to HTML

Introduction to HTML

  • In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.
  • The word Hypertext was first coined by Ted Nelson in 1960s.
  • HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially, published in 1995 as HTML 2.0.
  • HTML stands for Hyper Text Markup Language.
  • Tim Berners-Lee invents the Web with HTMLas its publishing language.
  • HTML 4.01 was published in late 1999 and was a major version of HTML.
  • HTMLis a markup language that web browsers use to interpret and compose text, images, and other material into visual or audible web pages
  • It is used to create web pages.
  • HTML consists of several markup tags.
  • In HTML, text is marked up with elements delineated by tags that are keywords contained in pairs of angled brackets (<>).
  • HTML tags are most commonly used in pairs like <html> and </html>.
  • Each HTML tag describes different document content.
  • HTML tags are not case sensitive.
  • HTML documents can be created with any text editors
    • For UNIX OS – Emacs, VI editors.
    • For Macintosh – TextEdit
    • For windows – Notepad/Notepad++, Front Page Express.
  • HTML document is a text file (Save in ASCII forms).
  • All HTML files have either the .htm or .html file name extensions.
  • HTML document executed or run by any web browsers (Internet Explorer/Microsoft Edge, Google Chrome, Mozilla Firefox, Opera, Safari etc).
  • HTML is High Level Language (4th GL) and also known as Page Description language.
  • HTML is an example of an SGML (Standard Generalized Markup Language) based language.

 

HTML Versions

HTML 1.0: The first version of HTML. It was the barebones version of HTML language, and it was released in1991.

HTML 2.0: Released in 1995, and it was standard language version for website design.

HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: Published by W3C in early 1997. It supports tables and providing support for extra options for form elements.  Today it is supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999.

It is a very stable version of HTML language.

This version is the current official standard, and it provides stylesheets (CSS) and scripting ability for various multimedia elements.

HTML 5: HTML5 is the newest version of Hyper Text Markup language.

The first draft of this version was announced in January 2008.

There are two major organizations

  • W3C (World Wide Web Consortium), and
  • (ii) WHATWG (Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.

FEATURES OF HTML

  • HTML is a markup language used to create web pages or complete websites
  • Not a conventional programming language
  • HTML documents are simple text file.
  • It is easy to learn and easy to use.
  • Web browsers act as HTML formatters.
  • There is no need of compiling the file as in case of other programming languages.
  • It is a case sensitive language.
  • HTML documents can be viewed on any type of computer platform (any OS) (Platform-independent).
  • Images, video, and audio can be added to a web page.

Explained above HTML structure-

Here,

  • The <!DOCTYPE html>declaration defines that this document is an HTML5 document.
  • The <html>element is the root element of an HTML page.
  • The <head>element contains meta information about the HTML page.
  • The <title>element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab).
  • The <body>element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • The <h1>element defines a large heading.
  • The <p>element defines a paragraph.

Every Html document has 2 sections: header and body.

  • The header section begins with <head> and ends with </head>.
  • It contains the information about the document, which is not visible to the user.
  • It is mandatory to include a title in the header section, which gives a name to the Web page.
  • The title appears on the bar at the top of the browser windows.
  • The search engines use the title for indexing purposes.
  • The other components in header section are-
    • Prologue
    • Link
    • Meta
    • Script
    • Base
    • Style
  • The body part contains the actual page content. There are various tags under the body tag.
  • The comments are enclosed in the special tags <! -comment- ->

 

TOOLS REQUIRED TO CREATE WEBPAGE-

Required three tools to create and view an HTML document. These are:

  1. Text Editor: A text editor is used to create or compose HTML documents. Example: Notepad.
  2. Web Browser: A web browser is used to display and view the HTML documents.          Example: Microsoft Edge/Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera etc.
  1. A Web Server (Optional): A web server is required when you want to store the HTML document.

 

TERMS IN HTML

  1. HTML Tag

    • HTML uses commands called tags.
    • HTML tag determines the way, the browser would display the text.
    • The tags are always enclosed within a pair of angular brackets. E.g. < and >.
    • The text is written in the tags.
    • e.g. <Title> and <head>

There are two types of tags-

    1. Container Tags/Non-Empty Tags- Container tag require an opening (on) tag and a closing (off) tag. ON tags are written within the angular brackets and OFF tags are also written within the angular brackets, but using a slash(/) before the command.  E.g. <Title> Intro to HTML </Title>
    1. Empty Tags – An empty tag are those tag which do not require a closing tag. These tags are also written within angular brackets.  e.g. <HR>, <BR>, <base> and <img>

  1. Elements of HTML:

    • HTML Element is the fundamental part of HTML documents.
    • Example of elements are Heads, Tables, Paragraphs and Lists.
    • In Elements include simple text and other elements.
    • An element represents the complete structure of a tag, i.e. an starting tag, a closing tag and content. e.g. <P> Computer is an Electronic Devices </p>
    • This complete thing is called an HTML element.
    • There are two categories of HTML elements:
      1. Block Level Elements- They include the tags for paragraph <p>, heading levels <hn>, horizontal rule <hr> etc.
      2. Text Level Elements- They are used for marking up of bits of text including inserting images, sounds, etc. some commonly used text level elements are bold <b>, italic <i>, line break <br> etc.
    • Some HTML elements have no content (like the <br> element).
    • These elements are called empty elements.
    • Empty elements do not have an end tag!
    • HTML elements can be nested.

 

  1. ATTRIBUTES

    • Attribute is used to define the characteristics of an HTML element.
    • Provide additional information about HTML elements.
    • Attributes are always specified in the start tag
    • Attributes usually come in name/value pairs like: name=”value”
    • e.g. <P align = “center”> The Computer </p> here align is attribute and “center” is value of tag <p>.

  1. Values

    • Attribute can have values. Most of the attributes have some defined values, which will be accepted only by that attribute.
    • e.g. <Font Size = 5> Where, 5 is the value of SIZE attribute of the <Font> tag.

Creating an HTML Document

We can create an HTML document using any text editor (we use notepad). To open the Notepad, use these steps:

  1. Click on Start-> All apps -> Windows accessories – Notepad

Or

           Type Notepad in the Search box, and then click Notepad in the result.

  1. The Notepad windows will appear. Type the HTML code.

           

               <HTML>

               <HEAD>

                          <TITLE> My First HTML file </TITLE>

               </HEAD>

               <BODY>

                         <H1> This is My first Web page </H1>

                          <P> Hello, Welcome to All B.Lib Science Students </P>

               </BODY>

               </HTML>

 

  1. After writing the code, click File->Save As. The Save As dialog box will open.
  2. Choose the folder in which you want it to save and type the name of the file in File name box, File name must be followed by a suffix .html or .htm (example first.html).
  3. Click the Save button.

Viewing an HTML Document in a Browser

To view an HTML document in a browser, follow the given steps:

  1. Open a web browser. E.g. Internet Explorer/Microsoft Edge/Google Chrome.
  2. Click on File -> Open
  3. The Open dialog box will appear. Click on the Browse button. Select the location and choose your HTML file and click Open button.
  4. Your HTML page will get opened in the browser.

Practical in Computer Lab

Create an HTML document as shown Guidelines:

  1. Open Notepad.
  2. Type the given code

Code:

<! My first HTML Program >

<! DOCTYPE html >

<HTML>

<HEAD>

<TITLE> Example One </TITLE>

</HEAD>

<BODY BGcolor = “Green” , Text = “Red”>

<H1 Align = “center”> A very simple webpage </H1>

<BR>

<P>HTML means Hyper Text Markup Language </p>

</BODY>

</HTML>
  1. Save the code with .htm or .html extension.
  2. Run the code in any web browser.
Tags:

Leave a Reply