Scribd
Upload
113 views

INTRODUCTION TO HTML

Introduction to HTML

Uploaded by

ddugkyhr1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

INTRODUCTION TO HTML

Introduction to HTML

Uploaded by

ddugkyhr1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

DEPARTMENT OF COMPUTER SCIENCE(AI&DS, IT)

I UG CS(AI&DS,IT) – HTML

STUDY MATERIAL

2024-EVEN SEM
QUESTION PAPER PATTERN

TIME:3 Hours Max.Marks:75

PART – A (15*1=15 MARKS)\


Answer all the questions
Three questions from each unit (Multiple Choice Questions)

PART – B (2*5=10 MARKS)


Answer two questions One question from each unit

PART – C (5*10=50 MARKS)


Answer all the questions One question from each unit
SYLLABUS

Subject Subject Name Category L T P S Cre Marks


Code dits C T
E
I o
x
A t t
e a
r
n l
a
l
INTRODUCTION TO HTML Skill 2 - - 2 25 75 10
Enha. 0
Cours e
(SEC)

Learning Objectives
LO1 Insert a graphic within a web page.
LO2 Create a link within a web page.
LO3 Create a table within a web page.
LO4 Insert heading levels within a web page.

LO5 Insert ordered and unordered lists within a web page. Create a web page.
UNI Contents No.
T Of.
Hours
I Introduction :WebBasics: What is Internet–Web browsers–What is Webpage –
6
HTMLBasics:Understanding tags.
II Tags for Document structure (HTML,Head,BodyTag).Block level text elements:Heading
spara graph(<p> tag)–Font style elements:(bold,italic,font,small,strong,strike,bigtags) 6

III Lists:Type of lists:Ordered,Unordered– Nesting Lists–Othertags:Marquee,HR,BR-


6
Using Images –Creating Hyperlinks.
IV Tables:Creating basicTable,Table elements,Caption–Table and cellalignment–
6
Rowspan,Colspan–Cellpadding.
V Frames:Frameset–Targeted Links–Noframe–Forms:Input, Text area,Select,Option.
6
TOTAL HOURS 30

Course Outcomes Programme


Outcomes
CO On completion of this course, students will
Knows the basic concept in HTML PO1, PO2, PO3,
CO Concept of resources in HTML PO4, PO5, PO6
1
Knows Design concept. PO1, PO2, PO3,
CO Concept of Meta Data PO4, PO5, PO6
2 Understand the concept of save the files.
Understand the page formatting.
PO1, PO2, PO3,
CO Concept of list
PO4, PO5, PO6
3
Creating Links. PO1, PO2, PO3,
CO Know the concept of creating link to email address PO4, PO5, PO6
4
Concept of adding images
PO1, PO2, PO3,
CO Understand the table creation. PO4, PO5, PO6
5
Textbooks
1 ―Mastering HTML5 and CSS3 Made Easy‖, TeachUComp Inc., 2014.
2
Thomas Michaud, “Foundations of Web Design: Introduction to HTML & CSS”
Web Resources
1 https://www.teachucomp.com/samples/html/5/manuals/Mastering-HTML5-CSS3.pdf
.
2 https://www.w3schools.com/html/default.asp
.

Mapping with Programme Outcomes:

CO/PSO PSO 1 PSO 2 PSO 3 PSO 4 PSO 5 PSO 6

CO 1 3 3 3 3 3 3

CO 2 3 3 2 3 3 3

CO 3 2 3 3 3 3 3

CO 4 3 3 3 3 3 3

CO 5 3 3 3 2 3 3

Weightage of course 14 15 14 14 15 15
contributed to each
PSO
INTRODUCTION TO HTML

UNIT-I
● HTML stands for Hyper Text Markup Language
● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
● The purpose of a web browser is to read HTML documents and display them as web
pages.
● The browser does not display the HTML tags, but uses the tags to interpret the content of
the page.
● HTML elements form the building blocks of all websites.
● HTML allows images and objects to be embedded and can be used to create interactive
forms.
● It provides a means to create structured documents by denoting structural semantics for
text such as headings, paragraphs, lists, links, quotes and other items.
● It can embed scripts in languages such as JavaScript which affect the behavior of
HTML webpages.
● HTML can also be used to include Cascading Style Sheets(CSS) to define the
appearance and layout of text and other material.
● HTML tags are not case sensitive.
Basics Structure of html
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>

HTML
by understanding all the basic stuff of HTML coding. There are various tags that we must
consider and include while starting to code in HTML. These tags help in the organization and basic
formatting of elements in our script or web pages. These step-by-step procedures will guide you
through the process of writing HTML.
HTML Document:
Below mentioned are the basic HTML tags that divide the whole document into various parts
like head, body, etc.
Every HTML document begins with a HTML document tag. Although this is not mandatory,
it is a good convention to start the document with this below-mentioned tag. Please refer to
the HTML Doctypes article for more information related to Doctypes.
<!DOCTYPE html>

