HTML/C3/Embedding-Images/English-timed
From Script | Spoken-Tutorial
| 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. |
