HTML/C3/Embedding-Images/English-timed

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 NMEICT, MHRD, Government of India. More information on this mission is available at this link.
13:29	This is Praveen from IIT Bombay signing off. Thank you for joining.

Contributors and Content Editors

PoojaMoolya