HTML, which stands for HyperText Markup Language, is the standard language used to create web pages. In Class 9 we learned the basics of HTML including headings, paragraphs, and simple lists. In this advanced chapter, we will build on that foundation by studying more powerful features such as tables, frames, forms, image maps, and multimedia elements. These features allow a web designer to create rich, interactive, and well-organised web pages that are used in real-world websites.
Every HTML document is written using tags, which are enclosed within angle brackets. Tags usually appear in pairs, such as <table> and </table>, where the first is the opening tag and the second is the closing tag. The browser interprets these tags and displays the formatted content to the user. HTML is a markup language and not a programming language because it does not contain any logic or decision-making; it only describes how content should be presented.
In this chapter we will study the advanced tags of HTML in detail, understand the attributes that control their behaviour, and learn to create complete web pages using tables, frames, forms, and multimedia. We will also see how HTML documents are structured with the head and body sections, and how attributes such as colour, alignment, and size are specified. At the end of the chapter, a practical exercise on creating a student registration form will help students connect the theory with real practice.
An HTML document has a definite structure that every browser understands. The basic skeleton of an HTML page is shown below:
<HTML> ... </HTML>: This tag tells the browser that the document is written in HTML. It is the root element of the page.<HEAD> ... </HEAD>: The head section contains information about the document such as its title. This information is not displayed on the web page itself.<TITLE> ... </TITLE>: Placed inside the head, this tag displays the title of the page in the title bar of the browser.<BODY> ... </BODY>: The body section contains all the content that is visible on the web page, including text, images, tables, and forms.Attributes such as BGCOLOR, TEXT, and LINK can be added to the <BODY> tag to set the background colour, the default text colour, and the colour of hyperlinks respectively. Attributes are always written inside the opening tag and take the form attribute="value".
<HTML>
<HEAD>
<TITLE>My First Advanced Page</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="black">
<H1>Welcome to My Website</H1>
<P>This page is created using HTML.</P>
</BODY>
</HTML>
Tables are used to arrange data in rows and columns. They are extremely useful for creating structured layouts on a web page. The main tags used for creating tables are listed below.
<TABLE>: Marks the beginning and end of a table.<TR>: Defines a table row. All cells within that row are written between <TR> and </TR>.<TH>: Defines a table header cell. The text inside a header cell appears bold and centre-aligned by default.<TD>: Defines a table data cell that holds the actual content of the table.Important attributes of a table include BORDER (width of the border in pixels), ALIGN (left, centre, or right), CELLPADDING (space between the cell content and the cell border), CELLSPACING (space between two adjacent cells), BGCOLOR (background colour), and WIDTH (width of the table). The ROWSPAN and COLSPAN attributes of a cell allow a cell to span across multiple rows or columns respectively, which is very useful for creating complex layouts.
<TABLE BORDER="1" ALIGN="center" CELLPADDING="5">
<TR>
<TH>Name</TH><TH>Class</TH><TH>Marks</TH>
</TR>
<TR>
<TD>Riya</TD><TD>X</TD><TD>92</TD>
</TR>
<TR>
<TD>Arjun</TD><TD>X</TD><TD>88</TD>
</TR>
</TABLE>
Frames allow a web page to be divided into multiple independent sections, each displaying a different HTML document. This is useful when we want some parts of the page, such as the navigation menu, to remain fixed while other parts change. The <FRAMESET> tag is used in place of the <BODY> tag to divide the screen into rows and columns. The attributes ROWS and COLS specify the size of each frame, and each frame is defined using the <FRAME> tag with the SRC attribute pointing to the document to be displayed.
For example, <FRAMESET COLS="25%,75%"> divides the screen into two vertical frames, where the left frame occupies 25 percent of the width. Frames can be nested to create more complex layouts. The TARGET attribute in links allows us to specify in which frame a linked page should open. While frames are now considered old-fashioned and are not supported in HTML5, they are still an important part of the board syllabus.
Forms are used to collect information from the user, such as a name, address, or login details. A form is created using the <FORM> tag, which has attributes like METHOD (GET or POST) and ACTION (the URL of the program that processes the form data). The GET method appends data to the URL, whereas the POST method sends data in the body of the request and is more secure.
The most important element inside a form is the <INPUT> tag, whose TYPE attribute decides the kind of input control. Common input types are TEXT (single-line text box), PASSWORD (masked text), RADIO (option buttons where only one can be selected), CHECKBOX (multiple selection), SUBMIT (button that sends the form), and RESET (button that clears the form). The NAME attribute is essential because it identifies the data sent to the server.
Additional form controls include <SELECT> for a dropdown list with <OPTION> items, and <TEXTAREA> for multi-line text input. The SIZE, MAXLENGTH, and VALUE attributes control the display length, maximum characters allowed, and default value of a control respectively.
An image map is an image with clickable regions called hotspots. Each hotspot is linked to a different URL, so clicking on different parts of the same image opens different pages. The <MAP> tag defines the map and the <AREA> tag defines each hotspot. The hotspot shapes are rect (rectangle), circle, and poly (polygon), and each area specifies the coordinates and the target link using COORDS and HREF attributes.
Multimedia on a web page includes images, audio, and video. Images are inserted with the <IMG> tag using the SRC (source file), ALT (alternative text), WIDTH, HEIGHT, and ALIGN attributes. Audio and video can be embedded using the <AUDIO> and <VIDEO> tags which support attributes like CONTROLS, AUTOPLAY, and LOOP. These tags make web pages richer and more engaging for visitors.
HTML supports three types of lists. An ordered list, created with <OL>, displays items with numbers. An unordered list, created with <UL>, displays items with bullets. A definition list, created with <DL>, pairs a term with its description using <DT> and <DD> tags. List items in ordered and unordered lists are written with the <LI> tag. The TYPE attribute changes the numbering or bullet style.
Hyperlinks connect one web page to another. The <A> (anchor) tag creates a link with the HREF attribute specifying the destination. Links can be external (pointing to another website), internal (pointing to another page of the same site), or within-page anchors using the NAME or ID attribute. The TARGET="_blank" attribute opens the link in a new window or tab.
Comments in HTML are written between <!-- and -->. They are ignored by the browser and are used only to help programmers understand the code. Comments do not appear on the web page. Meta information is placed inside the head section using the <META> tag, which can specify keywords for search engines, character encoding, and page refresh intervals. Although meta tags are not visible to the user, they play an important role in search engine optimisation.
| Tag | Full Form / Purpose | Example Attribute |
|---|---|---|
<TABLE> |
Creates a table | BORDER, ALIGN, CELLPADDING |
<TR> |
Creates a table row | ALIGN, VALIGN |
<TH> |
Table header cell (bold, centred) | COLSPAN, ROWSPAN |
<TD> |
Table data cell | COLSPAN, ROWSPAN |
<FRAMESET> |
Divides window into frames | ROWS, COLS |
<FRAME> |
Defines a single frame | SRC, NAME |
<FORM> |
Creates an input form | METHOD, ACTION |
<INPUT> |
Input control | TYPE, NAME, SIZE |
<SELECT> |
Dropdown list | NAME, SIZE |
<TEXTAREA> |
Multi-line text input | ROWS, COLS |
| Input TYPE | Purpose |
|---|---|
| TEXT | Single-line text box |
| PASSWORD | Masked text input |
| RADIO | Choose only one option |
| CHECKBOX | Choose multiple options |
| SUBMIT | Send form data to server |
| RESET | Clear or reset the form |
<BODY> and <FRAMESET> in the same page. A page can have either a body or a frameset, but never both together.<TABLE>, <FORM>, and <SELECT>. Unclosed tags cause the browser to display the page incorrectly.<TITLE> tag in the body instead of the head. The title must always be inside the head section.<OL> for numbered lists and <UL> for bulleted lists.BORDER=1 instead of BORDER="1". Quotes around attribute values are required.Advanced HTML equips a student with the skills to design professional-looking web pages. We studied the complete structure of an HTML document and learned to create tables with merging using COLSPAN and ROWSPAN, divide the browser window using frames, and collect user information through forms. We also explored image maps, multimedia elements, lists, and hyperlinks. Forms stand out as the most practical feature because they connect web pages to servers. With these advanced tags and attributes, students can move on to styling pages with CSS and adding interactivity with JavaScript in the following chapters.