<html> :
Every HTML code must be enclosed between basic HTML tags. It begins
with <html> and ends with </html> tag.
<head>:
The head tag comes next which contains all the header information of the web page or
documents like the title of the page and other miscellaneous information. This information is
enclosed within the head tag which opens with <head> and ends with </head>. The
contents will of this tag will be explained in the later sections of the course.
<title>:
We can mention the title of a web page using the <title> tag. This is header information and
hence is mentioned within the header tags. The tag begins with <title> and ends with </title>.
<body>:
Next step is the most important of all the tags we have learned so far. The body tag contains
the actual body of the page which will be visible to all the users. This opens with <body> and
ends with </body>. All content enclosed within this tag will be shown on the web page be it
writings or images or audio or videos or even links. We will see later in the section how using
various tags we may insert mentioned contents into our web pages.
HTML Headings: These tags help us to give headings to the content of a webpage. These tags
are mainly written inside the body tag. HTML provides us with six heading tags from
<h1> to <h6>. Every tag displays the heading in a different style and font size.
Most HTML heading tag that we use :-
Heading 1
Heading 2
Heading 3
Example
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
</head>

<body>
<h1>Hello GeeksforGeeks</h1>
<h2>Hello GeeksforGeeks</h2>
<h3>Hello GeeksforGeeks</h3>
<h4>Hello GeeksforGeeks</h4>
<h5>Hello GeeksforGeeks</h5>
<h6>Hello GeeksforGeeks</h6>
</body>
</html>

● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a

paragraph What is an HTML Element?

● An HTML element is defined by a start tag, some content, and an end tag:
● <tagname> Content goes here... </tagname>
● The HTML element is everything from the start tag to the end tag:
● <h1>My First Heading</h1>
● <p>My first paragraph.</p>
UNDERSTANDING HTML:
A web page is a plain text file encoded using Hypertext Markup Language (HTML).
HTML means word by word:
Hypertext – Text that helps to jump from document to document.
Markup –Tags that apply layout and formatting conventions to plain text
Language –A reference to the fact that HTML is considered as a programming language.
WEB BASICS
What is internet?
The internet is a global network of interconnected computers and servers that allows people
to communicate, share information, and access resources from anywhere in the world.
It was created in the 1960s by the US Department of Defense as a way to connect
computers and share information between researchers and scientists.

The World Wide Web:


The Web is the only way to access information through the Internet. It’s a system of Internet
servers that support specially formatted documents. The documents are formatted in a markup
language called HTML, or “Hypertext Markup Language”, which supports a number of features
including links and multimedia. These documents are interlinked using hypertext links and are
accessible via the Internet.
To link hypertext to the Internet, we need:
1. The markup language, i.e., HTML.
2. The transfer protocol, e.g., HTTP.
3. Uniform Resource Locator (URL), the address of the resource.
Uses of Internet and the Web:
1. Communication:
The internet and web have made communication faster and easier than ever before. We can
now send emails, chat online, make video calls, and use social media platforms to connect with
people all over the world.
2. Information sharing:
The web has made it possible to access vast amounts of information on any topic from
anywhere in the world. We can read news articles, watch videos, listen to podcasts, and access
online libraries and databases.
3. Online shopping:
The internet and web have revolutionized the way we shop. We can now browse and purchase
products online, from clothes and groceries to electronics and furniture.
4. Entertainment:
The internet and web provide a wealth of entertainment options, from streaming movies and
TV shows to playing online games and listening to music.
5. Education:
The web has made it possible to access educational resources from anywhere in the world. We
can take online courses, access e-books and digital libraries, and connect with educators and
other learners through online communities.
6. Business:
The internet and web have transformed the way businesses operate. Companies can now use
e-commerce platforms to sell products and services, collaborate with remote workers, and
access global markets.
7. Research:
The internet and web have made it easier for researchers to access and share information. We
can now access scientific journals and databases, collaborate with other researchers online, and
conduct surveys and experiments through online platforms.
Web Browsers

⮚ The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.
⮚ A browser does not display the HTML tags, but uses them to determine how to display the
document:
⮚ The web browser is an application software to explore www (World Wide Web).
⮚ It provides an interface between the server and the client and requests to the server for web
documents and services. It works as a compiler to render HTML which is used to design a
webpage.
⮚ Whenever we search for anything on the internet, the browser loads a web page written in
HTML, including text, links, images, and other items such as style sheets and JavaScript
functions. Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web
browsers.
1. Google Chrome:
Developed by Google, Chrome is one of the most widely-used web browsers in the world,
known for its speed and simplicity.
2. Mozilla Firefox:
Developed by the Mozilla Foundation, Firefox is an open-source browser that is known for
its privacy features and customization options.
3. Apple Safari:
Developed by Apple, Safari is the default browser on Mac and iOS devices and is known
for its speed and integration with other Apple products.
4. Microsoft Edge:
Developed by Microsoft, Edge is the default browser on Windows 10 and is known for its
integration with other Microsoft products and services.
5. Opera:
Developed by Opera Software, Opera is a web browser that is known for its speed and
built-in VPN feature.
6. Brave:
Developed by Brave Software, Brave is a web browser that is focused on privacy and
security and blocks third-party ads and trackers by default.
7. Tor Browser:
Developed by The Tor Project, Tor Browser is a web browser that is designed for
anonymous web browsing and is based on Mozilla Firefox.
These are some of the most popular web browsers, there are other browsers available such as
Vivaldi, Brave, and so on. The choice of a web browser depends on the user’s preference and
requirements.
8. Mosaic
It was first introduced in 1993 and was the second web browser to be released. It had a
more appealing graphical user interface. The use of images, text, and graphics could all be
combined. It was developed at the National Center for Supercomputing Applications (National
Center for Supercomputing Applications).
Marc Andreessen was the man in charge of the Mosaic development team. It was dubbed “the
world’s first widely used browser.
9. Netscape Navigator
It came out in 1994. In terms of usage share in the 1990s, it was the most popular browser.
Netscape released new versions of this browser. It had a sophisticated licensing scheme that
allowed for unrestricted non-commercial use.

