HTML Grundlagen für den ESP Webserver

Hallo und herzlich willkommen zu unserem heutigen Blog-Beitrag.

 

Es kamen in letzter Zeit immer wieder anfragen zu unserem Blog-Beitrag in dem wir Sensordaten auf unserem ESP-8266 mittels HTML ausgegeben haben.

Dabei scheint die Hürde nicht der Sketch an sich, sondern das Thema HTML zu sein.

Aus diesem Grund gibt es heute ein Paar kurze Sätze zu HTML gefolgt von einem kurzen Beispiel. 

HTML ist der Standard der zur Formatierung von Webseiten genutzt wird. Typischerweise werden HTML-Webseiten von einem Webbrowser (wie z.B. Google Chrome oder Mozilla Firefox) von einem Webserver abgerufen und dann dargestellt.

Die HTML Seite ist in der Regel auf dem Webserver gespeichert (oder wird auf dem HTML Server generiert) und an den Browser übermittelt. Dieser arbeitet dann den HTML Code Zeile für Zeile ab, und stellt die Seite dar. 

Ein HTML-Dokument besteht aus 3 Bereichen:

  • der Dokumententyp (Doctype) welcher am Anfang der Datei steht. Hier wird angegeben was für ein Dokument folgt, z.B. HTML5
  • der HTML-Kopf (HEAD), welcher technische Informationen oder Meta-Daten enthält, welche nicht im Anzeigebereich des Browsers dargestellt werden.
  • dem HTML-Körper (BODY), welcher die Inhalten und Formatierungen für den Anzeigebereich des Browsers enthält.

Das war jetzt etwas viel Theorie, schauen wir uns das am besten anhand eines Beispiels an. Eine HTML Seite könnte z.B. folgenden Inhalt haben:

<!DOCTYPE html>
<html>
  <head>
    <title>Titel unserer Webseite</title>
    <!-- kommentar -->
  </head>
  <body>
    <p>Inhalt der Webseite</p>
  </body>
</html>

Das erste was uns auffällt sind die eckigen Klammern. Die eckigen Klammern beschreiben sogenannte HTML-Tags. Typischerweise gibt es ein öffnendes Tag, z.B. <p> , und ein dazugehöriges schließendes Tag, wie z.B. </p>.

 

Wir können den HTML Text in eine Textdatei, z.B. im Editor (Windows notepad) kopieren, und als index.html speichern. Als Dateityp bitte "Alle Dateien (*.*)" auswählen, da sonst unter Umständen die Endung .txt an den Dateinamen angehängt wird.

 Wir öffnen nun die Datei in unserem Webbrowser:

 Wir sehen nun dass der Text "Titel unserer Webseite" oben in der Titelleiste bzw. im Tab erscheint. Der "Inhalt der Webseite" erscheint im Browserfenster.

Der "p"-Tag wird verwendet um einen Paragraphen zu definieren. Wir fügen nun einen zweiten Paragraphen hinzu:

Oft verwendete Tags um Text weiter zu formatieren sind <b> und <i> <u>für bold,  italic und underline.

 

Für die Formatierung von Texten gibt es noch einige sehr nützliche Tags. 

Mit <font> können wir die Schriftart, Schriftgröße und Schriftfarbe definieren. Der <font> Tag wird offiziell seit HTML5 nicht mehr unterstützt. In HTML5 sollte das ganze über sogenannte cascading Stylesheets gemacht werden. Dies würde jedoch den Rahmen dieses Beitrages sprengen. Die meisten modernen Browser zeugen den Font-Tag nach wie vor richtig an.

Dem <p> Tag können wir im übrigen noch eine Option mitgeben die den Text ausrichtet. Mittels <p align=center> wird der Text in dem Paragraphen zentriert angezeigt. Weitere Optionen sind left, right und justify.

 Eines der wohl wichtigsten Tags ist jedoch der <a> Tag. Dieser definiert einen Hyperlink. Einfach gesagt sind Hyperlinks die anklickbaren dinge auf den Webseiten.

Wie bei den meisten Tags fängt der Tag mit <a> an und wird mit </a> geschlossen. Der Text zwischen den Tags wird, wie zuvor auf, im Webbrowser ausgegeben. Beim öffnenden Tag wird jedoch zusätzlich das Ziel angegeben welches aufgerufen wird, wenn der Text im Browser angeklickt wird.

