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

Dr. Manishika Jain- Join online Paper 1 intensive course. Includes tests and expected questions.

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

Explanation of Tags

Loading image

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

Saving an HTML Document

Loading image

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

Open an HTML Document

Loading image
  • 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

Open an HTML Document

Loading image

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

HTML: Attributes

Loading image

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

Basic of HTML: Coding

Loading image

Output

Basic of HTML: Output

Basic of HTML: Output

Loading image

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

Basic of HTML: Coding

Loading image

Output

Basic of HTML: Output

Basic of HTML: Output

Loading image

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