Scribd
Upload
100 views3 pages

HTML Beginner Notes GeeksforGeeks

This document provides beginner notes on HTML, covering the <img> tag for embedding images, table tags for organizing data, and form elements for creating user input interfaces. Key attributes and examples are included for each section to illustrate their usage. The notes emphasize accessibility and usability in web design.

Uploaded by

Rakesh M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
100 views3 pages

HTML Beginner Notes GeeksforGeeks

This document provides beginner notes on HTML, covering the <img> tag for embedding images, table tags for organizing data, and form elements for creating user input interfaces. Key attributes and examples are included for each section to illustrate their usage. The notes emphasize accessibility and usability in web design.

Uploaded by

Rakesh M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

HTML Beginner Notes (from GeeksforGeeks)

1. <img> Tag
Definition: Embeds an image on the webpage. It's a self-closing tag (no </img> needed).

Key Attributes:

- src – URL or file path of the image

- alt – text description if the image doesn’t load (important for accessibility)

- width, height – set image size in pixels to control layout

Example:

<img src="[Link]" alt="Company Logo" width="200"


height="100">

2. Table Tags
<table> – Defines the start of a table.

<tr> – Defines a row within a table.

<th> – Defines a header cell (bold, centered).

<td> – Defines a regular cell in the row.

border – Adds a visible border (thickness in pixels). Note: deprecated in HTML5, replaced
by CSS.

colspan – Merges a cell across multiple columns.

rowspan – Merges a cell across multiple rows.

Example:

<table border="1">
<tr>
<th rowspan="2">Category</th>
<th colspan="2">Details</th>
</tr>
<tr>
<th>Item</th><th>Price</th>
</tr>
<tr>
<td>Books</td><td colspan="2">Various items</td>
</tr>
</table>

3. Form Elements
<form> – Container for form controls (ignore action/method for now).

<input> – For single-line user input. Common types: text, email. Also supports placeholder,
name.

<label> – Labels a form control—improves accessibility.

<textarea> – Allows multi-line text input.

<button> – Used to submit the form or trigger actions.

name – Identifies the input field name for data processing.

placeholder – Provides a hint text inside the input box.

Example:

<form>
<label for="email">Email:</label><br>
<input type="email" name="useremail" placeholder="Enter your
email"><br><br>

<label for="message">Message:</label><br>
<textarea name="message" placeholder="Your message
here"></textarea><br><br>

<button>Submit</button>
</form>

Summary

- <img>: Use src, alt, width, height to embed and size images properly.
- Tables (<table>, <tr>, <th>, <td>): Organize data; use border, colspan, and rowspan for
layout structure.
- Forms: Build user input interfaces with input, label, textarea, and button. Use name and
placeholder for usability and future processing.

You might also like