HTML für Mikrocontroller

Chr. M. schrieb:

> Ich bin gerade so dabei ein wenig C zu lernen und da möchte ich
> eigentlich nicht auch noch HTML und CSS gleichzeitig lernen müssen.

letzten Endes wird dir aber nicht viel anderes übrig bleiben. Du kannst 
erst mal CSS links liegen lassen. Aber ohne ein wenig HTML Kentnisse 
wird das nichts. Letzten Endes ist aber HTML auch nur ein Text, der von 
deinem Web-Server ausgeliefert wird. Und recht viel braucht es dazu 
nicht, damit ein Web-Browser mit diesem ausgeliefertem Text (aka dem 
HTML) etwas anzufangen weiss.

HTML Tutorials gibt es viele. Ich fand immer das hier
https://wiki.selfhtml.org/
recht brauchbar. Und natürlich
http://www.w3schools.com/html/

Wenn also dein Webbrowser diesen Text hier ausliefert (von w3schools 
'geklaut')

1

<!DOCTYPE html>

2

<html>

3

<head>

4

<title>Page Title</title>

5

</head>

6

<body>

7

Hallo world!

8

</body>

9

</html>

dann sollte dein Browser schon etwas anzeigen. Wenn man das ganze dann 
noch ein wenig nach logischer Gliederung einrückt, dann sieht man sehr 
schnell, das da eigentlich nicht viel dahinter steckt.

1

<!DOCTYPE html>

2

3

<html>

4

  <head>

5

    <title>Page Title</title>

6

  </head>

7

8

  <body>

9

    Hallo world!

10

  </body>

11

</html>

mit einer Handvoll HTML Tags kommt man schon recht weit.

Hallo,

kritisch ist der Header, die Beispile sind oft unsauber. Für HTML 1.1 
muß die Länge im Header angegeben sein.
Fehlt diese oder ist falsch passieren Browserabhängig seltsame Dinge.
HTML1.0 verlangt es nicht, wird von manchen Browsern aber falsch 
behandelt.

1

    sHeader  = "HTTP/1.1 200 OK\r\n";

2

    sHeader += "Content-Length: ";

3

    sHeader += sResponse.length();

4

    sHeader += "\r\n";

5

    sHeader += "Content-Type: text/html\r\n";

6

    sHeader += "Connection: close\r\n";

7

    sHeader += "\r\n";

Wichtig ist auch die Leerzeile am Ende des Headers vor dem HTML-Content.

Er hat es hier recht sauber angefangen:
https://blog.thesen.eu/stabiler-http-1-1-wlan-webserver-mit-dem-esp8266-microcontroller/

Gruß aus Berlin
Michael

>dann sollte dein Browser schon etwas anzeigen.
Irgendwas anzeigen bekomme ich schon hin
aber natürlich soll es auch nach was aussehen. :)

Momentan nehme ich 
http://www.john-lassen.de/index.php/projects/esp-8266-arduino-ide-webconfig 
als Basis aber ich scheitere schon daran aus den Checkboxen Slider zu 
machen und einen Schieberegler bräuchte ich auch noch.

>Müssen die Ressourcen denn auf dem esp8266 liegen
ich finde die liegen da ganz gut,
noch habe ich ca.600kbyte Flash und ca.20kbyte RAM frei.

Michael U. schrieb:
> Hallo,
>
> kritisch ist der Header, die Beispile sind oft unsauber. Für HTML 1.1
> muß die Länge im Header angegeben sein.
> Fehlt diese oder ist falsch passieren Browserabhängig seltsame Dinge.
> HTML1.0 verlangt es nicht, wird von manchen Browsern aber falsch
> behandelt.

Huh?
Du meinst http 1.1, richtig?
Die länge nicht anzugeben ist bei dynamisch generiertem Inhalt üblich, 
so kann man schon Anfang Inhalte zu senden obwohl man noch gar nicht bis 
zum Ende gerendert hat, das macht keine Probleme.

Guck, selbst dieser Thread macht das nicht:

1

$ wget -S --spider https://www.mikrocontroller.net/topic/384145?reply_to=4383890

