HTML stands for Hypertext Markup Language. It is the standard language used to create web pages. It is the most widely used language to design web pages. HTML is the basic building block of the web. It is used for defining the structure of the content of a web page.
HTML is essential for web development, as it forms the backbone of web content and is often used in conjunction with CSS (Cascading Style Sheets) and JavaScript to create fully functional and styled web applications.
Key Features of HTML
Elements and Tags: HTML is composed of elements, which are defined by tags. For example, <p> is a tag that defines a paragraph, and <h1> defines a top-level heading.
Attributes: HTML elements can have attributes that provide additional information about the element. For example, the <a> tag (anchor tag) can have an href attribute that specifies the URL of the link.
Structure: HTML documents have a hierarchical structure, typically starting with a <!DOCTYPE html> declaration, followed by the <html>, <head>, and <body> tags. The <head> contains meta-information about the document, while the <body> contains the content that is displayed to users.
Hyperlinks: HTML allows the creation of hyperlinks, enabling users to navigate from one page to another.
Multimedia: HTML supports the embedding of images, audio, and video, allowing for rich multimedia content on web pages.
Advantages of HTML (Pros of HTML)
HTML offers several advantages that contribute to its widespread use in web development. Here are the main advantages of HTML:
Easy to Learn and use: HTML is a beginner-friendly language. Its syntax is very simple with plain English-like tags. Beginners can quickly understand and build web pages.
Platform Independence: HTML code is platform-independent, meaning it can be created and viewed on various operating systems and devices without compatibility issues. HTML files can run on any operating system (Windows, Mac, Linux, Android, iOS).
Compatibility: HTML is highly compatible with other technologies and languages commonly used in web development, such as CSS (Cascading Style Sheets) for styling and JavaScript for interactivity. This compatibility enables developers to create rich, dynamic web experiences.
Hyperlinking: HTML enables the creation of hyperlinks, allowing users to navigate between different web pages and resources seamlessly. This interconnectivity is a fundamental aspect of the web.
Multimedia Support: HTML supports the embedding of images, audio, and video, enabling rich multimedia experiences on web pages.
Disadvantages of HTML (Cons of HTML)
While HTML has many advantages, it also has some disadvantages and limitations. Here are the main disadvantages of HTML:
Static Nature: HTML alone creates static web pages. To make pages dynamic and interactive, we need CSS, JavaScript etc. languages.
Limited Functionality: HTML alone cannot perform complex tasks or calculations. For interactive features, developers must rely on JavaScript or other programming languages, which can complicate development.
Limited Styling Options: HTML by itself has very basic styling (fonts, colors, alignment). For proper design, we must use CSS.
Browser Compatibility Issues: While HTML is generally supported across browsers, there can still be inconsistencies in how different browsers render HTML elements, especially with older versions or less common browsers. Some tags or features may not work the same way in all browsers.
Dependency on Other Technologies: To create fully functional web applications, HTML must be used in conjunction with other technologies like CSS and JavaScript. This can increase the learning curve for new developers.
Tags in HTML:
HTML tags are the fundamental components used to structure and format content on web pages. They provide instructions to web browsers on how to display various elements, such as text, images, links, and other media.
Tags are commands enclosed in angle brackets (e.g., <p> for a paragraph) to mark-up content. HTML (HyperText Markup Language) uses tags to define elements within a web page.
Notes: HTML tags are not case sensitive.
Types of HTML Tags:
There are two kinds of tags:
- Paired (Container) Tags
- Unpaired (Empty) Tags
Paired (Container) Tags:
Most HTML tags come in pairs: an opening tag and a closing tag like <HTML> and </HTML>. Such types of tags are called Paired or Container Tags. The closing tag is identical to the opening tag but includes a forward slash before the tag name (e.g., <p> and </p>).
Format of Paired Tag:
<tagname> Content </tagname>
Example:
<h1>Hello</h1>
<p>Paragraph text</p>
Unpaired (Empty) Tags:
An unpaired or empty tag refers to a tag, which does not have an ending (closing) tag.
Format of Unpaired Tag:
<tagname>
Example:
<br>
<img src=”D:\Pictures\flower.jpg”>
<hr>
Elements and Attributes:
In HTML, elements and attributes are fundamental concepts that define the structure and behavior of web pages. Understanding HTML elements and attributes is crucial for creating well-structured and functional web pages. Elements define the content and layout, while attributes provide additional information and control over the behavior and appearance of those elements. Here’s a detailed explanation of both:
HTML Elements
An HTML element is a component of a web page defined by a start tag, content, and an end tag such as headings, paragraphs, and images. An element is everything between the opening tag and closing tag (including the content).
Structure of an HTML Element
An HTML element typically consists of:
Start Tag: The opening tag that defines the element, e.g., <p>.
Content: The text or other elements contained within the element, e.g., This is a paragraph.
End Tag: The closing tag that indicates the end of the element, e.g., </p>.
Example of Elements:
Paragraph Element
<p>This is a paragraph. </p>
Heading Element
<h1>Hello World</h1>
Image Element
<img src=”D:\Pictures\cat.jpg”>
HTML Attributes
Attributes are properties that provide additional information about elements. An attribute is used to define the characteristics of an element and is always placed inside the element’s opening tag. Attribute allows us to specify how web browsers should treat a particular tag.
Attributes are important part of HTML elements. They usually come in name/value pairs, separated by an equals sign. Attributes can modify the behavior or appearance of an element.
Example of Attributes:
<img src=”D:\Pictures\flower.jpg”>
Here, src is attribute, src specifies the source URL for an image in an <img> tag.
Structure of HTML Document
Every HTML document or page has a basic structure. An HTML document starts and end with <HTML> and </HTML> tags. These tags tell the browser that the entire document is composed in HTML. Inside these two tags, the document is split into two sections:
- Header Section
- Body Section
Header Section: This section defines the <HEAD>…</HEAD> elements, which contain information about the document such as title of the document, author of the document etc.
Body Section: This section defines the <BODY>…</BODY> elements, which contain the content of the document that we see on the screen.
Example:
<HTML>
<HEAD>
<TITLE>MY FIRST WEBPAGE</TITLE>
</HEAD>
<BODY>
<H1>Hi….WELCOME TO HTML</H1>
</BODY>
</HTML>
Creating HTML Document:
Creating an HTML document is a very easy process. To create an HTML document, generally we need the following software tools:
- Text Editor
- Web Browser
Text Editor: To write or edit the HTML code, we need a simple text-editor,like Notepad. We can also use some professional HTML editors like Notepad++, Adobe Dreamweaver, Microsoft FrontPage etc.
Web Browser: The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented or displayed to the user.
Here are the simple steps to create a basic HTML document:
Step 1: Open Notepad / Notepad++
Step 2: Write HTML Code
Step 3: Save HTML Code. Save the HTML file with either the .html or the .htm file extension under an appropriate folder.
Step 4: Run HTML File in Web Browser
HTML Document Tags:
All HTML document should include at least these tags:
- <HTML>
- <HEAD>
- <TITLE>
- <BODY>
These tags define what type of document it is, and the major sections of the document.
<HTML>
The <HTML> tag defines the top-most element, identifying it as an HTML document. It is a container tag that has a start and an end tag and all the other tags nested within it. The <HTML> tag is the main container or containing element for the whole HTML document. It represents the root of an HTML document. It simply tells the browser that this is an HTML document. Each HTML document should have one <HTML> tag and each document should end with a closing </HTML> tag.
Syntax:
<HTML>
…………
</HTML>
<HEAD>
The <HEAD> tag contains general information about the HTML file. The <HEAD> tag is nested within the HTML tag. It simply defines the header section of the HTML document. Usually, the only tag contained within the head tag is the title tag. Other tags also can be contained within the <HEAD> tag but they are used less often.
Syntax:
<HTML>
<HEAD>
…………
</HEAD>
</HTML>
<TITLE>
The <TITLE> tag is used to set a title for every HTML document. It represents the document’s title or name. The <TITLE> tag defines a title in the browser’s title bar. It is always good to use titles that identify the document. <TITLE> tag is nested within the <HEAD> tag. It identifies our page to the rest of the world. The tag output is displayed on web browsers title bar but does not appear as part of the page.
Syntax:
<HTML>
<HEAD>
<TITLE>
Title of the Web Page
</TITLE>
</HEAD>
</HTML>
<BODY>
The <BODY> tag appears after the <HEAD> tag. It defines the body section of HTML document i.e., it simply defines the document’s body. The <BODY> tag contains the web pages actual content such as text, hyperlinks, images, tables, list etc. The <BODY> tag can have the following attributes.
Attributes of <BODY> Tag:
| Attributes | Value | Description |
| bgcolor | color_name | Sets the background color of a document |
| background | filename or URL | Sets the background image of a document |
| text | color_name | Sets the color of the text in a document |
| link | color_name | Sets the color for unvisited links in a document |
| alink | color_name | Sets the color for active links in a document |
| vlink | color_name | Sets the color for visited links in a document |
Syntax:
<HTML>
<HEAD>
<TITLE>
My First Web Page
</TITLE>
</HEAD>
<BODY>
………………
</BODY>
</HTML>
Example 1: Using Background Colour
<HTML>
<HEAD>
<TITLE>Attributes of the Body Tag</TITLE>
</HEAD>
<BODY BGCOLOR= “AQUA”>
</BODY>
</HTML>
Example 2: Using a Background Image
<HTML>
<HEAD>
<TITLE>
Attributes of the Body Tag
</TITLE>
</HEAD>
<BODY BACKGROUND = “D:\Pictures\flower.jpg”>
</BODY>
</HTML>
HTML Headings:
Headings are important in HTML documents. Almost every document starts with a heading. Headings break a document into sections. We can use different sizes for headings. HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
We can use headings to organize our web into hierarchical levels. The top-level heading (H1) actually is the title of our page, i.e., it appears in a browser window at the top of the web page. We can also use a second level heading (denoted by the H2 tag) to define a major division in the page, and a third level heading (using the H3 tag) to define a sublevel division within a major division. The font size decreases as the heading level increases. (Default sizes for first-through sixth-level headings are, respectively, 24, 18, 14, 12, 10, and 8 point font).
Align Attribute in Heading Element:
The align attribute is used to specify the alignment of the heading element.
Syntax
<h1 align=”left/right/center/justify”>
Example:
<HTML>
<HEAD>
<TITLE>Headings in HTML</TITLE>
</HEAD>
<BODY BGCOLOR=”pink”>
<H1 align= “center”> This is a top-level Heading</H1>
<H2 align=”right”> This is a top-level Heading</H2>
<H3> This is a top-level Heading</H3>
<H4> This is a top-level Heading</H4>
<H5> This is a top-level Heading</H5>
<H6> This is a top-level Heading</H6>
</BODY>
</HTML>
HTML Paragraphs:
In HTML, paragraphs are defined with the <p> tag. The <p> tag is a container element, but with an implied ending. We do not have to include the </p> end tag. Any following start tag that defines a new block element implies the end of the tag. So, when we use the <p> tag, just insert the <p> start tag at the beginning of a paragraph but leave of the </p> at the end.
Align Attribute of Paragraph Element:
The align attribute was used to specify how paragraph text should be aligned horizontally within the <p> element.
| Attribute Values | Description |
| left | It sets the text left-align. |
| right | It sets the text right-align. |
| center | It sets the text center-align. |
| justify | It is used to set text to both left and right margin of the page. |
Example:
<HTML>
<HEAD>
<TITLE> Paragraphs in HTML</TITLE>
</HEAD>
<BODY>
<H1> Introduction to HTML </H1>
<P align= “center”> HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.Markup language describes how HTML works.
<P align= “right”> HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other mediaHypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.Markup languages are the languages that build the web. With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents.
<P align= “justify”>HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.Markup language describes how HTML works. Markup languages are the languages that build the web. With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents.
</BODY>
</HTML>
Output:
HTML Comments:
Comments can be inserted in the HTML code to make it more readable and understandable. We can use comments to explain code, which can help us when we edit the source code at a later stage. This is especially useful if we have a lot of code. Comments are ignored by the browser and are not displayed.
HTML comments line are indicated by the special beginning tag <!- – and ending tag – ->. We can comment multiple lines by the special beginning tag <!- – and ending tag – ->.
Example:
<HTML>
<HEAD>
<TITLE>HTML Comments </TITLE>
</HEAD>
<BODY>
<!– Comments are ignored by the browser –>
<!– This Single Line Comment will not be displayed.–>
<!– This Multi Line Comment
will not be displayed
–>
<P> This is a regular paragraph
</BODY>
</HTML>
Text Formatting (Formatting Texts):
When it comes to formatting a web page using HTML code, we can think of it in the same way we would look at formatting a document formatted by a word processor.
HTML uses tags like <B> and <I> for formatting output, like bold or italic text. These HTML tags are called Formatting tags.HTML has two ways to include italic or bold text on web page. The first way involves using literal tags: the B (Bold) tags and I (Italic). The second way is to use logical tags: the EM (emphasis) and Strong tags. Most browsers displays the I (italic) and EM (Emphasis) tags identically, just as they display the B (Bold) and strong tags identically.
The following table depicts a list of Formatting tags commonly used in HTML:
| Tag | Description |
| <B> | To Bold Text |
| <I> | To Italic Text |
| <U> | To Underline Text |
| <STRONG> | To define important text, same visual effect as the as the <B> tag. |
| <EM> | Emphasizes the text, provides same visual effect as the <I> tag. |
| <BIG> | To define Bigger Text |
| <SMALL> | To define Smaller Text |
| <SUB> | Formats text as subscript. |
| <SUP> | Formats text as superscript. |
| <MARK> | To mark or highlight the important text |
| <STRIKE> | To strike through text |
| <DEL> | To identify text that has been deleted from a document but retained to show the history of modifications made to the document. |
| <INS> | used to identify text that has been inserted into a document. It is often paired with a <del> element which identifies deleted text replaced by the text contained in the <ins> element. |
Example:
<HTML>
<HEAD>
<TITLE>Formatting Texts</TITLE>
</HEAD>
<BODY>
<B>Bold Text</B><BR>
<I>Italic Text</I><BR>
<U>Underline Text</U><BR>
<STRONG> Strong Text usually rendered bold</STRONG><BR>
<EM>Emphasized text, usually rendered italic</EM><BR>
<BIG> Puts text in bigger font</BIG><BR>
<SMALL> Puts text in smaller font</SMALL><BR>
H<SUB>2</SUB>O<BR>
X<SUP>2</SUP>Y<BR>
<STRIKE>Strike through text</STRIKE><BR>
<P> The original price was <DEL>$500</DEL> and now it’s $300. </P>
<p> My favourite colour is <DEL>PINK</DEL> <INS>RED</INS>
</BODY>
</HTML>
Output:
Working with Texts:
Text alignment:
We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.
Example:
To center align a level-two heading
<H2 ALIGN= “CENTER”> Heading </H2>
To right align a level-two heading
<H2 ALIGN= “RIGHT”> Heading </H2>
Centering TEXT using the <CENTER> tag:
The <CENTER> tag is used to center-align text and other document elements.
Example:
<HTML>
<HEAD>
<TITLE>My First Webpage</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 >Level-One Heading</H1>
</CENTER>
<P> This paragraph and the level-one heading above it is centered using the center tag. We can align paragraphs, headings in a number of ways. We can use the ALIGN attribute with paragraphs or headings to center-align, right-align or left-align.
</BODY>
</HTML>
Specifying Fonts and Font sizes
The <FONT> tag allows to specify the size and color of a section of text.
The following table describes the tag and attributes one may use to set font characteristics.
| Tag/Attribute | Description |
| <FONT> | Sets font characteristics for text |
| SIZE= “ ” | Specifies font sizes from 1 to 7, 3 is the default size. |
| COLOR= “ ” | Specifies font colour. This colour applies only to the text surrounded by <FONT> tag. |
| FACE= “ ” | Specifies type faces. |
Setting Font Sizes:
The <FONT> tag uses the SIZE attribute to change the size of a font. There are seven “absolute” (or fixed) sizes, numbered from 1 to 7, that we can set using the SIZE attribute of the <FONT> tag. The default is 3, which is the same as regular paragraph text; 1 is the smallest and 7 is the largest.
Example:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<P>
<FONT SIZE= “1”> Font Size 1.</FONT> <BR>
<FONT SIZE= “2”> Font Size 2.</FONT> <BR>
<FONT SIZE= “3”> Font Size 3.</FONT> <BR>
<FONT SIZE= “4”> Font Size 4.</FONT> <BR>
<FONT SIZE= “5”> Font Size 5.</FONT> <BR>
<FONT SIZE= “6”> Font Size 6.</FONT> <BR>
<FONT SIZE= “7”> Font Size 7.</FONT> <BR>
</BODY>
</HTML>
Changing the FONT Color:
The <FONT> tag uses the COLOR attribute to change the color of a font.
Example:
<HTML>
<HEAD>
<TITLE> Paragraphs in HTML</TITLE>
</HEAD>
<BODY>
<H1> HTML </H1>
<P> <FONT SIZE= “5” COLOR= “GREEN” FACE= “MONOTYPE CORSIVA”>HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.</FONT>
<P> <FONT SIZE= “6” COLOR= “BLUE” FACE= “MV BOLI”>Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.</FONT>
</BODY>
</HTML>
OUTPUT:
HTML Line Breaks:
To break a line <BR> tag is used. Whenever we use the <BR> tag, anything following it starts on the next line. The <BR> tag is an empty tag, it has no end tag.
Example:
<P> For further details contact <BR>
E. Begum <BR> Tinsukia<BR> Assam
HTML Horizontal Rule:
The HTML <HR> tag is used for creating a horizontal line. The <HR> tag is a stand-alone or empty tag that allows us to add horizontal rules to web pages. A horizontal rule is a good option to divide a page into sections or to separate headers and footers from the rest of the page.
Changing the Height of a Horizontal Rule:
To change the height of a horizontal rule, the SIZE attribute value in the <HR> tag can be used. The value we set is the rule’s height or thickness in pixels. The following example is used for creating a horizontal rule that is 10 pixels thick.
Example:
<P>This is a normal rule:
<HR>
<P>This is a 10-pixel thick horizontal rule:
<HR SIZE= “10”>
Changing the width of a Horizontal Rule:
We can change the width of a horizontal rule, either by setting the width in actual pixels or by specifying a percentage of the total width of the browser window. By default, horizontal rules are centered in the browser window. Following is an example of creating a 15-pixel sized horizontal rule with a width that is 75 percent of a browser’s window.
Example:
<P>This is a 75% wide, 15-pixel thick horizontal rule:
<HR WIDTH= “75%” SIZE= “15” >
Changing Between Shaded and Unshaded Horizontal Rule:
The default setting for a rule is “shaded”. To set an “unshaded” horizontal rule, add the NOSHADE attribute to the <HR>tag.
Example:
<P>This is an unshaded, 15-pixel thick horizontal rule:
<HR>
<P>This is a 10-pixel thick horizontal rule:
<HR SIZE= “15” NOSHADE>
Setting the Alignment of a Horizontal Rule:
The ALIGN attribute in the<HR> tag is used to left-align or right-align a horizontal rule (center alignment is the default)
Example:
<P>This is a left-aligned, 50% wide, 20-pixel thick horizontal rule (Shaded)
<HR ALIGN= “LEFT” WIDTH= “50%” SIZE= “20”>
Attributes of <HR> Tag:
| Attributes | Value | Description |
| Size | pixels or % | Specifies the height of a <HR> element |
| Width | pixels or % | Specifies the width of a <HR> element |
| Align | Left/ center/ right | Specifies the alignment of a <HR> element |
| Color | color_name | Specifies the color of the <HR> element |
| Noshade | noshade | Specifies that <HR> element should render in one solid color (noshaded), instead of a shaded color. |
Example: HTML Line Breaks and Horizontal Rule
<HTML>
<HEAD>
<TITLE>Line Break and Horizontal Rule</TITLE>
</HEAD>
<BODY>
GOOD MORNING <BR>
HAVE A NICE DAY<BR>
<HR ALIGN= “LEFT” SIZE= “10%” WIDTH= “80%”>
GOOD NIGHT <BR>
SWEET DREAMS<BR>
<HR ALIGN= “LEFT” SIZE= “20%” WIDTH= “90%” NOSHADE COLOR= “BLUE”>
</BODY>
</HTML>
Output:
<ADDRESS>, <BLOCKQUOTE> and <PRE> Tags
<ADDRESS> Tag:
The <ADDRESS> tag is used to write addresses and contact information in a document. It generally appears in italics.
The Address tag is used to define a signature block for Web page. It might contain name, title, organizational or business affiliation, as well as information on how to contact. A horizontal rule usually separates an address from the rest of a web page.
Example:
<HTML>
<HEAD>
<TITLE>Tinsukia College</TITLE>
</HEAD>
<BODY>
<H1>TINSUKIA COLLEGE</H1>
<P ALIGN=”JUSTIFY”>Tinsukia College, established in 1956, is one of the oldest undergraduate, coeducational college situated in Tinsukia, Assam. This college is affiliated with the Dibrugarh University. This Co-ed institution has been imparting education both at Higher Secondary & Degree levels in 5 faculties of Arts, Science, Commerce, Management and Computer Science. </P>
<HR>
<ADDRESS ALIGN=”CENTER”>Tinsukia College Rd., Kachujan
Dist: TINSUKIA (ASSAM)
Pin: 786125
Phone: 03742-338340
Email: principaltinsukiacollege@rediffmail.com
</ADDRESS>
</BODY>
</HTML>
Output:
<BLOCKQUOTE> Tag:
The <BLOCKQUOTE> tag indents the entire paragraph from the left as well as right. It is mainly used to write quotations. The <BLOCKQUOTE> tag double-indents a block of text from both margins.
Example:
<HTML>
<HEAD>
<TITLE>Block Quotes</TITLE>
</HEAD>
<BODY>
<BLOCKQUOTE>
<FONT COLOR=”orange” SIZE=”5″>
<P>HTML stands for Hypertext Markup Language, and it is the most widely used language to design web pages. The backbone of the World Wide Web is made of HTML files, which are specially formatted documents that can contain links, as well as images and other media.
<P> Hypertext refers to the way in which web pages (HTML documents) are linked together. When we click a link in a web page, we are using hypertext. So, hypertext is simply a piece of text that works as a link.
<BLOCKQUOTE>
<P> Markup language describes how HTML works. Markup languages are the languages that build the web. With a markup language, we simply “mark up” a text document with tags that tell a web browser how to structure it to display. So, markup language is a way of writing layout information within documents. The most widely known markup language today is HTML and XML.
</BLOCKQUOTE>
</FONT>
</BLOCKQUOTE>
</BODY>
</HTML>
Output:
<PRE> Tag:
The <PRE> tag displays the text exactly in the same way, as we typed it. One of the primary uses of the <PRE> tag is to display text in a tabular or columnar format in which we want to make sure that the column remains properly aligned.
Example:
<HTML>
<HEAD>
<TITLE>Tinsukia College</TITLE>
</HEAD>
<BODY>
<H1>Have a Great day guys!!!</H1>
<PRE>
GOOD MORNING
WELCOME TO TINSUKIA
HAVE A GOOD DAY
BYE BYE
<PRE>
</BODY>
</HTML>
Output:
<abbr>, <details> and <summary> Tags
<abbr> Tag:
The <abbr> tag in HTML is used to define an abbreviation or acronym, such as “HTML,” “CSS,” or “Mr.” . It works with the title attribute, which provides the full expansion of the term and displays it as a tooltip when a user hovers over the abbreviated text.
Example:
<p>The <abbr title=”Hypertext Markup Language”>HTML</abbr> is used to structure web pages.</p>
<abbr title=”World Health Organization”>WHO</abbr>
<details> and <summary> Tag
The HTML <details> and <summary> tags work together to create an interactive discloser widget, often referred to as an “accordion” or “discloser triangle”. This allows users to show or hide additional content on demand.
The <details> Tag:
- The <details> tag acts as a container for the entire discloser widget.
- It encloses both the visible summary and the hidden content.
- By default, the content within <details> (excluding the <summary>) is hidden.
- The open attribute can be added to the <details> tag to make the content visible by default when the page loads. Without the open attribute, the widget is closed when the page loads.
The <summary> Tag:
- The <summary> tag provides the visible heading or title for the discloser widget.
- It is placed inside the <details> tag and is always displayed.
- Clicking the <summary> element toggles the visibility of the content within the parent <details> tag.
The summary content can be plain text, or we can use other HTML elements like headings (<h4>) or text formatting (<strong>) inside it.
Example:
<html>
<head>
<title>details and summary tag</title>
</head>
<body>
<details>
<summary>Click to view more information</summary>
<p>This is the additional content that is hidden by default. The content will be revealed when the summary is clicked</p>
</details>
<BR><BR>
<details open>
<summary>Already open details</summary>
<p>This content is visible by default because of the open attribute</p>
</details>
</body>
</html>
Output:
Adding Images (Inserting images):
Images are very important to beautify as well as to depict many concepts on web page. It is true that one single image is worth a thousand words. So, as a web designer we should have clear understanding on how to use images in our web page.
We can add or insert an image in web page by using HTML <IMG> tag. The <IMG> tag is an empty tag, which means that it contains attributes only, and has no closing tag. To display an image on a web page, we need to use the SRC attribute of <IMG> tag. The SRC stands for “source”.
The syntax of using <IMG> tag is:
<IMG SRC = “imagefile”>
Attributes of <IMG> Tag:
| Attribute | Value | Description |
| src | URL | Specifies the URL or location of an image, where the image is stored |
| align | top, bottom, middle, left, right | Specifies the alignment of an image according to surrounding elements. |
| alt | text | Specifies an alternate text for an image, if the image cannot be displayed |
| title | text | Specifies title text as pop-up tips. |
| border | pixels | Specifies the width of the border around an image. |
| height | pixels | Specifies the height of an image. |
| width | pixels | Specifies the width of an image. |
| hspace | pixels | Specifies the white space on left and right side of an image |
| vspace | pixels | Specifies the white space on top and bottom of an image |
Example:
<HTML>
<HEAD>
<TITLE> Images in HTML</TITLE>
</HEAD>
<BODY>
<IMG SRC=”C:\Users\ELIZA\OneDrive\Pictures\flower.jpg” ALIGN=”LEFT” BORDER=”5″ HEIGHT=”200″ WIDTH=”150″ VSPACE=”10″>
<IMG SRC=”C:\Users\ELIZA\OneDrive\Pictures\Hyderabad.jpg” BORDER= “5” ALIGN= “RIGHT” ALT= “Sample Picture” TITLE= “Beautiful Picture” HEIGHT= “200” WIDTH= “150” VSPACE= “10” HSPACE= “30”>
<P ALIGN=”JUSTIFY”><FONT SIZE=”5″ COLOR=”BLUE” FACE=”MV BOLI”>
Images are very important to beautify as well as to depict many concepts on web page. It is true that one single image is worth a thousand words. So, as a web designer we should have clear understanding on how to use images in our web page.
</BODY>
</HTML>
Output:
Working with Lists (Creating Lists):
Lists are powerful tools used to organize similar kinds of information i.e., lists are used to group related pieces of information together, so they are clearly associated with each other and easy to read. Lists are the best method of organizing information and presenting it in a structured fashion.
There are three types of lists. They are:
- Ordered List (Numbered List)
- Unordered List (Bulleted List)
- Definition List
Ordered List:
An Ordered List is a numbered list. Ordered List is used when the order or priority of items is important. In HTML, an ordered list starts with the <OL> tag. It is used in conjunction with the <LI> (LIST Item) tag. The list items are marked with numbers. The numbering starts at one and is incremented by one for each successive list item.
We can use the TYPE attribute with <OL>tag to specify the type of numbers. The values that we can use with the TYPE attribute are “A”, “a”, “I”, “i” for uppercase letters, lowercase letters, uppercase Roman numerals, lowercase Roman numerals. By default, it is generic number.
By default, index for list items begins with first number or initial character. We can use START attribute with <OL>tag to specify the beginning of any index. The START attribute in an <OL>tag is used to start the numbering sequence at a particular number.
Example:
<HTML>
<HEAD>
<TITLE>Ordered List in HTML</TITLE>
</HEAD>
<BODY>
<OL>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</OL>
<OL TYPE= “a”>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</OL>
<OL TYPE= “i”>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</OL>
<OL START= “11”>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</OL>
<BODY>
</HTML>
Output:
Reversing an Ordered List Items:
The reversed attribute of the <ol> tag in HTML is used to set reversed ordering of list items in an ordered list. The items themselves are not reversed, only the numbering.
Example:
<html>
<body>
<h3> The item numbers appear in reverse order</h3>
<ol reversed>
<li>Tea
<li>Coffee
<li>Milk
</ol>
<br>
<ol type=”a” reversed>
<li>Tea
<li>Coffee
<li>Milk
</ol>
<br>
<ol type=”i” reversed>
<li>Tea
<li>Coffee
<li>Milk
</ol>
<br>
<ol start=”11″ reversed>
<li>Tea
<li>Coffee
<li>Milk
</ol>
</body>
</html>
Output:
The item numbers appear in reverse order:
Unordered List:
An Unordered List is a collection of related items that have no special order or sequence. This list is created by using <UL> tag. The <UL> tag defines a bulleted list of items. The <LI> (List Item) tag is nested inside the <UL> tag and defines each item within the list.
The bullet itself comes in three types: “disc”, “circle” and “square”. The TYPE attribute is used with <UL> tag to specify the type of bullet. By default, it is a “disc”.
Example:
<HTML>
<HEAD>
<TITLE>Unordered List in HTML</TITLE>
</HEAD>
<BODY>
<FONT SIZE=”5″>
<UL>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</UL>
<UL TYPE= “circle”>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</UL>
<UL TYPE= “square”>
<LI> C PROGRAMMING
<LI> DATABASE MANAGEMENT
<LI> NETWORKING
<LI> WEB TECHNOLOY
<LI> MOBILE TECHNOLOGY
</UL>
<BODY>
</HTML>
Output:
Nested Lists:
A nested list is a list within a list. We can nest a list inside another list. The browser automatically indents nested list levels. We can nest the same or different kinds of lists. One of the most common places where we can see a nested list is in the contents of a book.
Example 1:
Output:
Example 2:
Output:
Definition List:
Definition lists group terms and definitions into a single list and requires three elements to complete the list:
<DL>: Holds the list definitions (DL- Define the List)
<DT>: Defines a term in the list (DL- Define the Term)
<DD>: Defines a definition for the term (DL- Define the definition)
In the definition list, we can have as many terms (defined by <DT>) as we need. Each term can have one or more definitions (defined by <DD>).
Example:
<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Hardware
<DD> Hardware refers to the physical components of a computer system, such as the CPU, memory, and motherboard, as well as external devices like the monitor, keyboard, and mouse.
<DT>Software
<DD>Software is a set of instructions or programs that tell a computer or device what to do, enabling it to perform tasks.
<DT>Peripherals
<DD>A computer peripheral is any external hardware device that connects to a computer to add functionality, but is not a core part of its essential internal components. These devices are used to expand a computer’s capabilities, serving as input (like a keyboard or mouse), output (like a monitor or printer), or storage (like an external hard drive) devices.
</DL>
</BODY>
</HTML>
Output:
MARQUEE TAG:
<MARQUEE> tag is used to scroll text across the screen. It is mainly used to deliver a specific message to the visitor or to scroll ads on a page. Sometimes we might want our text or photos to continuously scroll across the screen. Or maybe we would like it to bounce back and forth across the screen. All these things are possible using HTML marquees. HTML marquees are a piece of code that allows us to create movement on an HTML element (text or image).
Syntax:
<MARQUEE attribute_name= “attribute_value”>Text or image </MARQUEE>
<MARQUEE> Attributes:
| Attribute | Value | Description |
| behavior | Scroll, slide, alternate | Specifies the type of scrolling |
| bgcolor | colorname | Specifies the background color of the marquee. |
| direction | Up, down, left, right | Specifies the scrolling direction of text |
| height | Pixels or % | Specifies the height of marquee |
| width | Pixels or % | Specifies the width of marquee |
| hspace | pixels | Specifies horizontal space around the marquee. |
| vspace | pixels | Specifies vertical space around the marquee. |
| loop | number | Specifies how many times the marquee text scrolls |
| scrolldelay | milliseconds | Defines how long to delay between each jump. |
| scrollamount | number | Specifies the shift of marquee text. |
Example:
<HTML>
<HEAD>
<TITLE> MARQUEE IN HTML </TITLE>
</HEAD>
<BODY>
<H2> TEXT SCROLLING </H2>
<MARQUEE BEHAVIOR= “ALTERNATE” BGCOLOR= “AQUA” DIRECTION= “LEFT” HEIGHT= “50%” WIDTH= “100%” SCROLLDELAY= “30” VSPACE= “20” HSPACE= “20”> WELLCOME TO BEAUTIFUL ASSAM </MARQUEE>
<H2> IMAGE SCROLLING </H2>
<MARQUEE BEHAVIOR=”SLIDE” BGCOLOR= “AQUA” DIRECTION= “UP” SCROLLAMOUNT= “10” HEIGHT= “35%” WIDTH= “100%” LOOP= “5” SCROLLDELAY= “30” VSPACE= “20” HSPACE= “20”>
<IMG SRC=”D:\HTML\NATURE.JPG” HEIGHT=”200” WIDTH=”200”>
</MARQUEE>
</BODY>
</HTML>
Hyperlink in HTML:
A hyperlink (or link) is a word, group of words, or image that we can click on to jump to another document or another section on the same page. Hyperlinks, or simply links, connect HTML pages and other resources on the web. We can also link to such resources that are not even HTML pages at all, such as e-mail addresses, pictures and text files etc. Without links, a web page stands alone, disconnected from the rest of the web. With links, that page becomes part of the web.
In HTML, <A> (Anchor) tag defines hyperlink. Anything between the opening <A> tag and the closing </A> tag becomes part of the link and a user can click that part to reach to the linked document.
The syntax of using <A> tag is:
<A href= “URL”> Link Text </A>
Here, the href attribute specifies the destinations of a link. The “Link Text” can be text or image.
The hypertext links is composed of three elements:
- Start and End tags that enclose the whole link
- The link target
- The link text
<HTML>
<HEAD>
<TITLE> HYPERLINK</TITLE>
</HEAD>
<BODY BGCOLOR=”GREEN” LINK=”PURPLE” VLINK=”YELLOW” ALINK= “BLUE” TEXT=”MAROON”>
<H1> Hyperlinks connect HTML pages</H1>
<A HREF= “D:\HTML\EX15.HTML”>Home Page </A>
<P><FONT SIZE=”5″ FACE=”MV BOLI”>A hyperlink (or link) is a word, group of words, or image that we can click on to jump to another document or another section on the same page. Hyperlinks, or simply links, connect HTML pages and other resources on the web. When we include a link on web page, we enable visitors to travel from our web page to another website, another web page on our site or even another location on the same page. We can also link to such resources that are not even HTML pages at all, such as e-mail addresses, pictures and text files etc. Without links, a web page stands alone, disconnected from the rest of the web. With links, that page becomes part of the web.
<P>The hypertext links is composed of three elements:
<UL>
<LI><A HREF=”D:\HTML\EX1.HTML”>START & END TAGS</A>
<LI><A HREF=”D:\HTML\EX2.HTML”>LINK TARGET</A>
<LI><A HREF=”D:\HTML\EX3.HTML”>LINK TEXT</A>
</UL>
</BODY>
</HTML>
CREATING IMAGE LINKS:
Besides text, we can also include an image inside a hypertext link, which causes the image to display a blue border, indicating that it is a hypertext link that we can click and activate. Web pages often use images for navigation. They are more appealing than plain- text links. To create an image that generates a link, we substitute an <IMG> tag in place of text to which we would anchor our link.
Example:
<HTML>
<HEAD>
<TITLE> Image as a Link</TITLE>
</HEAD>
<BODY>
<H3> Image Link</H3>
<A HREF= “EX5.html”><IMG SRC= “NATURE.JPG” BORDER= “5” ALT= “A Sample Picture” TITLE= “Beautiful Picture” HEIGHT= “300” WIDTH= “250”>
</A>
</BODY>
</HTML>
Inserting Email Links
An email works the same way as the links to web pages. Instead of specifying a page address in the href attribute, we specify an email address. Also, an email link uses the mailto: protocol (used to invoke email programs). So, to create an email link, add an anchor link with the mailto: protocol indicator and the email address.
Example:
Example – 2:
<HTML>
<HEAD>
<TITLE>Tinsukia College</TITLE>
</HEAD>
<BODY>
<H1>TINSUKIA COLLEGE</H1>
<P ALIGN=”JUSTIFY”>Tinsukia College, established in 1956, is one of the oldest undergraduate, coeducational college situated in Tinsukia, Assam. This college is affiliated with the Dibrugarh University. This Co-ed institution has been imparting education both at Higher Secondary & Degree levels in 5 faculties of Arts, Science, Commerce, Management and Computer Science. Currently, the college has altogether 17 departments, viz. Assamese, Bengali, Botany, Chemistry, Commerce, Computer Science, Economics, English, Geography, Hindi, History, Mathematics, Philosophy, Physics, Political Science, Statistics and Zoology. Besides, it provides two professional degree courses, viz, BBA and BCA. The college has a study centre of Krishna Kanta Handique State Open University under which several UG and PG courses are offered.</P>
<HR>
<ADDRESS ALIGN=”CENTER”>Tinsukia College Rd., Kachujan
Dist: TINSUKIA (ASSAM)
Pin: 786125
Phone: 03742-338340
<A HREF=”MAILTO:principaltinsukiacollege@rediffmail.com”>Tinsukia College</A>
</ADDRESS>
</BODY>
</HTML>
Inserting Special Characters
In HTML, special characters that have special meanings (such as <, >, &, etc.) need to be represented using character entities to avoid parsing errors. There are literally hundreds of special character entities currently available. HTML special characters were introduced with HTML 4.0 in December 1997. They provided a standardized way of representing characters outside the commonly used ASCII encoding.
In HTML, these special characters are referred to as entities, and they are created by using codes beginning with an ampersand (&), followed by an entity name or an entity number, and ending with a semicolon. The entity names and entity numbers both represent the same thing; we can use either one.
HTML special characters are assigned an entity name and an entity number, both of which can be used to render the character in an HTML document. These codes and names have a specific format, which is generally represented as &#xxxx; for numbers and &xxxx; for names, where xxxx is either a name or a number. Numbers are valid in both decimal and hexadecimal format.
For example, the code for a right-facing arrow, also known as the ‘greater than’ sign, is > for the entity number and > for the entity name. Inserting the code for either of those into an HTML document will render a ‘>’ when displayed to the user.
Common HTML Special Characters:
| Character | Description | Number code | Entity code |
| “ | Double quotation | " | " |
| ‘ | Single quoation | ' | ' |
| & | ampersand | & | & |
| © | copyright | © | © |
| ® | Registered symbol | ® | ® |
| ™ | trademark | ™ | ™ |
| non-breaking space |   | | |
| < | less than | < | < |
| > | greater than | > | > |
Note: Entity names are case sensitive.
Example:
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1> Special Characters </h1>
<p>Copyright symbol: ©</p>
<p>Ampersand symbol: &</p>
<p>Trademark symbol: ™</p>
<p>Registered symbol: ®</p>
</body>
</html>
Output:
Adding Emojis to Webpage:
We can also display emojis using an entity code. All emojis have a numeric entity code in HTML, but not all of them have a named entity code. Some examples include:
Example:
Output:
Emoji Faces (Smileys)
Smiling Face: 😃
Laughing Face: 😆
Crying Face: 😢
Confused Face: 😕
Sleepy Face: 😪
Sleeping Face: 😴
Tired Face: 😫
HTML Audio
The HTML <audio> tag is used to play an audio file on a web page. The <audio> tag is used to embed sound content in a document, such as music or other audio streams. The controls attribute adds audio controls, like play, pause, and volume.
The <source> tag is used within the <audio> tag to specify the location and format of the audio file. This allows for providing multiple audio sources in different formats, ensuring compatibility across various browsers
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> tag.
Example:
<html>
<head>
<title>HTML Audio </title>
</head>
<body>
<audio controls>
<source src=”testing.mp3″ type =”audio/mp3″>
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute. Add muted after autoplay to let audio file start playing automatically (but muted).
Example:
<html>
<head>
<title>HTML Audio </title>
</head>
<body>
<audio controls autoplay muted>
<source src=”E:\testing.mp3″ type =”audio/mp3″>
Your browser does not support the audio element.
</audio>
</body>
</html>
HTML Video
The HTML <video> tag is used to show a video on a web page. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports. The text between the <video> and </video> tag will only be displayed in browsers that do not support the <video> element.
Example:
<html>
<head>
<title>HTML Video</title>
</head>
<body>
<video width=”320″ height=”240″ controls>
<source src = “video.mp4” type = “video/mp4”>
Your browser does not support the video tag.
</video>
</body>
</html>
TABLES
In HTML, tables make it easy to lay out data, text and even images in a grid. Tables are just like spreadsheets and they are made up of rows and columns. They are very frequently used by almost all web developers to arrange data in a tabular format. Almost all major sites on the web are using invisible tables to layout the pages. The most important layout aspects that can be done with table are:
- Divide the page into different sections.
- Creating menus.
- Adding interactive form fields.
- Easy alignment of images that have been cut into smaller pieces.
- A simple way to allow text to be written in two or more columns next to each other.
In HTML, the <TABLE> tag is used to create a table. A table is divided into rows with the <TR> (Table Row) tag, and each row is divided into data cells with the <TD> (Table data) tag. The <TD> tag holds the content of a data cell. A <TD> tag can contain text, links, images, lists, forms etc.
Table Borders:
By default, the table does not contain a border. To include a border to the table, specify a BORDER attribute inside the <TABLE> tag. The BORDER attribute of <TABLE> tag controls the appearance of the table’s borders or lines. The default border is 0, so if we do not specify a border attribute, the table is displayed without any borders. Sometimes this is useful, but most of the time, we want the borders to be visible.
Example:
<HTML>
<HEAD>
<TITLE> TABLE WITH BORDERS </TITLE>
</HEAD>
<BODY>
<H4> TABLE WITH A NORMAL BORDER </H4>
<TABLE BORDER= “1”>
<TR>
<TD>FIRST</TD>
<TD>ROW</TD>
</TR>
<TR>
<TD>SECOND</TD>
<TD>ROW</TD>
</TR>
</TABLE>
<H4> TABLE WITH A THICK BORDER </H4>
<TABLE BORDER= “8”>
<TR>
<TD>FIRST</TD>
<TD>ROW</TD>
</TR>
<TR>
<TD>SECOND</TD>
<TD>ROW</TD>
</TR>
</TABLE>
<H4> TABLE WITH A VERY THICK BORDER </H4>
<TABLE BORDER= “15”>
<TR>
<TD>FIRST</TD>
<TD>ROW</TD>
</TR>
<TR>
<TD>SECOND</TD>
<TD>ROW</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:
HEADING IN A TABLE:
Header information in a table is defined with the <TH> tag. All major browsers display the text in the <TH> element as bold and centered.
Adding Column Heading:
To create headings (column headings) at the top of the table, first create a row using the <TR>tag and then, use the <TH> tag to define the cells instead of using the <TD> tags.
Example:
<HTML>
<HEAD>
<TITLE> HEADINGS IN ATABLE </TITLE>
</HEAD>
<BODY>
<TABLE BORDER= “3”>
<TR>
<TH>ROLL NO</TH>
<TH>FIRST NAME</TH>
<TH>LAST NAME</TH>
<TH>ADDRESS</TH>
</TR>
<TR>
<TD>1</TD>
<TD>BINOY</TD>
<TD>KHEMKA</TD>
<TD>ARUNACHAL</TD>
</TR>
<TR>
<TD>2</TD>
<TD>BIPON</TD>
<TD>DUTTA</TD>
<TD>TINSUKIA</TD>
</TR>
<TR>
<TD>3</TD>
<TD>ARUN</TD>
<TD>SAHA</TD>
<TD>TINSUKIA</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:
Add Row Headings:
To create a row heading add <TH> tag instead of a <TD> tag at the start of a table row.
Example:
<HTML>
<HEAD>
<TITLE> HEADINGS IN ATABLE </TITLE>
</HEAD>
<BODY>
<TABLE BORDER= “1”>
<TR>
TH>ROW1 :< /TH>
<TH>ROLL NO</TH>
<TH>FIRST NAME</TH>
<TH>LAST NAME</TH>
<TH>ADDRESS</TH>
</TR>
<TR>
<TH>ROW2 :< /TH>
<TD>1</TD>
<TD>BINOY</TD>
<TD>KHEMKA</TD>
<TD>ARUNACHAL</TD>
</TR>
<TR><TH>ROW3 :< /TH>
<TD>1</TD>
<TD>BINOY</TD>
<TD>KHEMKA</TD>
<TD>ARUNACHAL</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Output:
Forms in Web pages
In HTML, forms are used to collect different kinds of user input. For example, Forms are required when we want to collect some data (like name, e-mail address, contact number etc.) from the site visitors who visit site.
A form is an area that can contain form elements. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.
A form is defined with the <FORM> tag. Within the <FORM>…</FORM> tags, all other form related tags and text must appear. The <FORM> tag can contain one more of the following form tags:
- <INPUT>
- <SELECT>
- <OPTION>
- <TEXTAREA>
- <BUTTON>
- <FIELDSET>
- <LABEL>
<INPUT> Tag and Attributes:
The most used <FORM> tag is the <INPUT> tag specifies an input field where the user can input or enter data. The type of input is specified with the type attribute. The following types are the most commonly used input types:
(i) Text
(ii) Checkbox
(iii) Radio
(iv) Button
(v) Reset
(vi) Submit
(vii) Password
Example:
<HTML>
<HEAD>
<TITLE> INPUT ELEMENT IN HTML FORM</TITLE>
</HEAD>
<BODY>
<H3><U>HTML FORM</U></H3><BR><BR>
<FORM>
NAME:<INPUT TYPE=”TEXT” NAME=”NM” SIZE=”20″ MAXLENGTH=”10″><BR><BR>
PASSWORD :<INPUT TYPE=”PASSWORD” NAME=”PWD” SIZE=”20″ MAXLENGTH=”8″><BR><BR>
PHONE NO :<INPUT TYPE=”NUMBER” NAME=”PHN”><BR><BR>
GENDER :
<INPUT TYPE=”RADIO” NAME=”R1″ VALUE=”M”>MALE
<INPUT TYPE=”RADIO” NAME=”R1″ VALUE=”F”>FEMALE
OTHERS<input TYPE=”RADIO” NAME=”R1″ VALUE=”O”><BR><BR>
INTERESTS:
<INPUT TYPE=”CHECKBOX” NAME=”C1″ VALUE=”MUSIC”>MUSIC
<INPUT TYPE=”CHECKBOX” NAME=”C2″ VALUE=”MOVIES”>MOVIES
<INPUT TYPE=”CHECKBOX” NAME=”C3″ VALUE=”SURFING”>SURFING
<INPUT TYPE=”CHECKBOX” NAME=”C4″ VALUE=”READING”><BR><BR>READING
DATE OF BIRTH:<input TYPE=”DATE” NAME=”DOB” ><BR><BR>
PHOTO:<INPUT TYPE=”FILE” NAME=”MYFILE”><BR><BR>
<INPUT TYPE=”SUBMIT” VALUE=”SUBMIT”>
<INPUT TYPE=”RESET” VALUE=”CANCEL”>
</FORM>
</BODY>
</HTML>
Output:
