Anchor Tag
Purpose: Used to link text to other web pages.
Syntax:
<a href="URL" target="_blank">Link Text</a>
Not an empty tag.
A ributes of <a>:
1. href – Specifies the URL.
2. target – Defines where to open the linked document.
o _blank: Opens in a new tab.
HTML Table
Purpose: To display data in rows and columns.
Basic Tags:
<table></table> – Container tag for the table.
<tr></tr> – Table row.
<td></td> – Table data/cell.
<th></th> – Table heading cell.
Default Behavior of <th>:
Bold text
Center aligned
A ributes of <table>:
1. border – Sets the table border (e.g., border="1").
2. bgcolor – Sets the background color.
3. align – Aligns the table:
o le (default)
o center
o right
4. width – Sets table width.
5. height – Sets table height.
You can also use align inside <tr> to align all <td> elements in that row.
Merging Cells:
colspan – Merges columns.
Example: <td colspan="2">Merged Columns</td>
rowspan – Merges rows.
Example: <td rowspan="3">Merged Rows</td>
Task 1: Sample School Time Table
Forms in HTML
Purpose: Used to collect user input.
Tag: <form></form> – Container for all form elements.
Tags used inside form:
1. <input> (Empty tag – collects input)
Common A ributes of <input>:
A ribute Descrip on
Name Name of input field (used in backend)
Type Type of input (text, email, password, etc.)
placeholder Hint inside input box
Value Default value
type values for <input>:
1. text – Plain text (default)
2. email – Email input
3. password – Password input (hidden text)
4. number – Numeric input
5. range – Input a value in range
6. date – Select date
7. color – Choose color
8. file – Upload file
9. radio – Select one op on
10. checkbox – Select mul ple op ons
11. submit – Submit form
12. reset – Reset form
2. <textarea>
Used for mul -line text input.
Not an empty tag.
Example:
<textarea >Default Text</textarea>
3. <select> with <op on>
Creates a dropdown.
Example:
<select name="language">
<op on value="js">JavaScript</op on>
<op on value="java">Java</op on>
</select>
4. <label>
Used to describe input fields.
Connect using two ways:
Method 1 (with for):
<label for="email">Email:</label>
<input type="email" id="email">
Method 2 (wrap input):
<label>Password: <input type="password"></label>
Prin ng Space in HTML
Use for space
Example: First Last
Example:
<!DOCTYPE html>
<html>
<head>
< tle>HTML Form Example</ tle>
</head>
<body>
<h1>User Registra on Form</h1>
<!-- Form Start -->
<form>
<!-- Name Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter
your name">
<br><br>
<!-- Email Input with Default Value -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"
value="abc@[Link]">
<br><br>
<!-- Password Input -->
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass">
<br><br>
<!-- Number Input -->
<label for="age">Age:</label>
<input type="number" id="age" name="age">
<br><br>
<!-- Range Input -->
<label for="range">Select Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<br><br>
<!-- Date Input -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<br><br>
<!-- Color Picker -->
<label for="color">Pick Your Favorite Color:</label>
<input type="color" id="color" name="color">
<br><br>
<!-- File Upload -->
<label for="file">Upload File:</label>
<input type="file" id="file" name="fileUpload">
<br><br>
<!-- Radio Bu ons -->
<p>Select Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<br><br>
<!-- Checkboxes -->
<p>Select Languages You Know:</p>
<input type="checkbox" id="js" name="lang" value="JavaScript">
<label for="js">JavaScript</label><br>
<input type="checkbox" id="java" name="lang" value="Java">
<label for="java">Java</label>
<br><br>
<!-- Submit and Reset Bu ons -->
<input type="submit" value="Register">
<input type="reset" value="Reset">
<br><br>
<!-- Textarea -->
<label for="about">Tell us about yourself:</label><br>
<textarea id="about" name="about" rows="4" cols="40">Type
something about you...</textarea>
<br><br>
<!-- Dropdown Select -->
<label for="op on">Choose an Op on:</label>
<select id="op on" name="op ons">
<op on value="op on1">Op on 1</op on>
<op on value="op on2">Op on 2</op on>
<op on value="op on3">Op on 3</op on>
</select>
</form>
<!-- Form End -->
</body>
</html>
