HTML-PHP-Java-Perl HTML erstellt wird auch geöffnet, richtig so?

schumi2009 · 31. Januar 2021

Hallo,
ich habe mal eine HTML Datei mit Notepad++ erstellt. Ist es richtig so, oder was müsste noch angepasst werden?

Code:

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>Tankfüllstandsanzeige</title>
 </head>

<body style="background-color:#FFFFFF" background="Gesamt_transparaent.png" style="background-repeat:no-repeat" style="background-position:center" >
 
  <center><img src="./Roth.png" width=250 height=106 alt="Firmen Logo"> <BR/>
   <font size="7"><strong> Regenwasser-Erdspeicher rund, 6000 L</strong></font> <BR/><BR/>
   <font size="5">Aktuelles Datum & Uhrzeit:<BR/><BR/>
     <table border="0">
        <tr>
            <td>Temperatur:</td>
            <td><p class="rechtsbuendig">1.5</p></td>
            <td>°C</td>
        </tr>
        <tr>
            <td>Aktuelle Füllhöhe:</td>
            <td><p class="rechtsbuendig">100</p></td>
            <td>mm</td>
        </tr>
        <tr>
            <td>Gesamtvolumen:</td>
            <td><p class="rechtsbuendig">6000</p></td>
            <td>L</td>
        </tr>
        <tr>
            <td>Nutzbares Volumen:</td>
            <td><p class="rechtsbuendig">5000</p></td>
            <td>L</td>
        </tr>
        <tr>
            <td>Aktueller Tankinhalt:</td>
            <td><p class="rechtsbuendig">4500</p></td>
            <td>L</td>
        </tr>
        <tr>
            <td>Aktueller Tankinhalt:</td>
            <td><p class="rechtsbuendig">35.5</p></td>
            <td>%</td>
        </tr>
     </table>
    <img src="./0p.png" width=250 height=106 alt="Aktueller Füllstand"> <BR/>
   </font>
  </center>
 </body>
</html>

Bilder usw. gehen schonmal...
Was ich auch jedenfall nicht hinbekomme ist, das Bild vom Hintergrund zu zentrieren...
Könnte mir jemand bei der Anpassung helfen?

pcbastler · 2. Februar 2021

ohne eingebundene CSS-Datei macht class=rechtsbuendig keinen Sinn. Für alles weitere gibt es SELFHTML

dewildschwein500 · 2. Februar 2021

Hi @schumi2009,
am besten du schaust dich nach einem HTML/CSS Validator um ... gibt es bestimmt als PlugIn für notepad++ .. Oder alternativ kann man den Code auch online prüfen lassen .. z.B. hier

Sie müssen registriert sein, um Links zu sehen.

axel · 2. Februar 2021

Hi,

worauf läuft der Webserver?

Das ist übrigens übelster "Code-Müll"...

Teste das mit einer einfachen vorgekauten index.html, mein Rat.

Gruß

Gesendet von meinem POCOPHONE F1 mit Tapatalk

schumi2009 · 3. Februar 2021

Danke für eure Hinweise, habe es jetzt in CSS geändert.
Und mit der Internetseite "

Sie müssen registriert sein, um Links zu sehen.

" getestet!

dewildschwein500 · 3. Februar 2021

Hi @schumi2009,
man hilft ja wo man kann ... und du hast dein Vorhaben auch weitestgehend erklärt, aber das wesentliche hat "uns" bzw. mir gefehlt .. die Bilder bzw. ein "So würde ich mir das vorstellen"-Bildchen. Der HTML und CSS Code hat für das geübte Auge ein paar Schwächen, die man flott gedanklich korrigiert hat .. aber dann fehlt einem das So-SOLLs-Aussehen-Bild.

schumi2009 · 24. Februar 2021

Ich habe mal etwas weiter gemacht, aktuell sieht es so aus:

<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset='utf-8'>
<title>Tankfüllstandsanzeige</title>
</head>

<body gbgcolor=white background=

Sie müssen registriert sein, um Links zu sehen.

EINES NETZWERK LAUFWERK/Gesamt_transparent.png style=background-repeat:no-repeat style=background-position:center>
<center><img src=

Sie müssen registriert sein, um Links zu sehen.

