Skip to main content

Introduction to HTML: Links &
Images

A bare bones introduction to HTML coding

Adding links

To link text or an image to another web site, enclose the area you want to appear as a link with the <a href...tag.

<a href="http://www.library.cornell.edu">The Cornell Library Home page</a> will display as
The Cornell Library Home page

Be sure to close the tag with </a>, otherwise everything that follows will be part of the link.

To have the linked web page open in a new tab or window, add a target attribute. For example,

<a href="http://www.library.cornell.edu" target="_blank">The Cornell Library Home page</a>

opens the web page in its own window or tab, depending on the user's browser settings.

Adding Images

<img src="....." /> - adds an image, either from a linked source or from the same source as the html page, depending on the url that follows.

This code adds the link from a file in a folder used by this web site:

<img src="//s3.amazonaws.com/libapps/accounts/218/images/harpobook.jpg" width="215" height="270" />

You can change the size of an image by adding height and width attributes. The image above has been scaled to 215 pixels wide by 270 pixels high. If we wanted to enlarge the image by 25%, we could change the size values:

<img src="//s3.amazonaws.com/libapps/accounts/218/images/harpobook.jpg" width="268" height="337" />, which produces this:

One important caveat: resizing has its limits. Depending on the image file resolution, you may lose sharpness by making an image too large or two small.