Project Description

Description:

This part of the Arduino Ethernet shield web server tutorial shows how to create links between web pages that are hosted on the micro SD card of the Arduino web server.These are links on a hosted web page that can be clicked in order to go to or open a different web page.

55

 

Hardware:

Arduino Uno

Arduino Ethernet Shield

2Gb MicroSD  card formatted FAT16.

 

Creating Links in HTML

Links are created in HTML by using the HTML <a> tag. Text between the opening <a> tag and closing </a> tag becomes a clickable link on the web page.The value of the href attribute of the <a> tag must contain the file name of the web page that is linked to, e.g.:

The above line of HTML will create a paragraph of text with the page 2 part of the paragraph becoming a link to a file called page2.htm.The file page2.htm must exist and also be in the same directory as the page that contains the link to it.

Two HTML files will be used as examples in this part of the tutorial. They must be saved to the micro SD card and the micro SD card must be plugged into the Ethernet shield.The main page that will be loaded first from the server is made from the following HTML code (file name is index.htm):

The above page links to a second page called page2.htm:

 

page2.htm links back to the main page index.htm.

Create the above two files (index.htm and page2.htm) and copy them to your micro SD card. Insert the micro SD card into the Ethernet shield micro SD card holder.

These pages can be tested on a computer (with the two files in the same folder on the hard-drive) by opening index.htm in a browser and clicking the link. page2.htm should open when the link is clicked. Clicking the link on page2.htm should send the browser back to index.htm.This video shows how to copy the web page files to the SD card and then shows the Arduino hosting the pages.

 

Demo:

 

Author:W.A.Smith

Tags:

201802,Arduino Uno,Ethernet Shield w5100 ,2Gb Micro SD Card