Scribd
Upload
0 views30 pages

Chapter 2

Chapter 2 provides an overview of HTML, explaining its purpose as a markup language for web pages and detailing the types of HTML tags, including container and empty tags. It discusses meta tags and their functionalities, the structure of the <head> section, text formatting tags, and the syntax for comments. Additionally, it covers various HTML elements such as lists, tables, forms, frames, and the <iframe> tag, along with examples and explanations of attributes and their values.

Uploaded by

mannasirsa.s440
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views30 pages

Chapter 2

Chapter 2 provides an overview of HTML, explaining its purpose as a markup language for web pages and detailing the types of HTML tags, including container and empty tags. It discusses meta tags and their functionalities, the structure of the <head> section, text formatting tags, and the syntax for comments. Additionally, it covers various HTML elements such as lists, tables, forms, frames, and the <iframe> tag, along with examples and explanations of attributes and their values.

Uploaded by

mannasirsa.s440
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Chapter 2

13. What is html, how many types of tags are there,


explain container and empty tags with Example .

HTML stands for HyperText Markup Language. It is the


standard language used to create and design web pages. HTML
provides the structure of a webpage using a system of tags that
define elements like headings, paragraphs, images, links, and
more.
HTML is not a programming language; it is a markup language
used to describe the layout and content of documents displayed
in a web browser.

Types of HTML Tags:


HTML tags are used to mark the beginning and end of an
element. Tags are usually written in pairs:
 Opening tag : <tagname>
 Closing tag : </tagname>

There are two main types of HTML tags:

a. Container Tags
b. Empty (Self-closing) Tags

a. Container Tags (Paired Tags):


These tags come in pairs — an opening tag and a closing tag
Explanation:

 <p>...</p> defines a paragraph.


 <b>...</b> makes the text bold.
 <div>...</div> creates a container for block elements.

b. Empty Tags (Unpaired or Self-closing Tags):


These tags do not have a closing tag.
Explanation :

 <br> adds a line break.


 <hr> adds a horizontal line.
 <img> displays an image.
 <input> creates a form input field.

14. Explain meta tags . What are the functionalities of


meta tags ?
Meta tags are special HTML tags used inside the <head>
section of a web page. They provide metadata (information
about the web page) to search engines, browsers, and other
web services. Meta tags do not affect how the page appears
to users but are important for SEO (Search Engine
Optimization), page behavior, and document information.
🔍 Functionalities of Meta Tags:

a. Describing the Page (SEO):


o The description meta tag gives a short summary of the
page content.
o Used by search engines to display page previews in
search results.

b. Specifying Keywords :
 Helps in search engine indexing (though not heavily used
now).

c. Defining Author Information :


 Indicates the name of the content author.
d. Character Encoding :
 Defines the character set to display text correctly.

e. Controlling Page Refresh or Redirect :


 Refresh the page or redirect after a time delay .

f. Controlling Viewport (Responsive Design) :


 Helps make websites responsive on mobile devices .

15. Which tags are used under html head section .


In HTML, the <head> section contains metadata and links that
help define the structure, behavior, and appearance of the web
page.
Here are common tags used under the <head> section:

a. <title>

 Sets the title of the web page (shown in browser tab).

b. <meta>

 Provides metadata like character encoding, author,


viewport settings, etc.

c. <link>

 Links external resources like CSS files, favicon, etc.


d. <style>

 Contains internal CSS (used when you want to define styles


directly in the HTML file)

e. <script>

 Includes JavaScript code or links to external JavaScript files.

16. What are text formatting tags. explain the


functionalities of any 6 text formatting tags.

Text formatting tags in HTML are used to change the


appearance of text, such as making it bold, italic, monospaced,
or emphasizing it. These tags help in improving the readability
and structure of web content.
Tag Functionality Example Output

<b>
Makes the text bold (used for styling, no <b>Hello</b>
Hello
extra importance)
Tag Functionality Example Output

<strong>
Makes the text bold and gives strong <strong>Warning!</strong>
Warning!
importance
<i> Makes the text italic (used for styling) <i>Italic text</i> Italic text

<em>
Emphasizes the text (usually italic with <em>Important</em>
Important
semantic meaning)
<u> Underlines the text <u>Underlined</u> Underlined

<mark>
Highlights the text with a yellow <mark>Highlight</mark>
Highlight
background

17. What are the syntax of commenting in html .

In HTML, comments are used to add notes or explanations in the


code. These comments are not displayed on the web page by
the browser .

<!-- This is a comment -->


18. What are the functionalities of div, pre, span, anchor
tags .

a. <div> Tag (Division Tag):


The <div> tag is a block-level container element used to group
together related HTML elements. It is commonly used for
creating sections such as headers, footers, sidebars, and content
areas on a web page.

b. <pre> Tag (Preformatted Text Tag):


