Make HTML Image Gallery

Image

Prepare:

Several Images to upload

A Website with Gallery Menu

the HTML:

Here’s the template for a 5 image gallery:

<div>

<a href=””><img src=”” width=”” height=””></a>

<a href=””><img src=”” width=”” height=””></a>

<a href=””><img src=”” width=”” height=””></a>

<a href=””><img src=”” width=”” height=””></a>

<a href=””><img src=”” width=”” height=””></a>

</div>

Breakdown:

<a href=””>

In here you need to enter a link for your image. So when you click on this image, reader will be directed towards a larger image.

Here is an example

To link an image to a web originating image it would be something like

<a href=”http://www.nyu.edu/clubs/homecoming/nyu.300×300.jpg”>

To link an image to a image you are uploading, it would look like

<a href=”images/CAM00765.jpg”>

<img src=”” width=”” height=””>

This is a place to enter a direct link to your image.

It would look like

From web:

<img src=”http://www.nyu.edu/clubs/homecoming/nyu.300×300.jpg”>

From your own folder:

<img src=”images/CAM00765.jpg”>

After these steps are done, we put in width and height of the images we are trying to upload.

For this gallery, I used 100x100px square images. You can change the size to fit your needs.

So in full, it would look like

<div align=”center”>

<a href=”images/CAM00765.jpg”><img src=”images/CAM00765.jpg” width=”100″ height=”100″></a>

<a href=”images/CAM00772.jpg”><img src=”images/CAM00772.jpg” width=”100″ height=”100″></a>

<a href=”images/CAM00774.jpg”><img src=”images/CAM00774.jpg” width=”100″ height=”100″></a>

<a href=”images/CAM00784.jpg”><img src=”images/CAM00784.jpg” width=”100″ height=”100″></a>

<a href=”images/CAM00786.jpg”><img src=”images/CAM00786.jpg” width=”100″ height=”100″></a>

</div>

** Note: <div align=”center”>

Here, you may change center to left or right and place your images wherever you like on your website.

by Regina Park

Advertisements

~ by reginapark on September 30, 2013.

 
%d bloggers like this: