HTML/C3/Embedding-Images/English

From Script | Spoken-Tutorial
Revision as of 15:28, 24 May 2019 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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:
  • How to embed an image file in HTML
Slide: Prerequisite
  • To practice this tutorial, you should have basic knowledge of HTML.
  • If not, then go through the corresponding tutorials on this website.
Slide: System Requirements To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • HTML5
  • gedit Text Editor
  • Firefox web browser and
  • A working Internet connection

However you may, use any other editor or browser of your choice.

Slide: Code Files
  • The files used in this tutorial are available in the Code Files link on this tutorial page.
  • Please download and extract them.
Slide: Embedding images In HTML, we can embed the image as a
  • Normal image
  • Background image
  • Link or
  • Single image with multiple links
Slide: Embedding images This is the syntax to embed an image in a HTML file
Slide: Important Note Important note:
  • Before embedding any media, always ensure that you have all the rights to use the file.
  • Sharing files on the web without reusable permission, is illegal.
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:
  • From the computer
  • By downloading from the Internet or
  • Via a link

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:
  • Jpg or jpeg
  • png
  • gif
  • svg
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:
  • Align
  • Border
  • Float

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.
  • Image Maps are used to mark a particular area in an image.
  • With this we can create multiple links in a single image.
Gedit type:

<img src="lo.png" alt = "LibreOffice" usemap = "#lo">

<map name="lo">

<area shape="rect" coords="0,80,80,200" alt="Computer"

href="https://spoken-tutorial.org/tutorial-search/?search_foss=LibreOffice+Suite+Base&search_language=English">

</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"

href="https://spoken-tutorial.org/tutorial-search/?search_foss=LibreOffice+Suite+Base&search_language=English">

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:
  • How to embed an image
  • Alternative text for the image
  • Creating image as a link
  • Customizing the width and height of an image and
  • Adding Image Maps in HTML
Slide: Assignment As an assignment-
  • Open the file MyHomePage.html which you created earlier.
  • Embed the Python Django icon in it.
  • Create a link to Python Django Spoken Tutorials in the embedded image
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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C3/Embedding-Images/English&oldid=47540"