What is web page?

⮚ A web page is a structured document. The core element of a web page is a text file written
in the Hypertext Markup Language (HTML) which specifies the content of the web page
(including links called hyperlinks) to other web resources, primarily other web pages, and
to different sections of the same web page).
⮚ A web page or webpage is a document, commonly written in HTML (hypertext markup
language) viewed in an Internet browser.
⮚ A web page can be accessed by entering a URL (uniform resource locator) address into a
browser's address bar. A web page may contain text, graphics, and hyperlinks to other web
pages and files.
⮚ The first step of creating a web page is to create an HTML document. An HTML document
can be created in any text editor even on a notepad. So any text editor can be used to make
an Html file. We just need to add extension .html /.htm . Let us create the first basic HTML
program.
To create an HTML document follow the following steps:
Step 1: Open your text editor such as Notepad Sublime text, etc.

Step 2: Write the code given below in the text editor.


<!DOCTYPE html>
<html>
<head>
<title>First HTML file</title>
</head>
<body>
Hello Everyone!!
</body>
</html>
Step 3: Save this file with the .html/.htm extension.

Step 4: Open that file with any browser. The output will be displayed.
Designing Web Page
To design a webpage in HTML we need to learn about tags and attributes available in HTML.
In HTML, tags are some instructions that are enclosed in angle braces. With the help of these
tages, we can design a more attractive HTML page. Some of the important tags to be used are
as follows:
1.<h1> … </h1> to <h5> … </h5>:
These tags are called header tags and they are used to give heading to your webpage of
different sizes. <h1>…</h1> being the Largest Heading to<h5> …</h5> being the Smallest
Heading.
2. Bold Tag (<strong>…</strong> or<b>…</b>):
These tags are used to make text look bold.
These tags are used to make text look italics. The only difference between <i> and <em> is
that <em>semantically emphasis on important text or word whereas <i> tag is used to make is
just used to make text italics.
3. Ordered List ( <ol> … </ol>):
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical. An ordered list starts and ends with a <ol> tag. Each list item starts with <li> tag. We
can use the type attribute to define type of ordered list we need to make:

Understanding Tags:
HTML tags and attributes within the tag are used to create the HTML documents that you see
displayed via the internet. You can use HTML code to add images, create links, and modify
how text is displayed. There are many tags that are available to help you design and format
your page.
UNIT -II
Tags for document structure :
Header tags
Header tags are used to help divide content. They are commonly used with titles of sections.
They are also numbered from <h1> to <h6>.
They continue to be smaller in size down to the h6 tag, which is the smallest. While <h1> tags
are very common, the lower end tags such as <h5> and <h6> are used only in deeply detailed
documents. Below is an example of each of the header tags.
<h1>This is an H1</h1>

<h2>This is an H2</h2>

<h3>This is an H3</h3>

<h4>This is an H4</h4>

<h5>This is an H5</h5>

<h6>This is an H6</h6>
Output:
This is an H1

This is an H2

This is an H3

This is an H4

This is an H5

This is an H6
Emphasis tag
The <em> tag is used to make text stand out from the surrounding text. This text would be
important enough to stand out, but not as important as the text that uses the <strong> text. Most
commonly, it is used to display text in italics and is often used in place of the <i> tag. Below
is a sample of some text using the <em> tag.
Code:
This is a normal sentence. <em>This one needs to stand out a bit.</em> This is another normal
sentence.
Output:
This is a normal sentence. This one needs to stand out a bit. This is another normal sentence.
Line Break tag
The <br /> tag is used for making text go to the next line in a specific place. A long sentence will
wrap at the edge of the page automatically, but this will very depending on the width of the
viewer’s screen.
Code:
This sentence is broken <br /> in the middle.
Output:
This sentence is broken
in the middle.
Title tag:
The <title> tag in HTML is used to define the title of HTML document. It sets the title in the
browser toolbar. It provides the title for the web page when it is added to favorites. It displays
the title for the page in search engine results.
Syntax:
<title> Title name </title>
<!DOCTYPE html>
<html>
<head>
<title>title Tag</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2><title> Tag</h2>
<p>Welcome to GeeksforGeeks!</p>
</body>
</html>

HTML <body> Tag


The <body> tag in HTML is used to define the main content present inside an HTML page. It
is always enclosed within <html>tag. The <body> tag is the last child of <html> tag. A body
tag contains starting as well as an ending tag.

Syntax:

<body> Body Contents... </body>

Attributes:
There are many attributes in the <body> tag which are depreciated from HTML5 are listed
below:

background:
It contains the URL of the background image. It is used to set the background image.
bgcolor:
It is used to specify the background color of an image.
alink:
It is used to specify the color of the active link.
link:
text:It is used to specify the color of visited links.

It specifies the color of the text in a document.


vlink:
It specifies the color of visited links.
Example:

<!DOCTYPE html>
<html>
<!-- body tag starts here -->
<body>
<h1>GeeksforGeeks</h1>
<h2>body Tag</h2>
<p>This is paragraph text</p>
</body>
<!-- body tag ends here -->
</html>
Block level text elements:
A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.
A block-level element always takes up the full width available
Two commonly used block elements are: <p> and <div>.

