Create HTML and Image Banners For Your Website
Posted by Spyros Panagiotopoulos in Website Enhancements, tags: html banners, image banners, website banners
I was asked by a fellow tweeterer how one can create a simple html banner for their website and display it in its left or right side. It occurred to me that many people would want to know how to do something like that and therefore i decided to create a post in order to simplify the process for those that need to do it.
It would definately be a good idea that you read this simple introduction to HTML before attempting to create your banners. However, even if you do not have any programming experience, creating your banners is very easy.
Creating an HTML Banner
Creating your HTML Banner is all about getting the code that you need to add and pasting it to your website. The only important thing you need to know, is where to place it. Most times, you’ll be given the source code that you need to add and whether it is javascript or html code, you would just need to place it properly. If you want to create an html banner, say for doing a simple hyperlink, you would need to create some code like that:
<a href=’http://website-creation-tips.com’ target=’_blank’>This is a link to Website-Creation-Tips.com</a>
The code above is just a simple link to this website that when clicked, it redirects to the main page shown in the href. The attribute “target=_blank” means that the new webpage will open in a new tab. If you need the webpage to open in the current tab, use “target=_parent”.
Creating an IMAGE Banner
An image banner is just as easy to create as an html banner. Say that you wanted to also add an image with your link or just make a simple clickable image as your banner. You just need to make a simple change to make this happen and that is simply replace the static text of the link with an image like :
<a href=’http://website-creation-tips.com’ target=’_blank’> <img src=’logo.jpeg’ > </a>
Notice that src is the name of the image that you need to display. If this lies in a folder like images/ inside your webroot, just use it like:
<img src=’images/logo.jpeg’>
To make sure that it will properly be found and displayed. This is a simple html banner also containing an image and as you see it is just a single line of code created in 2 minutes.
The Challenging Part – Placing Your Banners In Your Website
Now this is where most people face difficulties and that is mainly because they do not know enough about HTML programming. In fact, you do not need to know much about it in order to place your banners. If you possess a blog like wordpress, it should be pretty easy for you to do it. You just need to add a text widget from your admin panel and just paste the text that you created before and you will be set.
However, if you possess a website that someone made for you and you do not have the option of a nice control panel, you need to locate the spot to add the banner on your own. Luckily, the process is quite easy most times.
All professionally created websites (unless you fell for some scam designing it for you) work around cascading style sheets, which are today’s standard technology for website creation when the design is considered. Therefore, they would either use lots of DIVS, which are an html attribute or lots of tables(located as <table> in html code).
90% of times it will be created with simple divs. Divs are found inside the html code like <div></div>. They are like logical containers that hold html code inside them. When you see a three columned design for a website it’s in fact 4 divs. One is the central div that acts as a box to the whole website page and holds another three divs featuring the right, left and middle boxes. Therefore, it is almost certain that you will spot some code like:
<div class=’left_nav”‘> blah blah blah </div>
Should you see something like that, you already know that you are inside the left navigation panel and if you need to add a banner on the left side of your website, you should really do it here. Just take a look at the code that is already inside and paste yours in the appropriate place, maybe making some tests placements before actually determining the spot. It works the same way for the middle and the right navigation bars of course.
Banner Alignment
Just a small addon before finishing this post. If you need to align your banner left, right or center inside your div, you can do it in two ways. The first and better one is add it directly inside the CSS file. Locate the css file of your website and then search for “left_nav” (or whatever it is for your website). Then, just add inside left_nav{} :
text-align:center;
This will place the content inside this div in the center position(left or right if you want too).
The second way to do it is directly add it to your banner code like:
<div style=’text-align=center;’><a href=’http://website-creation-tips.com’ target=’_blank’> <img src=’logo.jpeg’ > </a></div>
Hope that you can easily go and create your banners now and not have any difficulty placing them properly. If for any reason, you still have trouble doing so, please drop a comment about it and i will try to help.
<img src='leisureGames.jpeg'>
Random Posts
If you enjoyed this post, make sure you subscribe to my RSS feed!
Entries (RSS)