HTML Images

HTML Language

Images

Images can be used to decorate your HTML page, to use as buttons for links, and many more functions like backgrounds.


Format

The basic format of a link in HTML is:
<img src="URL of image" />
TheURL of the image can be its address, or more simply, the name of the file.

For example:

<!DOCTYPE html>
<html>
 <body>
  <img src="HTML.png" />
 </body>
</html>

Since I have an image named HTML.png in my folder, the image appeared on the screen. The src attribute specified the location of the image.


Attributes

You can apply many attributes to the image in order to format it. As you see, the src of the image is an attribute. You can also add a width and height to limit the dimensions of your image, simply adding width="256" height="256" after the src to limit your image to a 256 by 256 rectangle. For example:

<!DOCTYPE html>
<html>
 <body>
  <img src="HTML.png" width="256" height="256" />
 </body>
</html>

There is also the alt attribute, which helps the browser to display a line of text if the image did not successfully load. Add alt="Text here" to your line and it will display the text.

For example, if we try to display an image named HTML.jpg (which doesn't exist), it is a good habit to include the alternate text:

<!DOCTYPE html>
<html>
 <body>
  <p>Without alternate text:</p>
  <img src="HTML.jpg" width="256" height="256" />
  <p>With alternate text:</p>
  <img src="HTML.jpg" width="256" height="256" alt="HTML Image" />
 </body>
</html>

Images as Buttons

You can create buttons that will take you to another page with links working with images. Just substitute the link text part of the link to a image. Like this:

<!DOCTYPE html>
<html>
 <body>
  <a href="http://www.abacles.com/"><img src="Abacles_Logo.png" width="375" height="220" /></a>
 </body>
</html>


Alignment and Background

You can use the align attribute to align an element such as an image or paragraph by setting the value to right, left, middle, top, or bottom. Another better way of doing this when you are using CSS (Cascading Style Sheets) is the use text-align or margins:

<!DOCTYPE html>
<html>
 <body>
  <p align="right">Right aligned text</p>
  <img src="HTML.png" width="256" height="256" alt="HTML" align="right" />
  <p style="text-align:center">Centered text (use right, left, center, justified, initial, or inherit 
for CSS styling)</p>
  <img src="HTML.png" width="256" height="256" alt="HTML" style="display:block;margin:0 auto" />
  <p>Note: images are inline elements, it does not start at a newline when it begins, therefore we see 
the centered text on the same line as the right-aligned image.</p>
 </body>
</html>

You can set the background of a <div> element (we will discuss this later) or the entire page with the background attribute:

<!DOCTYPE html>
<html>
 <body bgcolor="black">
  <p style="color:white">White text on a black background</p>
 </body>
</html>


<!DOCTYPE html>
<html>
 <body background="HTML.png">
  <p>Image as background</p>
  <p>Note that the screen can fit multiple of HTML.png images</p>
 </body>
</html>


Practice

Create a page with a colored background and two images.

Create a button link.

Create a right-aligned page.


Tags

Tag Meaning
<img> Defines an image



<< Previous TOC Next >>