Chapter 3

Working with Images

University of Technology and Applied Sciences 1

Objectives:
 At the end of this module, the students will
be able to understand
 The different image file formats used in web
pages
 How to insert images, audio and videos in the
web pages
 How to style the image and video
 How to add caption for the image
 How to manipulate audio controls
University of Technology and Applied Sciences 2
How to insert Image using BlueGriffon
 Click “Insert” option from the menu bar and select the option “Image”.
 Set the Image location
 Check mark the “make URL relative to page location”.
 Set any value for the “alternate text”.
 Click Ok button.

University of Technology and Applied Sciences 3

The alt attribute
 Defines alternate text, which may be presented in place of the image.
 Its value is supposed to be a textual description of the image, for use in
situations where the image cannot be seen/displayed or found.
 The value of the alt attribute should describe the image.
 Note: The alt attribute is required. A webpage will not validate correctly without
it.
 Example 1:

University of Technology and Applied Sciences 4

Styling the Image using BlueGriffon –
Inline CSS
 Select the Image.
 Choose “Apply styles to”
 Then choose “this element through inline style”
 Apply any formatting needed.

University of Technology and Applied Sciences 5

Image to the center of the page – Inline CSS
 Select the Image.
 Choose “Apply styles to”
 Choose “this element through inline style”.
 Select from “Geometry” ->Margin ->Automatic
 Select from “Position and layout”->display ->Block

University of Technology and Applied Sciences 6

Image to the right-side of the page – Inline
CSS
 Select the Image.

 Choose “Apply styles to”

 Choose “this element through inline style”.
 Select from “Position and layout”->Float->Floating to the right

University of Technology and Applied Sciences 7

What does <img> html tag do?
 The <img> tag is used to insert an image into a document.
 This element does not need a closing tag.

How do we put an image on a webpage?

 Use the <img> element followed by src attribute.
 The src attribute defines the image to be displayed in the webpage.
 src is a url.

Syntax:

University of Technology and Applied Sciences 8

Example

University of Technology and Applied Sciences 9

Example

University of Technology and Applied Sciences 10

 Images on Another Location

 Browser expects to find the image in the same

folder as the web page.
 However, it is common to store images in a sub-
folder.
 You must then include the folder name in the src
attribute:

University of Technology and Applied Sciences 11

Image Size - Width and Height
 The width and height attribute always defines the width and height of the
image in pixels.
 Example:

Note: values are specified in pixels by default

University of Technology and Applied Sciences 12
Image Caption <figure> & <figcaption>
 The <figure> element represents self-contained content,
frequently with a caption<figcaption>, and is typically
referenced as a single unit.
 A <figure> is an image, illustration, diagram, code snippet and
etc.
 The <figcaption> element represents a caption or legend for
a figure.
 The <figcaption> element can appear before or after the
content within the <figure>.

University of Technology and Applied Sciences 13

Example: Image Caption

University of Technology and Applied Sciences 14

 Styling the Image
CSS (Inline, Internal and External)

University of Technology and Applied Sciences 15

 Changing the Width and Height
Other terms:
 Resize
 Enlarge
 Reduce

Code:

University of Technology and Applied Sciences 16

Image Transparency
 The opacity property specifies the opacity/transparency of an element.
 The opacity property value is from 0.0 to 1.0.
Code:

Transparency 1.0 Transparency 0.5 Transparency 0.1

(default)

Note: The lower value, the more transparent

University of Technology and Applied Sciences 17
Image Border

University of Technology and Applied Sciences 18

Rounded Corners

University of Technology and Applied Sciences 19

Rounded Images

University of Technology and Applied Sciences 20

Image with border and shadow

University of Technology and Applied Sciences 21

 Styling the Image: Using Blue Griffon
{Internal CSS}
 Resizing the Image
 STEPS:

1. On the Stylesheet window, click on +

sign and select embedded in the
document.
2. Select the image, then switch to
Style Properties window and do the
following as shown on the screen shot.

University of Technology and Applied Sciences 22

 Styling the Image: Using Blue Griffon
{Internal CSS}
 Add Borders and Rounding the corners

University of Technology and Applied Sciences 23

 CSS Float

University of Technology and Applied Sciences 24

CSS Float : Image

University of Technology and Applied Sciences 25

Image Layout (Float: Right)

University of Technology and Applied Sciences 26

Image Layout (Float: Left)

University of Technology and Applied Sciences 27

Image Layout: Image is at the Center

University of Technology and Applied Sciences 28

 Vertical-Align Properties

University of Technology and Applied Sciences 29

Vertical-align: text-top

University of Technology and Applied Sciences 30

Vertical-align:middle

University of Technology and Applied Sciences 31

Vertical-align:text-bottom

University of Technology and Applied Sciences 32

 The End

University of Technology and Applied Sciences 33

References:

 http:www.W3schools.com
 https://html.com/tags/img/#ixzz5eize6h00
 https://www.w3.org/Style/Examples/007/center.en.html
 https://www.tutorialrepublic.com/html-reference/html5-audio-tag.php
 https://www.bitdegree.org/learn/html5-audio
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
 https://www.tutorialrepublic.com/codelab.php?topic=html5&file=video-
element

University of Technology and Applied Sciences 34