Servage Magazine

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

Articles Tagged ‘html’

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

Is your website standard compliant?

Monday, January 15th, 2018 by Servage
vcss-bluevalid-xhtml11-bluevalid-html401-blueEveryone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially Internet Explorer, but also older versions of other 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 ...

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

What are progressive web apps

Thursday, November 2nd, 2017 by Servage
web-appThe term progressive web app (PWA) is a hot trend right now. It all started back in 2015 and quickly became popular due to the advantages it offers over traditional mobile applications. But what is a progressive web application? How does it differ from a typical mobile or web application? Let’s find out what the term PWA actually means and what makes an application a progressive web application. The Definition of Progressive In one sentence, a progressive web application is a website that looks and works like a mobile application. Modern HTML5 and CSS3 features allow developers to replicate many of the features native applications can do: storing data locally, using animations to ...

Building native-looking mobile apps with HTML and CSS

Thursday, February 23rd, 2017 by Servage
html-css-js-web-appHave you ever wished creating native Android or iOS applications were as easy as using HTML and CSS? Well, now it is! A CSS framework called Framework7 allows you to build web applications for phones that look almost identical to native mobile applications. If you enable full screen view in your phone’s web browser, chances are you don’t even notice the difference. Grid System One of the core features in every CSS framework is the grid system. It defines how many columns one row can have and what screen sizes they support. The grid in Framework7 is very similar to the grid of Bootstrap. All columns are placed inside a “row” class and ...

Build an interactive feedback form with Javascript

Tuesday, February 14th, 2017 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 ...

Creating dropdown-menus without JavaScript

Monday, January 30th, 2017 by Servage
dropdownDropdown menus are found on almost every website. The most common place for a dropdown is the main navigation bar, although a website can have dropdowns in almost any context. You can create a dropdown menu with JavaScript but this often makes it unnecessarily complicated. Let’s explore what it takes to make a simple navigation bar with only HTML and CSS. HTML Structure New designs are usually started by considering the HTML structure, so let’s do that first. The HTML of a dropdown menu is usually quite simple, and we only need three elements: <ul>, <li>, and <a>. You may also want to wrap the whole navigation bar inside a <div> or <nav> ...