The <pre> tag is a block-level element that displays text in a
fixed-width font and preserves all whitespace, tabs, and line
breaks exactly as they are written in the HTML file. It is often
used to display code snippets, poetry, or any text where spacing
is important .
c. <span> Tag:
The <span> tag is an inline container used to apply styles or
scripts to a specific part of the text within a block-level element.
Unlike <div>, it does not create a new line and is mainly used for
styling small chunks of content without breaking the structure .

d. <a> Tag (Anchor Tag):


The <a> tag is an inline element used to define hyperlinks. It
allows the user to navigate from one page to another, to a
specific section within the same page, or to download a file. The
href attribute specifies the destination URL of the link.
19. How table is designed in html. Create a student table
with name, student id, address and specialization with 4
students .

In HTML, a table is created using the <table> tag .


It is structured using several tags:

Tag Purpose

<table> Defines the table itself.

<tr> (Table Row) Defines a row in the table.

<th> (Table Header) Defines a header cell (bold and centered by default).

<td> (Table Data) Defines a normal data cell.

Code
<html>
<head>
<title>Student Table</title>
</head>
<body>
<h2>Student Information</h2>
<table border =”black”>
<tr>
<th>Name</th>
<th>Student ID</th>
<th>Address</th>
<th>Specialization</th>
</tr>
<tr>
<td>Aryan Roy</td>
<td>ST101</td>
<td>Kolkata</td>
<td>Computer Science</td>
</tr>
<tr>
<td>Priya Das</td>
<td>ST102</td>
<td>Delhi</td>
<td>Information Technology</td>
</tr>
<tr>
<td>Ravi Kumar</td>
<td>ST103</td>
<td>Mumbai</td>
<td>Artificial Intelligence</td>
</tr>
<tr>
<td>Meena Verma</td>
<td>ST104</td>
<td>Chennai</td>
<td>Data Science</td>
</tr>
</table>

</body>
</html>

Output
20. What is the functionalities of border, rowspan, colspan,
cellspacing and cellpadding attribute .

Tag
Attribute Functionality Example Effect
Used In
Displays a
Sets the thickness of
border around
border <table> the border around the <table border="1">
the table and
table and its cells.
each cell.
<td>, Merges a cell vertically <td The cell spans
rowspan
<th> across multiple rows. rowspan="2">Text</td> 2 rows.
Merges a cell
<td>, <td The cell spans
colspan horizontally across
<th> colspan="3">Text</td> 3 columns.
multiple columns.
Sets the spacing
Adds 5px
between individual
cellspacing <table> <table cellspacing="5"> space between
table cells (outside the
table cells.
cell borders).
Sets the spacing
Adds 10px
between cell content <table
cellpadding <table> padding inside
and the cell border cellpadding="10">
each cell.
(inside the cell).

21. What is tag, element, attribute and attribute value


explain with example .
a. Tag

A tag is a keyword used to define the beginning or end of an


HTML element. Tags are enclosed in angle brackets (< >).
Example: <p> ( This is an opening tag for a paragraph. )

b. Element
An element includes both the opening tag, the content inside,
and the closing tag. It represents the complete structure.

Example: <p>This is a paragraph.</p>

Here, <p> is the opening tag, </p> is the closing tag, and
everything together is the element.

c. Attribute
An attribute provides additional information about an HTML
element. It is always written inside the opening tag .

Example: <img src="image.jpg" alt="My Image">


src and alt are attributes of the <img> tag .

d. Attribute Value

An attribute value is the information or setting given to an


attribute. It is always enclosed in quotes.

Example: <a href="https://www.google.com">Google</a>


Here, href is the attribute, and "https://www.google.com" is its
value.
22. What are the various types of list tags available in
html. Explain each type with example.

Tag
Displ
List (s) Purpos Output
ay Example Code
Type Use e Example
Style
d
To
display
items
<o Numb
in a
Ordere l>, ered html<br><ol><li>One</li><li> 1. One2.
specifi
d List <l (1, 2, Two</li></ol> Two
c,
i> 3...)
number
ed
order
To
display
<u items
Unord Bullet
l>, without html<br><ul><li>Apple</li><l • Apple•
ered ed (•,
<l any i>Mango</li></ul> Mango
List ○)
i> particul
ar
order
<d To
define Term
l>, HTML
Descri terms follow
<d html<br><dl><dt>HTML</dt><dd Markup
ption and ed by
t>, >Markup Language</dd></dl> Languag
List their definit
<d e
descrip ion
d>
tions
23. How ordered and unordered lists can be formatted.
Explain with example .

a. Formatting Ordered Lists (<ol>)


The <ol> tag supports the type attribute to change the number
format.

Type Attribute Values for <ol> :


Value Output Format

1 Numbers (1, 2, 3) — default

A Uppercase letters (A, B, C)

a Lowercase letters (a, b, c)

