A link is created using the <a>
tag, which stands for “anchor.” The href
attribute specifies the destination URL.
Syntax:
<a href="https://www.example.com">Visit Example</a>
This creates a hyperlink that, when clicked, directs the user to “https://www.example.com”.
To open a link in a new tab, use the target="_blank"
attribute.
Syntax:
<a href="https://www.example.com" target="_blank">Visit Example</a>
This will open “https://www.example.com” in a new browser tab when clicked.
A table is created using the <table>
tag, with rows defined by <tr>
, headers by <th>
, and data cells by <td>
.
Syntax:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
This creates a simple table with one row of headers and one row of data.
border
: Adds a border around the table and its cells.
<table border="1">
<!-- Table content -->
</table>
cellpadding
: Adds padding inside each cell.
<table cellpadding="10">
<!-- Table content -->
</table>
cellspacing
: Sets the space between cells.
<table cellspacing="5">
<!-- Table content -->
</table>
width
: Sets the width of the table.
<table width="100%">
<!-- Table content -->
</table>
align
: Aligns the table on the page.
<table align="center">
<!-- Table content -->
</table>
colspan
: Spans a cell across multiple columns.
<tr>
<td colspan="2">Spanning two columns</td>
</tr>
rowspan
: Spans a cell across multiple rows.
<tr>
<td rowspan="2">Spanning two rows</td>
</tr>
Used to create a single-line text input field.
Syntax:
<input type="text" name="username">
Used to create a password field where the input is masked.
Syntax:
<input type="password" name="password">
Used to create a set of mutually exclusive options.
Syntax:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Used to create a checkbox, allowing multiple selections.
Syntax:
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter
Used to create a dropdown list.
Syntax:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Used to submit a form.
Syntax:
<input type="submit" value="Submit">
Used to reset form fields to their default values.
Syntax:
<input type="reset" value="Reset">
Forms are used to collect user input and send it to a server for processing.
A form is created using the <form>
tag, with various input elements nested inside.
Syntax:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
action
: Specifies the URL where the form data will be sent.
<form action="/submit">
<!-- Form content -->
</form>
method
: Specifies the HTTP method to use when sending form data (get
or post
).
<form method="post">
<!-- Form content -->
</form>
enctype
: Specifies how form data should be encoded when submitted (for file uploads, use multipart/form-data
).
<form enctype="multipart/form-data">
<!-- Form content -->
</form>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h2>Sample Form</h2>
<form action="/submit" method="post">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname"><br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="checkbox" id="subscribe" name="subscribe" value="wapInfotech">
<label for="subscribe"> Subscribe</label><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
This example creates a form with fields for first name, last name, email, gender selection, car selection, and a subscription checkbox, along with submit and reset buttons.
The <audio>
tag is used to embed audio content in a web page. You can specify multiple sources for different audio formats using the <source>
tag.
Syntax:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
.
</audio>
The controls
attribute adds play, pause, and volume controls to the audio player.
The <video>
tag is used to embed video content in a web page. Like the <audio>
tag, you can specify multiple sources for different video formats using the <source>
tag.
Syntax:
<video width="320" height="240" controls>
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.ogg" type="video/ogg">
</video>
The width
and height
attributes specify the dimensions of the video player, and the controls
attribute adds play, pause, and volume controls.
The <iframe>
tag is used to embed another HTML document within the current document.
Syntax:
<iframe src="https://www.example.com" width="600" height="400">
</iframe>
The src
attribute specifies the URL of the page to embed, while the width
and height
attributes set the dimensions of the iframe.
frameborder
: Specifies whether or not to display a border around the iframe.
<iframe src="https://www.example.com" frameborder="0"></iframe>
scrolling
: Specifies whether or not to add scrollbars to the iframe.
<iframe src="https://www.example.com" scrolling="no"></iframe>
name
: Assigns a name to the iframe for targeting links.
```html
<iframe src=”https://www.example.com” name