The Arduino Ethernet Shield Web Server Tutorial

Part 1 of the Arduino Ethernet Shield Web Server Tutorial

This multi-part tutorial shows how to set up an Arduino with Ethernet shield as a web server. The web servers in this tutorial are used to serve up web pages that can be accessed from a web browser running on any computer connected to the same network as the Arduino.

Some of the Arduino web server pages allow access to the Arduino hardware – this allows hardware to be controlled (e.g. switching on and off an LED from the web page) and monitored (e.g. reading the state of a switch and displaying it on a web page).

The tutorial teaches what is required to build a web server including all the technology such as HTTP, HTML, CSS, JavaScript, AJAX, etc. It starts with the very basics of hosting a simple web page on the Arduino and advances step-by-step from there.

Basic Arduino Web Server

Web Page Structure (HTML)

Arduino SD Card Web Server

Arduino Web Server LED Control

Reading Switch State using an Arduino Web Server

Arduino Web Server Switch Status Using AJAX Manually

Reading Switch Status Automatically using AJAX on the Arduino Web Server

Analog Inputs and Switches using AJAX

Arduino SD Card Web Server – Linking Pages

Arduino SD Card Web Server – Displaying Images

CSS Introduction

Arduino SD Card Ajax Web Server

Arduino Inputs using Ajax with XML on the Arduino Web Server

Arduino Web Server Gauge Displaying Analog Value

SD Card Web Server I/O

Accessing HTML Tags with CSS and JavaScript

CSS for Positioning, Sizing and Spacing