I Uppercase Roman numerals (I, II, III)

i Lowercase Roman numerals (i, ii, iii)

🧾 Example:
<ol type="A">

<li>Physics</li>

<li>Chemistry</li>

<li>Biology</li>

</ol>

Output :
A. Physics
B. Chemistry
C. Biology
b. Formatting Unordered Lists (<ul>)

The <ul> tag supports the type attribute (deprecated in


HTML5) and can be formatted better with CSS .

Type Attribute Values for <ul> (older HTML):


Value Bullet Style
disc ● Solid Circle — default
circle ○ Hollow Circle
square ■ Solid Square

Example (HTML-style formatting):

<ul type="square">

<li>Apple</li>
<li>Banana</li>

<li>Grapes</li>

</ul>

Output:

■Apple
■Banana
■ Grapes
24. What are the various types of html form elements are
there. Design a new user registration form using all
available options .

HTML forms allow users to enter data that can be sent to a


server. A variety of form elements are available for different
types of input.

Form Element Tag Used Description


Text Input <input type="text"> Single-line text input field.
<input Hides typed characters (for
Password Input
type="password"> passwords).
Email Input <input type="email"> Accepts email address format.
Number Input <input type="number"> Accepts numeric input.
Radio Button <input type="radio"> Select one option from a group.
<input
Checkbox Select one or more options.
type="checkbox">
Dropdown / Select
<select> Drop-down list of options.
Box
Multi-line text input (e.g.,
Textarea <textarea>
comments).
Submit Button <input type="submit"> Submits the form data.
Reset Button <input type="reset"> Resets the form fields.
Date Picker <input type="date"> Select a date from a calendar.
File Upload <input type="file"> Allows user to upload a file.
Stores data that is not visible to
Hidden Input <input type="hidden">
the user.
Button <button> Customizable clickable button.
<!DOCTYPE html>

<html>

<head>

<title>User Registration Form</title>

<style>

