Hyper Text Markup Language

Introduction of HTML

HTML (Hypertext Markup Language) is a basic language used to create web pages. It use tags to arrange material and set page layout. HTML components allow you to include text, photos, links, and multimedia. Browsers employ HTML code to display online material and allow users to interact with it.

HyperText

Hypertext is a piece of ordinary text that has a special feature of linking the other documents or webpages. So, when you click on the hypertext on the hypertext, it opens a new web page or document that it is linked with.

Markup Language

It is a language that uses special symbols called ‘Tags ‘ to markup a text document that instructs the browser how to display the text. Markup languages are solely concerned with classifying the parts of a document according to their functions, like indicating which part is the title of the document, which part is the heading or subheading, and so on.

Tools to be used

You require two basic tools to work with HTML document :

  • HTML Editor – for creating and saving the documents.
  • Browser – for viewing the documents.

HTML Editors

Mainly there are two types of HTML editors.

WYSIWYG Editor : 

A WYSIWYG (What You See Is What You Get) type editor is a software application that allows users to visually generate and change material that will appear on the final output. Users can alter the content on the screen without interacting with the underlying programming. This method makes it easier for non-technical people to design web pages, papers, or other visual material without having to know HTML or other computer languages.

Text Editor :

You can also create HTML document using normal text editors like Notepad or Wordpad. Unlike WYSIWYG editors, one should have proper knowledge of HTML commands to develop web pages.

Browser

Web browsers are used to view the HTML documents. Some commonly used browsers are :

Creating an HTML Document

To create HTML documents, you will use Notepad. Let us discuss how to create HTML document using Notepad.

  • Open Notepad by clicking on Start > All Programs > Accessories > Notepad.
  • The Notepad window will appear.
  • Type the HTML code.
  • Click on the File > Save option. The Save As dialog box will appear. Select the target folder to save the File name text box with an extension .html
  • Click on the Save button.

Viewing an HTML Document

To view an HTML document, perform the following steps:

  • Using a text editor, save the HTML page with a.html extension (e.g., index.html).
  • Find the HTML file you saved on your computer.
  • Open the HTML file by double-clicking it. This will launch it in your preferred web browser.
  • The web browser will render the HTML code and show the HTML document’s content.
  • You may now browse and interact with the webpage in the same way that you would with any other website.

Tags, Elements and Attributes

HTML code is made up of elements, tags and attributes.

Viewing an HTML Document

HTML tags are the foundation of a website. They are used to structure and format the material, define components, and teach the web browser on how to display it. HTML tags are enclosed in angle brackets > and come in pairs:

For example, the tag for defining a paragraph is <p>.

You should use <p> before the block of text that you want to designate as a paragraph. This is the opening tag or the on tag. At the end of the text block, you place </p>. This is the closing tag off tag. So to define a paragraph, you will type the following in the text editor :

Syntax : <p> some text </p>

Elements

An HTML element consists of an on tag, the content, and an off tag. The HTML element can be categorised as : 

  • Container Elements
  • Empty Elements

Container Elements : The elements that include both on and off tags are called Container Elements.

E.g., <b> This makes the text bold </b>

Empty Elements : In web development, an empty element is one that has no content between its opening and closing tags, which are frequently represented as element Name />.

E.g., <br> tag (It breaks the line and displays the text from the next line.)

Attribute

An attribute is a feature in HTML, XML, and other markup languages that allows you to offer extra information about components. Attributes, which include a name and a value, are added within the opening tag.

For example, the width attribute of the <hr> tag specifies the width of the horizontal line in pixels or percentage. By default, the width of the horizontal rule is 100%. So, if you write <hr width=50%>, the horizontal line will cover only 50% of the page. you can use more than one attribute inside a tag.

Formatting Elements

In HTML, a formatting element is used to style and organise material. Tags such as b> for bold text, i> for italic text, h1> to h6> for headers, p> for paragraphs, and others are included.

Heading

Heading elements are used in HTML to construct headers or titles for webpage sections. They are represented by the h1> to h6> components, with h1> being the most significant and h6> being the least important. The order of precedence is as follows:

Paragraph

The paragraph tag, represented by the <p> element in HTML, is used to specify a paragraph of text. It is a block-level element, which means it begins on a new line and generates a separate block of information.

For example, <p>This is a Paragraph Tag</p>

Line Break Element

The <br> tag in HTML represents the line break element. It’s a self-closing tag, which means it doesn’t need a closing tag. The line break element is used to impose a line break in the text, essentially shifting the next content to the next line.

For example, <p>This is a Paragraph Tag</p><br>

Horizontal Rule

The horizontal rule (HR) element is represented in HTML by the <hr> tag. It adds a horizontal line or divider to a web page to visually separate information. The HR tag is a self-closing tag, hence no closing tag is required.

For example, <p>This is a Paragraph Tag</p>

Lists

Lists are used in HTML to collect and show similar objects or information. There are two kinds of lists:

1. Ordered List (‘<ol>’): This generates a numbered list with each item numbered in succession.

Output:

  1. Item1
  2. Item2
  3. Item3

2. Unordered List (‘<ul>’): This generates a bulleted list with a bullet point for each item.

Output:

  • Apple
  • Orange
  • Banana

Tables

Tables are used in HTML to organise and display data in a grid format with rows and columns. The table> element is used to generate tables, and their contents are organised using other related elements such as <tr> (table row), <th> (table header), and td> (table data/cell).

Here’s an example of a straightforward HTML table:

 

Output :

Product Price Quantity
Apples $2.00 3
Oranges $1.50 5

The <table> element represents the complete table in this case. Each row of the table is represented by a <tr> element, while <th> elements are used to construct header cells, which are bold and centred by default. The <td> elements in the table indicate data cells.

