HTML5 Video Tutorial

Part 3 - Images and Hyperlinks

The following code is from the Video.

IMG Element <img>

The img element represents an image. It does not have an end tag, it only has a start tag. The source image URL is specified by using the src attribute.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>This is an image.</h1>
    <img src="ball.png" alt="red ball" height="168" width="100">
  </body>
</html>

A Element <a>

The a element, or anchor element, represents a hyperlink. It has a start and an end tag. The href attribute is used to specify the URL of the web page that it is linking to. The text that is located between the start and end tags will be displayed in the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>This is an image.</h1>
    <img src="ball.png" alt="red ball" height="168" width="100">
    <a href="http://www.littlewebhut.com">Little Web Hut</a>
  </body>
</html>

Anchor element enclosed inside a P element

This example encloses an a element inside of a p element. Additional text is added before and after the a element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>This is an image.</h1>
    <img src="ball.png" alt="red ball" height="168" width="100">
    <p>Go to 
    <a href="http://www.littlewebhut.com">Little Web Hut</a>
     today.</p>
  </body>
</html>

IMG element added inside of an Anchor element

An img element is added between the start and end a tags. This allows the user to be taken to the specified URL when the image is clicked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <h1>This is an image.</h1>
    <p>Click on image  
    <a href="http://www.littlewebhut.com">
    <img src="ball.png" alt="red ball" height="168" width="100">
    </a>
    </p>
  </body>
</html>