Forcing Links to Open in a New Tab or Window

Have you ever found yourself browsing the web on a smartphone and clicked on something that opened in a new tab? It is almost impossible to tell when this happens. In fact, many people don’t even realize that browsers on SmartPhones can have the equivalent of multiple tabs or windows. Now imagine someone using a screen magnifier. They click on a link somewhere in the middle of the screen. If the link opened in a new tab in the background, they would never notice it and just think something is broken. However, if it opened in the foreground, one might … Continue reading

Which Web Development Programming Languages Should I Learn?

I am often asked this question by other Web developers. In fact, I regularly need to figure decide which web programming languages and technologies I need to learn next as part of my life long learning. Start with Web Browser Technologies Did you know? Even after over 20 years of mainstream web technology, web browsers only natively understand 3 things: HTML, CSS and JavaScript. That’s it, that’s all! There actually used to be a fourth, vbScript, but it was only available in Internet Explorer and Microsoft finally deprecated it as of IE11. Anything more and it is usually an add-on, plugin or … Continue reading

Developers – How to get started in Moodle development

For developers just getting started in Moodle development, testing and fixing 3rd party Moodle plugins which are not currently supported the latest version of Moodle is a great way to get started on your way to learning how Moodle works. These plugins often just need simple fixes, updates to deprecated API calls and stuff like that. Start by browsing through the list of 3rd party plugins and choose a plugin that is of interest to you. If you think it would be useful for you, chances are there are others who would think so too. Next contact the author before you start just to make sure … Continue reading

Changing Notepad++’s default source code language for new documents

Notepad++ is a great editing tool for web developers. I know many, including myself, who use this together with Adobe Dreamweaver for their HTML development because there are just some things that Notepad++ does better than Dreamweaver including syntax colouring and HTML tag  matching. When you first start using Notepad++, it tries to determine the language of your source code using the filename extension. If you are just using a blank unsaved document, it may just treat your HTML code as plain text, offering no syntax colouring or tag matching. To enable these features, you either need to save your file with a … Continue reading

Media Queries with Older Browsers

Did You Know? Media queries are part of CSS3 and allow web designers to customize CSS definitions for the layout depending on the device and screen width thereby creating a single Responsive Web Design that adapts to the visitors environment which is important, especially if you have a lot of visitors on mobile devices. Unfortunately media queries like the following line were not supported in Internet Explorer 9 (IE9): @media screen and (min-width:960px) and (min-device-width:960px) { style definitions here … } If you are using a series of lines similar to this in your responsive website theme, you may be surprised … Continue reading

Using CSS to make DIV go around Float

At some point, most HTML developers end up in a situation where they use the float:right and/or float:left property and then notice that the DIV going around it isn’t wrapping the content anymore. Broken Example You can reproduce this in the physical world by holding an elastic band open with your fingers. Holding your fingers in the same position, pull them out from elastic band. With nothing left inside to hold the shape of the elastic, it shrinks back to it’s original shape. This is what is happening with your outer DIV. Hello World! Working Example of the Solutions The … Continue reading

Using jQuery Dropdown to Display Select Content

Here is a technique that uses jQuery to reduce the length of web pages containing repetitive formatted information. You can use it to display images as seen below or information such as people profiles. This is flexible too because the HTML select tag can be organized into categories. If JavaScript happens to be disabled, all of the div sections will be displayed but the pull down pick list will not. Example Select an image category: AbstractAnimalsBusinessCatsCityFashionFoodNatureNightlifePeopleSportsTechnicsTransport Examples of Lorem Pixels — Abstract Category Sample image Examples of Lorem Pixels — Animals Category Sample image Examples of Lorem Pixels — Business … Continue reading

Add a Search Page to a WordPress Site Using Weaver II Theme

To create a search page for the Weaver II theme: Create a new page Set the title to Search or Search Website Set the Permalink to search Set the parent is set to (no parent) unless you want it to appear in a sub-menu. If you don’t want the page to appear, you can use a custom menu or use the Exclude Pages WordPress plugin to add an Exclude Pages from Navigation checkbox to your page and then use it. Add the following HTML code on the text tab of your page: Save your page. It should look something like … Continue reading

Get Google Verified Authorship for Your Website

Some people claim that getting getting Google Verified Authorship for your site can actually increase click throughs and even rakings. While I’m not sure about that, if there is even a chance that this is true, can you afford not to especially when it only takes about 5 minutes of your time? Here is how you can get Google to verify authorship of your site: Step 1: Add the following code to the header of your site: <link rel=”author” href=”” /> Naturally you’ll want to change the link to point to your own page. For WordPress Sites: Some themes advanced … Continue reading

WCAG 2.0 – Compliant HTML Tables

Below are examples of WCAG 2.0 compliant HTML tables. Be sure not to duplicate the table Caption and Summary as both will be read by screen readers. Simple Tables (skip to Complex Table) Here is sample source code for creating a Simple HTML table. Figure 1: Sample of Table Caption table Header 1 Header 2 example cell example cell example cell example cell example cell example cell example cell example cell Sample Total Sample Total Source Code Complex Tables Here is sample source code for creating a complex HTML table. Figure 1: Sample of Table Caption table Header 1 Header 2 … Continue reading