Scribd
Upload
37 views

HTML Unit1&2 Notes

Uploaded by

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

HTML Unit1&2 Notes

Uploaded by

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

UNIT 1

1) HTML stands for?


A. Hyper Text MarkupLanguage
B. High Text MarkupLanguage
C. Hyper Tabular MarkupLanguage
D. None ofthese

2) Which of the following tag is used to mark a begining of paragraph ?


A. <TD>
B. <br>
C. <P>
D. <TR>

3) From which tag descriptive list starts ?


A. <LL>
B. <DD>
C. <DL>
D. <DS>

4) Correct HTML tag for the largest heading is


A. <head>
B. <h6>
C. <heading>
D. <h1>

5) In HTML tables, gap between two cells of same table are known as.
A. Cell Spacing
B. Cell Padding
C. Cell Difference
D. None of the above

6) Markup tags tell the web browser


A. How to organize the page
B. How to display the page
C. How to display message box on page
D. None of these

7) Web pages starts with which of the following tag?


A. <Body>
B. <Title>
C. <HTML>
D. <Form>

8) Which of the following is a container?


A. <SELECT>
B. <BODY>
C. <INPUT>
D. Both (a) and(b)
9) The attribute, which define the relationship between current document and HREF'ed
URL is
A. REL
B. URL
C. REV
D. all ofthese

10) <DT> tag is designed to fit a single line of our web page but <DD> tag will accept a
A. line of text
B. full paragraph
C. word
D. request

11) Correct HTML to left align the content inside a table cell is
A. <tdleft>
B. <td raligh = "left">
C. <td align ="left">
D. <td leftalign>

12) The tag used to create a new list item and also include a hyperlink is
A. <LI>
B. <DL>
C. <DD>
D. <UL>

Understanding Level
13) How can you open a link in a new browser window?
A. < a href = "url" target ="new">
B. <a href = "url" target="_blank">
C. <a href = "url".new>
D. <a href = "url" target="open">

14) Which of the tag is used to create a number list?


A. <LI>
B. <OL>
C. <LI> and<OL>
D. None ofthese

15) What i s the correct HTML for adding a background color?


A. <background>yellow<Background>
B. <body color ="yellow">
C. <body bgcolor ="yellow">
D. <body bg ="yellow">

16) Main container for <TR>, <TD> and <TH> is


A. <TABLE>
B. <GROUP>
C. <DATA>
D. All ofthese

17) The body tag usually used after


A. Title tag
B. HEAD tag
C. EM tag
D. FORM tag

18) How can you make an e-mail link?


A. <mail href+"xxx@y.com">
B. <a href ="mail to:xxx@y.com">
C. <a href ="xxx@y.com">
D. Both (b) and(c)

19) Symbol used at the beginning of the HREF text is


A. #
B. $
C. &
D. ^

20) The web standard allows programmers on many different computer platforms to
dispersed format and display the information server. These programs are called
A. Web Browsers
B. HTML
C. Internet Explorer
D. None of these

21) HTML program is saved using extension.


A. .htnl
B. .htl
C. .hml
D. .html

22) What does vlink attribute mean?


A. visitedlink
B. virtuallink
C. very good link
D. activelink

23) Type of tag used for inserting an image in a web document?


A. <imp>
B. <img>
C. <src>
D. <images>

24) src attribute for an image specifies what?


A. Text for image
B. URL for an image
C. Alternate image
D. Both A & B

25) Which attribute is used with <img> tag to display the text if image could not load in
browser?
A. Description
B. Name
C. alt
D. id

Long Questions
1) What is HTML? What are the Features of HTML?
HTML is an acronym which stands for Hyper Text Markup Language.
Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it,
is a hypertext. Every time when you click on a word which brings you to a new
webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language that is used make
text more interactive and dynamic. It can turn a text into images, tables, links etc.
FEATURES:
 It is a very easy and simple language. It can be easily understood and modified.
 It is very easy to make effective presentation with HTML because it has a lot of
formattingtags.
 It is a markup language so it provides a flexible way to design web pages along with
thetext.
 It facilitates programmers to add link on the web pages (by html anchor tag), so it
enhancesthe interest of browsing of the user.
 It is platform-independent because it can be displayed on any platform like
