How to Make a GIF File Web Page
GIF stands for Graphics Interchange Format. Websites commonly use images in GIF format because they are universally supported and read even in older browsers. Other advantages of GIF images include the ability to create animations and transparent background. GIF limits images to 256 colors which creates a small file size. Create a GIF webpage that features a GIF image by itself or along with additional webpage components.
Other People Are Reading
Instructions
-
-
1
Upload your GIF file onto your web server using FTP or file managing system provided by your web host. For easiest coding, upload the GIF file into the same directory as your webpages. If you have a specific image sub-directory within your root directory (where webpages are located), upload the file into the image directory instead. Alternatively, upload the image onto a free image hosting website such as Flickr, Image Shack or Photobucket.
-
2
Open an HTML editor and create a new HTML page. Use the following HTML code to create a web page where your GIF file will display.
<HTML>
<BODY>
</BODY>
</HTML>
-
-
3
Add the GIF file by inserting the following code between the <BODY> and </BODY> tags:
<IMG SRC="filename.gif" ALT="Image Description">
Replace "filename" with the name of your GIF file.
If your GIF file is located within a subdirectory, then replace "filename.gif" with "/images/filename.gif." Replace the word "images" with the subdirectory name if your subdirectory uses a name other than "images."
If you uploaded the image into a free image websites, then replace "filename.gif" with the full URL of the website image.
For example:
<IMG SRC="http://www.samplefreeimagewebsite.com/filename.gif" ALT="Image Description">
Replace the words "Image Description" following the "ALT" tag with words describing your image. The text following the "ALT" tag will display in some browsers when a user moves his mouse over the image. The "ALT" tag can also replace images on mobile devices or browsers where users have turned off image display.
-
4
Include the size of the image within the "img" tags by adding height and width tags using the following format:
<IMG SRC="filename.gif" ALT="Image Description" WIDTH="100" HEIGHT="200">
-
5
Modify the code to center the GIF image on the page as follows:
<CENTER><IMG SRC="filename.gif" ALT="Image Description" WIDTH="100" HEIGHT="200"><CENTER>
-
6
Save the HTML page and upload it onto your web server's webpage directory.
-
1
Tips & Warnings
Find out the width and height of an image by selecting the "image size" within your graphic design software.
If you wish to display the image on a webpage in a different size than the actual size of the image, you can include "width" and "height" tags of your preferred size. Graphic experts, however, recommend that you change the size within a graphic design software instead as this will display a clearer image on the webpage.
References
Resources
- Photo Credit www 7 image by chrisharvey from Fotolia.com
