Hallo, ich bastle gerade mit dem ESP8266 als Webserver rum und für Steuerungsaufgaben über den Browser brauche ich dazu ein paar HTML Seiten. Gibt es irgendwo im Netz ein Tutorial für HTML4µC oder gar ein paar gute CSS Templates die auf Minimalismus ausgelegt sind? 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.
Müssen die Ressourcen denn auf dem esp8266 liegen oder reicht nicht irgendein externer websrver ?
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.
Eine Minimalstseite : <html><head></head><body>Hallo world!</body></html> CSS braucht man nicht, das geht schon unter Luxus. Fuer das Kommunikationsformat, sprich fuer "http", schau die "rfc" an.
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?
Michael U. schrieb: > kritisch ist der Header, die Beispile sind oft unsauber. Für HTML 1.1 > muß die Länge im Header angegeben sein. Ob das zusammengebaute HtML-Konstrukt sauber ist, sollte man einfach mit dem W3C Markup Validator prüfen. https://validator.w3.org/
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
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.