o The <p> element defines a paragraph in an HTML document.

o The <div> element defines a division or a section in an HTML document.

o The <p> element is a block-level element.

o The <div> element is a block-level element


Example
<p>Hello World</p>
<div>Hello World</div>

Headings :
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest
section level and <h6> is the lowest. By default, all heading elements create a block-level box in
the layout, starting on a new line and taking up the full width available in their containing block.
Example :
<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

Output :
Beetles
External morphology
Head
Mouthparts
Thorax
Prothorax
Pterothorax
Avoid using multiple <h1> elements on one page :
1.While using multiple <h1> elements on one page is allowed by the HTML standard (as long as
they are not nested), this is not considered a best practice.
2.A page should generally have a single <h1> element that describes the content of the page
(similar to the document's <title> element).
The following code shows all the heading levels, in use.
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Output:

Heading level 1
Heading level 2

Heading level 3

Heading level 4
Heading level 5
Heading level 6

Paragraph :
The <p> element defines a paragraph in an HTML document. The <div> element
defines a division or a section in an HTML document. The <p> element is a block-
level element.

The HTML <p> element defines a paragraph:

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
Example:
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p> Example
<p>
This paragraph
contains a lot of
lines in the source
code, but the
browser ignores it.
</p>
<p>
This paragraph
contains a lot of space sin the source code, but the browser
ignoresit.
</p>
1. HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph: Example
<p>This is<br>a paragraph<br>with line breaks.</p>
Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text
Font style Element:
HTML Styles
1. Bold
2.Italic
3.Font
4.Small
5.Strong
6.Strike
7.Bigtag
s
1. Bold :
The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>

2. Italic:
To make text italic in HTML, use the <i>…</i> tag or <em>…</em> tag. Both the tags have the
same functioning, but <em> tag is a phrase tag, which renders as emphasized text.
Example
try to run the code make text italic in HTML using the font-style property
<!DOCTYPE html>
<html>
<head>
<title>HTML italic text</title>
</head>

<body>
<h1>Our Products</h1>
<p style="font-style: italic;">Learning website</p>
</body>
</html>
3. font:
The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
1. Font Size
2.Font
faces

1. Font size:
You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<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>
</body>
</html>
2. Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page doesn't
have the font installed, they will not be able to see it. Instead user will see the default font face
applicable to the user's computer.
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>
3. Strike tag:
The <strike> tag was used in HTML 4 to define strikethrough text.
<p>My favorite color is
<del>blue</del><ins>red</ins>!
</p>
4. HTML <big> Tag
The <big> tag in HTML is used to increase the selected text size by one larger than the
surrounding text. In HTML 5, it can be used by CSS.

Note: It is not supported in HTML 5


Syntax:

<big> Contents... </big>


Example 1:
<!DOCTYPE html>
<html>
<body>
<h1>GeeksforGeeks</h1>
<!--Paragraph Tag -->
<p>This is paragraph text</p>
<!--Big Tag-->
<big>This is big Tag text</big>
</body>
</html>
5. HTML <strong> Tag
The <strong> tag is used to define text with strong importance. The content inside is typically
displayed in bold.

Use the <b> tag to specify bold text without any extra importance!
<strong>This text is important!</strong>
6. HTML small Tag:
The <small> tag in HTML is used to set small font size. It decreases the font size by one size
(from medium to small, from x-large to large). It has a display property of inline.
Syntax:
<small> Contents... </small>
Example:
<html>
<body>
<h1>GeeksforGeeks</h1>
<h2><small> Tag</h2>
<small>Welcome to GeeksforGeeks!</small>
</body>
</html>
UNIT-III

1. HTML Lists:
HTML lists allow web developers to group a set of related items in lists.
Example
1. An unordered HTML
list: Item
Item
Item
Item
2. An ordered HTML list:

First item
Second item
Third item
Fourth item

1. Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Program :
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Output:
Beetroot
Ginger
Potato
Radish
2. Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Syntax:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Program:
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Output:
Beetroot
Ginger
Potato
Radish
HTML
List Tags
Tag
Des
cription
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
2. Nested List:
A list is a record of short pieces of related information used to display the data or any
information in web pages in the ordered or unordered form. For example, to purchase the items,
we need to prepare a list that can either be ordered or unordered list which helps us to organize
the data and easy to find the item.
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black t<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
ea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:

3. Other tags
HTML <marquee> Tag
The <marquee> tag in HTML is used to create scrolling text or image in a webpages. It scrolls
either from horizontally left to right or right to left, or vertically top to bottom or bottom to top.
Syntax :
The marquee element comes in pairs. It means that the tag has opening and closing elements.
<marquee>
<--- contents --->
</marquee>
<!DOCTYPE html>
<html>
<head>
<title>Marquee Tag</title>
<style>
.main {
text-align:center;
}
.marq {
padding-top:30px;
padding-bottom:30px;
}

.geek1 {
font-size:36px;
font-
weight:bold;
color:white;
padding-bottom:10px;

}
</style>
</head>
<body>
<div class = "main">
<marquee class="marq" bgcolor = "Green" direction = "left" loop="">
<div class="geek1">GeeksforGeeks</div>
<div class="geek2">A computer science portal for geeks</div>
</marquee>
</div>
</body>
</html>

HTML HR tag:
1. The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

2. The <hr> element is most often displayed as a horizontal rule that is used to separate
content (or define a change) in an HTML page.
The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a
thematic break in an HTML page to divide or separate document sections. The <hr> tag is an
empty tag, and it does not require an end tag.

Tag Attributes: The table given below describe the <hr> tag attributes
Syntax :
<hr> ...
Below programs illustrate the <hr> tag in HTML:
<!DOCTYPE html>
<html>
<body>
<p>There is a horizontal rule below this paragraph.</p>
<!--HTML hr tag is used here-->
<hr>
<p>This is a horizontal rule above this paragraph.</p>
</body>
</html>

Output:

HTML br Tag:
In this article, we will know how to add line-break using HTML <br> tag. The browser does not
recognize new lines and paragraph formatting in the text.
If you want to start a new line, you need to insert a line break with the help of the <br>. The
<br> tag inserts a single carriage return or breaks in the
document. This element has no end tag.
Syntax:

<br>
Attributes: This tag accepts an attribute called clear
clear:
Which indicates where to begin the next line after the break.
Example:
In this example, we use <br> tag in p tag to line break the content.
<!DOCTYPE html>
<html>
<body>
<h2>GeeksforGeeks</h2>
<!--br tag is used in below paragraph-->
<p>Hi Geeks! <br>Welcome to GeeksforGeeks</p>
</body>
</html>

4. HTML Images :
1. The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img>
tag creates a holding space for the referenced image.

2. The <img> tag is empty, it contains attributes only, and does not have a closing

tag. 3.The <img> tag has two required attributes:

src - Specifies the path to the image


alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute:
The required src attribute specifies the path (URL) to the image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute:
The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).

