HTML/C3/Embedding-Images/English-timed

From Script | Spoken-Tutorial
Jump to: navigation, search
Time Narration
00:01 Hello and welcome to the spoken tutorial on Embedding Images in HTML.
00:08 In this tutorial we will learn about:

How to embed an image file in HTML

00:15 To practice this tutorial, you should have basic knowledge of HTML.
00:21 If not, then go through the corresponding tutorials on this website.
00:28 To record this tutorial, I’m using

Ubuntu Linux 16.04 OS

HTML5

00:38 gedit Text Editor
00:41 Firefox web browser and A working Internet connection
00:48 However you may, use any other editor or browser of your choice.
00:55 The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

01:06 In HTML, we can embed the image as a
01:10 Normal image, Background image
01:14 Link or Single image with multiple links
01:20 This is the syntax to embed an image in a HTML file
01:26 Important note:

Before embedding any media, always ensure that you have all the rights to use the file.

01:36 Sharing files on the web without reusable permission, is illegal.
01:42 Open any text editor and type the code as shown here.
01:48 Now save this file as media.html in your project folder.
01:55 For this demonstration, I have already done so.
01:58 Now let us embed an image in this file.
02:03 We can embed an image in any one of the following ways:
02:08 From the computer
02:10 By downloading from the Internet or

Via a link

02:16 Let us switch back to the text editor.
02:20 In the media.html file, within the body tag type the code as shown here.
02:28 Then save the file.
02:31 This is the code that will embed myimage.png
02:36 Common image formats supported by most web browsers are:
02:41 Jpg or jpeg

png

02:46 gif

svg

02:50 Let’s open our HTML file media.html in any web browser.
02:56 I will open it in Firefox web browser.
03:01 Observe that, there is an icon which looks like broken document.
03:07 This is because, in my code I have embedded an image using the img tag.
03:13 But the image file named myimage.png is not present in the same folder as the HTML file.
03:22 In that case, the browser will show this broken document icon.

Switch to the text editor.

03:31 Update the code as shown.
03:35 Save the file.
03:37 Switch to the browser and refresh the page.
03:41 The broken document icon disappears and the text, My Image is displayed.
03:48 So, when the image is not available or loaded, the value in the alt attribute gets displayed.
03:56 As I don't have any image in my computer, I will download it from the Internet.
04:03 In the browser, open a new tab.
04:07 In the “Search the web” text box, type tux logo and press Enter.
04:14 Click on the Images tab below the search bar.
04:18 Then click on Tools.

And under Tools, select Usage rights.

04:25 Then click on Labeled for reuse.
04:30 This way of searching, will display all the images with reusable rights.
04:37 From the results, click on the image you wish to download.
04:42 The image will get displayed in a bigger size along with the source site details.
04:49 Then right-click on the image and select Save Image As option.
04:55 Save the image as myimage.png in the project folder.
05:05 Switch to the Media Page tab and refresh the page.
05:10 Now the page is displaying the image and not the alternative text.
05:16 By default the image will be displayed based on its actual dimension.
05:22 We can set the width and height of the image inside the img tag according to our need.
05:29 To do so switch the code.

Inside the img tag, next to alt attribute type the code as shown.

05:39 Here the values of the width and height is in pixels.
05:44 Provide the dimensions in such a way that the image does not get stretched.
05:50 Save the file. Switch to the browser and refresh the page.
05:56 Observe the change.

Now the image looks smaller than the original size.

06:02 Switch back to the code.
06:05 It is always advisable to specify the width and height with the help of style attribute.
06:13 So let’s update the code as shown here.
06:18 Save the file.
06:20 Switch back to the browser and refresh the page.
06:24 Notice there is no change.

This means that the style attribute was successfully executed.

06:32 We can also use some more attributes for the image, such as:

Align, Border, Float

06:42 Kindly explore these on your own.
06:46 Suppose, we don’t want to store the image in our project folder.

And the image is in some other folder.