EINES NETZWERK LAUFWERK/Roth.png width=250 height=106><BR/>
<font size=7><strong>Regenwasser - Erdspeicher rund, 6000 L</strong></fontsize><BR/><BR/>
<font size=5>Aktuelles Datum & Uhrzeit:<BR/><BR/>
<table>
<table border="0">
<tr>
<td>Temperatur:</td>
<td align=right>12</td>
<td>°C</td>
</tr>
<tr>
<td>Aktuelle Füllhöhe:</td>
<td align=right>100</td>
<td>mm</td>
</tr>
<tr>
<td>Gesamtvolumen:</td>
<td align=right>6000</td>
<td>L</td>
</tr>
<tr>
<td>Nutzbares Volumen:</td>
<td align=right>5500</td>
<td>L</td>
</tr>
<tr>
<td>Aktueller Tankinhalt:</td>
<td align=right>5000</td>
<td>L</td>
</tr>
<tr>
<td>Aktueller Tankinhalt:</td>
<td align=right>35.5</td>
<td>%</td>
</tr>
</table>
<img src=

Sie müssen registriert sein, um Links zu sehen.

EINES NETZWERK LAUFWERK/100p.png width=431 height=446> <BR/>
</font size>
</center>
</body>
</html>

Habe laut der Internetseite :

Sie müssen registriert sein, um Links zu sehen.

Noch 3 Fehler drin bekomme die nicht weg...
Könnt ihr sie Beheben?
Und wieso wird das Hintergrund bild nicht mittig angezeigt?

pcbastler · 24. Februar 2021

bitte verwende nur relative Links
z.B.

Code:

img src=http://IP EINES NETZWERK LAUFWERK/Roth.png

besser

Code:

img src=/images/Roth.png

in body gbgcolor= ist das erste g zuviel.
Aber jetzt mal ernsthaft: Ohne dynamische Ermittlung der Werte ist das doch HTML-Übung.

schumi2009 · 24. Februar 2021

Also ich baue mir die Internetseite erstmal per Datei "fertig".
Anschließend wird alles im Arduino eingetragen, dann kommen auch die dynamischen Werte

Habe die Zeile jetzt so angepasst:

Code:

<body bgcolor=white background=http://IP EINES NETZWERK LAUFWERK//Gesamt_transparent.png style=background-repeat:no-repeat style=background-position:center>

Leider wird das Hintergrundbild noch nicht mittig angezeigt...Woran liegt es

Die Links sind extra so, da die Fotos auf einem internen Server liegen und nicht auf dem Arduino, hat was mit der Leistung usw. zu tun...
---------------------------------------------------------------------
Ich habe jetzt schonmal hinbekommen, das im Tab auch das Bild angezeigt wird...
Hier die aktuelle Version:

<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset='utf-8'>
<link rel=icon type=image/vnd.microsoft.icon href=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/Roth.png>
<title>Tankfüllstandsanzeige</title>
</head>

<body bgcolor=white background=IP DES NETZWERKLAUFWERK/Gesamt_transparent.png style=background-repeat:no-repeat style=background-position:center>
<center><img src=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/Roth.png width=250 height=106><BR/>
<font size=7><strong>Regenwasser - Erdspeicher rund, 6000 L</strong></fontsize><BR/><BR/>
<font size=5>Aktuelles Datum & Uhrzeit:<BR/><BR/>
<table>
<table border="0">
<tr>
<td>Temperatur:</td>
<td align=right>12</td>
<td>°C</td>
</tr>
<tr>
<td>Aktuelle Füllhöhe:</td>
<td align=right>100</td>
<td>mm</td>
</tr>
<tr>
<td>Gesamtvolumen:</td>
<td align=right>6000</td>
<td>L</td>
</tr>
<tr>
<td>Nutzbares Volumen:</td>
<td align=right>5500</td>
<td>L</td>
</tr>
<tr>
<td>Aktueller Tankinhalt:</td>
<td align=right>5000</td>
<td>L</td>
</tr>
<tr>
<td>Aktueller Tankinhalt:</td>
<td align=right>35.5</td>
<td>%</td>
</tr>
</table>
<img src=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK.png width=431 height=446> <BR/>
</font size>
</center>
</body>
</html>

Nur das Hintergrundbild bekomme ich nicht mittig, warum nicht?
--------------------------------------------------
Also was ich mittlerweile heraus gefunden habe in der Zeile:

Code:

<body bgcolor=white background=IP DES NETZWERKLAUFWERK/Gesamt_transparent.png style=background-repeat:no-repeat style=background-position:center>

Reagiert er auf den Teil:

Code:

style=background-position:center

Denke es liegt daran, das Style doppelt drin ist, aber wie kann ich es anpassen?

pcbastler · 8. März 2021

lagere bitte die Styles in eine extra CSS-Datei aus, dann löst sich vieles von selbst weil für jedes Element eine eindeutige Definition existiert.
Richtig sauber wäre eine vollständige Trennung Aussehen/Funktion/Daten.