The value of the alt attribute should describe the image:


Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height:

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Width and Height, or Style:


The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of
images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
HTML Links - Hyperlinks HTML links
It is a connection from one web resource to another. A link has two ends, An anchor and
direction. The link starts at the “source” anchor and points to the “destination” anchor, which
may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML
document or an element within an HTML document
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Link Syntax:

Links are specified in HTML using the “a” tag.


Syntax Explanation
href :
The href attribute is used to specify the destination
address of the link used. "href" stands for Hypertext
reference.
Text link :
The text link is the visible part of the
link. It is what the viewer clicks on.
Program :
<!DOCTYPE html>
<html>
<h3>Example Of Adding a link</h3>
<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</body>
</html>

Output:

Changing Link Colours in HTML:


2.Different types of links appear in different formats such as:
2.An unvisited link appears underlined and blue in colour by default.
3. A visited link appears underlined and purple in colour by
default. 4.An active link appears underlined and red in colour by
default. Using Image as a Link in HTML:
An image can be used to create a link to a specified URL. When the viewer clicks on the link, it
redirects them to another page.
Syntax:
The code is
<a href=”url”>
<img src=”file address (on device or on web)” alt=”_” style=”width: ; height: ;
border: ”>
</a>
Example program:
<!DOCTYPE html>
<html>
<body>
<h3>Using Image as a link</h3>

<p>Click on the image to visit GeeksforGeeks homepage.</p>

<a href="https://www.geeksforgeeks.org">

<img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"

alt="GeeksforGeeks"

style="width:80px;height:80px;border:0">

</a>
</body>
</html>
Output:

HTML Tables:
HTML - <table> Tag
UNIT - IV
1. Tables
The HTML <table> tag is used for defining a table. The table tag contains other tags that define
the structure of the table.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML table Tag</title>
</head>
<body>
<table border = "1">
<tr>
<th>Team</th>
<th>Ranking</th>
</tr>

<tr>
<td>India</td>
<td>1</td>
</tr>

<tr>
<td>South Africa</td>
<td>2</td>
</tr>

<tr>
<td>Australia</td>
<td>3</td>
</tr>
</table>
</body>
</html>
</table>

The Table element


The <table> HTML element represents tabular data — that is, information presented in a two-
dimensional table comprised of rows and columns of cells containing data.
o Tr
o Th
o Td
o Caption
o Colgruop
o Tfoot
1. Table Caption
The table caption can be specified using the <caption> tag.

Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
Output:

Table Cell Spacing:


The table cells’ space can be defined using the cellspacing attribute. The cellspacing attribute
specifies the space between table cells.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

2. Table Cell Padding


The table cells’ padding can be defined using the cellpadding attribute. The cellpadding attribute
distance between the table cell border and data.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

3. Column and Row Span Attributes


You can merge two or more table rows into a single row by using the rowspan attribute, and you
can merge table columns into a single column by using the colspan attribute.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

Table Cells:
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.Everything between <td> and </td> are the content of the table cell.
Example:
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Table Rows:
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table Headers:
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table and cell alignment
1.Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in
<th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are
left-aligned.
Example
td
{
text-align: center;
}
To center-align the content of <td> elements as well, use text-align: center:
Vertical Alignment:
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content
in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td>
elements).

The following example sets the vertical text alignment to bottom for <td> elements:
Example
td
{
height: 50px;
vertical-align: bottom;
}
UNIT- V
1.Frame:

