Arduino Ethernet Shield - part 3
Web Page Structure (HTML)
Created on: 27 January 2013
Part 3 of the Arduino Ethernet Shield Web Server Tutorial
The Arduino web servers in this tutorial are used to serve up HTML web pages, so it makes sense at this stage to find out more about HTML, which is what this part of the tutorial covers.
HTML Structure and Pages
The basic structure of an HTML page is shown below (this code is from the previous tutorial).
<!DOCTYPE html>
<html>
<head>
<title>Arduino Web Page</title>
</head>
<body>
<h1>Hello from Arduino!</h1>
<p>A web page from the Arduino server</p>
</body>
</html>
HTML Tags
HTML markup code consists of tags between angle brackets: < >
The name of the html tag is put between the opening and closing angle brackets.
Most tags will have an opening and closing tag. The text or resource placed between the opening and closing set of tags will be formatted by the browser according to the type of tag. The closing tag is exactly the same as the opening tag, except that the closing tag has a forward slash after the opening angle bracket. e.g.:
<p>Paragraph text...</p> – here the paragraph tag (<p>) is used to tell the browser that the text between the opening <p> and closing </p> is a paragraph of text. The browser will format it accordingly.
An example of a tag that does not have a closing tag is the line break which moves to the next line in the web page. This is written as <br> (following the HTML standard) or <br /> (following the XHTML standard).
Learning HTML is about learning HTML tags – what tags are available, what they do and which tags can be inserted between which other tags.
Web Page Structure
Web pages consist of two main sections – a head section and a body section. These two sections are placed between opening and closing html tags as shown here.
<html>
<head>
</head>
<body>
</body>
</html>
Things that are to be visible on the web page or apply to the web page content are placed between the body tags.
Things that do not appear on the page are placed between the head tags, e.g. the text for the title of the page that appears on the top bar of the web browser window. Also files such as style sheets can be included here.
Basic HTML Tags
We have already seen the paragraph HTML tag – <p>, and the invisible tags that make up sections of an HTML page – <html>, <head> and <body>. Below are two more HTML tags that were used in the first Arduino server example.
Additional tags will be introduced in this tutorial as they are used.
Heading Tag
Heading tags create heading text which is normally made bold and larger than the paragraph text by the browser. In our first Arduino server, the heading 1 tag was used – <h1>. This is a top level heading and has a corresponding closing tag. All text placed between <h1> and </h1> is marked as heading level 1.
Sub-heading text is normally smaller than h1 text and is designated h2, h3, h4, etc. (<h2>, <h3>, <h4>, etc)
The main heading h1 is used to mark a chapter heading for example – e.g. Chapter 1, the h2 marks a sub heading, e.g. heading 1.1, 1.2, 2.1, etc., h3 marks a sub heading of an h2 heading, e.g. 1.1.1 and 1.1.2, etc.
Each additional heading level will be rendered in smaller text by the browser.
Title Tag
The title tag, <title>, is placed in the <head> section of the HTML page and will display text in the top bar of the web browser. This tag is intended to display the web page title.
Web Server Example
The WebServer example sketch found in the Arduino software (found under File → Examples → Ethernet → WebServer – already covered in the article Plugging In and Testing the Arduino Ethernet Shield) actually does not conform to the full HTML page structure, but instead places text directly between the opening and closing <html> tags.
In the WebServer example, each line is ended with a line break so that the next line is shown below the previous line in the browser. The following image shows the output of the WebServer sketch in the browser and the HTML code used to produce the output text.
Learning HTML
HTML tags will be introduced as needed in this tutorial, but if you would like to learn more about HTML, either search on the Internet or pick up an HTML book.
Comentários
Postar um comentário