Windows,Linux and Macintosh etc.
 It facilitates the programmer to add Graphics, Videos, and Sound to the web pages
whichmakes it more attractive and interactive.

2) Explain Structure of HTML Document with an example.


The Basic structure of the HTML page is given below. It contains some elements like
head, title, body, etc.These elements are used to build the blocks of web pages.HTML is
case-insensitive
3) What is an Attribute? Explain common attributes of Tags
An attribute is a property name used to pro
provide
vide supplementary information about HTML
elements. Some common examples of HTML attributes are id, class, align, etc. Many
attributes are defined globally and are applied to any element, whereas we use some of
them only for specific HTML elements.
You cann define an attribute as the characteristics of any HTML tag that needs to be placed
within the opening tag.
HTML attributes consist of two parts:

1. a name and
2. a value
Examples:
Bgcolor RGB: it Specifies a background color for a document
Align left, right, center:- Deprecated − Specifies the alignment of the horizontal rule.

4) Explain the <html> and <head> tag with example.

<HTML> Tag
It is the root of the html document which is used to specify that the document is
html. This tag tells the browser that this is an HTML document.

The <HTML> tag is the container for all other HTML elements (except for the
<!DOCTYPE> tag). Practically <HTML> is the first tag in an HTML page and
</HTML> is the last tag.
<HEAD> Tag
It contains the head of an HTML document, which holds informa
information
tion about the document
such as its title. Once we opened this tag then we must close it as </HEAD>.
Eg:
<html>
<head>
<title> welcome </title>
</head>
<body>
<h1>The example</h1>
<p> welcome to HTML </p>
</body>
</html>

5) Explain <body> tag with its attributes.

<BODY> Tag
The HTML <BODY> tag is used for indicating the main
content section of the HTML document. This tag defines
the document's body. It contains all the contents of an
HTML document such as text, hyperlinks, images, tables,
lists, etc.
<BODY> tag is opened, it must be closed </BODY> before the closing of
</HTML> tag.

6) How do you create list in HTML? Explain with example.


HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain
1. <UL> − An unordered list. This will list items using plain bullets.
2. <OL> − An ordered list. This will use different schemes of numbers to list your
items.
3. <DL> − A definition list. This arranges your items in the same way as they
are arranged in a dictionary.
Ex: <UL type=circle>
<LI>Coffee</LI>
<LI>Tea</LI>
<LI>Milk</LI>
</UL>
<OL type=”1”>
<LI>Coffee</LI>
<LI>Tea</LI>
<LI>Milk</LI>
</OL>
<DL>
<DT>Coffee</DT>
<DD>- black hot drink</DD>
<DT>Milk</D<DT> Milk </DT>
<DD>- white cold drink</DD>
</DL>

7) Explain how to work with images in HTML. Explain with example.


Images are very important to beautify as well as to depict many concepts on your web
page.. This is done in HTML using the <img> element
Syntax:
<img src="image URL" attr_name="attr_value"...more attributes >

Attributes of <img> tag:

Following are the attributes for <img> tag.


 width: sets width of the image. This will have a value like 10 or20%etc.
 height: sets height of the image. This will have a value like 10 or 20%etc.
 border: sets a border around the image. This will have a value like 1 or 2etc.
 src: specifies URL of the image file.
alt: this is an alternate text which will be displayed if image is missing.
 align: this lets horizontal alignment of the image and takes value either left, right or
center.
 name: name of the image with in the document.
 id: id of the image with in the document.
 style: this will be used if you are using CSS.
 title: specifies a text title. The browser, perhaps flashing the title when the mouse
passes over the link.

Example:
<html>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"
width="100" height="100" alt="Flower" border="5"
align="center" >
</body>
</ht

ml>
8) How do you create Hyperlink in HTML. Explain with example
The <A> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <A> element is the href attribute, which
indicates the link's destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Ex: <a href="https://www.w3schools.com">Visit W3Schools.com!</a>

9) How to define table and what are the different attributes associate with it
with example explain.
An HTML table is defined with the <TABLE> tag. Each table row is defined
with the <TR>tag. A table header is defined with the <TH> tag. By default, table
headings are bold and centered. A table data/cell is defined with the <TD>tag.

<TH> Tag
The <TH> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

 Header cells - contains header information (created with the <TH> element)
 Standard cells - contains data (created with the <TD>

element) the text in <TH> elements is bold and centered by