The <frame> HTML element defines a particular area in which another HTML document can be
displayed. A frame should be used within a <frameset>.:
Using the <frame> element is not encouraged because of certain disadvantages such as
performance problems and lack of accessibility for users with screen readers. Instead of the
<frame> element, <iframe> may be
preferred. Attributes:
Like all other HTML elements, this element supports the global attributes.
src:
This attribute specifies the document that will be displayed by the frame.
name :
This attribute is used for labeling frames. Without labeling, every link will open in the frame that
it's in – the closest parent frame. See the target attribute for more information.
noresize:
This attribute prevents resizing of frames by users.
scrolling :
This attribute defines the existence of a scrollbar. If this attribute is not used, the browser adds a
scrollbar when necessary. There are two choices: "yes" for forcing a scrollbar even when it is not
necessary and "no" for forcing no scrollbar even when it is necessary.
marginheight:
This attribute defines the height of the margin between frames.
marginwidth :
This attribute defines the width of the margin between frames.
frameborder :
This attribute allows you to specify a frame's border.
Example
A frameset document
A frameset document has a <frameset> element instead of a <body> element. The <frame>
elements are placed within the
<!doctype html>
<html lang="en-US">
<head>
<!-- Document metadata goes here -->
</head>
<frameset cols="400, 500">
<frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
<frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
</html>
HTML | <link> target Attribute:
The HTML <link> target Attribute is used to specify the window or a frame where the linked
document is loaded. It is not supported by HTML 5.
Syntax:

<link target="_blank|_self|_parent|_top|framename">
Attribute Values:

_blank:
It opens the link in a new window.
_self:
It is the default value. It opens the linked document in the same frame.
_parent:
It opens the linked document in the parent frameset.
_top:
It opens the linked document in the full body of the window.
framename:
It opens the linked document in the named frame.

Syntax:

<link target="_blank|_self|_parent|_top|framename">
Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML link target Attribute
</title>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>

<h2>
HTML <link> target Attribute
</h2>
<link href="geeksforgeeks.org" target="_blank">
</center>
</body>
</html>
HTML | <noframes> Tag:
The <noframes> tag is the backup for those browsers that does not support frames. This tag can
contains all the element that can be placed in <body> tag. It is used to create link with the non-
frame set version of any website where you want to display a message to the user. This
<noframes> tag is not supported in HTML5.
Syntax:
<!DOCTYPE html>
<html>
<head>
<title>HTML noframes Tag</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
HTML Forms:
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The <form> Element:


The HTML <form> element is used to create an HTML form for user input:
<form>
form elements

</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.
The <input> Element
The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.
Form elements
These are the following HTML <form> elements:
<label>:
It defines label for <form> elements.
<input>:
It is used to get input data from the form in various types such as text, password, email, etc
by changing its type.
<button>:
It defines a clickable button to control other elements or execute a functionality.
<select>:
It is used to create a drop-down list.
<textarea>:
It is used to get input long text content.
<fieldset>:
It is used to draw a box around other form elements and group the related data.
<legend>:
It defines a caption for fieldset elements.
<datalist>:
It is used to specify pre-defined list options for input controls.
<output>:
It displays the output of performed calculations.
<option>:
It is used to define options in a drop-down list.
<optgroup>:
It is used to define group-related options in a drop-down list.
Text Fields:
The <input type="text"> defines a single-line input field for text input.

Example
A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

HTML <select> Tag:


1. The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
2. The name attribute is needed to reference the form data after the form is submitted (if you omit
the name attribute, no data from the drop-down list will be submitted).
3. The id attribute is needed to associate the drop-down list with a label.
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML Option tag :
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.