2

Spider-Modus eingeschaltet.  Prüfe ob die Datei auf dem Server existiert.

3

--2015-12-10 21:43:50--  https://www.mikrocontroller.net/topic/384145?reply_to=4383890

4

Auflösen des Hostnamen »www.mikrocontroller.net (www.mikrocontroller.net)«... 188.40.52.210, 2a01:4f8:100:3067::2

5

Verbindungsaufbau zu www.mikrocontroller.net (www.mikrocontroller.net)|188.40.52.210|:443... verbunden.

6

HTTP-Anforderung gesendet, warte auf Antwort... 

7

  HTTP/1.1 200 OK

8

  Server: nginx/1.6.2

9

  Date: Thu, 10 Dec 2015 20:43:50 GMT

10

  Content-Type: text/html; charset=utf-8

11

  Connection: keep-alive

12

  Vary: Accept-Encoding

13

  X-Frame-Options: SAMEORIGIN

14

  X-XSS-Protection: 1; mode=block

15

  X-Content-Type-Options: nosniff

16

  Strict-Transport-Security: max-age=16070400

17

  X-Memcached: cached: 6

18

  Expires: Thu, 10 Dec 2015 20:43:50 GMT

19

  Cache-Control: private

20

  Vary: Cookie

21

  ETag: W/"d49983c5e402d7bed504cd36be2c783f"

22

  Set-Cookie: return_to=https%3A%2F%2Fwww.mikrocontroller.net%2Ftopic%2F384145%3Freply_to%3D4383890; path=/

23

  Set-Cookie: _forum_session=aTBqeHFiTENWWmg3c0NEdlNkSXIzaEE1eTltNjdPamdlOWZKQU1Mc244ZEN2VUVCL1FvWmwxRUs1RlJZaE4yWlVoeXgrUDhzQU0rUzB5czZsMm1DcFVhUTd3d0l0QmNuc1MwUzJiSkVYenl1ZG83aWJyVXJzUEtseEIwOWRNZnR1QXlvVVhVempnSFlFVUdoUGFhd3h4UU9Td25ucDNuZnVFaTZFdHBkQ2ZJbkpjYTQzNmVVQ2NiZ3AzWmVnK1NSLS1tbUhPV0IrUDg0TjliWUZLUEtLVG53PT0%3D--eae3d3dcb7889d8f3614d62f5fa042e752f9d5c4; path=/; expires=Sun, 20 Dec 2015 20:43:50 -0000; HttpOnly

24

  X-Request-Id: 708523c5-c18e-4d62-8afc-e71825456105

25

  X-Runtime: 0.028134

26

  Alternate-Protocol: 443:npn-spdy/3

27

Länge: nicht spezifiziert [text/html]

28

Datei auf dem Server existiert und könnte weitere Links enthalten,

29

aber Rekursion ist abgeschaltet -- kein Download.

Zum eigentlichen Thema, wenn du sein css und js woanders ablegen kannst 
/ willst, wäre bootstrap bestimmt ne option

Chr. M. schrieb:
>>dann sollte dein Browser schon etwas anzeigen.
> Irgendwas anzeigen bekomme ich schon hin

dann ist doch alles gut..

> aber natürlich soll es auch nach was aussehen. :)

dann lern es gefälligst

> als Basis aber ich scheitere schon daran aus den Checkboxen Slider zu
> machen und einen Schieberegler bräuchte ich auch noch.

das sind keine html elemente, da dürfte dein problem liegen.


>>Müssen die Ressourcen denn auf dem esp8266 liegen
> ich finde die liegen da ganz gut,
> noch habe ich ca.600kbyte Flash und ca.20kbyte RAM frei.

also du hast keine ahnung aber du findest wir haben unrecht?

Chr. M. schrieb:
> ich scheitere schon daran aus den Checkboxen Slider zu
> machen und einen Schieberegler bräuchte ich auch noch.

Checkboxen Slider = Toggle? Mache ich so:
https://jsfiddle.net/rydjkt9k/

Sieberegler:
http://www.html5tutorial.info/html5-range.php