HTML Program coding questions

HTML IMP Program Coding QUESTIONS SOLUTIONS

Leave a Comment / Computer Programming Languages, hsc maharashtra board 2023 / By

This blog will help you students figure out the important HTML program coding questions that are being asked in class 12 HSC Maharashtra board examinations for Science, Commerce & Arts stream.

Q1) Write a program using HTML to design a web page that should accept faculty ID, faculty name, select faculty subject specialization from choice, faculty qualifications, address, age of faculty, and a submit button.

Solution:- 

HTML IMP Program Coding Questions and answers

<!DOCTYPE html>
<html>
<head>
<title>Faculty Information Form</title>
</head>
<body>
<h1>Faculty Information Form</h1>
<form>
<label for=”faculty_id”>Faculty ID:</label>
<input type=”text” id=”faculty_id” name=”faculty_id”><br><br>

<label for=”faculty_name”>Faculty Name:</label>
<input type=”text” id=”faculty_name” name=”faculty_name”><br><br>

<label for=”subject_specialization”>Select Faculty Subject Specialization:</label>
<select id=”subject_specialization” name=”subject_specialization”>
<option value=”Mathematics”>Mathematics</option>
<option value=”English”>English</option>
<option value=”Science”>Science</option>
<option value=”History”>History</option>
</select><br><br>

<label for=”faculty_qualifications”>Faculty Qualifications:</label>
<input type=”text” id=”faculty_qualifications” name=”faculty_qualifications”><br><br>

<label for=”address”>Address:</label>
<input type=”text” id=”address” name=”address”><br><br>

<label for=”age”>Age:</label>
<input type=”number” id=”age” name=”age”><br><br>

<input type=”submit” value=”Submit”>
</form>
</body>
</html

Output: 

html coding questions

Explanation: 

This HTML code creates a web page that displays a form for entering faculty information. Here is an explanation of each part of the code (HTML program coding questions):

  • <!DOCTYPE html>: This is the declaration of the document type. It tells the browser that this is an HTML document.
  • <html>: This is the opening tag for the HTML document. Everything between the opening and closing <html> tags is part of the HTML document.
  • <head>: This is the opening tag for the head section of the document. The head section contains metadata and other information that is not displayed on the web page.
  • <title>Faculty Information Form</title>: This sets the title of the web page, which appears in the browser tab.
  • </head>: This is the closing tag for the head section.
  • <body>: This is the opening tag for the body section of the document. The body section contains the content that is displayed on the web page.
  • <h1>Faculty Information Form</h1>: This creates a heading for the web page.
  • <form>: This opens a form element, which is used to create a form for entering information.
  • <label for=”faculty_id”>Faculty ID:</label>: This creates a label for the Faculty ID field in the form. The “for” attribute links the label to the input field with the matching “id” attribute.
  • <input type=”text” id=”faculty_id” name=”faculty_id”>: This creates a text input field for entering the faculty ID. The “id” attribute links the input field to the label with the matching “for” attribute. The “name” attribute specifies the name of the field for use in form processing.
  • <select id=”subject_specialization” name=”subject_specialization”>: This creates a select input field for selecting the faculty’s subject specialization. The “id” attribute links the select field to the label with the matching “for” attribute. The “name” attribute specifies the name of the field for use in form processing.
  • <option value=”Mathematics”>Mathematics</option>: This creates an option within the select field. The “value” attribute is the value that will be sent to the server when the form is submitted. The text between the opening and closing <option> tags is what will be displayed in the select field.
  • <input type=”submit” value=”Submit”>: This creates a submit button for submitting the form.
  • </form>: This closes the form element.
  • </body>: This is the closing tag for the body section.
  • </html>: This is the closing tag for the HTML document.

Q2) Write a program using html to design a web page that should accept name of user name, email id, designation at office, numbers of years completed in office, office phone number (mandatory), image with submit button.

Solution: HTML program coding questions

<!DOCTYPE html>
<html>
<head>
<title>User Information Form</title>
</head>
<body>
<h1>User Information Form</h1>
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”><br><br>

<label for=”email”>Email ID:</label>
<input type=”email” id=”email” name=”email”><br><br>

<label for=”designation”>Designation at Office:</label>
<input type=”text” id=”designation” name=”designation”><br><br>

<label for=”years_completed”>Number of Years Completed in Office:</label>
<input type=”number” id=”years_completed” name=”years_completed”><br><br>

<label for=”phone”>Office Phone Number (Mandatory):</label>
<input type=”tel” id=”phone” name=”phone” required><br><br>

<label for=”image”>Image:</label>
<input type=”file” id=”image” name=”image”><br><br>

<input type=”submit” value=”Submit”>
</form>
</body>
</html>

Output : 

Basic HTML Questions answers

Explanation:

This is a simple HTML code for a user information form that allows users to input their personal and office details, along with an image. Here is a breakdown of the code:

  • The first line <!DOCTYPE html> specifies the document type as HTML5.
  • The <html> element is the root element of an HTML page, and all content should be contained within it.
  • The <head> element contains meta information about the document, such as the title of the page.
  • The <title> element sets the title of the document which is displayed in the browser tab.
  • The <body> element contains the visible page content.
  • The <h1> element creates a heading for the form.
  • The <form> element creates a container for the user input fields.
  • The <label> element is used to describe the input field and associates it with a unique id.
  • The <input> element creates an input field where the user can enter their information.
  • type=”text” creates a single-line text input field.
  • type=”email” creates an email input field that ensures that the user enters a valid email address.
  • type=”number” creates a number input field that ensures that the user enters a numeric value.
  • type=”tel” creates a telephone input field that ensures that the user enters a valid phone number.
  • type=”file” creates a file input field that allows the user to select a file to upload.
  • The required attribute specifies that the phone field is mandatory, and the user must enter a value before submitting the form.
  • The <input> element with type=”submit” creates a submit button to send the form data to the server.
  • The id and name attributes create unique identifiers for each input field, which are used to retrieve the input data from the form.

Q3) Write a program using html and css with following specifications create unordered list of 5 popular institute names currently active in mumbai city. 

Create ordered list of languages/ subjects being taught there using any one of above particular single institute name that you have listed. 

Divide the list into two sections left and right by using proper CSS. 

Solution: 

<!DOCTYPE html>
<html>
<head>
<title>Institutes in Mumbai</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
background-color: #f2f2f2;
font-size: 18px;
font-weight: bold;
color: #333;
text-align: center;
width: 48%;
box-sizing: border-box;
}
ol {
padding: 0;
margin: 0;
font-size: 16px;
color: #666;
list-style-position: inside;
text-align: left;
}
</style>
</head>
<body>
<h1>Popular Institutes in Mumbai</h1>
<ul>
<li>Institute A</li>
<li>Institute B</li>
<li>Institute C</li>
<li>Institute D</li>
<li>Institute E</li>
</ul>
<h2>Languages/Subjects Taught in Institute A</h2>
<ol>
<li>English</li>
<li>Mathematics</li>
<li>Science</li>
<li>Social Studies</li>
</ol>
</body>
</html>

Output : 

use of ordered list and unordered list in html

Explanation: 

This is an HTML code for a web page that displays a list of popular institutes in Mumbai and the subjects taught in one of the listed institutes. Here is a breakdown of the code:-HTML program coding questions

  • <!DOCTYPE html> specifies that the document type is HTML5.
  • The html element contains the entire HTML document.
  • The head element contains metadata about the document, such as the title of the page and the CSS styles used.
  • The title element specifies the title of the page, which appears in the browser tab.
  • The style element contains the CSS styles used to style the page.
  • ul represents an unordered list of institutes. The CSS properties used on this element set the list to be displayed as a flexbox with each item wrapping to the next line and having space between them. Each item is given a padding, border, and background color, with some additional styles to make them look like cards.
  • li represents each institute in the unordered list. They have a fixed width of 48% to allow two items to be displayed on each row, and they are given a padding, border, and background color to make them look like cards.
  • h1 represents the heading of the page and is styled with the color red.
  • h2 represents the heading for the section that displays the subjects taught in one of the listed institutes.
  • ol represents an ordered list of subjects taught in an institute. The CSS properties used on this element set the list to have no margin or padding and text-align set to left. Each item in the list is displayed with a bullet point and has a font size of 16px and a color of #666.

Q4) Write a program using html and css specifications:

  1. The page should contain heading as STD 12th Commerce – 99 IT in Red Color
  2. Create Ordered list of topics in IT subject of class 12 Commerce
  3. Change The Font to Verdana.

Solution:

<!DOCTYPE html>
<html>
<head>
<title>STD 12th Commerce – 99 IT</title>
<style>
h1 {
color: red;
font-family: Verdana;
}
ol {
font-family: Verdana;
}
</style>
</head>
<body>
<h1>STD 12th Commerce – 99 IT</h1>
<ol>
<li>Introduction to Information Technology</li>
<li>Computer Networking</li>
<li>Database Management System</li>
<li>Web Designing and Development</li>
<li>Programming in Python</li>
</ol>
</body>
</html>

Output : 

class 12 commerce IT hsc html programs solutions

Explanation: 

This is a basic HTML and CSS code for a page that displays a heading and an ordered list of topics for a 12th-grade Commerce class in the subject of Information Technology.

  1. The <!DOCTYPE html> line specifies the HTML version and doctype.
  2. The <html> element is the root element of the HTML page and contains the entire document.
  3. The <head> element contains information about the document, such as the title, author, and links to external resources such as stylesheets.
  4. The <title> element sets the title of the document, which appears in the browser’s title bar.
  5. The <style> element contains CSS code that defines the styles for the HTML elements in the page.
  6. The h1 selector selects the heading element, and the color property sets the text color to red. The font-family property sets the font to Verdana.
  7. The ol selector selects the ordered list element, and the font-family property sets the font to Verdana.
  8. The <body> element contains the visible content of the document.
  9. The <h1> element displays the heading for the page, which is “STD 12th Commerce – 99 IT”.
  10. The <ol> element creates an ordered list of items. The list contains 5 items, each represented by an <li> element, which stands for list item. The items are Introduction to Information Technology, Computer Networking, Database Management System, Web Designing and Development, and Programming in Python.

Overall, this HTML program coding questions sets the heading to be red and the font for both the heading and the ordered list to be Verdana. It then creates an ordered list of topics for a 12th-grade Commerce class in Information Technology.

Basic HTML Tags Attributes Questions Read More

Leave a Comment

Your email address will not be published. Required fields are marked *