MCQ QUESTION AND ANSWER
UNIT-I
1. What does the abbreviation HTML stand for?
a)HyperText Markup Language. b)HighText Markup Language.
c)HyperText Markdown Language. d)None of the above.
2. How many sizes of headers are available in HTML by
default? a)5 b)1 c)3 d)6
3. What is the smallest header in HTML by default?
a)h1 b)h2 c)h6 d)h4
4Which of the following is used to read a HTML page and render it?
a) Web browser b) Web server c) Web matrix d) Web network
5.Which of the following is the first web browser?
a) Nexus b) Netscape Navigator c) Internet Explorer d)
Mosaic 6.Who created the first web browser
a) Tim Berners Lee b) Jacobs, Lan c) Marc Andeersen d) Mozillafoundation
7. is an application software that allows us to view and explore information on
the web.
a) HTML b)web Browser. c) IDEs
d)Libraries 8.HTML files are saved by default
with the extension?
a).html b).h c).ht d)None of the
above 9.We enclose HTML tags within?
a){ }. b)<>. c)! ! d)None of the
above 10.What is the effect of the <b> tag?
a) It converts the text within it to bold font.
b) It is used to write black-colored font.
c) It is used to change the font size.
d) None of the above.
11. Which of the following is correct about
HTML? a)HTML uses User Defined Tags.
b) HTML uses tags defined within the language.
c) Both A and B.
d) None of the above.
12. How to display preformatted text in HTML?
a)<p> b)<pre>. c)<hr> d)All of the above
13.What are the attributes used to change the size of an
image?
a)Width and height b)Big and Small c)Top and bottom d)None of
the 14.Which of the following properties is used to change the font of text?
a)font-family b)font-size c)text-align d)None of the above
15.Which of the following tags is used to indicate the page’s start and
endpoints? a)<body> b)<html>. c)<head>. d)<doctype>
UNIT-II
1. To create HTML page, you need
a) Web browser b) text editor c) Both [A] and [B] d) None of the
above
2. <a> and </a> are the tags used for
a)Adding image b) Aligning text
c) Audio-voiced text d) Adding links to your
page 3.The BODY tag is usually used after
a) HTML tag b) EM tag c) TITLE tag d) HEAD
tag 4.Choose the correct HTML tag to make a text italic
a) <i> b) <italic> c) <it> d)
<il> 5.What does the <br> tag add to your
webpage?
a) Long break b) Paragraph break
c) Line break d) None of the above
6.Which tag tells the browser where the page starts and
stops?
a) <html> b) <body> c) <head> d) <title>
7.HTML is the standard language for creating Web
pages. a)scripting b)programming c)styling d)markup
8.Which element/tag defines a paragraph?
a)<p> b)<pre> c)<panel> d)None of the
above 9.Which tag contains the meta information about the HTML page?
a)<html> b)<title> c)<head> d)<body>
10.Who invented HTML?
a)Dave Raggett b)Tim Berners-Lee c)Denis Ritchie d)All of the
above 11.Nested HTML Elements are allowed in HTML?
a)Yes b)No
12. Is HTML a case
sensitive? a)Yes b)No
13. HTML headings are defined with the tags.
a)<head1> to <head6>. b)<p1> to <p6>
c)<h1> to <h6>. d)<h1> to <h3>
14.Which tag is used to define preformatted text?
a)<pf>. b)<p>. c)<pre>. d)<code>
15.Which of the following tag aligns the paragraph centered horizontally on browser window?
a) <p align=”center”>
b) <p style=”align:center”>
c)<p style=”para-align:center”>
d)Both a & b
UNIT-III
1. Which one of the following is a type of lists that HTML supports?
a) Ordered lists. b)Unordered lists. c)Description lists. d)All of the above
2. By which tag, an unordered list is represented?
a)<u> b) <I> c)<ul> d)
<ol>
3. By which tag, an ordered list is represented?
a)<u>. b)<I>. c). <ul>.
d)<ol>
What is the default start of item marker in ordered list?
a) 1 b) i c)I d)None of the above
4 What is the default item marker in unordered lists of
HTML?
a) Circle b)Marker c)disc d)None of the above
5. Which one of the following tag is used for creating a
hyperlink? a)<link>. b)<hyperlink>. c)<a>. d)
<title>
6.Which attribute is used to give destination address in <a> tag of HTML?
a) href b)type c)address. d) link
7. Which amongst the following tags is used to mark the beginning of a paragraph in
HTML? a)<a>. b)<br>. c)<hr>. d)<p>
8.Which amongst the following is the correct HTML code for creating a bulleted
list? a)<list> .. b)<blist> c)<ol> d)<ul>
9.Which among the following tag is used for making text italic in HTML?
a)<italic> b)<i> c)<I> d)None of the above
10.Which of the following gives a text description of the image if it is not available?
a) alt b) title c) src d)
height 11.Which tag is used to insert an image in Web page?
a)<a> . b)<table> c)<img> d)<p>
Ans. 3
12. The correct HTML code for inserting an image is
a)<img href=”image.gif”> b)<img> image.gif</gif>
c)<img src = “image.gif”>. d)<image src = “image.gif”
> Ans. 3
13. src attribute used with <img> tag stands for
a)screen b)screen resolution count c)source
d)structure Ans. 3
14. attribute is used to specify the location of an image
file. a)alt b)src c)align d)name
15.Which is not a valid value in the align attribute of <img> tag?
a)top b)center c)bottom d)right
Ans. 2
UNIT-IV
1.Each cell of the table can be represented by using
a) <tr> b) <td> c) <th> d)
<thead> 2 For heading we can use
a) <td> b) <tr> c) <thead> d) <th>
3. Headings of table lies inside
a) <thead> b) <tfoot> c) <th> d) <tbody>
4. Which of the following is not the element associated with HTML table layout?
a) size b) spanning c) alignment d) color
5. Which of the following element is not associated with a class attribute?
a) Row b) <thead> c) Column cell d) Rows
6. For adding caption to the table we use
a) <caption> b) <thead> c) <th> d) <tr>
7.7. border-spacing is given in
a) pixels b) cm c) mm d) inch
8. Borders can’t be applied on
a) <th> b) <td> c) <tr> d) <thead>
9. Which attribute defines numbers of columns in a group?
a) width=multi-length[CN]. b) span=number[CN].
c) scope=scope-name[CN]. d) headers=idrefs[CS].
10. Which of the following does not specify a column width?
a) Fixed b) Percentage c) Proportional d) Pixels
11. In HTML tables the gap between the two cells of same tables are known as
a) Cell spacing b) Cell difference c) Cell padding d) All of
above 12Which of these tags belong to table?
a)<thead>,<body>,<tr> b)<table>,<head>,<tfoot>
c)<table>,<tr>,<td>
d)<table>,<tr>,<tt
> Ans. 3
13. Which of the following tags gives a caption to the table?
a)<caption> b)<head> c)<heading> d)None of
these Ans. 1
14. Which of the following is used to specify the beginning of a table’s
row? a)<td> b)<tr>. c)<row>. d)<tt>
Ans. 2
15. Which tag is used to add columns in the tables?
a)<colspan> b)<td> c)<tr> d)None of
these Ans. 2
UNIT-V
1. What is the default type of ‘type’ attribute of <input> element?
a) Text b) Password c) Numerals d) Special Characters
2. Which of the following is a new input attribute introduce by HTML5?
a) text b) checkbox controls c) submit buttons d) date
3. Which attribute is not used on new forms?
a) size b) text c) name d) maxlength
4 Which of the following is not used with password attribute?
a) name b) size c) maxlength d) min
5.Which element is used to create multi-line text input?
a) text b) textarea c) submit d) radio button
6.9What is the use of iframe in HTML?
a. to display a web page within a web page.
b. to display a web page with animation effect
c. to display a web page without browser.
d. All of the Above.
7.How to create a checkbox in HTML Form?
a)<input type="text">. b)<input
type="textarea"> c)<input type="checkbox">. d)<input
type="button"> 8.Which attribute is not essential under
<iframe>?
a)frameborder b)width c)height
d)src 9.Which works similar to <b> element?
a)<blockquote>. . . b)<strong>. c)<em>.
d)<i> 10.What is used for specifying an email to be
sent?
a)mailto: b)target c)id d)href
11.Which of the following is not the parameter for email link?
a)body b)bcc c)cc d)#
12.Which one of the following is not the value of the target
attribute? a)_blank b)_top c)_self
d)_empty 13.Which of the following is not the
value for frame attribute? a)above b)void c)none
d)box 15.Which one of the
following is a form element?
a)text box. b)radio button. c)submit button. d)All of these.
QUESTION BANK

