Inserting Images
9–11 MINS READ
Agenda
- HTML Images
- Image Attributes
- Types of Web Page Image
- Absolute vs. Relative URL
- Image CSS Properties
- background Properties
HTML Images
- In HTML, images are defined using
<img />
tag. - The
<img />
tag creates a holding space for the referenced image. - The
<img />
tag is empty, it contains attributes only, and does not have a closing tag.
HTML Image Attributes
- The src attribute specifies the path (URL) to the image.
- The alt attribute provides an alternate text for an image, if the user for some reason cannot view it.
- The value of the alt attribute should describe the image.
- It is important to take note of the file type of the image (
.jpg
,.png
,.gif
).
<body>
<img src="images/html.png" alt="HTML logo" />
</body>
Types of Web Page Images
- Graphics Interchange Format (
.gif
) use for images with few colors (<256) and allows transparent backgrounds. It uses compression techniques called LZW compression, to make it smaller to download on the Web.
- Portable Network Graphics (
.png
) newest format for images that supports multiple colors and resolutions. The PNG format is patent-free.
- Joint Photographic Experts Group (
.jpg
) is a graphic image saved using a lossy compression techniques that discards some data during compression process. JPEG file format supports images with many colors (>256), such as photographs.
Absolute and Relative Image URL
- ABSOLUTE URL is a uniform resource locator (web address) that begins with http:// and then specifies a website, possibly a folder and a then a filename.
- RELATIVE URL is a uniform resource locator that is relative to the current HTML page location. The relative URL will specify the image location (rather that the complete site).
Absolute URL
<body>
<img
src="https://onlinejpgtools.com/images/examples-onlinejpgtools/sunflower.jpg"
alt="Sunflower"
/>
</body>
Relative URL
<body>
<img src="images/sunflower.jpg" alt="Sunflower" />
</body>
CSS Properties
The width
and height
property
- We can use the style attribute to specify the width and height of an image.
- Resizing is ideal for large-sized images.
- Checking the actual size of the images is important when resizing to determine the new image size ratio.
- The width and height attributes always define the width and height of the image in pixels.
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="width: 300px; height: 200px;"
/>
<!-- or you can use the attributes width and height -->
<img
src="images/sunflower.jpg"
alt="Sunflower"
width="300"
height="200"
/>
</body>
The border
property
- The CSS border shorthand property allows users to specify the width, style and color of an element’s border.
- border-width
- border-style (required)
- border-color
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border: 5px solid black;"
/>
</body>
The broder-style
property
- The border-style property specifies what kind of border to dispay.
- The width can be set as a dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden.
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value
A ridge border. The effect depends on the border-color value
An inset border. The effect depends on the border-color value
An outset border. The effect depends on the border-color value
No border.
A mixed border.
The border-width
property
- The border-width property specifies the width of the four borders.
- The width can be set as a specific size (in px, pt, cm, em) or by using one of the three pre-defined values: thin, medium, or thick.
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border-style: solid; border-width: 5px;"
/>
</body>
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border-style: solid; border-width: thick;"
/>
</body>
The border-color
property
- The border-color property is used to set the color of the four borders.
- The border-color property can have from one to four values.
- top border
- right border
- bottom border
- left border
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border-style: solid; border-width: thick; border-color: red;"
/>
</body>
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border-style: solid; border-width: thick; border-color: red blue green yellow;"
/>
</body>
The border-radius
property
- The border-radius property is used to add rounded borders to an element.
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border: 5px solid black; border-radius: 10px;"
/>
</body>
The display
and margin
property
- The display property specifies if/how an element is displayed. Giving a value of block on the display property will let the element take the whole line on its own.
- The margin property is used to create space around elements. Giving a value of auto to the margin property gives the element equal amounts of spaces on the left and right side making it appear in the center.
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border: 5px solid black; border-radius: 10px; display: block; margin: auto;"
/>
</body>
The float
property
- The CSS float property specifies how an element should float.
- The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
- The float property can have left, right, none, or inherit value.
<body>
<img
src="images/sunflower.jpg"
alt="Sunflower"
style="border: 5px solid black; float: right;"
/>
</body>
CSS background properties
The background-image
property
- The background-image property specifies an image to use as the background of an element.
- By default, the image is repeated so it covers the entire element.
<body style="background-image: url(images/mickey.png);">
<!-- contents here -->
</body>
The background-repeat
property
- The background-repeat property repeats an image both horizontally and vertically.
- The value can be horizontally repeated (repeat-x), vertically repeated (repeat-y), or no-repeat.
<body style="background-image: url(images/mickey.png); background-repeat: no-repeat;">
<!-- contents here -->
</body>
The background-attachment
property
- The background-attachment property specifies whether the background image should scroll or be fixed.
<body style="background-image: url(images/mickey.png);
background-repeat: no-repeat;
background-attachment: fixed;"
>
<!-- contents here -->
</body>
The background-position
property
- The background-position property is used to specify the position of the background image.
<body style="background-image: url(images/mickey.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;"
>
<!-- contents here -->
</body>
The background-size
property
- The CSS background-size property allows you to specify the size of background images.
- The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
<body style="background-image: url(images/mickey.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
background-size: 379px 391px;"
>
<!-- contents here -->
</body>
The background
property
- The CSS background property sets all the background properties in one declaration.
- When using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right;">
<!-- contents here -->
</body>
<body style="background: #000000 url(images/mickey.png) no-repeat fixed top right;
background-size: 379px 391px;">
<!-- contents here -->
</body>
HTML Favicon
- A favicon is a small image displayed next to the page title in the browser tab.
- To add a favicon to your website, use the
<link />
element within the head section of your HTML document. - The
<link />
tag defines the relationship between the current document and an external resource. - The
<link />
element is an empty element; it contains attributes to perform its function.
The link attributes used to create a Favicon
- The rel is required attribute that specifies the relationship between the current document and the linked document. (icon)
- The type attribute specifies the media type of the linked document. (image/icon)
- The href attribute specifies the location of the linked document.
HTML Favicon
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/icon" href="images/mickey.png" />
<title>Inserting Images</title>
</head>
Summary Table
Attributes | Definition |
---|---|
src | Specifies the path (URL) to the image. |
alt | Provides an alternate text for an image, if the user for some reason cannot view it. The value of the alt attribute should describe the image. |
width and height | Always define the width and height of the image in pixels. |
rel | Required attribute that specifies the relationship between the current document and the linked document. (icon) |
type | Specifies the media type of the linked document. (image/icon) |
href | Specifies the location of the linked document. |
Credits
This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.