How to Make Your Own Banner With a Code
Banners come in various sizes and serve as an advertisement for your website. You can make your banners, and then take it a step further by providing the HTML code to make it more convenient for anyone who wants to link to your website on their own. All they would need to do is copy the code you provide and paste it wherever they want your linked banner to show up. You can easily and inexpensively create your own banner with a code.
Other People Are Reading
Instructions
-
-
1
Launch a graphic editing program (if you don't have one, see paint.NET in "Resources" for a free download) and create a new document with the dimensions that you want in pixels. The most common and popular banners are sized 125 by 125 pixels, 88 by 31 pixels and 468 by 60 pixels.
-
2
Copy and paste or fill your banner with an image or a color. You should style the banner so that it closely matches the color, text, and general look and feel of your website. Design your banner so that it is like a small "preview" or representation of your website. Save your banner when you are satisfied with it, and give it a name such as "banner-125-125" with the file extensions .PNG or .GIF. These extensions are displayable as images on the Internet, and will keep your image looking crisp (.JPG will make it blurry).
-
-
3
Upload your banner to the Internet on a free image-hosting website (see the link to Tinypic.com in "Resources" for one image-hosting website), or upload it to your domain or sub domain server if you have one. This will give your banner a web address like "http://www.yourimagehost.com/yourbanner.png."
-
4
Put together the code that people will be able to copy and paste into their own webpage. Use this HTML code: "<a href="http://www.yourwebpage.com" title="My Web Page"><img src="http://www.yourimagehost.com/yourbanner.png" alt="My Banner" /></a>". (Do not include quotation marks.) This displays your banner and makes it clickable by linking to your website.
-
5
Make the code displayable on a website. You can do this by either putting the code in a text box with the tags "<textarea>your code</textarea>", or by going to the Felgall.com link in "Resources" to have it converted to a text equivalent. Display the banner on your website so people know what it looks like with the code "<img src="http://www.yourimagehost.com/yourbanner.png" alt="My Banner" />", with the code that you converted displayed directly underneath it.
-
1
References
Resources
- Photo Credit banner image by Alexey Klementiev from Fotolia.com