UNIT-I

5 MARKS
1. Explain about basics of HTML?
2. Explain about web browser?
3. Discuss about the is HTML and give example?

10 MARKS
1. Discuss about the basics of HTML?
2. Briefly explain about understanding tags in HTML?
3. Discuss about the web browser and internet?

UNIT-II

5 MARKS

1. Expalin about the tags of document structure?


2. what is heading and paragraph?

10 MARKS

1. Briefly Explain about the tags of document structure(head,body,tags)?


2. Discuss about the font style element(bold,italic,font,strong,strike,bigtags)?
3. Discuss about block level text elements?

UNIT-III
5 MARKS
1. Expalin about the list tags?
2. Expalin about the ordered and unordered list?
3. What is mean by marquee tags?

10 MARKS
1. Brefly explains about the types of list?
2. Discuss about the nesting list in give example?
3. Discuss about the image tags in HTML?
4. Brefly explains about the creating hyperlinks?
UNIT-IV
5 MARKS

1. Explain about the tables in HTML?


2. Expalin about the
rowspan? 3, Expalin about the
colspan?
4. Discuss about the cellspading?

10 MARKS

1. Briefly Explain about the create tables in HTML?


2. Discuss about the table elements?
3. Discuss about the table and alignment?

UNIT-V

5 MARKS
1. Explain about the forms in HTML?
2. Explain about the frame in HTML?
3. Explain about the target links In frame?

10 MARKS
1. Explain about the forms & frame set in HTML?
2. Berfily explains about the input, text area and select option?
SAKTHIKAILASH WOEMNS COLLEGE ,DHARMAPURI
DEPARTMENT OF COMPUTER SCIENCE
MODEL QUESTIONS
PART-A
I ANSWER ALL THE QUESTIONS (15*1=15)
1. is an application software that allows us to view and explore information on
the web.
a) HTML b)web Browser. c) IDEs
d)Libraries 2.HTML files are saved by default with the
extension?
a).html b).h c).ht d)None of the above
3.We enclose HTML tags within?
a){ }. b)<>. c)! ! d)None of the above
4.What is the effect of the <b> tag?
a)It converts the text within it to bold font. b)It is used to write black-colored font.
c)It is used to change the font size. d)None of the above.
5. Which of the following is correct about HTML?
a)HTML uses User Defined Tags. b)HTML uses tags defined within the
language. c)Both A and B. d)None of the above.
6. Which attribute is not used on new forms?
a) size b) text c) name d) maxlength
7. Which of the following is not used with password attribute?
a) name b) size c) maxlength d)
min 8.Which element is used to create multi-line text input?
a) text b) textarea c) submit d) radio button
9.What is the use of iframe in HTML?
a. to display a web page within a web page.
b. to display a web page with animation effect
c. to display a web page without browser.
10. Which one of the following is not the value of the target attribute?
a)_blank b)_top c)_self d)_empty
11.Which of the following is not the value for frame attribute?
a)above b)void c)none d)box
12.Which one of the following is a form element?
a)text box. b)radio button. c)submit button. d)All of
these. 13.HTML is the standard language for creating Web pages.
a)scripting b)programming c)styling
d)markup 14.Which element/tag defines a
paragraph?
a)<p> b)<pre> c)<panel> d)None of the above
15. 2 For heading we can use
a) <td> b) <tr> c) <thead> d) <th>
PART-B
II ANSWER ANY QUESTIONS (2*5=10)
1. Explain about basics of HTML?
2. Explain about the tags of document structure?
3. Explain about the ordered and unordered
list? 4, Expalin about the colspan?
5. Explain about the target links In frame?

PART-C
III ANSWER ALL THE QUESTIONS (5*10=50)
1. A)Briefly explain about understanding tags in HTML?(OR)
B) Discuss about the web browser and internet?
2. A)Discuss about the font style element(bold,italic,font,strong,strike,bigtags)?(OR)
B) Discuss about block level text elements?
3.A)Brefly explains about the types of list?(OR)
B)Discuss about the nesting list in give example?
4.A)Briefly Explain about the create tables in HTML?(OR)
B) Discuss about the table elements?
5.A)Explain about the forms & frame set in HTML?(OR)
B) Berfily explains about the input, text area and select option?

You might also like