Responsive Menu Tutorial for HTML Web Pages, No JQuery

HTML Menu Bar Which Switches to Dropdown for Mobile

For a web site to be successful it must tick several boxes. It needs an attractive design, great content, no pop-ups, not throw to many advertisements at visitors and work well on a variety of screen sizes. The last point is important as mobile devices are now the dominant platform for accessing the web. Achieving multi-screen support from a single web site saves time (no need to update the design more than once). Time is a precious resource for most people and businesses.

A web site needs to respond to the device it is being viewed on, hence the term responsive design. When a website uses a menu to allow the viewer to jump to other pages, that menu should work well on different screen sizes. This article is a responsive menu tutorial giving an example implementation of the Responsive Nav plugin. This provides a basic responsive web site menu without using any other frameworks or libraries. As the screen shrinks the menu switches from traditional horizontal to a button. The button is used to dropdown the menu on smaller screens. Continue reading

Show PHP Settings with phpinfo and Example PHP $_SERVER Display Page

View PHP Environment Configuration Settings and Superglobals on a Page

PHP is a great computer and web site scripting language and extremely popular. It is used primarily for developing interactive web sites and many use it for day-to-day programming tasks. There are several versions in general use and sometimes the configuration of PHP between servers and machines needs to be compared. The phpinfo() function is a one line solution to show the current live PHP set up. To show PHP settings simply create a one line PHP web file on the server containing <?php phpinfo(); ?> and point the browser at it. HTML tags are NOT required because the phpinfo() function pumps them out.

PHP LogoNote: phpinfo() outputs a lot of useful information, information that hackers find interesting so use it with care. Ideally do not have the phpinfo() page on a public facing web site. On the occasions you do take precautions to reduce information leakage. Put the page in a password protected directory, do not call it phpinfo.php as this is obvious to hackers (use something more obscure and a reminder to delete it when finished, e.g. quick-config-check.php), finally don’t forget to delete it when the PHP settings have been checked.

A PHP script will need access to other settings that PHP provides, often via system wide globals known as the superglobals. The $_SERVER array provides access to the _SERVER superglobal and is shown by phpinfo() in a table. Occasionally it can be worthwhile viewing such values from another PHP file. This can be done in a few lines of code. The following provides some details on showing PHP settings and global values in web pages.

Continue reading

No DB CMS to Improve Web Server Performance

A Simple Flat File CMS Without a Database to Reduce Server Load

This article discusses reducing server load when running a Content Management System (CMS) to drive a website. The most popular CMSs, such as WordPress, Drupal, Joomla and DNN use a database (DB) to hold website content. One way of improving web server performance is to remove the database element. Why a flat file CMS vs database? Using a no DB CMS can reduce the memory footprint and code execution times for a page request. This can improve the performance of a web server under heavy load. A no DB CMS, also known as a flat file CMS, is particularly useful for limited resource web servers such as shared hosting plans or Virtual Private Servers (VPS). Continue reading

PHP on Windows Using WebMatrix Single Click Install

Running PHP to Test Websites on Windows PCs

PHP is a programming language that is popular for for adding powerful features to websites. What does PHP mean? PHP originally stood for Personal Home Page (after its inventor, Rasmus Lerdorf, wanted more features for his personal website), but now it stands for PHP Hypertext Preprocessor (creating a recursive acronym, which programmers like). PHP is easy to set-up and run on a Windows PC using the free Microsoft WebMatrix, an Integrated Development Environment (IDE) for building websites.

With the free WebMatrix package PHP on Windows is a single click install and allows website testing using IIS Express (the version of Microsoft Internet Information Server for Windows clients). This tutorial assumes that WebMatrix is installed and running on your Windows 7 or higher PC. If not see our article Develop a Website on Windows Using Microsoft WebMatrix to set it up and get a basic website going. Continue reading

Develop a Website on Windows Using Microsoft WebMatrix

Create a Free Website Online Using WebMatrix, Azure and Microsoft Windows

If you have a Windows laptop or desktop computer you can get started with website development with free Microsoft tools. One of several free software tools that Microsoft provides is WebMatrix. This contains a HTML editor in an Integrated Development Environment (IDE) and the express version of Internet Information Server (IIS) (a web server used for testing your website).  A Windows PC running WebMatrix allows you to develop a website and publish it online for free using Microsoft Azure cloud hosting. Microsoft free hosting is for a small number of low volume websites. If the website is successful and generates high traffic it can be upgraded to a registered domain and paid for high volume Azure hosting.