Form

A form is an important element in HTML that is used to capture user input on a web page. It enables users to submit data for processing to a server. The form is specified by the form> element and can include numerous input fields like as text inputs, radio buttons, checkboxes, and more.

Here’s a simple HTML form example:

Output :







The form in this example has three input fields: a text field for the name, an email field for the email address, and a textarea for the message. The for property of the label> components is used to link them to their associated input fields, making them more accessible.

Inserting Images

There are two types of images : Inline and External images. The inline image is displayed when the web page is opened and is inserted within a line of text, whereas the external 

HTML Basics

HTML Basics

1 / 30

Which attribute is used to specify the alignment of text within a table cell in HTML?
HTML में टेबल सेल के भीतर टेक्स्ट के संरेखण को निर्दिष्ट करने के लिए किस विशेषता का उपयोग किया जाता है?

2 / 30

Which tag is used to define a level-three heading in HTML?
HTML में लेवल-थ्री शीर्षक को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

3 / 30

What is the correct HTML for creating a horizontal rule with a specific color?
किसी विशिष्ट रंग के साथ क्षैतिज नियम बनाने के लिए सही HTML क्या है?

4 / 30

In HTML, what does the <em> tag represent?
HTML में, <em> टैग क्या दर्शाता है?

5 / 30

Which attribute is used to specify the alternative text for an image in HTML5?
HTML5 में किसी छवि के लिए वैकल्पिक टेक्स्ट निर्दिष्ट करने के लिए किस विशेषता का उपयोग किया जाता है?

6 / 30

What does the HTML element <hr> represent?
HTML तत्व <hr> क्या दर्शाता है?

7 / 30

Which of the following tags is used to create a new paragraph in HTML?
HTML में नया पैराग्राफ बनाने के लिए निम्नलिखित में से किस टैग का उपयोग किया जाता है?

8 / 30

Which tag is used to define the body content of an HTML document?
HTML दस्तावेज़ की मुख्य सामग्री को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

9 / 30

Which attribute is used to specify the alignment of content in HTML?
HTML में सामग्री के संरेखण को निर्दिष्ट करने के लिए किस विशेषता का उपयोग किया जाता है?

10 / 30

Which HTML tag is used to define a line break that doesn't require a closing tag?
लाइन ब्रेक को परिभाषित करने के लिए किस HTML टैग का उपयोग किया जाता है जिसके लिए क्लोजिंग टैग की आवश्यकता नहीं होती है?

11 / 30

What is the correct HTML for creating a checkbox input field?
चेकबॉक्स इनपुट फ़ील्ड बनाने के लिए सही HTML क्या है?

12 / 30

What is the correct HTML for creating a hyperlink that opens in a new tab?
नए टैब में खुलने वाले हाइपरलिंक बनाने के लिए सही HTML क्या है?

13 / 30

Which of the following elements is used to create a hyperlink in HTML?
HTML में हाइपरलिंक बनाने के लिए निम्नलिखित में से किस तत्व का उपयोग किया जाता है?

14 / 30

Which tag is used to define a block of navigation links in HTML?
HTML में नेविगेशन लिंक के ब्लॉक को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

15 / 30

In HTML, which tag is used to define the main content area?
HTML में, मुख्य सामग्री क्षेत्र को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

16 / 30

Which tag is used to define a level-two heading in HTML?
HTML में लेवल-दो शीर्षक को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

17 / 30

Which tag is used to create a hyperlink with a specific target location within the same document?
एक ही दस्तावेज़ के भीतर एक विशिष्ट लक्ष्य स्थान के साथ हाइपरलिंक बनाने के लिए किस टैग का उपयोग किया जाता है?

18 / 30

Which HTML tag is used to define the title for a table?
किसी तालिका के शीर्षक को परिभाषित करने के लिए किस HTML टैग का उपयोग किया जाता है?

19 / 30

What does the HTML element <img> represent?
HTML तत्व <img> क्या दर्शाता है?

20 / 30

What does CSS stand for in the context of web development?
वेब विकास के संदर्भ में CSS का क्या अर्थ है?

21 / 30

Which attribute is used to specify the background color of an element in HTML?
HTML में किसी तत्व की पृष्ठभूमि का रंग निर्दिष्ट करने के लिए किस विशेषता का उपयोग किया जाता है?

22 / 30

What does the HTML element <head> contain?
HTML तत्व <head> में क्या शामिल है?

23 / 30

Which tag is used to define a level-four heading in HTML?
HTML में लेवल-चार शीर्षक को परिभाषित करने के लिए किस टैग का उपयोग किया जाता है?

24 / 30

What does HTML stand for?
HTML का मतलब क्या है?

25 / 30

In HTML, what does the <strong> tag represent?
HTML में, <strong> टैग क्या दर्शाता है?

26 / 30

What does the HTML element <meta> represent?
HTML तत्व <मेटा> क्या दर्शाता है?

27 / 30

What is the correct HTML for adding a background color to a webpage?
किसी वेबपेज पर पृष्ठभूमि रंग जोड़ने के लिए सही HTML क्या है?

28 / 30

The <br> tag creates a line break in HTML without any space between lines.
<br> टैग एचटीएमएल में पंक्तियों के बीच कोई जगह छोड़े बिना लाइन ब्रेक बनाता है

29 / 30

Which of the following tags is used to create a table in HTML?
HTML में टेबल बनाने के लिए निम्नलिखित में से किस टैग का उपयोग किया जाता है?

30 / 30

Which attribute is used to specify the font size of text in HTML?
HTML में टेक्स्ट का फ़ॉन्ट आकार निर्दिष्ट करने के लिए किस विशेषता का उपयोग किया जाता है?

Your score is

The average score is 36%

0%