label {

display: block;

margin: 10px 0 5px;

input, select, textarea {

width: 300px;

padding: 8px;

</style>

</head>

<body>

<h2>New User Registration Form</h2>

<form action="#" method="post">

<label>Full Name:</label>
<input type="text" name="fullname" required>

<label>Email:</label>

<input type="email" name="email" required>

<label>Password:</label>

<input type="password" name="password" required>

<label>Age:</label>

<input type="number" name="age" min="18" max="100">

<label>Gender:</label>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

<input type="radio" name="gender" value="other"> Other

<label>Skills:</label>

<input type="checkbox" name="skills" value="HTML"> HTML

<input type="checkbox" name="skills" value="CSS"> CSS

<input type="checkbox" name="skills" value="JS"> JavaScript


<label>Country:</label>

<select name="country">

<option value="india">India</option>

<option value="usa">USA</option>

<option value="uk">UK</option>

</select>

<label>Bio:</label>

<textarea name="bio" rows="4" placeholder="Tell us something about


yourself..."></textarea>

<label>Date of Birth:</label>

<input type="date" name="dob">

<label>Upload Profile Picture:</label>

<input type="file" name="profile_pic">

<input type="hidden" name="user_id" value="12345">

<br><br>

<input type="submit" value="Register">

<input type="reset" value="Clear Form">


</form>

</body>

</html>
25. What are the functionalities of html frames, frameset
tag explain with a simple example.

Frames allow you to divide the browser window into multiple


sections, where each section can load a separate HTML
document . This was useful in older websites to display things
like menus, headers, and content areas independently.

Tag Description

<frameset> Replaces the <body> tag and divides the page into frames

<frame> Defines each individual frame and loads an HTML file

<noframes> Provides content for browsers that do not support frames


26. What are the functionalities of iframe tag. Explain with
example.

🔧 Functionalities of <iframe> Tag


1. Embed Web Pages: You can embed another website or
webpage.
2. Display Multimedia Content: You can show videos from
platforms like YouTube.
3. Interactive Content: Embed maps (e.g., Google Maps) or
forms.
4. Sandboxing: You can restrict actions inside the iframe for
security using the sandbox attribute.
5. Target for Links: Iframes can be used as a target for
hyperlinks .

Example
<h2>Example of an Embedded Web Page</h2>

<iframe src="https://www.example.com" width="600" height="400"


title="Example Website"></iframe>

Explanation : This displays the website example.com inside a


600x400 frame.
27. What is HTML5, What are some new tags available in
html5 . Explain functionalities of section , nav, article,
aside , audio and video tags.

HTML5 is the latest version of the HTML (HyperText Markup


Language) standard used for structuring and presenting
content on the web. It was developed to support modern
multimedia (like audio, video, and graphics) without the need
for extra plugins (like Flash), and it also emphasizes semantic
elements, better forms, and mobile device compatibility.

New Features in HTML5

 New semantic tags (like <section>, <article>, <nav>,


<aside>, <header>, <footer>)
 New media tags (<audio>, <video>)
 New form controls (<date>, <range>, <email>, <url>, etc.)
 Canvas and SVG for graphics and animations
 Local storage (via localStorage and sessionStorage)
 Geolocation API, Drag-and-drop support, Web Workers,
etc.
Purpose /
Tag Example
Functionality
Groups related
content into html
<section> sections (like <section><h2>Skills</h2><p>HTML,
chapters or sections CSS, JS</p></section>
in a book).
Purpose /
Tag Example
Functionality
Defines navigation
html <nav><a href="#home">Home</a>
<nav> links (menus, link
<a href="#about">About</a></nav>
bars).

Self-contained
html <article><h2>News</h2><p>New
<article> content (blog post,
course launched!</p></article>
news, etc.).
Content related to
main content html <aside><h3>Tips</h3><p>Use
<aside>
(sidebar, ads, semantic tags!</p></aside>
related links).
Embeds audio html <audio controls><source
<audio> (music, sound) with src="song.mp3"
controls. type="audio/mpeg"></audio>
html <video controls
Embeds video with
<video> width="320"><source src="video.mp4"
playback controls.
type="video/mp4"></video>

28. What are the various types of form validation tags


available in html 5. Explain the usage of require attribute,
pattern attribute, autofocus attribute, email, number type,
date type, range type attributes.

Attribute/Type Purpose / Functionality Example


Makes a field mandatory to <input type="text"
required
fill before submitting. required>
Attribute/Type Purpose / Functionality Example
<input type="text"
Validates input against a pattern="[A-Za-
pattern
regular expression. z]{3,}" title="Only
letters, min 3">
Automatically focuses the <input type="text"
autofocus
field when the page loads. autofocus>
Validates input to be in
<input type="email"
type="email" email format (e.g.,
required>
[email protected]).
Allows only numeric input.
<input type="number"
type="number" Supports min, max, and
min="1" max="100">
step attributes.
Provides a date picker and <input type="date"
type="date"
validates date format. required>
type="range" Allows selection using a slid

29. How multimedia contents can be embedded in html 5 .

HTML5 makes it easy to embed multimedia content like audio,


video, and images directly into a webpage without needing
plugins like Flash.

🎥 a. Embedding Video with <video> Tag

The <video> tag is used to embed video files with playback


controls.
Attribute Description
controls Shows play, pause, volume, etc.
Attribute Description
autoplay Starts playing automatically
loop Repeats the video
muted Starts the video with no sound
poster Shows an image before video loads

🔊b. Embedding Audio with <audio> Tag

The <audio> tag is used to embed audio files such as music or


sounds.
Attribute Description
controls Shows play, pause, volume
autoplay Starts playing automatically
loop Repeats the audio
muted Mutes the audio by default

c. Embedding Images with <img> Tag


The <img> tag is used to embed images into a webpage.

🔗 4. Embedding External Media (YouTube, etc.) Using


<iframe>
For platforms like YouTube, you can use an <iframe> to
embed videos.
Tag Used For Example/Usage
<video> Embeds video Plays MP4, WebM, etc.
<audio> Embeds audio Plays MP3, WAV, etc.
<img> Embeds images Shows images (JPG, PNG, GIF, etc.)
<iframe> Embeds external content YouTube, Maps, other web pages
30. Practice writing code against images of different
sample html tables output and different sample forms .

📸 Visual Output:

Roll No Name Marks


1 Raj 85
2 Priya 90
3 Sameer 78

Code
<table border="1">

<tr>

<th>Roll No</th>

<th>Name</th>

<th>Marks</th>

</tr>

<tr>

<td>1</td>

<td>Raj</td>

<td>85</td>

</tr>

<tr>

<td>2</td>
<td>Priya</td>

<td>90</td>

</tr>

<tr>

<td>3</td>

<td>Sameer</td>

<td>78</td>

</tr>

</table>

31. What is the full form of html dom. Explain with


example .

HTML DOM stands for HyperText Markup Language Document


Object Model
The HTML DOM is a programming interface for HTML and XML
documents. It represents the structure of a webpage as a tree
of objects, where :

 Each HTML element becomes a node (object)


 You can access, modify, add, or delete elements using
JavaScript .
Concept Description
Document The entire web page is a document object
Elements Tags like <h1>, <p>, <div> become element objects
Nodes All elements, attributes, and text inside the document
Methods getElementById(), querySelector() to access elements
Properties innerHTML, style, value, etc. to read/write data

32. What is the full form of bom and com. Explain each
type .

Term Full Form Usage Area Description

Web Browsers
BOM Browser Object Model Lets JavaScript control browser functions
(JavaScript)

Component Object Microsoft system for reusable software


COM Windows Applications
Model components

You might also like