- Internet & the Web
Using the HTML element on Weebly
Using HTML in Weebly
So you've got your Weebly website up and running using the basic elements such as text and image. Now you're wondering how to use the HTML element. There are many things you can do with this useful element and in this lens I will show some of the more interesting things I have come across.
If you are new to Weebly and want to find out more about how it works visit my Weebly website builder lens to find out more.
Photo courtesy of - wikimedia commons
Why use the HTML element?
So why use the HTML element at all? The answer to this is fairly simple; you can add so much more to your site than the Weebly elements alone can give. I have built several websites now using Weebly and I have used the HTML box in most of them, and for a variety of reasons. It's all very easy and requires no prior coding knowledge. Everything on this lens is a matter of copying & pasting and following some simple instructions.
Sites I have made which utilise the HTML element
This is the site I have put most work into. It uses the HTML element for AdSense and other advertising streams as well as for adding social bookmarking apps.
- Second Hand Book Sale
On this site I have used the HTML element to add a visitor counter and Amazon Associate links
- Online Tower Defence
On this site I have used the HTML element to embed tower defence games from other sites all into one place.
HTML books on Amazon
You don't need to know HTML already to be able to use the items on this lens, but if you're interested here are some great books on HTML available on Amazon.
A nice simple one to start with; the visitor counter. There are many different websites out there offering free visitor counters, but here is a good one that I've found. Free counter stat. You simply go to this website and choose the design you want and how many digits you would like your counter to show. You are then given an HTML code. Paste the code into the HTML element and the counter appears and will start counting visitors to your site.
There are many different designs of counter on this site and you can see a similar one on my Second hand book website in the above picture. (The picture shows the counter as it appears on the actual site).
The HTML element also comes in very useful with Google AdSense. Although Weebly has an AdSense element for you to drag onto your page, any proceeds from this are split 50-50 with Weebly. However, anybody with a Pro account is allowed to put AdSense adverts onto their page using the HTML element which then allows you to keep 100% of the earnings.
All you have to do is access your AdSense account, go to the 'My Ads' section, and click on 'New Ad Unit'. Using this you can create whichever size advert you like, play around with the colour scheme to make it fit your site as well as deciding what kind of adverts you would like to show (or not show, as the case may be). You are then given a code to put into your HTML element.
The ad is saved on your AdSense account so that if you create a 'Banner' ad in your chosen colour scheme for one page, you can then add another 'Banner' ad to a different page without having to go through the whole creation again.
Photo courtesy of PNG crusade bot- wikimedia commons
Adding images and GIF animations to your Weebly site
The image element on Weebly is great if you just want to add a simple image. It allows you to alter the size of the image and use some simple effects, and is great if you are adding a normal image from your computer or somebody else's image from a given web address. However, sometimes you might want to add a simple GIF animation to your page and for this the image element just doesn't cut it. The HTML element is what you need. For this to work the GIF image needs to be already hosted on the internet and you need to know its web address.
In your HTML element, copy and paste the following code <img src="url"> replacing url with the url of the image you want to use. Your image will then appear.
If you want to change the size of your image, this requires a little bit of extra code. Simply add height="required size" width="required size" to the above code after the "url" but before the final >.
To enter the correct sizes, find the dimensions of the original picture. To do this, right click and look for the 'dimensions' part. This will give you the height and width of the picture in pixels. To change the size of the image without stretching, you need to multiply both original sizes by the same amount.
E.g. suppose my picture is 150 x 200 pixels. I could double it to 300 x 400, or multiply by 1.5 to get 225 x 300. These would both retain the correct scale, but be larger.
Embedding games and apps
To make my Online Tower Defence website, I made use of the HTML elements to embed the games. To do this find a website which offers you the chance to 'embed this game' or 'embed this quiz' or whatever it is you want to add. The site will give you an HTML code to embed into your HTML element and the game/quiz will appear.
For example, suppose you want to embed the game 'Bloons' onto your website. Simple type 'Bloons embed code' into Google and you should quite easily be able to find a site offering the chance to embed it. Copy and paste the given code into HTML box and you have the game embedded.
This is perfectly legal and moral as the site is giving you permission to embed it by virtue of giving you the code.
Image of 'Bloons' taken from www.onlinetowerdefence.co.uk
Social Media plug-ins
Weebly has come on a long way recently with regards to adding Social Media buttons to the site and it's very easy to link to your own Facebook/twitter etc. accounts from you Weebly site.
However, the HTML element is extremely useful for adding Social Media buttons to your site. The picture on this module shows part of the home page of my DoingMaths website. Using the HTML element I have added a Facebook 'Like' button, a Google 1+ button, a Pinterest button and a updating Facebook plug-in showing activity on my linked Facebook page.
All of these were done by adding the correct code into the HTML element.
You don't need an account with any of the above social media sites to have these buttons and they are great for SEO purposes as they are ways of telling the search engines that somebody enjoyed your site and wants to let others know.
See the links below for places to find code for these plug-ins.