This tutorial was based upon using a Windows 8.1 PC but Windows 7 can run WebMatrix. You will need an Internet connection and a Microsoft account to install and run WebMatrix and to use Microsoft Azure. Continue reading

HTML5 in Android App for WebView Display

Load HTML Page Saved in Android Project

To display lots of informational text and images in an Android Application (App) HTML is a good choice. HTML is now at version 5 and supports text formatting and image display. The formatting of the text can be enhanced by applying CSS (Cascading Style Sheets). This article shows how to add HTML5 in Android using a simple example. The HTML file is created in an editor. The file is placed into the assets folder. An App with a WebView loads the HTML using the URL file:///android_asset/file.html, where file.html is the file created.

Although this tutorial will be loading a static HTML file the WebView can also display dynamic HTML by using JavaScript and the Document Object Model (DOM). The combination of HTML for page elements and structure, CSS for formatting, DOM to access the structure and JavaScript for manipulation makes the WebView a powerful component for displaying large amounts of text and images in an App.

Create Files for HTML5 in Android App Example

To start the HTML5 in Android tutorial create a new Android App project in Eclipse or Android Studio (if you don’t know how see our Android Hello World Java Program example). Here the project is called Show HTML. The HTML to be displayed in this example will be an image and some text.

Crocodile image for the HTML in Android App exampleA new file is created in the projects assets directory. In Eclipse use the File menu to select New and then Untitled Text File. Enter the required HTML. (To see the basic structure of a HTML document look at the article Hello World in HTML.) In this tutorial the text used is a poem by Lewis Carroll from the book Alice’s Adventures in Wonderland. Any text can be used. The image of a crocodile was from the Open Clip Art Library and is in the Public Domain. Copy this image and save it into the assets directory as crocodile.png. Finally here’s the full text for this HTML example:

Copy this HTML to the new file, save it in the assets directory and call it crocodile.html. (If using Android Studio you will need to create the assets directory under main in the project tree and name the HTML file first before adding the text.) Continue reading

Spaces Between Images in HTML

How to Remove the Small Spaces Between Images on a Web Page

This article deals with removing the small strips of space that can appear between two pictures placed onto a web page. It is easy to fix and you can use this article like a tutorial as example code is given.

A Basic Web Page with Two Images

A web page can be created in a simple text editor program, on a Windows PC the Notepad program under Accessories can be used, or better still a program like Notepad++ which provides color coding to help with the editing process. This is some basic code for a web page with two images:

The above code produces this web page that clearly shows a gap between the two images:

Space shown between HTML images

The reason for this space is due to the way that HTML is designed to handle whitespace. Continue reading

CSS Padding, Border and Margin – The HTML Element Box

How HTML Elements are Affected By Padding, Border and Margin Properties

Padding, Border and Margin properties affect the space around a HTML element. When learning to author web pages understanding how the space around content is defined and used is fundamental design knowledge. The content of each item on a HTML page uses a Box Model when a web browser displays it, this article is a tutorial on understanding the content, padding, border and margin parts of that model.

There are two major types of HTML elements block, where the element content starts below the previous element, and inline, where the content starts next to the previous elements content. For example the paragraph (<p>) element separates text into blocks (this paragraph and the one above are in there own <p> element). Compared to the emphasized (<em>) element which usually gives text an italic look directly in the place it is used. Each element has some content, the space around content is defined in terms of padding (the space between the content and the border), border (the line around the content and padding), and margin (the space between the border and the surrounding elements). This is illustrated in this diagram from the CSS specification.

HTML Content Padding Border Margin

Mona Lisa by Leonardo da VinciThe padding, border and margin can be broken down into top, right, bottom and left segments, illustrated in the diagram i.e. TP for top padding, RB for right border, BM for bottom margin, LB for left border, etc., this is know as the Box Model. A simple HTML page can be used to see the Box Model in action. Create a HTML page with an image (see right) with a red border and some text with a blue border, the borders added using inline CSS. (On Windows this file can be created in Notepad, or use Notepad++ which adds color coding).

Continue reading