Servage Magazine

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

Articles Tagged ‘html’

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 ...

Build A Toolkit To Help Define Your Web Design Style

Sunday, November 4th, 2018 by Servage
In order to get good conversion rates and positive user experiences, user interface design is vital. Let’s take a look at some practical ideas to do that. Single Column Layout The first consideration in user interface (UI) is the page layout. In our previous web era, we were free to try various options for layout and among them, multi-column approach was common, since we then wanted to use screen space at a maximum level. Now, with mobile web, we are restricted to single column layout since panning on hand held devices is not advisable, along with the scrolling involved. With finger gestures, a visitor feels a natural ease and ...

Create a cool CSS-based tab-menu

Tuesday, April 10th, 2018 by Servage
We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing 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> ...

Servage Web Development Course Part 5: Forms

Friday, March 9th, 2018 by Servage
Welcome back to the development course. Now it's time to learn about forms. You may have noticed that forms are used all over the web to get user input. This happens in various ways, by entering information into text fields, select something from a drop-down box, chose among multiple options in buttons etc. The one thing that is valid for all of them, is that it is in some way or another a method of getting information (input) from the user. In this part we will go through the basic form and input elements. The form itself The typical HTML form is enclosed by the <form> tag, which holds two important attributes, "method" and "action". The "method" attribute ...

Servage Web Development Course Part 4: Tables

Friday, March 2nd, 2018 by Servage
blogimageToday we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been "normal" for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data. The table HTML structure The <table> tag has three sub-elements, which could ...

Servage Web Development Course Part 3: Layout and page structure

Friday, February 23rd, 2018 by Servage
blogimageEvery website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there - somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let's have a look at a sample <div> container structure (part3a.html of the project files): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

Servage Web Development Course Part 2: Content formatting

Friday, February 16th, 2018 by Servage
In this part you will learn how to format (style) web pages' main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course. Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also ...

Introduction to the Servage Web Development Course

Saturday, February 10th, 2018 by Servage
Hello and welcome to the Servage Web Development Course. Over the next weeks we will take you through a series of tutorials that will show you how to develop your own web site and application from scratch. The course if designed for anyone that has no or little prior knowledge about website development. After this course you will have a good overview over the main technologies used - namely HTML, CSS, PHP and MySQL. The course itself will take you through these areas by building a little Blog-application step by step, that will feature creation, modification, display and design of content. So, if you are not yet an expert on creating webpages, please continue reading :-) The beginning Every ...

Using Responsive Images in HTML5

Wednesday, December 27th, 2017 by Servage
responsive-designThe <picture> element has been part of HTML5 for a relatively long time. Surprisingly, the element is still quite rarely used, although it clearly has some benefits to it. Most importantly, you can choose which version of an image to load based on the screen size of a visitor’s device. Responsive Images: The Old Way Images are usually placed inside containers such as divs. If there is no CSS applied to the image, the image takes as much space as its dimensions are. In most cases, this causes the image to “overflow” the container div. The typical way of fixing this is to add “max-width: 100%” to the image. This resizes the image ...

Looking at Bootstrap 4

Sunday, December 3rd, 2017 by Servage
Bootstrap4The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework. The New Grid While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is ...