HTML

Home

Tutorials

Go to tag:

 

Creating Pictures

Open Windows Explorer and create a new folder called 'pics' in the folder where you have saved your files.  Find about three large pictures to place inside this folder - such as from a camera or the Internet.  They should be in JPEG format (i.e. end with .jpg).

The 'pics' Folder
The 'pics' Folder

Create a new page and save it with the name 'pictures.htm' in the same folder as 'index.htm' and 'links.htm'.

In this page we will be creating thumbnails of the images, which link to the full-sized versions.  Type the word 'Pictures' with the 'Heading 1' style and set the title of the page.

Creating Thumbnails

Thumbnails are smaller versions of pictures, which when clicked on display the full-sized versions.  There are programs, which are designed specifically for this task but we will be creating the thumbnails manually using the Paint program, which is part of Windows.

Open the Paint program (Start > All Programs > Accessories > Paint) and open one of the pictures.  On the 'Image' menu, choose 'Stretch/Skew...'.

For the pictures page, we will make the thumbnails about 2"x2".  Therefore to resize an image, which is 1024x768 pixels in size to be about 2"x2", the percentages should be about 25%:

Stretch and Skew in Microsoft Paint
Stretch and Skew in Microsoft Paint

If the numbers you enter result in the image being too big or small, click on 'Undo' in the 'Edit' menu and try again.  The numbers you enter should both be the same to keep the image proportionate.

Once the image is the correct size, click on the 'Save As...' in the 'File' menu.  Keep the same filename, but add '_tn' to the end e.g. 'jaguarxk.jpg' will be 'jaguarxk_tn,jpg' to identify it as the thumbnail version.  Create thumbnails for the other images.

Adding Pictures to the Page

Go back into FrontPage (with 'pictures.htm' open).  There are two ways to insert pictures into pages.

One way is to drag the picture file from Explorer into FrontPage.  Drag the first thumbnail image into position under the heading on the page.  Move the cursor so that it is under the first picture.

On the 'Insert' menu, choose 'Picture' > 'From File...'.  Browse for the next thumbnail image and double-click on it - it will be inserted into the page.  Use either method to insert any remaining images you have.

When the user clicks on an image, we want the full-sized version to open in a new window.  To make this happen, you need to turn each image into a hyperlink, which links to the full-sized version.

Right-click on the first image and choose 'Picture Properties...':

Picture Properties
Picture Properties

The 'Picture source:' field shows the folder and filename of the thumbnail image.

In the 'Text:' field, type a description of the image.  In Internet Explorer, this will appear when the user holds their mouse cursor over the image.

In the 'Location:' field, you will need to type the filename for the full sized image.  You must only type the location in relation to the document you are working on.  As the full-sized images are in a folder called 'pics', you need to include this folder name and the image name.  The text will be the same as the location in 'Picture source:', but without '_tb'.

Click on the 'Target Frame:' browse button and choose 'New Window', which will cause the image to open in a new window.  Do this for the other images in the document.




Archived Comments

From: asif
Date: Tuesday, March 22, 2011 at 18:24:12
Comments: i want to create website
 
From: jaspal
Date: Friday, September 12, 2008 at 07:39:43
Comments: we have intrested in HTML
© Martin Allen 1999 - 2017.  Last updated Tuesday 14 November 2017 22:55 +0000.