How to Create a Gallery Website
Museums and art stores often use galleries to display photos, art or other exhibits in an appealing and orderly fashion. Website tables make it easy to create an online gallery display. The gallery table gives a preview of each exhibit. Unlike physical galleries where visitors walk from room to room to view various exhibits, website visitors click on exhibit images to move from one exhibit to the next.
Other People Are Reading
Things You'll Need
- HTML editor
- Website hosting
- Photos or images in GIF, JPEG or PNG format
Instructions
-
-
1
Create a basic gallery home page and give the page a name. Display the title of your gallery prominently on the homepage.
Build the page using the following HTML code:
<html>
<body>
<center><h1>Gallery Title</h1></center>
</body>
</html>
Replace the words "Gallery Title" with the name of your gallery. -
2
Add an exhibit display table to the homepage. Use the following code to create a table where each exhibit displays a clickable preview image in a separate table cell. (This code includes basic homepage code explained Step 1.)
<html>
<body>
<h1>Gallery Title</h1>
<table>
<tr>
<td><a href="exhibitpage1.html"><img src="exhibit_image1.jpg" width=100 height=100><center>Exhibit 1</center></a></td>
<td><a href="exhibitpage2.html"><img src="exhibit_image2.jpg" width=100 height=100><center>Exhibit 2</center></a></td>
<td><a href="exhibitpage3.html"><img src="exhibit_image3.jpg" width=100 height=100><center>Exhibit 3</center></a></td>
</tr>
<tr>
<td><a href="exhibitpage4.html"><img src="exhibit_image4.jpg" width=100 height=100><center>Exhibit 4</center></a></td>
<td><a href="exhibitpage5.html"><img src="exhibit_image5.jpg" width=100 height=100><center>Exhibit 5</center></a></td>
<td><a href="exhibitpage6.html"><img src="exhibit_image6.jpg" width=100 height=100><center>Exhibit 6</center></a></td>
</tr>
</table>
</body>
</html>The <table> tag creates an HTML table. Each table row displays within the <tr> and </tr> tags. Each row contains cells contained within <td> and </td> tags. In this example, the table contains two rows of three cells each for a total of six exhibit displays.
-
-
3
Add additional rows to the code in Step 2 by copying over the entire block of code located within the <tr> and </tr> tags and then pasting this code between the last </tr> and the </table> tag.
-
4
Add additional cells within an existing row by repeating the following code for each new cell:
<td><a href="exhibitpageX.html"><img src="exhibit_imageX.jpg" width=100 height=100><center>Exhibit X</center></a></td>Include the same number of cells in each row so that the gallery table looks aligned.
-
5
Replace "exhibitpageX.html" with the name of the exhibit's individual webpage (to be created in Step 6). Replace "exhibit_imageX.jpg" with the name of the exhibit image. Replace "Exhibit X" located between <center> and </center> with the name of the individual exhibit display.
-
6
Create an image thumbnail by specifying the width and height of the image. In the code in Step 2, the width and height of each image are set at 100 pixels. Increase this size to display larger thumbnail images or decrease to display smaller images. Keep all images the same size so that the gallery display looks neat and orderly. If images do not look good, use a graphic design program to professionally alter the images to desired sizes before including them on your gallery website.
-
7
Create individual exhibit webpages for each exhibit. Display the exhibit title at the top of the page. Insert a large feature exhibit image. Add a paragraph of text underneath the image explaining the exhibit. Add a link back to the gallery homepage at the bottom of the exhibit page so that visitors can visit further exhibits.
Use the following example exhibit webpage code:
<html>
<body>
<center><h1>Exhibit Title</h1></center>
<img src="exhibit_photo.jpg">
<br>
<p>Enter detailed description of exhibit here.</p>
<a href="galleryhome.html">Back to Gallery Home Page</a>
</body>
</html>Replace "Exhibit Title" with the name of the exhibit. Replace "exhibit_photo.jpg" with the name of the exhibit image. Insert exhibit descriptive text inside the <p> and </p> tags.
Replace "galleryhome.html" with the name of the gallery homepage.
-
1
References
Resources
- Photo Credit gallery image by MATTHIEU FABISIAK from Fotolia.com
