HTML PRIMER
 by Jim Gordley
 2008-2016 HomeSpun Internet Enterprises


Placing Images <img>

 
It has been said that a picture is worth a thousand words. Fortunately it doesn't take that many to embed an image using HTML.

The <img/> tag has no closing pair. Instead image attributes are defined within the tag.

<img attributes=" ". . ./>

ATTRIBUTE

SYNTAX

 src

directory location of the image file.

src="directory path"

style="height:numpx;"

height:350px;

style="width:numpx;"

width:350px;

alt="text"

Author generated text. Describe the image for those with browsers that do not display them.

alt="A few of those thousand words about the image."

style="margin:tpx rpx bpx lpx;"

margin:10px 20px 10px 20px;

style="float:left;"

left
right

 


Be sure to use an appropriate sized image.

 


A man and his dog. Copyright 2007 HomeSpun Internet Enterprises, all rights reserved.

<img src="images/mandog_2a.jpg" style="height:325px; width:325px;" alt="A man and his dog.">

The src attribute is the URL of the image file. Any available URL can be used. It is more common and economical to use images that are stored on a local directory relative to the location of the HTML document that displays it. Example of a relative URL path is:
 
"images/banner_2.jpg".

An absolute URL would use the entire formal path of the file in question.

"http://www.homespunhtml.net/html_primer_2015/images/mandog_2a.jpg"

 

Exercise

Open the blank global document that was saved earlier (blank.htm).

Between the <body> and </body> tag add an image tag that uses the absolute url from above as the src attribute. Save the file as mandog.htm. View the results in your browser.

Time saver: Copy then paste the HTML below into a blank Note Pad document.

<html>
<head>
<!-- NOTE -->
<title></title>
<link href="file.css" rel="stylesheet" type="text/css">
</head>
<body>

<img src="http://www.homespunhtml.net/ html_primer/images/mandog_2a.jpg" style="width:325px; height:325px;" alt="Image Copyright HomeSpun Internet Enterprises">
</body>
</html>

Notice that the image file is located on a server that is remote from where you saved the HTML document.
 

 


Does your page appear like the one above?


When using images insure that you have the owners permission to do so. Many images are copyright protected. It is unlawful to use copyrighted material without proper permissions. Keep in mind that just because you see an image on the Internet that it can be freely used. There are countless images that are in the public domain as well. Make sure you know the source of the image and have obtained permission to use it.

Take a moment to clear your work space by closing any open files leaving only this browser window open.

Open the helloworld.html document in both your favorite browser and notepad.

 

Aligning and padding an image.

Now is the time for all good men to come to the aid of their party. So put some beer on ice and get out the grill. Invite all the neighbors and call all of your friends. Send out invitations to the family and get your party on.

 

<img src="images/balloon_tile.jpg" style="float:left; width:92px; height:83px;"><img src="images/balloon_tile.jpg" style="float:right; width:92px; height:83px;"> Now is the time for all good men to come to the aid of their party. So put some beer on ice and get out the grill. Invite all the neighbors and call all of your friends. Send out invitations to the family and get your party on.</p>

 

Copy and paste the HTML code above (right) into your note pad on line below the <body> tag. Save the updated helloworld.html and reload (refresh) the page. Notice that even though the image tags are side by side in the code they are separated by the text in the paragraph.

Some Images to play with

Working with colors