06:55 In such cases, we have to specify the exact path of that folder in the source attribute.
07:03 Now suppose we want to display an image from the web.
07:08 Then, we can provide that image’s website url in the src attribute.
07:15 Let’s see an example. Switch to the browser.
07:20 Then go to the tab where we searched for Tux logo.
07:26 Right-click on the selected image.

Then choose Copy Image Location.

07:33 Come back to the code.
07:36 Delete the src value myimage.png

Then paste the copied link.

07:44 Here instead of the filename of the image, we have mentioned the website link for the image.
07:51 Save the file.
07:53 Switch to the browser.

Go to the Media Page tab and refresh the page.

08:02 Based on your internet speed, it may take few seconds to load the image from the given link.
08:10 In some websites, you may notice that images act like links.
08:16 Now we will see how to do that.
08:19 Switch to the text editor.
08:22 Next to the img tag, type the code as shown.
08:29 Save the file.
08:31 Switch to the browser and refresh the page.
08:35 Notice the text link, Spoken Tutorial.
08:39 Clicking on this text, will redirect us to the Spoken Tutorial website.
08:45 Go to the Media page tab.
08:48 Next to the text Spoken Tutorial, we can see our image once again.
08:54 If you over the mouse cursor on the 1st image, it's just a cursor.
09:00 If you hover the cursor on the 2nd image, the cursor changes to a hand icon.

That means, it is a link.

09:10 By clicking on this 2nd image, it will redirect us to the Spoken Tutorial website.

Switch to the code to understand this.

09:21 Here in both the cases, I have created a hyperlink for the website Spoken Tutorial.
09:28 In the first case, I have created the link for the text.
09:33 In the second case, I have created the link for the img tag.
09:38 So adding the img tag inside the anchor tag will create the hyperlink for the image.
09:45 Notice, both the img tags are same.
09:49 You can customize the attributes as per your need.
09:54 Next, let us learn about Image Maps.
09:58 Image Maps are used to mark a particular area in an image.
10:03 With this we can create multiple links in a single image.
10:08 Switch back to the text editor.
10:12 I have already updated this part of the code for this demonstration.
10:17 Pause the tutorial and update the same in your code file.
10:22 I have inserted an image lo.png with the help of img tag.
10:28 Please make sure that lo.png is in the folder where media.html is saved.
10:37 The same file is available in the Code files link.
10:42 Here I used an attribute named usemap and I have set the value as lo.
10:50 Next I have created a map tag with the name lo
10:55 Then inside the map tag, I’m defining the area with the following attributes.
11:02 Shape as rectangle.
11:05 Coordinate positions in the image.

href tag with the link.

11:11 Then closed the map tag.
11:14 Save the file.
11:16 Switch to the browser

Go to the media page tab and refresh the page.

11:24 Next to the tux image we see an image with some icons of LibreOffice Suite.
11:32 Hover the cursor on each icon.
11:35 When we hover the cursor on the first 2 icons, there is no change in the cursor.
11:41 But when we hover the cursor on the 3rd icon, the cursor changes.
11:47 When the cursor crosses the border of the icon, the cursor is back to normal.
111:53 This behaviour of the cursor is based on the coordinates we marked in the code.
12:00 Click on the Base icon.
12:03 Immediately it takes us to the specified link.
12:08 Likewise, we can create multiple links or labels in a single image.
12:15 With this we come to the end of the tutorial.

Let us summarise.

12:21 In this tutorial, we have learnt:

How to embed an image

12:26 Alternative text for the image
12:29 Creating image as a link
12:32 Customizing the width and height of an image and

Adding Image Maps in HTML

12:41 As an assignment-

Open the file MyHomePage.html which you created earlier.

12:49 Embed the Python Django icon in it.
12:53 Create a link to Python Django Spoken Tutorials in the embedded image
13:00 The video at the following link summarizes the Spoken Tutorial project.

Please download and watch it.

13:09 The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

13:19 Please post your timed queries in this forum.
13:23 Spoken Tutorial Project is funded by MHRD, Government of India.
13:29 This is Praveen from IIT Bombay signing off.

Thank you for joining.

Contributors and Content Editors

PoojaMoolya