default.

 The <TR> tag defines a row in an HTML table.


 A <TR> element contains one or more <TH> or <TD> elements.

<TD> Tag
The <TD> tag defines a standard cell in an HTML table.An HTML table has two
kinds of cells:
 Header cells - contains header information (created with the <TH> element)
 Standard cells - contains data (created with the <TD> element)The text in
<TH> elements is bold and centered by default. The text in <TD> elements
is regular and left-aligned by default.

10) Explain how to merge rows and columns in table HTML with example.
To merge table columns in HTML use the colspan attribute in <td> tag. With this, merge cells with each other
<!DOCTYPE html>
<html>

<head>
</head>
<body style="text-align:center">

<h1 style="color:green;">
welcome
</h1>

<h2>How to merge table cells in HTML?</h2>

<table align="center">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Akku</td>
<td rowspan="2">44</td>
</tr>
<tr>
<td>fahad</td>
</tr>
</table>
</body>
</html>
11. Explain Absolute and Relative URL with example.

Linking Same Page and different pages using Relative and


Absolute Pathname
Absolute URLs vs. Relative URLs
· absolute URL (a full web address) in the href attribute.
· A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part)
Eg:
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

12. Explain preformatted text tag and Horizontal


tags with example.
The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces
and line breaks. The text will be displayed exactly as written in the HTML source code.
<hr> tag is used to draw a horizontal rule.
Eg:
<!DOCTYPE html>
<html>
<body>

<h1>The pre element</h1>


<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<hr>
</body>
</html>
UNIT II
1. Which one of the following is a form element?

A. text box.
B. radio button.
C. submit button.
D. All of these.

2. Which of the following tag is used for drop down list?

A. <select>
B. <text>
C. <textarea>
D. <dropdown>
3. Which HTML element is used to define multi-line input field?
A. <textarea>
B. <text>
C. <blockarea>
D. <textfields>
4. For defining a submit button which tag is used?
A. <button>
B. <submit button>
C. <submit>
D. <action submit>
5. When form data contains sensitive or personal information then which
method is more preferable?
A. Get method
B. Post method
C. Host method
D. Put method
6. In HTML form <input type=”text”> is used for?
A. One line text
B. Block of text
C. Paragraph
D. None
7. For creating a drop down list in HTML forms which element is suitable?
A. <list>
B. <dropdown>
C. <select>
D. All of the above
8. A ----------- tag defines a scale for the measurement of data within a
specified range.
A. Meter tag
B. Progress tag
C. Measure
D. Pre
9. <legend> is used to assign a caption to a set of form fields as defined by a
……………. element.
A) fieldset
B) caption
C) fieldgroup
D) assign
10. What is the default type of ‘type’ attribute of <input> element?
A. Text
B. Password
C. Numerals
D. Special Characters
11.Which attribute defines the file-select field?
A. file
B. checkbox
C. button
D. text
12.Which of the following is not used with password attribute?
A. name
B. size
C. maxlength
D. min
13.Which attribute is not used for the radio type?
A. name
B. value
C. checked
D. selected
14.Which attribute is used with <select> element?
A. multiple
B. selected
C. name
D. value
15. What is the purpose of HTML forms?
A. To display the content of an email.
B. To display animation effect.
C. To collect user input.
D. None of the above
The default value for the “position” attribute is _________.
A. fixed
B. absolute
C. inherit
D. relative
16.Choose the correct option
A. All of these
B. HTML form elements are defined inside form tag
C. HTML form elements are used for taking user input
D. HTML form elements can be of different types
17.Default method while submitting a form is
A. Set method
B. Post method
C. Get method
D. Put method
18.Action attribute in HTML forms specifies that
A. Which HTTP method is used
B. Where to submit form
C. Which action is going on
D. The auto completion
19.What is the default type of ‘type’ attribute of <input> element?
A. Special characters
B. Password
C. Numerals
D. Text
20.Which tag is used for grouping form controls?
A. <select>
B. <legend>
C. <label>
D. <fieldset>
21.How more than one option can be selected in drop down?

A. Use of multiple attribute inside <option> tag.


B. Use of multiple attribute inside <select> tag.
C. use of multiple attribute inside <text> tag.
D. It is not possible to select more than one option in drop down.

