Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘html’

Create a cool CSS-based tab-menu

Friday, December 6th, 2019 by Helge
This time we showtabmenu 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 ...

Responsive or adaptive design? What’s the best choice?

Friday, October 18th, 2019 by Helge
responsive-adaptible-designWhen 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 ...

Is your website standard compliant?

Saturday, October 12th, 2019 by Servage
wc3Everyone 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 ...

How to add links in HTML

Monday, October 7th, 2019 by Servage
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 ...

New Servage Hosting account – Sitebuilder part 2

Wednesday, October 2nd, 2019 by Helge
designIn 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 ...

Beautiful date range picker for Bootstrap

Tuesday, June 18th, 2019 by Servage
date-range-pickerAdding 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 ...

CSS sprites are cool and useful

Thursday, May 2nd, 2019 by Servage
  How CSS Sprites Work 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 ...

Using DOM elements in Javascript – Part 4

Tuesday, February 26th, 2019 by Servage
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 ...

Introduction to HTML5 canvas element

Saturday, December 1st, 2018 by Servage
html5-canvasThe <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 ...

Build an interactive feedback form with Javascript

Sunday, November 18th, 2018 by Servage
javascript-codeListening to feedback of users is important. The tool we are going to explore this time is not a typical feedback form. Instead, it allows visitors to give feedback interactively. Users can highlight areas or elements on a web page they need help with, write a comment to describe their issue or question, black out sensitive information and finally, send the feedback or support request. Initial Setup and Requirements We will achieve the above features with a tool called Feedback tool by a GitHub user JoeyAndres. This tool was previously abandoned but JoeyAndres forked the project to create a maintained version, so thank him for being able to use it. The Feedback tool depends ...