HTML/C3/Embedding-Images/English
Title of the script: Embedding Images in HTML
Author: Praveen S
Domain Reviewer: M.Deivamani
Novice Reviewer: Madhulika G
Keywords: HTML, Embedding images, image height, image width, linking image, image map, background image, Spoken Tutorial, Video Tutorial
| Visual Cue | Narration |
| Slide: Introduction | Hello and welcome to the spoken tutorial on Embedding Images in HTML. |
| Slide: Learning Objectives | In this tutorial we will learn about:
|
| Slide: Prerequisite |
|
| Slide: System Requirements | To record this tutorial, I’m using
However you may, use any other editor or browser of your choice. |
| Slide: Code Files |
|
| Slide: Embedding images | In HTML, we can embed the image as a
|
| Slide: Embedding images | This is the syntax to embed an image in a HTML file |
| Slide: Important Note | Important note:
|
| Open media.html in gedit
<html> <head><title>Media Page</title></head> <body> </body> </html> |
Open any text editor and type the code as shown here. |
| Save as media.html in project folder. | Now save this file as media.html in your project folder. |
| Only narration | For this demonstration, I have already done so.
Now let us embed an image in this file. |
| Slide: Embedding Images | We can embed an image in any one of the following ways:
Let us switch back to the text editor. |
| Gedit - media.html
<body> <img src="myimage.png"> </body> |
In the media.html file, within the body tag type the code as shown here.
Then save the file. |
| Highlight myimage.png | This is the code that will embed myimage.png |
| Slide: Image Formats | Common image formats supported by most web browsers are:
|
| Open media.html in firefox | Let’s open our HTML file media.html in any web browser.
I will open it in Firefox web browser. |
| Point to the broken icon | Observe that, there is an icon which looks like broken document. |
| Highlight the img tag in the code | This is because, in my code I have embedded an image using the img tag. |
| Show the project folder | But the image file named myimage.png is not present in the same folder as the HTML file. |
| Point to the broken icon in the browser | In that case, the browser will show this broken document icon.
Switch to the text editor. |
| <img src="myimage.png" alt="My Image"> | Update the code as shown. |
| Press Ctrl+S keys | Save the file. |
| Refresh the browser | Switch to the browser and refresh the page. |
| Point to the text, My Image | The broken document icon disappears and the text, My Image is displayed. |
| Highlight alt="My Image" in the code | So, when the image is not available or loaded, the value in the alt attribute gets displayed. |
| Only narration | As I don't have any image in my computer, I will download it from the Internet. |
| Switch to the browser
Type: tux logo in the search |
In the browser, open a new tab.
In the “Search the web” text box, type tux logo and press Enter. |
| Click on Images | Click on the Images tab below the search bar. |
| Click on Tools -> Usage rights -> Labeled for reuse | Then click on Tools.
And under Tools, select Usage rights. Then click on Labeled for reuse. |
| Only narration | This way of searching, will display all the images with reusable rights. |
| Point to the image | From the results, click on the image you wish to download.
The image will get displayed in a bigger size along with the source site details. |
| Right Click - Save Image As | Then right-click on the image and select Save Image As option. |
| Save as myimage.png | Save the image as myimage.png in the project folder. |
| Switch to Media Page tab and refresh | Switch to the Media Page tab and refresh the page. |
| Point to the tux image. | Now the page is displaying the image and not the alternative text. |
| Only narration | By default the image will be displayed based on its actual dimension.
We can set the width and height of the image inside the img tag according to our need. |
| Type:
<img src="myimage.png" alt="My Image" width="150" height="200"> |
To do so switch the code.
Inside the img tag, next to alt attribute type the code as shown. |
| Highlight: width="150" height="200" | Here the values of the width and height is in pixels.
Provide the dimensions in such a way that the image does not get stretched. |
| Press Ctrl + S | Save the file. |
| Refresh the browser | Switch to the browser and refresh the page. |
| Point to the image in the browser | Observe the change.
Now the image looks smaller than the original size. |
| Highlight: width="150" height="200" | Switch back to the code.
It is always advisable to specify the width and height with the help of style attribute. |
| <img src="myimage.png" alt="My Image"
style="width:150px;height:200px;"> |
So let’s update the code as shown here. |
| Press Ctrl + S | Save the file. |
| Refresh the browser | Switch back to the browser and refresh the page. |
| Point to the image in the browser | Notice there is no change.
This means that the style attribute was successfully executed. |
| Slide: Image attributes | We can also use some more attributes for the image, such as:
Kindly explore these on your own. |
| Point to the img tag in media.html file | Suppose, we don’t want to store the image in our project folder.
And the image is in some other folder. In such cases, we have to specify the exact path of that folder in the src attribute. |
| Point to the img tag in media.html file | Now suppose we want to display an image from the web.
Then, we can provide that image’s website url in the src attribute. |
| Switch to the browser. | Let’s see an example. Switch to the browser. |
| Search for Tux logo | Then go to the tab where we searched for Tux logo. |
| Right-click on the selected image >> choose Copy Image Location >> close this tab | Right-click on the selected image.
Then choose Copy Image Location. |
| media.html
Delete myimage.png Paste the copied link |
Come back to the code.
Delete the src value myimage.png Then paste the copied link. |
| Point to the img tag in media.html file | Here instead of the filename of the image, we have mentioned the weblink for the image. |
| Press Ctrl + S | Save the file. |
| Refresh the browser | Switch to the browser.
Go to the Media Page tab and refresh the page. |
| Only narration | Based on your internet speed, it may take few seconds to load the image from the given link. |
| Only narration | In some websites, you may notice that images act like links.
Now we will see how to do that. |
| Switch to gedit | Switch to the text editor. |
| <a href="https://spoken-tutorial.org" target="_blank"> Spoken Tutorial </a>
<a href="https://spoken-tutorial.org" target="_blank"> <img src="myimage.png" alt="My Image" style="width:150px;height:200px;"> </a> |
Next to the img tag, type the code as shown. |
| Press Ctrl + S | Save the file. |
| Refresh the browser | Switch to the browser and refresh the page. |
| Point to Spoken Tutorial | Notice the text link, Spoken Tutorial. |
| Click on Spoken Tutorial | Clicking on this text, will redirect us to the Spoken Tutorial website. |
| Click on Media page tab | Go to the Media page tab. |
| Point to the 2nd image | Next to the text Spoken Tutorial, we can see our image once again. |
| Mouse over on the 1st image | If you over the mouse cursor on the 1st image, it's just a cursor. |
| Mouse over on the 2nd image | If you hover the cursor on the 2nd image, the cursor changes to a hand icon.
That means, it is a link. |
| Click on the 2nd image | By clicking on this 2nd image, it will redirect us to the Spoken Tutorial website.
Switch to the code to understand this. |
| Highlight both the anchor tags in the media.html file | Here in both the cases, I have created a hyperlink for the website Spoken Tutorial. |
| Highlight the text, Spoken Tutorial | In the first case, I have created the link for the text. |
| Highlight the img tag | In the second case, I have created the link for the img tag.
So adding the img tag inside the anchor tag will create the hyperlink for the image. |
| Highlight both the img tag | Notice, both the img tags are same.
You can customize the attributes as per your need. |
| Slide: Image Maps | Next, let us learn about Image Maps.
|
| Gedit type:
<img src="lo.png" alt = "LibreOffice" usemap = "#lo"> <map name="lo"> <area shape="rect" coords="0,80,80,200" alt="Computer" </map> |
Switch back to the text editor.
I have already updated this part of the code for this demonstration. Pause the tutorial and update the same in your code file. |
| Highlight
<img src="lo.png" alt = "LibreOffice" usemap = "#lo"> |
I have inserted an image lo.png with the help of img tag.
Please make sure that lo.png is in the folder where media.html is saved. The same file is available in the Code files link. Here I used an attribute named usemap and I have set the value as lo. |
| Highlight
<map name="lo"> |
Next I have created a map tag with the name lo |
| Highlight
<area shape="rect" coords="0,80,80,200" alt="Base" |
Then inside the map tag, I’m defining the area with the following attributes.
Shape as rectangle. Coordinate positions in the image. href tag with the link. |
| Highlight </map> | Then closed the map tag. |
| Press Ctrl + S | Save the file. |
| Refresh the browser | Switch to the browser
Go to the media page tab and refresh the page. |
| Point to lo image | Notice, next to the tux image we see an image with some icons of LibreOffice Suite. |
| Only narration | Hover the cursor on each icon. |
| Over the cursor on Writer, calc icon | When we hover the cursor on the first 2 icons, there is no change in the cursor. |
| Over the cursor on Base icon | But when we hover the cursor on the 3rd icon, the cursor changes. |
| Move the cursor Slowly from Base to Draw icon | When the cursor crosses the border of the icon, the cursor is back to normal. |
| Point to the Coords in the code | This behaviour of the cursor is based on the coordinates we marked in the code. |
| Click on the Base icon | Click on the Base icon. |
| Point to Spoken tutorial Website. | Immediately it takes us to the specified link. |
| Only narration | Likewise, we can create multiple links or labels in a single image.
With this we come to the end of the tutorial. Let us summarise. |
| Slide: Summary | In this tutorial, we have learnt:
|
| Slide: Assignment | As an assignment-
|
| Slide: About Spoken Tutorial project | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
| Slide: About Workshop | The Spoken Tutorial Project team conducts workshops and gives certificates.
For more details, please write to us. |
| Slide: Forum questions | Please post your timed queries in this forum. |
| Slide: Acknowledgement | Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at this link. |
| Slide: Thanks | This is Praveen from IIT Bombay signing off.
Thank you for joining. |
