Open-Source Internship opportunity by OpenGenus for programmers. Apply now.
HTML is one of the basic technologies used in Web Development. Web Development is a vast field with immense future scope and is thus one of the most popular and sought after domain in Computer Science. This article will cover everything you need to know for your HTML interview.
Table of Content
- Multiple Choice Questions
- Descriptive Questions
- Programming questions
Multiple Choice Questions
1. What is the font-size of the h1 heading tag?
a. 3.5 em
b. 2.17 em
c. 2 em
d. 1.5 em
Ans: Option c. 2em
Explanation: The H1 tag has the largest default font size of 2em or 32px. It is used to define the main heading of the article.
2. How many heading tags are there in HTML5?
a. 2
b. 3
c. 5
d. 6
Ans: Option d. 6
Explanation: HTML defines six levels of headings. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
3. What is the effect of the < b> tag?
a. It converts the text within in 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.
Ans: Option a. It converts the text within in to bold font.
Explanation: < b> is used to convert the text within it to bold font. The < b> tag specifies bold text without any extra importance.
4. Which of the following attributes is used to add link to < a> element?
a. link
b. ref
c. href
d. newref
Ans: Option c. href
Explanation: For < a> and < area> elements, the href attribute specifies the URL of the page the link goes to. For < link> elements, the href attribute specifies the location (URL) of the external resource (most often a style sheet file).
5. What are the types of unordered or bulleted list in HTML?
a. disc, square, triangle
b. polygon, triangle, circle
c. disc, circle, square
d. All of the above
Ans: Option c. disc, circle, square
Explanation: The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list: disc, circle, square, none
6. What is the purpose of using div tags in HTML?
a. For creating Different styles.
b. For creating different sections.
c. For adding headings.
d. For adding titles.
Ans: Option b. For creating different sections.
Explanation: The div tag is known as Division tag. It defines a division or a section in an HTML document.
7. Which of the following attributes is used to open an hyperlink in new tab?
a. tab
b. href
c. target
d. ref
Ans: Option c. target
Explanation: target="_blank" is used to open a hyperlink in a new tab.
8. Which tag is used for creating a drop-down selection list?
a. select tag
b. option tag
c. dropdown tag
d. list tag
Ans: Option a. select tag
Explanation: The < select> element is used to create a drop-down list. The < select> tag contains < option> tag to display the available option of drop-down list.
9. Which of the following elements can be used in HTML to create a table?
a. table , tbody , trow
b. table , tb , trow
c. table , tbody , tr
d. All of the above
Ans: Option c. table , tbody , tr
Explanation: The < table> tag defines an HTML table. An HTML table consists of one < table> element and one or more < tr>, < th>, and < td> elements.
10. Which HTML element is used for Important text?
a. box
b. important
c. strong
d. i
Ans: Option b. strong
Explanation: The HTML < strong> element defines text with strong importance.
11. Which among the following is a correct way to open a Hyperlink in new tab?
a. < newtab>
b. target = newtab
c. target = “_blank”
d. None of the above
Ans: Option c. target = “_blank”
Explanation: To open hyperlink in a new tab, add a target="_blank" attribute to your links (anchor tags).
12. Apart from i tag, which of the following tag is used to render a text in italics?
a. italic
b. em
c. strong
d. b
Ans: Option b. em
Explanation: To italicize the text in HTML, use either the em tag or the i (italics) tag. Both of these tags will italicize the text, but the em tag additionally indicates that the text has stress emphasis when read.
13. What is the default margin of the body element?
a. 10px
b. 8px
c. 12px
d. 6px
Ans: Option b. 8px
Explanation: The body element has a default 8px margin indicated by the bar on top.
14. 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.
Ans: Option b. HTML uses tags defined within the language.
Explanation: XML (Extensible markup language) supports user defined tags while HTML uses pre-defined tags.
15. How to display preformatted text in HTML?
a. p
b. pre
c. hr
d. Both A and B.
Ans: Option b. pre
Explanation: 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.
16. Which attribute is used to provide a unique name to an HTML element?
a. id
b. class
c. type
d. name
Ans: Option a. id
Explanation: HTML id Attribute is used to provide a unique identification to an element.
17. Which HTML element is used to define description data?
a. ol
b. dt
c. dl
d. dd
Ans: Option d. dd
Explanation: The < dd> tag is used to describe a term/name in a description list. The < dd> tag is used in conjunction with < dl> (defines a description list) and < dt> (defines terms/names).
18. How are quotations defined in HTML?
a. quote
b. block
c. blockquote
d. None of the above
Ans: Option c. blockquote
Explanation: The blockquote element is used to indicate the quotation of a large section of text from another source.
19. What is the correct syntax to write an HTML comment?
a. <! --Comment-->
b. //Comment
c. #Comment
d. /Comment/
Ans: Option a. <! --Comment-->
Explanation: In HTML, a comment is text enclosed within < ! ╌ ╌> tags. This syntax tells the browser that they are comments and should not be rendered on the front end.
20. Which HTML element is used for YouTube videos?
a. samp
b. small
c. frame
d. iframe
Ans: Option d. iframe
Explanation: We can host our videos through YouTube and can easily embed them into our website. < iframe> tag will be used for YouTube videos.
DESCRIPTIVE QUESTIONS
1. What is HTML?
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is used to structure the website and is therefore used for Web Development.
2. What are HTML tags?
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content.
3. What are HTML elements?
An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag, close tag and content inserted between them.
4. Are the HTML tags and elements the same thing?
No. An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML element in an HTML document. An HTML element is defined by a start tag, some content, and an end tag. For example, <h1>Heading 1</h1> is a HTML element but just <h1> is a starting tag and </h1> is a closing tag.
5. What are HTML Entities?
Some characters are reserved in HTML and they have special meaning when used in HTML document. For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag.
Examples:
| Symbol | Description | Entity Name | Number Code |
|---|---|---|---|
| " | quotation mark | " |
" |
| ' | apostrophe | ' |
' |
| & | ampersand | & |
& |
| < | less-than | < |
< |
| > | greater-than | > |
> |
| " " | Space | |
  |
