HTML – Website Add-Ons

Posted on November 25, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

You have now completed a fully working website. You have added a few webpages and created a fully working navigation system. All your pages have some meaningful and relevant content including pictures and text.

What’s Next?

This blog post will give you some ideas of add-ons you could add to your website to improve the look & feel of the site, add live content or add some interactivity to your webpages.

Using an online Text Editor

Using an online Text Editor can save you a lot of time to create HTML code for your main text.

Google Fonts

Bored with the usual Arial or Times New Roman fonts? Choose amongst a collection of hundreds of Google Fonts that can be used on any webpages.

Check the video tutorial on how to use Google Fonts on your website: https://youtu.be/peR9V-f9OkI

You will need to add the following code in the <HEAD> section of your code:

<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

1	<link href="http://fonts.googleapis.com/css?family=YOUR_CHOSEN_FONT" rel="stylesheet" type="text/css">

And then in HTML your code either use the

<FONT face="YOUR_CHOSEN_FONT">...</FONT>

1	<FONT face="YOUR_CHOSEN_FONT">...</FONT>

Or in CSS:

BODY, H1, P  {
   font-family: YOUR_CHOSEN_FONT;
}

BODY, H1, P {

font-family: YOUR_CHOSEN_FONT;

}

Table of Data

Use this website to create a table of data such as a price list or a table showing opening times for the different days of the week.

Transition Effects

Use these examples to create a transition effects that will run when you page loads or is being refreshed.

Interactive Tabs

Check this page to create a fully interactive tabs.

Expand/Collapse Accordion

Check this page to create a fully interactive accordion..

Interactive Slide Show

Check this page to create a fully interactive slideshow showing images and slideshow navigation features.

Interactive image Gallery

Check this page to create a fully interactive image gallery showing image thumbnails and gallery navigation features.

Roll Over Buttons

Create some nice rollover buttons to add to your website or to create a navigation bar.

Responsive Navigation Bar

Create a fully responsive navigation bar which will adapt to the size of the screen and work great on smartphones.

Google Maps Widget

A google map widget could be a good add-on to your contact us page or your directions page. Find the map you want to focus on and embed it on your webpage.

Check the video tutorial on how to embed a Google map: https://youtu.be/BsvieSBad5Q

Live Weather Forecast Widget

Check this website that lets you add a live weather forecast widget to your webpage in just a few click. You can specify the format of your widget as well as the location for which you need the weather forecast.

Google Translate

Check this website that lets you add a Google translate widget to your website. However this will only works on live websites!