Scribd
Upload
9 views3 pages

Img, Elements, Attributes

The document provides an overview of HTML elements, classifying them into inline, block, and inline-block elements, along with their characteristics and examples. It also explains HTML attributes, their syntax, and specifically details the `<img>` tag, including its syntax and important attributes like `src`, `alt`, `height`, and `width`. Additionally, it includes a sample HTML code demonstrating the use of the `<img>` tag to add images to a web page.

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views3 pages

Img, Elements, Attributes

The document provides an overview of HTML elements, classifying them into inline, block, and inline-block elements, along with their characteristics and examples. It also explains HTML attributes, their syntax, and specifically details the `<img>` tag, including its syntax and important attributes like `src`, `alt`, `height`, and `width`. Additionally, it includes a sample HTML code demonstrating the use of the `<img>` tag to add images to a web page.

Uploaded by

024CSE DHARSHINI.A
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!-- !

HTML Elements -->

- An HTML Element is a combination of an opening tag, content, and a


closing tag.

- Basic Structure:

<tagname>Content goes here</tagname>

- Example: <p>This is a paragraph element.</p>

Classification of HTML Elements

1. Inline Level Elements


2. Block Level Elements
3. Inline-Block Level Elements

1. Inline Level Elements

Inline elements are displayed in the same line


here we cannot assign height and width properties directly to inline
elements.
- Examples: <b>,<i>,<span> etc.

2. Block Level Elements


These elements occupy the entire width of their parent container or
viewport, starting on a new line.
We can assign height and width properties to block -level elements.

- Examples: <h1>,<div>,<p>

3. Inline-Block Level Elements

- Characteristics:

These elements are displayed in the same line as neighboring elements,


similar to inline elements but here we can assign height and width properties
to inline-block elements, giving them block-like characteristics.

- Examples: `<img>`, `<input>`, `<button>`, `<select>`, `<textarea>`


<!-- ! HTML Attributes -->

What are HTML Attributes?

- They provide additional information or functionality to HTML elements.


- Attributes are placed inside the opening tag of an element and typically
consist of a name-value pair.

Syntax of Attributes
- Attributes are added within the opening tag of an element and follow this
format:

<element attribute="value">Content</element>

<!-- ! HTML <img> Tag -->

- The `<img>` tag is used to add images into a web page.


- It is a self-closing tag, meaning it does not require a separate closing
tag.
- The `<img>` tag is an inline-block element, which means it behaves like
an inline element but can have width and height properties.

2. Syntax of the `<img>` Tag


- The basic syntax for the `<img>` tag includes the source of the image and
an optional alternate text:

<img src="path/to/image.jpg" alt="Description of image">

3. Attributes of the `<img>` Tag


- The `<img>` tag has several important attributes that define the image's
behavior and appearance:

- `src` (Source):
- Specifies the path to the image file.
- This path can be a relative URL (based on the location of the HTML
file) or an absolute URL (complete path).

- `alt` (Alternate Text):


- Provides alternative text for the image if it cannot be displayed.

- `height`:
- Defines the height of the image in pixels or as a percentage of its
original size.

- `width`:
- Defines the width of the image in pixels or as a percentage of its
original size.

- Example:

<img src="images/photo.jpg" alt="A beautiful sunset" width="300">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Tag</title>
</head>
<body>
<h1>Image Tag</h1>
<p>here we will learn how to add image</p>

<!-- taking image from web -->

<img src="https://images.pexels.com/photos/994605/pexels-photo-
994605.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="sea image"
height="200" width="200">

<img src="https://images.pexels.com/photos/189349/pexels-photo-
189349.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="sun set"
height="200" width="300">

<!-- taking image from system -->

<img src="./images/garden.jpeg" alt="garden image" height="300">

</body>
</html>

You might also like