<a href="http://www.az-delivery.com">Dies ist ein Link auf unsere Hauptseite</a>

 

Das soll uns für den Einstieg in HTML erstmal reichen. Es gibt noch viele nützliche Tags, für Tabellen, Listen, Buttons, Grafiken usw.

Ein Tag für welches es keinen abschließenden Tag gibt, ist <br>. Dies ist ein Zeilenumbruch.

Eine Übersicht aller Tags gibt es z.B. auf SelfHTML.

 

Wir sind also nun in der Lage im Texteditor eine HTML-Datei zu erstellen, welche wir nach belieben gestalten können. 

Wir Erstellen also eine HTML Seite so wie es später im Browser oder auf dem Handy aussehen soll:

 

Wer diesen Schritt geschafft hat, kann nun anfangen das Ganze in den Sketch zu integrieren. Um zu verstehen wie das das ganze abläuft, ist es notwendig im groben zu verstehen wie ein Webbrowser funktioniert.

Dies funktioniert über http, dem Hypertext Transport Protocol. Wichtig ist für den Anfang nur, dass wir mittels GET Inhalte von Server abrufen können. 

Später können wir dann noch mittels POST Informationen an den Server senden. Dies wird wichtig wenn wir Formularfelder oder Buttons verwenden wollen.

In unserem Blog-Eintrag "ESP8266 Sensordaten auf Webseite ausgeben" haben wir schon ein Grundgerüst zur HTML-Ausgabe auf unserem ESP.

Schauen wir uns von dort den Bereich unter "String prepareHtmlPage()" an, erkennen wir einige für HTML Typische Tags wieder:

String prepareHtmlPage()
{
  String htmlPage =
     String("HTTP/1.1 200 OK\r\n") +
            "Content-Type: text/html\r\n" +
            "Connection: close\r\n" +  // Die Verbindung wird nach der Übertragung geschlossen
            "Refresh: 5\r\n" +  // Automatisch alle 5 Sekunden neu laden
            "\r\n" +
            "<!DOCTYPE HTML>" +
            "<html>" +
            "Temperatur in &deg;C:  " + String(thermocouple.readCelsius()) + //Ausgabe der Temperatur
            "</html>" +
            "\r\n";
  return htmlPage;
}


    Die komplette Ausgabe die wir an den Webbrowser schicken, besteht aus Strings welche mittels + Zeichen zusammengefügt werden. Auffällig ist dass am ende jeder Zeile "\r\n" steht. Auf diese weise wird ein Zeilenumbruch und neue Zeile eingeleitet. Das HTTP Protokoll gibt vor wie die Antwort strukturiert sein soll.

    Bei <!DOCTYPE HTML> beginnt dann die Ausgabe unseres HTML Textes.

    Hier können wir also unseren eigenen HTML Code aus dem Texteditor einfügen.

    Wenn wir dies nun auf unserem ESP hochladen, und uns mit dem Webserver verbinden, erscheint unsere erstellte Seite.

    Um nun Werte anzeigen zu lassen, wie z.B. die Temperatur aus unserem vorherigen Blog-Beitrag, ändern wir die Zeile "<p>Temperatur: <br> +" auf "<p>Temperatur: <br> " + String(thermocouple.readCelsius()) +"

     

    Selbstverständlich ist dies nur der Anfang. Es ist wie bereits erwähnt auch möglich Buttons anzeigen zu lassen, welche dann Relais schalten können. Oder Anzeigen zu generieren welche Messwerte grafisch darstellen, z.B. mittels .svg Dateien.

     

    In einem kommenden Blog-Beitrag zeigen wir dann genau wie ein Relais wie z.B. unser AZ-Delivery Relais Modul über HTML gesteuert werden kann.

     

    Ich hoffe unser heutiger Blog-Beitrag erleichtert Ihnen den Einstieg bei der Implementierung eigener IoT-Projekte. Falls Sie gerade an einem Projekt arbeiten, und nicht weiterkommen, so schicken Sie uns doch Ihren Sketch. Vielleicht können wir diesen als Basis für einen unserer nächsten Blog-Beiträge nutzen.

    Oder Teilen Sie ihn in unserem Forum auf https://forum.az-delivery.de/

    Letzter Artikel USB-Adapter erweitern mit Flash Jumper und Reset Taster

    Hinterlasse einen Kommentar

    Kommentare müssen vor der Veröffentlichung überprüft werden

    Erforderliche Angabe