HTML Part 1: Introduction to HTML and Basic Structure of an HTML Program

Get unlimited access to the best preparation resource for competitive exams : get questions, notes, tests, video lectures and more- for all subjects of your exam.

Discussion on HTML

Topics:

  • Introduction to HTML
  • Basic Structure of an HTML Program
  • To Save an HTML Program
  • To Open an HTML Program
  • Tags in HTML
  • Attributes
  • Formatting Elements
  • Heading Levels

Introduction to HTML

  • HTML stands for Hypertext Mark-up Language
  • It was introduced by Sir Tim Berners Lee in 1993.
  • It is a mark-up language that is used for web page designing.
  • It is an easy to learn/write language.
  • It is not a case sensitive language.
  • It does not require any specific software to write HTML code. HTML code can be written in NOTEPAD application which is an in-built application software.

Basic Structure of an HTML Program

Explanation of Tags

  • < ! DOCTYPE HTML > It informs the web browser about the version of the HTML.
  • < HTML > tag indicates that the web page is written in HTML.
  • < TITLE > tag contains the title of the web page
  • < BODY > tag contains the content of a web page that displays in web browser.
Explanation of Tags

Saving an HTML Document

To save an HTML document:

  • Write the code in Notepad application and press CTRL + S key combination or File ⇾ Save. A Save As dialog box will open, Set the location where you want to save the document.
  • Write the suitable name with ‘. html’ extension in ‘File name’ box. Then Click on ‘Save’ button.
Saving an HTML Document

Open an HTML Document

  • You can open an HTML document in the following way:
  • Double click on your saved html document, it will automatically open with your default web browser.
Open an HTML Document
  • If you open your file manually on a specific web browser:
  • Double click on web browser icon ⇾ Click on Open or Press CTRL + O
  • An open dialog box will appear, choose your file to open on browser. ⇾ Click on Open button. Your HTML document will be opened in Web browser as shown in the following figure.
Open an HTML Document

Tags in HTML

HTML tags are pre-defined keywords within a web page that define how your web browser display the content. These keywords are enclosed with angle brackets ‘<> .’

There are two types of tags available in HTML:

  • Container Tags
  • Empty Tags

Container Tags- It is also called Paired tag. It has a start tag and an end tag. For Example:< html > … < /html >

Empty Tags- It is also called singular tags. It does not have an end tag. For Example: ‘< br >’ break tag is a singular tag.

Attributes

  • An attribute provides additional information about an HTML tag.
  • For Example, < body bgcolor = “blue” colour = “white” > … < /body >
  • Here ‘bgcolor’ and ‘colour’ are the attributes of < body > tag that is used to define background colour and text colour of a web page.
HTML: Attributes

Formatting Elements

In HTML there are a few formatting elements which make a web page more attractive.

These formatting elements are as follow:

  • < b > bold or < strong >: Both tags make the text darker than the normal text
  • < i > italic: Italic tag makes the text slanted
  • < u > underline: It puts a line under the text
  • < mark > Marker: It highlights the text with yellow colour
  • < del > delete: It displays the text as deleted
  • < sub > subscript: It displays the text slightly below the normal text
  • < sup > superscript: It displays the text slightly above the normal test

Output

Coding

Basic of HTML: Coding

Output

Basic of HTML: Output

Heading Levels

Heading Levels are used to define headings. There are six types of heading levels in HTML. Their size is pre-defined. You can use these levels according to your need.

How to Code

< h1 > Text < /h1 >

< h2 > Text < /h2 >

< h6 > Text < /h6 >

Output

Coding

Basic of HTML: Coding

Output

Basic of HTML: Output

MCQ

Q-1 Which formatting element is used to highlight the text?

A. < del >

B. < mark >

C. < b >

D. < strong >

Ans: B

Q-2 Which application software can be used to create an html document.

A. Paint

B. Word

C. Notepad

D. PowerPoint

Ans: C

Developed by: