Scribd
Upload
3 views

html possible questions

The document contains multiple HTML examples, including a student grades table, a login form, and an explanation of CSS types and HTML form tags. It describes the structure and attributes of forms in HTML, detailing common elements like input fields, text areas, and buttons. Additionally, it provides a simple example of a Curriculum Vitae using HTML and CSS.

Uploaded by

bharatmani1161
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

html possible questions

The document contains multiple HTML examples, including a student grades table, a login form, and an explanation of CSS types and HTML form tags. It describes the structure and attributes of forms in HTML, detailing common elements like input fields, text areas, and buttons. Additionally, it provides a simple example of a Curriculum Vitae using HTML and CSS.

Uploaded by

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

<!

DOCTYPE html>

<html>

<head>

<title>Student Grades</title>

</head>

<body>

<center>

<table border="1">

<caption>Student Grades</caption>

<thead>

<tr>

<th rowspan="2">Name</th>

<th colspan="2">Subject & Marks</th>

</tr>

<tr>

<th>Subject</th>

<th>Marks</th>

</tr>

</thead>

<tbody>

<tr>

<td>Sabin</td>
<td>Math</td>

<td>95</td>

</tr>

<tr>

<td rowspan="2">Sristi</td>

<td>Science</td>

<td>90</td>

</tr>

<tr>

<td>English</td>

<td>88</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="3">End of Table</td>

</tr>

</tfoot>

</table>

</center>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<title>Login Form</title>

<style>

.login-box {

width: 300px;

padding: 20px;

border: 2px solid black;

text-align: left;

margin: 50px auto

</style>

</head>

<body>

<div class="login-box">

<form action="login.php" method="post">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>

<button type="submit">Login</button>

</form>

</div>

</body>

</html>
What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation (style) of a
document written in HTML or XML. It allows you to control the layout, colors, fonts, spacing, and other
visual aspects of a web page, separating the content from its design.

CSS provides a way to:

 Apply consistent styles across multiple pages.

 Customize the appearance of elements such as text, images, buttons, and other HTML content.

 Create responsive designs that work across various devices.

Types of CSS:

There are three main types of CSS that allow you to apply styles to HTML documents:

1. Inline CSS

2. Internal CSS

3. External CSS

1. Inline CSS

Inline CSS is used to apply styles directly to individual HTML elements. The styles are written inside the
style attribute of the element.

Example:

html

CopyEdit

<!DOCTYPE html>

<html>

<body>

<h1 style="color: blue; text-align: center;">This is a Heading</h1>

<p style="font-size: 18px; color: green;">This is a paragraph with inline CSS.</p>

</body>

</html>

 Where it’s used: Inline styles are applied directly to specific elements.

 Advantages:

o Useful for quick, one-off changes.

o No need to modify other parts of the document.


 Disadvantages:

o Not efficient for large websites.

o Hard to manage and maintain.

o Can lead to repetitive code.

2. Internal CSS

Internal CSS is used when you want to apply styles to an entire page, but the styles are written in the
<style> tag within the <head> section of the HTML document.

Example:

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

text-align: center;

p{

font-size: 18px;

color: green;

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph with internal CSS.</p>

</body>
</html>

 Where it’s used: Styles are defined in the <style> tag in the HTML document.

 Advantages:

o Easier to maintain than inline CSS for a single page.

o Keeps the styles within the page itself.

 Disadvantages:

o Not ideal for multiple pages.

o Styles are specific to one document, requiring duplication across pages if you want the
same styles elsewhere.

3. External CSS

External CSS involves creating a separate .css file that contains all the styles for a website. This file is then
linked to the HTML document using the <link> tag in the <head> section.

Example:

HTML File:

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph with external CSS.</p>

</body>

</html>

CSS File (styles.css):

css
CopyEdit

h1 {

color: blue;

text-align: center;

p{

font-size: 18px;

color: green;

 Where it’s used: When styles are stored in an external .css file.

 Advantages:

o Most efficient method for larger websites.

o Allows for easy maintenance and reusability.

o Same stylesheet can be applied across multiple pages, reducing redundancy.

 Disadvantages:

o Requires an additional HTTP request to load the CSS file, which can slightly impact page
load time (though this is minimal compared to the benefits).

Summary of CSS Types:

CSS Type Where it’s Defined Advantages Disadvantages

Directly in HTML element Quick to apply, no need for Difficult to maintain for large
Inline CSS
(style attribute) external files websites

Internal Inside the <style> tag in Easy to manage for single- Not reusable across multiple
CSS <head> section page styles pages

External In a separate .css file linked Most efficient for large Requires an extra HTTP request
CSS with <link> websites, reusable for the CSS file

When to Use Each Type:

 Inline CSS: Best for quick, temporary changes or for a small page where only a few elements
need styling.
 Internal CSS: Useful for styling a single HTML page when you don’t want to create a separate CSS
file.

 External CSS: Ideal for larger websites or when you want to maintain consistency and reusability
of styles across multiple pages.

Describe the tags and attributes for a form in HTML document?

ChatGPT said:

HTML Form Tags and Attributes

HTML forms allow users to submit data to a server, often used for collecting user input such as text,
choices, and file uploads. Forms are typically used for things like login forms, registration forms, search
bars, and more.

Main Form Tag: <form>

The <form> tag is the container for all form elements. It defines the form and determines how data will
be sent to the server.

Attributes of <form> Tag:

1. action: Specifies the URL where the form data will be submitted. If not specified, the form will be
submitted to the current page.

o Example: <form action="submit.php">

2. method: Defines the HTTP method (GET or POST) to send the form data.

o GET: Appends the form data to the URL (not secure for sensitive data).

o POST: Sends form data in the HTTP request body (more secure and can send large
amounts of data).

o Example: <form method="post">

3. name: Defines a name for the form. This can be used to reference the form in scripts or other
actions.

o Example: <form name="contactForm">

4. target: Specifies where to display the response after form submission. Values can include _blank,
_self, _parent, or _top.

o Example: <form target="_blank">


5. enctype: Defines how the form data will be encoded when it is sent to the server. Used mainly
with file upload forms.

o Example: <form enctype="multipart/form-data">

6. autocomplete: Specifies whether the browser should automatically complete form fields based
on past input.

o Example: <form autocomplete="on">

Common Form Elements (Tags):

1. Text Input: <input> The <input> tag is used for various types of user inputs like text, radio
buttons, checkboxes, etc.

o Attributes of <input>:

 type: Defines the type of input (e.g., text, password, radio, checkbox, etc.).

 Example: <input type="text">

 name: The name used to reference the form data.

 Example: <input type="text" name="username">

 value: Defines the value sent to the server when the form is submitted.

 Example: <input type="radio" name="gender" value="male">

 placeholder: Specifies a short hint or example of what the input should contain.

 Example: <input type="text" placeholder="Enter your name">

 required: Specifies that the field must be filled out before submitting the form.

 Example: <input type="text" required>

2. Text Area: <textarea> The <textarea> tag is used for multi-line text input (e.g., comments or
descriptions).

o Attributes of <textarea>:

 name: Defines the name of the text area for form submission.

 Example: <textarea name="message"></textarea>

 rows: Defines the number of visible rows (height).

 Example: <textarea rows="4"></textarea>

 cols: Defines the number of visible columns (width).

 Example: <textarea cols="50"></textarea>


 placeholder: Provides a hint to the user about what to type.

 Example: <textarea placeholder="Enter your message"></textarea>

 required: Ensures the field must be filled before submission.

 Example: <textarea required></textarea>

3. Select Dropdown: <select> The <select> tag is used to create a dropdown menu where users can
choose one or more options.

o Attributes of <select>:

 name: Defines the name of the dropdown for form submission.

 Example: <select name="country">

 multiple: Allows multiple selections in the dropdown.

 Example: <select name="countries" multiple>

o Options inside <select>:

 <option>: Defines individual options in the dropdown.

 Example: <option value="USA">United States</option>

 <optgroup>: Groups related options together.

 Example:

html

CopyEdit

<optgroup label="Europe">

<option value="Germany">Germany</option>

<option value="France">France</option>

</optgroup>

4. Radio Button: `<input type="radio"> Radio buttons allow users to choose one option from a set.

o Attributes of <input type="radio">:

 name: Groups radio buttons together so only one option can be selected.

 Example: <input type="radio" name="gender" value="male">

 checked: Specifies that a radio button is pre-selected.

 Example: <input type="radio" name="gender" value="female" checked>

5. Checkbox: `<input type="checkbox"> Checkboxes allow users to select multiple options.


o Attributes of <input type="checkbox">:

 name: Identifies the checkbox in form submission.

 Example: <input type="checkbox" name="subscribe" value="yes">

 checked: Pre-selects the checkbox.

 Example: <input type="checkbox" name="subscribe" value="yes"


checked>

6. Button: <button> The <button> tag is used to create a clickable button.

o Attributes of <button>:

 type: Specifies the type of button (submit, reset, or button).

 Example: <button type="submit">Submit</button>

 name: Defines the name for form submission.

 Example: <button type="button" name="submitForm">Click


me</button>

Example of HTML Form with Various Tags and Attributes:

html

CopyEdit

<!DOCTYPE html>

<html>

<body>

<h2>Contact Form</h2>

<form action="submit.php" method="post" autocomplete="on">

<label for="fname">First Name:</label><br>

<input type="text" id="fname" name="fname" required placeholder="Enter your first name"><br><br>

<label for="lname">Last Name:</label><br>

<input type="text" id="lname" name="lname" required><br><br>


<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required placeholder="Enter your email"><br><br>

<label for="country">Country:</label><br>

<select id="country" name="country" required>

<option value="Nepal">Nepal</option>

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

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

</select><br><br>

<label>Gender:</label><br>

<input type="radio" id="male" name="gender" value="male" checked>

<label for="male">Male</label><br>

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

<label for="female">Female</label><br><br>

<label for="subscribe">Subscribe to newsletter:</label>

<input type="checkbox" id="subscribe" name="subscribe" value="yes"><br><br>

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

</form>

</body>

</html>
Summary of Common Form Tags and Attributes:

Element Attributes Description

action, method, name, enctype, target, Defines the form and specifies how data
<form>
autocomplete will be sent

type, name, value, placeholder, required, Defines different types of inputs (text,
<input>
checked, maxlength, disabled radio, checkbox, etc.)

<textarea> name, rows, cols, placeholder, required Allows multi-line input

Creates a dropdown menu for single or


<select> name, multiple
multiple selections

<option> value, selected Defines options inside a dropdown

<button> type, name Defines a button element

9. Difference Between Tags and Attributes in HTML

Tags:

 Tags are the fundamental building blocks of HTML that define the structure and content of a
webpage.

 Tags usually come in pairs: an opening tag <tag> and a closing tag </tag>.

 Example: <p>This is a paragraph.</p> where <p> is the tag that represents a paragraph.

Attributes:

 Attributes are used to provide additional information about an HTML element.

 Attributes are placed inside the opening tag and consist of a name and a value (e.g.,
attribute="value").

 Example: <a href="https://www.example.com">Click Here</a> where href is an attribute that


specifies the link's destination.

HTML and CSS Code for Curriculum Vitae (CV)

Here’s a simple example of designing a CV using HTML and CSS. It includes a table for contact
information, an image for the profile picture, and some basic formatting using HTML tags like <h1>, <p>,
and <a> for links.

HTML (Curriculum Vitae Structure):


html

CopyEdit

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Curriculum Vitae</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<header>

<h1>Sabin Poudel</h1>

<img src="profile.jpg" alt="Profile Picture" class="profile-img">

<p>Contact: 9841188707 | Email: [email protected]</p>

</header>

<section>

<h2>Personal Information</h2>

<table>

<tr>

<th>Full Name</th>

<td>Sabin Poudel</td>

</tr>

<tr>

<th>Birthday</th>

<td>September 11, 2004</td>

</tr>
<tr>

<th>Location</th>

<td>Kathmandu, Nepal</td>

</tr>

<tr>

<th>Languages</th>

<td>Nepali, English, Hindi</td>

</tr>

</table>

</section>

<section>

<h2>Education</h2>

<ul>

<li>Bachelor of Computer Applications (BCA) - Sagarmatha College of Science and


Technology</li>

<li>+2 Graduation - Oxford Secondary School</li>

<li>SEE - Balkumari English School</li>

</ul>

</section>

<section>

<h2>Skills</h2>

<ul>

<li>Team Work</li>

<li>Time Management</li>

<li>Programming Basics (API usage)</li>

<li>Web Development (beginner)</li>

</ul>
</section>

<section>

<h2>Contact Me</h2>

<p>If you'd like to connect, feel free to email me at <a


href="mailto:[email protected]">[email protected]</a></p>

</section>

</div>

</body>

</html>

CSS (Styling the CV):

css

CopyEdit

/* General Styles */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

color: #333;

.container {

width: 80%;

margin: 0 auto;

padding: 20px;

background-color: white;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}
header {

text-align: center;

margin-bottom: 20px;

header h1 {

font-size: 2.5em;

color: #4CAF50;

header .profile-img {

width: 150px;

height: 150px;

border-radius: 50%;

margin-top: 10px;

header p {

font-size: 1.2em;

color: #777;

h2 {

color: #4CAF50;

font-size: 1.8em;

margin-bottom: 10px;

}
table {

width: 100%;

border-collapse: collapse;

margin-bottom: 20px;

table th,

table td {

padding: 10px;

border: 1px solid #ddd;

text-align: left;

table th {

background-color: #4CAF50;

color: white;

ul {

list-style-type: square;

padding-left: 20px;

ul li {

margin: 5px 0;

a{

color: #4CAF50;
text-decoration: none;

a:hover {

text-decoration: underline;

In this example, we create a simple CV layout using the following elements:

 Header Section: Displays the name, profile picture, and contact information.

 Table: Used to show personal details like birthday, location, and languages.

 Lists: Used to display education and skills.

 Links: Used to create a contact email link.

10. Develop a Simple Web Page to Ask User for Input (Name, Email, Phone, Gender)

Here’s a basic HTML form that asks the user for their name, email, phone number, and gender:

HTML (Simple Web Page for User Input):

html

CopyEdit

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Input Form</title>

</head>

<body>

<h1>Register Your Information</h1>

<form action="submit_form.php" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>


<label for="email">Email:</label>

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

<label for="phone">Phone:</label>

<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required><br><br>

<label>Gender:</label><br>

<input type="radio" id="male" name="gender" value="male" required>

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female" required>

<label for="female">Female</label><br><br>

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

</form>

</body>

</html>

In this code:

 The form collects the user’s name, email, phone number, and gender.

 pattern is used to ensure the phone number is 10 digits.

 The form uses the POST method to submit the data to the server.
<!DOCTYPE html>

<html>

<head>

<title>Student Information Form</title>

</head>

<body>

<fieldset style="width: 20px; ">

<legend>Student Information Form</legend>

<tr>

<td>First Name:</td>

<td><input type="text" name="firstName" value="Krishna" style="border: 1px solid


#000;"></td>

</tr>

<tr>

<td>Last Name:</td>

<td><input type="text" name="lastName" value="Acharya" style="border: 1px solid


#000;"></td>

</tr>
<tr>

<td>Password:</td>

<td><input type="password" name="password" value="password" style="border: 1px solid


#000;"></td>

</tr>

<tr>

<td>Gender:</td>

<td>

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

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

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

</td>

</tr>

<tr>

<td>Select Programme:</td>

<td>

<select name="programme" style="border: 1px solid #000;">

<option value="">Select</option>

<option value="BCA" selected>BCA</option>

<option value="BSC">BSC</option>

<option value="BTech">BTech</option>

</select>

</td>

</tr>

<tr>

<td valign="top">Select Courses:</td>

<td>

<input type="checkbox" name="courses" value="HTML" checked> HTML<br>

<input type="checkbox" name="courses" value="Java" checked> Java<br>


<input type="checkbox" name="courses" value="VB.Net" checked> VB.Net

</td>

</tr>

<tr>

<td colspan="2">

<input type="file" name="fileUpload"> Third GIF

</td>

</tr>

<tr>

<td colspan="2">

<textarea name="comment" rows="5" cols="40" style="border: 1px solid #000;">write


comment here...</textarea>

</td>

</tr>

<tr>

<td colspan="2">

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

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

<input type="reset" value="Reset">

</td>

</tr>

</table>

</form>

</fieldset>

</body>

</html>

You might also like