22.Which of the following CSS property adds padding to the top of an


element?
A. padding-top
B. padding-height
C. top
D. padding-left

23.Which of the following property sets the amount of spacing between


letters?
A. Space
B. line-height
C. letter-spacing
D. none of the mentioned

24.Which of the following measurement defines a measurement as a


percentage?
A. %
B. Cm
C. Em
D. in

25.Which of the following property sets the font size of text


A. text-size
B. font-size
C. size
D. text
Long Answers

1. Explain CSS fixed Positioning with suitable example.


Fixed: Any HTML element with position: fixed property will be positioned
relative to the viewport. An element with fixed positioning allows it to remain
at the same position even we scroll the page. We can set the position of the
element using the top, right, bottom, left.
When we position an element as Fixed, it always relative to its browser
window only. Additionally, it will not scroll with the document.
<html>
<head>
<style>
div.first {
border:5px solid #4FFFA1; width:200px;
}
div.second {
width:200px;
border:5px solid #CCCCCC;
}
div.third {
position: fixed; top: 0px; right:0px;
width:200px;
border:5px solid #ee3e64;
}
</style>
</head>
<body>
<divclass=”first”>
One<br> Two<br>Thre<br> Four<br> Five<br>
</div>
<div class=”second”>
Six<br> Seven<br>
Eight<br> Nine<br>
Ten<br>
</div>
<div class=”third”>Fix Here</div>
</body>
</html>

2. Explain CSS absolute Positioning with suitable example.