schumi2009 · 15. März 2021

Und genau da liegt das Problem. Im Aduino programm sieht das ganze so aus, was bei Anfrage gesendet wird:

EthernetClient client = server.available(); //Prüfen, ob Client Seite aufruft
if (client) // Seitenaufruf durch User
{
// Ausgabe in HTML
server.print("HTTP/1.1 200 OK\r\nServer: arduino\r\nContent-Type: text/html\r\n\r\n"
"<!DOCTYPE html>"
"<html lang='de'>"
"<head>"
"<meta charset='utf-8'>"
"<link rel=icon type=image/vnd.microsoft.icon href=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/Roth.png>"
"<title>Tankfüllstandsanzeige </title>"
"</head>"

"<body bgcolor=white background=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/Gesamt_transparent.png style=background-repeat:no-repeat style=background-position:center>"
"<center><img src=

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/Roth.png width=250 height=106><BR/>"
"<font size=7><strong>Regenwasser - Erdspeicher rund, 6000 L</strong></fontsize><BR/><BR/>"
"<font size=5>Letzte Messung:<BR/><BR/>"
"<table>"
"<table border=0>"
"<tr>"
"<td>Temperatur:</td>"
"<td align = right>");
sensors.requestTemperatures(); // Temperatur abfragen
server.print(sensors.getTempCByIndex(0)); // Ausgabe der Temperatur</td>
server.print("<td>°C</td>"
"</tr>"
"<tr>"
"<td>Aktuelle Füllhöhe:</td>"
"<td align=right>");
server.print(Fuellhoehe, 0);
server.print("<td>mm (max. Füllhöhe beträgt 1798 mm)</td>"
"</tr>"
"<tr>"
"<td>Gesamtvolumen:</td>"
"<td align=right>");
server.print(Tankvolumengesamt);
server.print("<td>L</td>"
"</tr>"
"<tr>"
"<td>Nutzbares Volumen:</td>"
"<td align=right>");
server.print(Tankvolumennutzbar);
server.print("<td>L</td>"
"</tr>"
"<tr>"
"<td>Aktueller Tankinhalt:</td>"
"<td align=right>");
server.print(Tankinhalt);
server.print("<td>L</td>"
"</tr>"
"<tr>"
"<td>Aktueller Tankinhalt:</td>"
"<td align=right>");
server.print(Tankinhaltprozent);
server.print("<td>%</td>"
"</tr>"
"<tr>"
"<td>Fehlende Wassermenge:</td>"
"<td align=right>");
if (Fehlendeliter < 0.02)
{
server.print("0.00");
}
else if (Fehlendeliter > 0.02)
{
server.print(Fehlendeliter);
}
server.print("<td>L</td>"
"</tr>"
"<tr>"
"<td>Entfernung zur Wasseroberfläche:</td>"
"<td align=right>");
server.print(Entfernung11); //Aktuelle Entfernung
server.print("<td>mm (min. 65 mm beim max. Füllstand)</td>"
"</tr>"
"</table>");
if (Tankinhaltprozent < 5)
{
server.print("<img src =

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/0p.png width=431 height=446> <BR/>");
}
if (Tankinhaltprozent > 5 && Tankinhaltprozent < 37.5)
{
server.print("<img src =

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/25p.png width=431 height=446> <BR/>");
}
if (Tankinhaltprozent > 37.5 && Tankinhaltprozent < 62.5)
{
server.print("<img src =

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/50p.png width=431 height=446> <BR/>");
}
if (Tankinhaltprozent > 62.5 && Tankinhaltprozent < 95)
{
server.print("<img src =

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/75p.png width=431 height=446> <BR/>");
}
if (Tankinhaltprozent > 95)
{
server.print("<img src =

Sie müssen registriert sein, um Links zu sehen.

DES NETZWERKLAUFWERK/100p.png width=431 height=446> <BR/>");
}
server.print( "</font size>"
"</center>"
"</body>"
"</html>");
delay(500); // Kurzer Delay, um Daten zu senden
client.stop(); // Verbindung mit dem Client trennen
}

Und wie soll ich das mit dem Style jetzt machen?

Suche

Suche

HTML-PHP-Java-Perl HTML erstellt wird auch geöffnet, richtig so?

schumi2009

Elite Lord

schumi2009

pcbastler

Premium

dewildschwein500

Meister

axel

schumi2009

Elite Lord

dewildschwein500

Meister

schumi2009

Elite Lord

Anhänge

pcbastler

Premium

schumi2009

Elite Lord

pcbastler

Premium

schumi2009

Elite Lord

Ähnliche Themen

Spenden Unterstützung