6. What are Attributes in HTML?
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. The value is what you want the value of the property to be set and always put within quotations.
Example:
<p align = "left">This is left aligned</p>
Here, p is the paragraph element and align is the name of the attribute with value left.
7. Which tags are used to construct a table in HTML?
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using the table element, with the help of other related elements.
| Tag | Description |
|---|---|
<table> |
It defines a table. |
<tr> |
It defines a row in a table. |
<th> |
It defines a header cell in a table. |
<td> |
It defines a cell in a table. |
<tbody> |
It is used to group the body content in a table. |
<thead> |
It is used to group the header content in a table. |
<tfooter> |
It is used to group the footer content in a table. |
8. What are the different types of lists available in HTML?
Ordered list - The ordered list displays elements in numbered format. It is represented by <ol> tag.
Unordered list - The unordered list displays elements in bulleted format. It is represented by <ul> tag.
Description list - The definition list displays elements in definition form like in dictionary. The <dl>, <dt> and <dd> tags are used to define description list.
9. How to create a Hyperlink in HTML?
The HTML provides an anchor tag to create a hyperlink that links one page to another page. These tags can appear in any of the following ways:
- Unvisited link – It is displayed, underlined and blue.
- Visited link – It is displayed, underlined and purple.
- Active link – It is displayed, underlined and red.
The syntax of Hyperlink in HTML is:
<a href=”#” target=”link”></a>
Where ‘href’ is an attribute of the anchor tag used to identify the sections in a document, the ‘link’ is defined in the target attribute, which is to be linked.
10. How to insert an image in HTML?
img tag is used to add an image in a web page.
Images are not inserted into a web page basically they are linked to web pages. The img tag helps to create a holding space for the referenced image.
The img tag is normally empty, it has attributes only, and does not have a closing tag.
<img> tag has two required parameters:
src – The path to the image
alt – An alternate text for the image
11. How do we add CSS to HTML?
There are three ways of inserting a style sheet:
External CSS - A CSS file is created which is then imported to HTML. External styles are defined within the <link> element, inside the head section of an HTML page.
<link rel="stylesheet" href="mystyle.css">
Internal CSS - The CSS style is contained within the HTML file. Internal styles are defined within the <style> element, inside the head section of an HTML page.
<head>
<style>
body {
background-color: yellow;
}
</style>
</head>
Inline CSS - This is used when a specific element needs to be styled. An inline style may be used to apply a unique style for a single element. Inline styles are defined within the "style" attribute of the relevant element:
<p style="color:red;">This is a paragraph.</p>
12. What is semantic HTML?
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics or meaning of the content. For example: In semantic HTML <b></b> tag is not used for bold statement as well as <i></i> tag is used for italic. Instead of these we use <strong></strong> and <em></em> tags. A semantic element clearly describes its meaning to both the browser and the developer.
13. What is the Use of Comments in HTML?
Comments are used in an HTML document to make important notes and help developers mention any modification to be incorporated afterward. They are not displayed in the browser when the code is executed. A comment is always written in between the ‘—‘ symbol at the beginning and end of the angular brackets. This is used to create both single-line and multi-line comments.
Syntax: <!-- Comment -->
Comments can also be created using the comment tag.
<comment> Can create single-line and multi-line comments</comment>
14. What is HTML5?
HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces(API) and Document Object Model(DOM).
15. What is doctype in HTML?
A doctype or document type declaration is an instruction that tells the web browser about the markup language in which the current page is written. The Doctype is not an element or tag, it lets the browser know about the version of or standard of HTML or any other markup language that is being used in the document.
16. What is dom in HTML?
DOM stands for Document Object Model. When a web page is getting loaded that time the browser creates a Document Object Model of the page and it is constructed as a tree of Objects. HTML DOM is basically an Object Model for HTML.
HTML DOM describes:
- The HTML elements as objects
- Properties of all HTML elements
- Methods of all HTML elements
- Events of all HTML elements
17. Describe the meta tag in HTML.
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
Meta tags always go inside the head element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
| Attribute | Description |
|---|---|
| charset | Specifies the character encoding for the HTML document |
| content | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | Provides an HTTP header for the information/value of the content attribute |
| name | application-name Specifies a name for the metadata |
18. What are the various formatting tags in HTML?
HTML has various formatting tags:
<b> - makes text bold
<i> - makes text italic
<em> - makes text italic but with added semantics importance
<big> - increases the font size of the text by one unit
<small> - decreases the font size of the text by one unit
<sub> - makes the text a subscript
<sup> - makes the text a superscript
<del> - displays as strike out text
<strong> - marks the text as important
<mark> - highlights the text
19. What is the difference between strong and bold tag in HTML?
The strong tag is one of the element of HTML used in formatting HTML texts. It is used to show importance of the text by making it bold or highlighting it semantically. The text written under the bold tag makes the text bold presentationally to draw attention. The difference between these tags is that bold tag makes the text look bold only visually, whereas the strong tag also gives a semantic emphasize indicating a meaningful word or a text section. A strong tag that is used within another strong tag has more importance.
20. What are some features of HTML5?
- New Semantic Elements − These are like header, footer, and section.
- Persistent Local Storage − To achieve without resorting to third-party plugins.
- WebSocket − A next-generation bidirectional communication technology for web applications.
- Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
- Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.
- Geolocation − Now visitors can choose to share their physical location with your web application.
- Drag and drop − Drag and drop the items from one location to another location on the same webpage.
21. What is the basic structure of the HTML template?
Answer: The basic structure of the HTML template is:
<head>
<title>
</title>
</head>
<body>
</body>
</html>
22. What is the difference between italics and emphasis tag?
The <i> tag displays the text in italic. It is used for presentation purpose only. The <em> tag specifies the stress emphasis of its contents. Both are used to italicise text in html. The main difference between these two tag is that the <em> tag semantically emphasizes on the important word or section of words while <i> tag is just offset text conventionally styled in italic to show alternative mood or voice.
23. How to redirect to a particular section of a page using HTML?
One can use the anchor tag to redirect to a particular section on the same page. You need to add “id attribute” to the section that you want to show and use the same id in href attribute with “#” in the anchor tag. So that On click a particular link, you will be redirected to the section that has the same id mentioned in the anchor tag.
<a href="#home_section">home</a>
<section id="home_section">Information About Page</section>
24. What are the different formats in which colors in HTML can be declared?
The color of an element can be defined in the following ways:
Built-In Color - These are a set of predefined colors that are used by their name. For example: red, blue, green, etc.
RGB Format - The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 and 255.
RGBA Format - The RGBA format is similar to the RGB, but the difference is that the RGBA contains A (Alpha) which specifies the transparency of elements.
Hexadecimal Notation
HSL - HSL stands for Hue, Saturation, and Lightness respectively.
HSLA - The HSLA color property is similar to the HSL property, but the difference is that HSLA contains A (Alpha) which specifies the transparency of elements.
25. What is the use of alt attribute in images?
The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image.
Syntax: <img alt="text">
26. What is the difference between block and inline elements?
Every element in HTML has a default display value which depends upon the element type. Block or inline is the default display value for most of the elements.
Block Level Elements: A block-level element always starts on a new line and stretches out to the left and right as far as it can. Eg: Div element.
Inline Elements: An inline element is the opposite of the block-level element. It does not start on a new line and takes up only the necessary width. Eg: Span element.
27. How can we create a nested webpage in HTML?
When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. The nested webpage can be created using the following 2 methods:
<iframe> tag: The iframe in HTML stands for Inline Frame. The “iframe” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
Syntax: <iframe src="URL"></iframe>
<embed> tag: The embed tag in HTML is used for embedding external applications which are generally multimedia content like audio or video into an HTML document.
Syntax:
<embed src="URL" type="text/html" />
The ‘ src ‘ attribute is used to specify the URL of the document that occupies the iframe.
28. What is the use of the target attribute in the link tag?
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 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.
29. What is the id attribute in HTML?
The id attribute is a unique identifier that is used to specify the document. An HTML document cannot have more than one element with the same id.
Syntax: <element_name id = "id"></element_name>
30. What is the class attribute in HTML?
The HTML class attribute is used to specify a single or multiple class names for an HTML element.
Syntax: <element_name class = "class-a class-b"></element_name>
31. What is the difference between classes and id?
id Attribute: The id attribute is a unique identifier that is used to specify the document.
class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element.
- “id” is unique on a page and can only apply to at most one element, while the “class” selector can apply to multiple elements.
- The class name can be represented by using the “.” symbol whereas the id is represented using # symbol followed by id.
- Class attribute can have multiple values separated by space. Id attribute can have only one value.
32. Are div and span tags similar?
Both the tags are used to represent the part of the web page. The div tag is used as the block component, and the span tag is used as an inline component.
div tag: The div tag is known as the Division tag. It is a block-level tag & is used in HTML to make divisions of content on the web page (text, images, header, footer, navigation bar, etc). Div tag has both openings and closing tags, and it is mandatory to close the tag.
span tag: The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). A better way to use it is when no other semantic element is available.
33. What are the tags that can be used inside the <head> tag?
The HTML head element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.
The HTML head element is a container for the following elements:
<title>: It defines the title of the webpage.
<link>: It is most often used to link an external CSS file.
<meta>: It is used to specify the Character set, Page description, Keywords, Author of the document, and Viewport settings. It will not be displayed but is used by browsers on how to display content or reload pages and by search engines, and other web services.
<base>: It is used to specify the base URL or target for relative URLs.
<style>: It is used to make internal CSS within our HTML webpage.
<script>: It is used to define within the HTML webpage.
34. What are void elements?
The elements that only have start tags and do not contain any content within it, these elements are called Void Elements. It can only have attributes but does not contain any kind of content. Example of such elements are <br>, <hr>, <img>, etc.
35. How Container tag is different from the Empty tag in HTML?
A container tag in HTML is one which has both opening and closing tags. Empty tags in HTML don't have a closing tag. They end within the same tag. Container tags usually contain some data between the opening and closing tags. Data could be of any format such as text or any other element.
Container tags: < head>< /head>, < body>< /body>
Empty tags: <br>, <hr>
36. How can you apply JS in your HTML?
< script></ script> tag is used to add JavaScript code.
-
JavaScript in head: A JavaScript function is placed inside the head section of an HTML page which is executed when an event occurs.
-
JavaScript in the body: A JavaScript function is placed inside the body section of an HTML page.
-
External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension .js . To use an external script put the name of the script file in the src attribute of a script tag.
37. What is HTML Layout?
Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
Page Layout Information:
- Header: The part of the front end which is used at the top of the page. header tag is used to add header section in web pages.
- Navigation bar: The navigation bar is the same as the menu list. It is used to display the content information using hyperlinks.
- Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added to the page.
- Content Section: The content section is the main part where content is displayed.
- Footer: The footer section contains the contact information and other query related to web pages. The footer section is always put on the bottom of the web pages. The footer tag is used to set the footer on web pages.
38. How to open a hyperlink in another window or tab in HTML?
In order to open a hyperlink in another window or tab, use the target attribute and provide it value _blank in the anchor tab.
Example: <a href="https://www.google.com/" target="_blank">
This will direct the user to Google search page on a new tab.
39. Difference between link tag and anchor tag?
The anchor tag is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag defines a link between a document and an external resource and these are not clickable.
40. What are some of the advantages of HTML5 over its previous versions?
- It has Multimedia Support.
- It has the capabilities to store offline data using SQL databases and application cache.
- Javascript can be run in the background.
- HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
- Included new Semantic tags and form control tags.
41. Explain the concept of web storage in HTML5.
This web storage helps in storing some of the static data in the local storage of the browser so that we do not need to fetch it from the server every time we need it. There is a size limit based on different browsers. This helps in decreasing the load time and a smooth user experience. There are two types of web storage that are used to store data locally in HTML5:
Local Storage - This helps in storing data that will be retained even though the user reopens the browser. It is stored for each webapp on different browsers.
Session Storage - This is used for one session only. After the user closes the browser this gets deleted.
42. Explain HTML5 Graphics.
HTML5 supports two kinds of graphics:
Canvas - It is like drawing on a whitepaper or a blank webpage. We can add different graphic designs on web pages with available methods for drawing various geometrical shapes.
SVG - Scalable Vector Graphics are used mostly for diagrams or icons. It follows the XML format.
43. What are the New tags in Media Elements in HTML5?
<audio> - Used for sounds, audio streams, or music, embed audio content without any additional plug-in.
<video> - Used for video streams, embed video content etc.
<source> - Used for multiple media resources in media elements, such as audio, video, etc.
<embed> - Used for an external application or embedded content.
<track> - Used for subtitles in the media elements such as video or audio.
44. What is the use of an iframe tag?
An iframe is used to display a web page within a web page. The iframe tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
Syntax: <iframe src="URL"></iframe>
45. What is difference between HTML and XHTML?
- HTML stands for Hypertext Markup Language while XHTML stands for Extensible Hypertext Markup Language
- The format of HTML is a document file format while for XHTML the file format is a markup file format
- In HTML it is not necessary to close tags in the same order as they were opened, but in XHTML it is necessary
- In XHTML, it is quite important to write doctype on the top of the file; while in HTML is it not needed
- The file name extension used in HTML are .html, .htm.; and the file name extension used in XHTML are .xhtml, .xht, .xml.
46. What is a marquee?
Ans. Marquee tag is a non-standard HTML element that causes text to scroll up, down, left, or right automatically. You can put the text which you want to scroll on a web page within the following tag:
<marquee>……</marquee>
47. What is HTML Canvas?
The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
48. What is SVG?
SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format. SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.
49. What are forms in HTML?
HTML Form is a document that stores information of a user on a web server using interactive controls. An HTML form contains different kinds of information such as username, password, contact number, email id, etc.
The elements used in an HTML form are check box, input box, radio buttons, submit buttons, etc. Using these elements the information of a user is submitted on a web server. The form tag is used to create an HTML form.
50. What are the tags used to separate a section of texts?
<br>tag – Usually<br>tag is used to separate the line of text. It breaks the current line and conveys the flow to the next line<p>tag – This contains the text in the form of a new paragraph.<blockquote>tag – It is used to define a large quoted section. If you have a large quotation, then put the entire text within<blockquote>……….</blockquote>tag.
PROGRAMMING QUESTIONS
1. Write HTML code to generate the following output
<html>
<body>
<ol>
<li>Beverages
<ul>
<li>Coffee</li>
<li> Tea
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</li>
<li>Food items
<ul>
<li>Sandwich</li>
<li>Pasta</li>
</ul>
</li>
<ol>
</body>
</html>
Explanation: Within the body, first an ordered list is added with list items - beverages which includes an unordered list and food items which also includes an unordered list. The first unordered list also contains an unordered list. The lists are nested to generate the required output.
2. Write HTML code to generate the following output
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 300px;
height : 100px;
}
</style>
<head>
<body>
<table>
<tr>
<th colspan="2">Column 1</th>
<th colspan="2">Column 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation: The table tag is used to create a table with two rows created using tr tag. The first row has two headers which take up two column space. The second row has four data elements. All the elements have been given border which is 1px thick and is solid black.
3. Write a HTML program to design a student registration form to enter your personal data and select a course.
<html>
<body>
<form>
<h1>Form</h1>
<p>
<label>First name: <input name="firstName" /></label>
</p>
<p>
<label>Email: <input type = "email" name="email" /></label>
</p>
<p>
Gender :
<label><input type="radio" name="gender" value="male" /> Male</label>
<label><input type="radio" name="gender" value="female" /> Female</label>
</p>
<p>
<label>
Course
<select name="courses">
<option>None</option>
<option>Information Technology</option>
<option>Computer Science</option>
<option>Electronics</option>
<option>Mechanics</option>
</select>
</label>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Explanation: The form is created using a < form> tag. Name is taken in a text type input field. Email is taken in an email type input field. Radio buttons are used for gender. Two radio buttons are displayed with male and female options. User can only select one. Courses are taken using drop down list created using the select tag. There are multiple options to choose from.
4. Design an HTML page which contains an image which opens a link in a new tab when clicked.
<html>
<body>
<h1>Go to Google Search Page <br/></h1>
<a href="https://www.google.com/" target="_blank">
<img src="https://blog.hubspot.com/hubfs/image8-2.jpg" alt="google" width="300" height="300">
</a>
</body>
</html>
Output:
Explanation: Link is created using the anchor < a> tag. href attribute specifies the url to the page and target="_blank" opens the url in a new tab. The image is made clickable by wrapping it within the anchor tag.
5. What should be added to the blank in order to colour the div yellow?
<html>
<body>
<div _________________>
Color me yellow
</div>
</body>
</html>
Ans: style = "background-color: yellow;"
Explanation: Using inline css, style attribute is added to div and the background color is set to yellow.
6. Explain the output of the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Hello") {
x.innerHTML = "Swapped text!";
} else {
x.innerHTML = "Hello";
}
}
</script>
</head>
<body>
<p><button onclick="myFunction()">Click Me</button></p>
<div id="myDIV">Hello</div>
</body>
</html>
Explanation: The output will be a button and a a text "Hello" on the screen. When the button is clicked, the text on the screen will change to "Swapped text!". When the button is clicked again, the text will change back to "Hello". This happens due to the javascript function which is called upon every click.
7. Explain the following snippet
<html>
<body>
<form>
<label for="name" >Name: </label>
<input type="text" id="name" name="name" required/> <br/>
<label for="password">Password: </label>
<input type="password" id="password" name="password" required/> <br/>
<button type = "submit">Submit</button>
</form>
</body>
</html>
Explanation: The code creates a form with a text and password input fields. The text field takes name input. When the user inputs password in the password field, the characters appear as dots. There is a button of the type submit. Since both the fields are required, if the user submits the form without filling out the fields, an alert is displayed saying "Please fill out this field".
8. Explain the following code:
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Explanation: The code will display all the heading tags that are available in HTML. HTML has 6 headings. The largest heading is h1 and the smallest is h6. The output will be heading displayed in decreasing order of size.
9. Explain the following code:
<html>
<body>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Explanation: The code will show two lists. The first list is an ordered list with letters as mark type. The list items will have capital letter marks such as A, B, C as opposed to the default numerical markers. The second unordered list has square as marker type as opposed to the default disc type.
10. Explain the output of the following code
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="https://www.w3schools.com/html/default.asp"></iframe>
</body>
</html>
Explanation: The code will display a heading and an iframe. An iframe is used to display a web page within a web page. The url of the webpage that will be displayed within the iframe is provided in the src attribute. The iframe is scrollable and completely functional.
