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