Absolute: An element with position: absolute will be positioned with respect to
its parent. The positioning of this element does not depend upon its siblings or
the elements which are at the same level.
When we position an element as Absolute, that element is is completely
removed from the document`s normal flow. In Absolute position, the position is
set through some combination of left, right, top and bottom properties.
<html>
<head>
<style>
kcdiv.first {
border:5px solid #4FFFA1; width:200px;
}
div.second {
width:200px;
border:5px solid #CCCCCC;
}
div.third {
position: absolute; top: 10px;
right:10px; width:200px;
border:5px solid #ee3e64;
}
</style>
</head>
<body>
<div class=”first”>First Div</div>
<div class=”second”>Second Div</div>
<div class=”third”>Third Div</div>

</body>
</html>

3. What is text input control? Explain its types.


Text Input Controls:
There are actually three types of text input used on forms:
· Single-line text input controls: Used for items that require only one
line of user input, such as search boxes or names. They are created using the
<input>element.
· Password input controls: <input> elements of type password provide
a way for the user to securely enter a password. The element is presented as a
one-line plain text editor control in which the text is obscured so that it cannot be
read,
· Multi-line text input controls: Used when the user is required to
give details that may be longer than a single sentence. Multi-line input controls
are created with the <textarea> element.

Single-line text input controls:


Single-line text input controls are created using an <input> element whose type
attribute has a value of text.

4. Explain buttons in html form with example ?


Button: This creates a button that is used to trigger a client-side script when the
user clicks that button.
Example:
<html>
<body>
<form action="http://www.example.com/test.asp" method="get">
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button"/>
</form>
</body>
</html>

5. Explain the difference between checkbox and radio buttons?


Checkboxes are used when more than one option is required to be selected.
They are created using <input> tag as shown below.
Following is the list of important checkbox attributes:
· type: Indicates that you want to create acheckbox.
· name: Name of the control.
· value: The value that will be used if the checkbox is selected. More
than one checkbox should share the same name only if you want to allow users
to select several items from the same list.
· checked: Indicates that when the page loads, the checkbox should
beselected.

Radio Buttons are used when only one option is required to be selected. They are
created using
<input> tag as illustrated below.
Following is the list of important radiobox attributes:
· type: Indicates that you want to create a radiobox.
· name: Name of the control.
· value: Used to indicate the value that will be sent to the server if this
option isselected.
checked: Indicates that this option should be selected by default

6. Explain progress and meter tag?


Progress tag
This tag is used to represent a progress bar on the webpage in order to show the
progress of a task. Some uses of the progress bar include showing the file
upload/download progress on a website. The progress bar is created using the
following syntax.
<progress>....</progress>
The progress tag can also be styled using
Attributes: This tag accepts two attributes as mentioned below.
· max: It represents the total work is to be done for completing a task.
· value: It represents the amount of work that is already completed.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Progress tag</title>
</head>
<body>
<p>Normal Progress bar</p>
<progress></progress>
<p>Progress bar with max and value attributes</p>
<progress value="50" max="200"></progress>
<p>Progress bar with CSS</p>
<progress style="width:200px; height:40px;" ></progress>
</body>
</html>
Meter tag
A Meter tag is also known as a gauge and basically defines a scale for the
measurement of data within a specified range. The uses of a meter tag may
include the fuel left in the tank, the temperature of an object, etc. The meter tag is
written as follows.
Syntax:

<meter>....</meter>
Attributes: This tag accepts many attributes which are listed below.
· form: It defines one or more forms that the meter tag belongs to.
· max: It is used to specify the maximum value of a range.
· min: It is used to specify the minimum value of a range.
· high: It is used to specify the range considered to be a high value.
· low: It is used to specify the range value that is considered to below.
· optimum: It is used to specify the optimum value for the range.
· value: It is used to specify the required or actual value of the range.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Meter tag</title>
</head>
<body>
<p>Normal Meter</p>
<meter value="0.6"></meter>
<p>Meter tag with attributes</p>
<meter value="50" max="200" min="20"></meter>
<p>Meter tag with CSS</p>
<meter value="0.4" style="width:200px; height:40px;"></meter>
</body>
</html>

7. Explain with example what is <pre> tag


The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces
and line breaks. The text will be displayed exactly as written in the HTML source code.
Eg:
<!DOCTYPE html>
<html>
<body>

<h1>The pre element</h1>


<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>

8. What is form tag? List out various form controls

<FORM> Tag

The HTML <FORM> element defines a form that is used to collect user
input:

Form elements are different types of input elements,


There are different types of form controls that you can use to collect data from a
visitor to your site.
Text inputcontrols
Buttons
Checkboxes and radiobuttons
Selectboxes
File selectboxes
Hidden controls
Submit and reset button

9. Explain Universal and Grouping selectors with example?


The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Eg:
*{
text-align: center;
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>


<p id="para1">Me too!</p>
<p>And me!</p>
<h2> here also </h2>

</body>
</html>
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions)
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}

10.Explain with example what is select box control?


Select box Control:
Drop Down Box is used when we have many options available to be selected but only one
or two will be selected.
Following is the list of important attributes of <select>:
 name: This is the name for the control.
 size: This can be used to present a scrolling listbox.
 multiple: If set to "multiple" then allows a user to select multiple items from
themenu. Following is the list of important attributes of<option>:
 value: The value that is sent to the server if this option isselected.
 selected: Specifies that this option should be the initially selected value when the
page loads.
 label: An alternative way of labeling options.

Example:
<html>
<body>
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>

11.Explain various methods to include style sheets in a page?


CSS can be added to HTML in the following ways:
§ Inline - using the style attribute in HTML elements

Example:
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

§ Internal - using the <style>element in the <head> section


<html>
<head>
<style>
body {
background-color:pink;
}
p{
color:blue;
}

</style>
</head>
<body>
I am Jahnavi. This is Internal Style sheet
<p> Cascading Style Sheets </p>
</body>

</html>

§ External - using an external CSS file

Example:
/* This is an external style sheet file. Save this file as
mystyle.css*/ hr

{
color: yellow;
}

h2
{
color: red;
text-align: left; font-size: 8pt;

12.Explain Horizontal rules with custom CSS code?


By default, the hr tag is just a thin straight line. It doesn’t possess any special properties, but
you can make it look more appealing with some custom CSS code.
The hr HTML tag represents a break between paragraphs and looks like a straight line. It has
a display: block property by default which means the element will span the full width of
the container.

That being said you’ll need to write custom CSS in order to change its appearance. The
default styling for the hr tag is pretty much similar across different browsers and consists of
CSS rules that style the border of the element.

hr {
border-style: inset;
border-width: 1px;
}

Styling Horizontal rule using border


One of the ways you can modify the appearance of the horizontal rule element is to change
the border CSS rule, which includes the border-style, border-width, border-
color and border-radius properties.

You can do that in just one line of CSS:

hr {

border: 1px dashed cornflowerblue;

You might also like