Servage Magazine

HTML5 is often referred to as the Flash killer, and while it may be too much to hope for, HTML5 will certainly replace much of what Flash is used for today. But for you as a web creator to have the opportunity to start working seriously with the new standard, it is necessary that there are good tools that make the work manageable. Adobe themselves have of course realized that there is no point in clinging to Flash as the only alternative, but instead adapt to the future and continue to make money even after Flash 'possible death ;-). They have therefore already presented ...

This time we show how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> <li><a href="">Login</a></li> </ul> So far this is somewhat similar to the dropdown menu, except we don’t have sub-items. This tab-menu and the dropdown ...

When building a website today there is almost no question about if it should be made responsive or not. It makes sense to adapt websites to the device they are being used on, and thereby improve the user’s experience significantly. However, as soon as you begin discussing how you want to adapt the site to different devices and how that responsiveness should actually be implemented, then you run into some general decisions you need to make. Now, responsive and adaptable are different things. It is important to understand the difference because it makes you able to consciously choose the method that is best for your given scenario. Note that responsive and adaptable are ...

Everyone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially  older versions of browsers are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues are frequently discussed on the Internet, and a common interpretation of HTML and CSS across all browsers is unfortunately not in sight. However, there is ...

If you’re creating a page for the Web, chances are you’ll want it to point to other web pages and resources, whether on your own site or someone else’s. Linking, after all, is what the Web is all about. There is one element that makes linking possible: the anchor (a). <a>...</a> Anchor element (hypertext link) To make a selection of text a link, simply wrap it in opening and closing <a>...</a> tags and use the href attribute to provide the URL of the target page. The content of the anchor element becomes the hypertext link. Here is an example that creates a link to the Google website: <a href="http://www.google.com">Go to Google Home Page</a> Linking to Pages ...

In the last blog, we gave you a general overview about our websitebuilder. In this blog, we like to explain some features of that tool more detailed. However, in case of questions or remarks, you are of course always welcome to contact our support via ticket or live chat. Start using the sitebuilder with installing it on one of your host. The guideline for that, can be found HERE. As soon as the installation is complete go to "Domains and Websites" -> "Sidebuilder" to find the "Admin" button. Push that button to enter the editor. In the design step you can adjust your template by selecting colors and fonts to ...

Adding dates via input elements in forms can be cumbersome unless a date picker is used. There are a few plugins available for jQuery and Bootstrap which make this process simple - yet implementing a powerful and advanced tool. The tool described below is called "Date Range Picker for Bootstrap" and is ready to go with a very simple implementation. Getting started The first step is to include the relevant resources into your site. The dependencies are Bootstrap (and jQuery), so you  need to get them first. Thereafter add the resources for the data range picker plugin. <!-- Include dependencies --> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.css" /> <!-- Include date range picker ...

  There is an interesting story about Vilfredo Pareto, an economist who made an observation on the wealth of most of the nations in UN and found that 80% of the wealth of a nation is in the hand of 20% of the people in that country. This became famous as the 80/20 rule in the economic world there after. In our computing world especially in case of web development and web developers who are focusing on performance optimization technique this same rule is working for the code. There are only 20% codes, which are consuming 80% time of the client-server interactions. This is particularly true for http requests. Us web programmers are ...

JavaScript came about during a dark and lawless time, before the web standards movement, when all the major players in the browser world were—for want of a better term—winging it. It likely won’t come as a major surprise to anyone that Netscape and Microsoft implemented radically different versions of the DOM, with the prevailing sentiment being “may the best browser win.” insertBefore() The insertBefore() method, as you might guess, inserts an element before another element. It takes two arguments: the first is the node that gets inserted, and the second is the element it gets inserted in front of. You also need to know the ...

The <canvas> element is probably the greatest addition to HTML5. This new element can be used to create anything from a single-color box to complex shapes and charts. We will take a look at how to build some simple shapes with the <canvas> element and learn what can be achieved with more advanced use of the element. What is an HTML5 canvas? In simple terms, a canvas is a <div> inside which you can render graphics. Those graphics can be simple shapes such as circles and boxes, or more complex graphics like charts and even animations. A canvas can be created with the <canvas> tag. This might come as a surprise, but drawing to ...