---
title: "Arduino Web Server with Webpage Stored on SD Card"
url: "https://maker.wiznet.io/teju/projects/Arduino-Web-Server-with-Webpage-Stored-on-SD-Card/"
markdown_url: "https://maker.wiznet.io/teju/projects/Arduino-Web-Server-with-Webpage-Stored-on-SD-Card/md"
type: "UCC: User Created Content"
author: "teju"
author_url: "https://maker.wiznet.io/teju/"
original_author: "teju"
original_url: "https://akuzechie.blogspot.com/2021/09/arduino-web-server-with-webpage-stored.html"
published: "2022-02-26"
language: "en"
hardware: ["Arduino Ethernet Shield", "Arduino UNO"]
likes: 0
views: 243
comments: 0
source: "WIZnet Makers (https://maker.wiznet.io/)"
---

# Arduino Web Server with Webpage Stored on SD Card

> Arduino Web Server with Webpage Stored on SD Card

Original author: teju (source: https://akuzechie.blogspot.com/2021/09/arduino-web-server-with-webpage-stored.html)

## Components

- **Arduino Ethernet Shield** x 1 ([docs](https://docs.arduino.cc/retired/shields/arduino-ethernet-shield-without-poe-module))
- **Arduino UNO** x 1 ([docs](https://www.farnell.com/datasheets/1682209.pdf))

## Article

**C++ sketch:**

//------------------------------------------------

//Arduino Web Server via Ethernet Shield & SD Card

//------------------------------------------------

#include <SPI.h>

#include <Ethernet.h>

#include <SD.h>

//------------------------------------------------

byte mac[] = {0x90, 0xA2, 0xDA, 0x00, 0x4A, 0xE0};

EthernetServer server(80);

//------------------------------------------------

File HMTL_file;

//=================================================================

void setup()

{

? Serial.begin(9600);

? //---------------------------------------------------------

? Serial.println("Initializing SD card...");

? if(!SD.begin(4))

? {

? ? Serial.println("SD card initialization failed!");

? ? return;

? }

? Serial.println("SD card initialized.");

? //---------------------------------------------------------

? if(!SD.exists("webpage.htm"))

? {

? ? Serial.println("webpage.htm file not found!");

? ? return;

? }

? Serial.println("webpage.htm file found");

? //---------------------------------------------------------

? Ethernet.begin(mac);

? server.begin();

? Serial.print("Server Started...nLocal IP: ");

? Serial.println(Ethernet.localIP());

}

//=================================================================

void loop()

{

? EthernetClient client = server.available();

? if(client)

? {

? ? boolean currentLineIsBlank = true;

? ? while(client.connected())

? ? {

? ? ? if(client.available())

? ? ? {

? ? ? ? char c = client.read();

? ? ? ? if(c == 'n' && currentLineIsBlank)

? ? ? ? {

? ? ? ? ? //send HTTP response header to client

? ? ? ? ? client.println("HTTP/1.1 200 OKnrContent-Type: text/htmlnrnr");

? ? ? ? ? //-------------------------------------------------------------------

? ? ? ? ? //send HTTP file to client

? ? ? ? ? HMTL_file = SD.open("webpage.htm");

? ? ? ? ? if(HMTL_file)

? ? ? ? ? {

? ? ? ? ? ? while(HMTL_file.available()) client.write(HMTL_file.read());

? ? ? ? ? ? HMTL_file.close();

? ? ? ? ? }

? ? ? ? ? break;

? ? ? ? }

? ? ? ? //---------------------------------------------------------------------

? ? ? ? if (c == 'n') currentLineIsBlank = true;

? ? ? ? else if(c != 'r') currentLineIsBlank = false;

? ? ? }

? ? }

? ? delay(10);

? ? client.stop();

? }

}

**HTML code stored in file "webpage.htm":**

<!DOCTYPE html>

<html>

<head>

? <title>Arduino Web Server</title>

</head>

<style>

? body {font-family: "Calibri"; background-color: yellow}

? h1? ?{color: blue; text-align:center; font-size: 80px}

? h2? ?{color: black; font-size: 40px}

? h3? ?{color: red; text-align:center; font-size: 20px}

</style>

<body>

? <h1>

? ? Arduino Web Server<br>

? ? via Ethernet Shield & SD Card<br>

? </h1>

? <h2>

? ? <a href="https://www.arduino.cc/en/Main/ArduinoEthernetShieldV1">Arduino Ethernet Shield:</a><br>

? ? <ul>

? ? ? <li>Requires an Arduino board (not included)<br></li>

? ? ? <li>Operating voltage 5V (supplied from the Arduino Board)<br></li>

? ? ? <li>Ethernet Controller: W5100 with internal 16K buffer<br></li>

? ? ? <li>Connection speed: 10/100Mb<br></li>

? ? ? <li>Connection with Arduino on SPI port<br></li>

? ? </ul>

? ? <center>

? ? ? Ethernet Shield Arduino Uno Connection<br><br>

? ? ? <img src="https://alselectro.files.wordpress.com/2016/02/ethernet1.jpg"><br>

? ? </center>

? </h2>

? <h3>

? ? <p>Anas Kuzechie, Sept 2021</p>

? </h3>

</body>

</html>

Youtube Video :?<https://www.youtube.com/watch?v=Nn6HuLtUSEU>

---

Source: https://maker.wiznet.io/teju/projects/Arduino-Web-Server-with-Webpage-Stored-on-SD-Card/