Tutorial HTML, CSS u. PHP - Forum

von **Timifi** » Freitag 24. September 2010, 21:14

Wie krieg ich den Buchstabensalat weg ohne das ein Besucher jedes mal seinen Browser auf Unicode UTF 8 umstellen muß??????

http://www.schreibundausfüllhilfe.de

von **Sarkkan** » Freitag 24. September 2010, 21:29

Öhm.. sag dem Browser, welchen Zeichensatz er laden soll ;)
Entweder du sagst, dass UTF-8 verwendet werden soll (in den <head>):

Code: Alles auswählen: <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Oder du setzt folgendes in den <head>-Tag:

Code: Alles auswählen: <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />

Das ist der Zeichensatz für Mitteleuropäische Zeichen^^ So verwende ich das immer.

Nur muss du dann Sonderzeichen folgendermaßen ersetzen:

Code: Alles auswählen: Ä = Ä ä = ä Ö = Ö ö = ö Ü = Ü ü = ü ß = ß & = & © = © € = €

PS: Dürfen wir eigentlich auch ein wenig Kritik an deiner Seite üben?^^
PPS: Beim nächsten mal bitte einen treffenderen Titel und vielleicht auch mal in deinem Beitrag einen Link zu der Seit angeben ;)

von **Timifi** » Samstag 25. September 2010, 06:29

kritik, klar bin hier ja noch ein Frischling und noch am basteln und lernen *ggg*

LG

von **Timifi** » Samstag 25. September 2010, 06:30

Ach ja und danke, werde es gleich mal ausprobieren.

von **Timifi** » Samstag 25. September 2010, 06:37

Sarkkan hat geschrieben:Öhm.. sag dem Browser, welchen Zeichensatz er laden soll ;)
Entweder du sagst, dass UTF-8 verwendet werden soll (in den <head>):
Code: Alles auswählen
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Oder du setzt folgendes in den <head>-Tag:
Code: Alles auswählen
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
Das ist der Zeichensatz für Mitteleuropäische Zeichen^^ So verwende ich das immer.

Nur muss du dann Sonderzeichen folgendermaßen ersetzen:
Code: Alles auswählen
Ä = Ä ä = ä Ö = Ö ö = ö Ü = Ü ü = ü ß = ß & = & © = © € = €

PS: Dürfen wir eigentlich auch ein wenig Kritik an deiner Seite üben?^^
PPS: Beim nächsten mal bitte einen treffenderen Titel und vielleicht auch mal in deinem Beitrag einen Link zu der Seit angeben ;)

----das mit den einzelnen Einfügen ist das nicht ein bißchen aufwändig?????
Ist es evtl besser????
also gibt es einen Grund, warum man sich die Mühe machen sollte????

von **lauras** » Samstag 25. September 2010, 06:46

Ein guter Editor ersetzt dir die Sonderzeichen automatisch, damit hast du gar keine Arbeit.

von **axel** » Samstag 25. September 2010, 07:12

Das könnte dir auch noch helfen:
http://www.webmaster-crashkurs.de/umlaute-falsch-angezeigt-bei-firefox.htm

Wenn Umlaute falsch angezeigt werden (gerne im Firefox), dann kann das an den Problemen liegen, die auf der Website beschrieben (samt Lösungsweg)

von **Sarkkan** » Samstag 25. September 2010, 16:04

Timifi hat geschrieben:kritik, klar bin hier ja noch ein Frischling und noch am basteln und lernen *ggg*

LG

Okey (=
(Auch wen der Nachfolgende Text sehr lange scheint und viele Fehler bemängelt, so möchte ich dir gerne vorher doch noch ein Lob aussprechen:
Dafür, dass du noch am lernen bist, ist das wirklich eine tolle Seite!

Selten sehen die ersten Geh-Versuche von Leuten die hier rein posten so gut vom Code aus^^ Dennoch gibt es einige kleine Sachen, die etwas anders gemacht werden, da es von der Semantik sich so gehört^^)

Also, was mir als erstes aufgefallen ist, du besitzt eine Domain mit Umlauten drin.
Es gibt noch einige Webbrowser, wie der IE, beziehungsweise Foren die diese Urls noch nicht können, daher ein Tipp:
Verwende die Punycode Variante deiner Domain, wenn du zu ihr verlinkst, ein kleines Beispiel:
Falsch: http://schreibundausfüllhilfe.de
Richtig: http://xn--schreibundausfllhilfe-mic.de/
Beispiel bei meiner Domain:
Falsch: http://kreative-küchenplaner.de
Richtig: http://xn--kreative-kchenplaner-yec.de

Natürlich sieht die Punycode-Variante nicht so besonders schön aus.. aber da kann man ja mit BB-Codes(welche in Foren verwendet werden, anstelle von HTML-Tags) beziehungsweise mit dem <a>-Tag Tricksen:

Code: Alles auswählen: Was haltet ihr von meiner Seite, [url=http://xn--schreibundausfllhilfe-mic.de/]www.schreibundausfüllhilfe.de[/url] ? Schauen Sie doch einmal bei <a href="http://xn--kreative-kchenplaner-yec.de">unserem Partner</a> vorbei.

Soe sähe der Obere BB-Code aus:
Was haltet ihr von meiner Seite, www.schreibundausfüllhilfe.de ?
Der Browser versteht alles und für den Besucher schaut alles ganz normal aus, weil auch alles ohne Probleme Funktioniert^^
Hier findest du übrigens auch einen Punycode Konverter^^

Soa schon so viel über die Domain und jetzt komme ich mal zum Code^^
Wie ich sehe hast du überall ein eigenes Stylesheet(*.css) eingebunden, wieso den das?
Stylesheets haben ja normalerweise den Vorteil, dass man nur den Code ändern muss und z.B. sich die Linkfarbe auf der gesamten Seite ändert^^
Ich empfehle daher nur ein Zentrales Stylesheet zu benutzen, was du auf jeder Seite verwendest (=
(Obwohl dieser Punkt noch nicht abgehandelt ist ;) Komme auf deinen CSS-Code gleich noch einmal zurück^^)

Bleiben wir direkt noch im <head>, du könntest noch einige weitere Meta-Tags verwenden um die Seite Suchmaschinenfreundlicher zu gestalten (=

Code: Alles auswählen: <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" /> <meta name="author" content="Optional" /> <meta name="copyright" content="Optional" /> <meta name="keywords" content="Einige, Stichwörter, durch, Kommata, voneinander, getrennt" /> <meta name="description" content="BESCHREIBUNG" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="INDEX, FOLLOW" />

Diese Meta-Tags sollten meines Erachtens nach auf deiner Seite schon zu finden sein^^ (evtl. mit anderem Inhalt eben^^)

Noch etwas zu dem <title>-Tag:
Ich würde ihn bei dir Ungefähr so aussehen lassen, da er für Suchmaschinen auch wichtig ist:
<title>Schreib- und Ausfüllhilfe Berlin || Home</title>
Beziehungsweise anstelle von Home eben Unternehmen, Impressum,..
Weiter in Punkto Suchmaschinenfreundlichkeit:
Die richtige Verwendung von <h*>-Tags ;)
Wenn ich mir nur deinen Code ansehe, dann scheint auf der Home Seite für mich am Wichtigsten "Herzlich Willkommen!", da es ist DIE Überschrift der Seite ist.
Setzt doch stattdessen dein Logo, mit einem Passenden Alternativtext, ganz oben in einen <h1>-Tag.

Und nun gehen wir mal zu dem Rest deines Codes über^^
Bei deiner Navigation ist ein Kleiner Fehler sowie ein Semantik Fehler^^ Wie dir sicher aufgefallen ist, ist Rechts ein Abstand von deiner Navigation zum Bildrand, während Rechts die Navigation sogar ein Stückchen über den Bildrand geht^^
Erst einmal zu dem Semantik Fehler: Man listet eine Navigation normalerweise auf ;)
Hier dann auch direkt ein Tipp, damit es bei anderen Links auf deiner Seite nicht so einfach zu einem Fehler kommt:

Code: Alles auswählen:  <ul id="navi"> <li><a href="index.htm">Start</a></li> <li><a href="unternehmen.htm">Unternehmen</a></li> <li><a href="leistung.htm">Leistung</a></li> <li><a href="impressum.htm">Impressum</a></li> <li><a href="links.htm">nützliche Links</a></li> <li><a href="aktuell.htm">Aktuell</a></li> </ul> /* CSS-Code deiner Navigation in etwa(du wirst evtl/wahrscheinlich einiges ändern müssen, aber mach es lieber so, hat später nur Vorteile ;) ): */ ul#navi { /* Hiermit sprechen wir die Liste mit der ID navi an */ background-color: #FFCC99; width: 90%; /* vorher: width:73em; || em ist immer von der Schriftgröße abhängig, hier lieber einen px oder % Wert angeben (so auch kein Darstellungsfehler möglich) */ height: 1.5em; margin: 2em; font-size: 12pt; /* font-size: 12pt; || gib am besten nichts in pt an, sonst Freuen sich deine Mac-Besucher ;) */ font-family: Gentium Book Basic, "arial", sans-serif; font-weight: bold; letter-spacing: 0.1em; /* Abstaende zwischen den einzelnen Buchstaben */ word-spacing: 0.2em; /* Abstaende zwischen den einzelnen Woertern */ text-align: left; /* Textausrichtung*/ list-style: none; /* Da wir es ja nun mit einer Liste zu tun haben, die aber am besten keine Aufzählungspunkte hat^^ */ } ul#navi li { /* Alles was hier drin steht, richtet sich NUR an <li>-Elemente, die sich innerhalb eines <ul>-Elementes, mit der id navi, befinden */ display: block; /* Nur Blockelemente lassen sich floaten */ float: left; } ul#navi li a { /* Alles was hier drin steht richtet sich nur an Links, die sich.. Glaube du verstehst^^ */ color:#993333; [...] /* Sonstige Formatierungen */ }

Und weiter im Programm^^
achte da drauf, dass du alle Tags klein schreibst (:
so auch das z.B. das letzte <p> auf deiner Home Seite^^
Wo wir gerade bei dem <p> sind.. packe die Formatierung für diese lieber in der CSS-Datein in den body-Bereich (=
Auch musst du so Sachen wie z.B. font-weight:normal; font-style:normal; nicht angeben, da dies Standardeinstellungen sind^^
(Meiner Meinung nach, lass auch bitte den letter-spacing und word-spacing heraus.. =/ )

Zum Body-Bereich noch kurz etwas:
Ich empfehle dir das Hintergrundbild dem html-Element zu geben und dem Body eine Maximale Breite (=
Hier im Forum kam es vor einiger Zeit mal zu der Diskussion, dass es unangenehm ist, wenn man eine 2000px Lange Zeile hat, weil der Bildschirm so breit ist, daher ist es so am Sinnvollsten^^

Code: Alles auswählen: html { background: url(http://lh5.ggpht.com/_WF_rrPSTAQA/TJcTWL_RGdI/AAAAAAAABLQ/Eoho11qzx0g/s800/Tasse.jpg) left top repeat scroll; border-top: 0.7em white hidden; border-right: 1em white double; border-bottom: 0.7em white hidden; border-left: 1em white double; text-align: center; /* Damit auch im IE der Body bei einer größeren Breite Zentriert wird */ } body{ margin: 0 auto; max-width: 1000px; padding:2.5em; }

AHH O.o' und gerade erst gesehen.. was ist ein float: center?
Andere Elemente sollen dieses Objekt Zentral umfließen??
Wo ich mich dann hier kurz Frage, ob du weißt, was das float-Attribut macht^^

Soa, spontan sehe ich dann sonst nichts mehr groß (=
(Das Design beurteile ich nicht, dass ist etwas was ich nicht kann)
Bei Fragen zu meinem Tipps oder zu sonst etwas: Frag

Liebe Grüße
Sarkkan

von **Timifi** » Montag 4. Oktober 2010, 17:12

Erst mal danke für das alles ich werde es beherzigen und mir wenn ich Zeit finde alles mal in Ruhe zu Gemüte führen, dann bestimmt wieder melden.
Bin gerade im Familienstress und hoffe das ich bald wieder ganz viel Zeit finde endlich weiter machen zu könnnen. Krabbelts in den Fingern und kann nix tun *grrrr* das find ich immer schlimm wenn mal will und es geht nicht.

LG bis dahin ich meld mich.

von **Timifi** » Donnerstag 21. Oktober 2010, 20:24

Sarkkan hat geschrieben:
Timifi hat geschrieben:kritik, klar bin hier ja noch ein Frischling und noch am basteln und lernen *ggg*

LG

Okey (=
(Auch wen der Nachfolgende Text sehr lange scheint und viele Fehler bemängelt, so möchte ich dir gerne vorher doch noch ein Lob aussprechen:
Dafür, dass du noch am lernen bist, ist das wirklich eine tolle Seite! Selten sehen die ersten Geh-Versuche von Leuten die hier rein posten so gut vom Code aus^^ Dennoch gibt es einige kleine Sachen, die etwas anders gemacht werden, da es von der Semantik sich so gehört^^)

Also, was mir als erstes aufgefallen ist, du besitzt eine Domain mit Umlauten drin.
Es gibt noch einige Webbrowser, wie der IE, beziehungsweise Foren die diese Urls noch nicht können, daher ein Tipp:
Verwende die Punycode Variante deiner Domain, wenn du zu ihr verlinkst, ein kleines Beispiel:
Falsch: http://schreibundausfüllhilfe.de
Richtig: http://xn--schreibundausfllhilfe-mic.de/
Beispiel bei meiner Domain:
Falsch: http://kreative-küchenplaner.de
Richtig: http://xn--kreative-kchenplaner-yec.de

Natürlich sieht die Punycode-Variante nicht so besonders schön aus.. aber da kann man ja mit BB-Codes(welche in Foren verwendet werden, anstelle von HTML-Tags) beziehungsweise mit dem <a>-Tag Tricksen:
Code: Alles auswählen
Was haltet ihr von meiner Seite, [url=http://xn--schreibundausfllhilfe-mic.de/]www.schreibundausfüllhilfe.de[/url] ? Schauen Sie doch einmal bei <a href="http://xn--kreative-kchenplaner-yec.de">unserem Partner</a> vorbei.
Soe sähe der Obere BB-Code aus:
Was haltet ihr von meiner Seite, www.schreibundausfüllhilfe.de ?
Der Browser versteht alles und für den Besucher schaut alles ganz normal aus, weil auch alles ohne Probleme Funktioniert^^
Hier findest du übrigens auch einen Punycode Konverter^^

Soa schon so viel über die Domain und jetzt komme ich mal zum Code^^
Wie ich sehe hast du überall ein eigenes Stylesheet(*.css) eingebunden, wieso den das?
Stylesheets haben ja normalerweise den Vorteil, dass man nur den Code ändern muss und z.B. sich die Linkfarbe auf der gesamten Seite ändert^^
Ich empfehle daher nur ein Zentrales Stylesheet zu benutzen, was du auf jeder Seite verwendest (=
(Obwohl dieser Punkt noch nicht abgehandelt ist ;) Komme auf deinen CSS-Code gleich noch einmal zurück^^)

Bleiben wir direkt noch im <head>, du könntest noch einige weitere Meta-Tags verwenden um die Seite Suchmaschinenfreundlicher zu gestalten (=
Code: Alles auswählen
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" /> <meta name="author" content="Optional" /> <meta name="copyright" content="Optional" /> <meta name="keywords" content="Einige, Stichwörter, durch, Kommata, voneinander, getrennt" /> <meta name="description" content="BESCHREIBUNG" /> <meta http-equiv="content-language" content="de" /> <meta name="robots" content="INDEX, FOLLOW" />
Diese Meta-Tags sollten meines Erachtens nach auf deiner Seite schon zu finden sein^^ (evtl. mit anderem Inhalt eben^^)

Noch etwas zu dem <title>-Tag:
Ich würde ihn bei dir Ungefähr so aussehen lassen, da er für Suchmaschinen auch wichtig ist:
<title>Schreib- und Ausfüllhilfe Berlin || Home</title>
Beziehungsweise anstelle von Home eben Unternehmen, Impressum,..
Weiter in Punkto Suchmaschinenfreundlichkeit:
Die richtige Verwendung von <h*>-Tags ;)
Wenn ich mir nur deinen Code ansehe, dann scheint auf der Home Seite für mich am Wichtigsten "Herzlich Willkommen!", da es ist DIE Überschrift der Seite ist.
Setzt doch stattdessen dein Logo, mit einem Passenden Alternativtext, ganz oben in einen <h1>-Tag.

Und nun gehen wir mal zu dem Rest deines Codes über^^
Bei deiner Navigation ist ein Kleiner Fehler sowie ein Semantik Fehler^^ Wie dir sicher aufgefallen ist, ist Rechts ein Abstand von deiner Navigation zum Bildrand, während Rechts die Navigation sogar ein Stückchen über den Bildrand geht^^
Erst einmal zu dem Semantik Fehler: Man listet eine Navigation normalerweise auf ;)
Hier dann auch direkt ein Tipp, damit es bei anderen Links auf deiner Seite nicht so einfach zu einem Fehler kommt:
Code: Alles auswählen
 <ul id="navi"> <li><a href="index.htm">Start</a></li> <li><a href="unternehmen.htm">Unternehmen</a></li> <li><a href="leistung.htm">Leistung</a></li> <li><a href="impressum.htm">Impressum</a></li> <li><a href="links.htm">nützliche Links</a></li> <li><a href="aktuell.htm">Aktuell</a></li> </ul> /* CSS-Code deiner Navigation in etwa(du wirst evtl/wahrscheinlich einiges ändern müssen, aber mach es lieber so, hat später nur Vorteile ;) ): */ ul#navi { /* Hiermit sprechen wir die Liste mit der ID navi an */ background-color: #FFCC99; width: 90%; /* vorher: width:73em; || em ist immer von der Schriftgröße abhängig, hier lieber einen px oder % Wert angeben (so auch kein Darstellungsfehler möglich) */ height: 1.5em; margin: 2em; font-size: 12pt; /* font-size: 12pt; || gib am besten nichts in pt an, sonst Freuen sich deine Mac-Besucher ;) */ font-family: Gentium Book Basic, "arial", sans-serif; font-weight: bold; letter-spacing: 0.1em; /* Abstaende zwischen den einzelnen Buchstaben */ word-spacing: 0.2em; /* Abstaende zwischen den einzelnen Woertern */ text-align: left; /* Textausrichtung*/ list-style: none; /* Da wir es ja nun mit einer Liste zu tun haben, die aber am besten keine Aufzählungspunkte hat^^ */ } ul#navi li { /* Alles was hier drin steht, richtet sich NUR an <li>-Elemente, die sich innerhalb eines <ul>-Elementes, mit der id navi, befinden */ display: block; /* Nur Blockelemente lassen sich floaten */ float: left; } ul#navi li a { /* Alles was hier drin steht richtet sich nur an Links, die sich.. Glaube du verstehst^^ */ color:#993333; [...] /* Sonstige Formatierungen */ }

Und weiter im Programm^^
achte da drauf, dass du alle Tags klein schreibst (:
so auch das z.B. das letzte <p> auf deiner Home Seite^^
Wo wir gerade bei dem <p> sind.. packe die Formatierung für diese lieber in der CSS-Datein in den body-Bereich (=
Auch musst du so Sachen wie z.B. font-weight:normal; font-style:normal; nicht angeben, da dies Standardeinstellungen sind^^
(Meiner Meinung nach, lass auch bitte den letter-spacing und word-spacing heraus.. =/ )

Zum Body-Bereich noch kurz etwas:
Ich empfehle dir das Hintergrundbild dem html-Element zu geben und dem Body eine Maximale Breite (=
Hier im Forum kam es vor einiger Zeit mal zu der Diskussion, dass es unangenehm ist, wenn man eine 2000px Lange Zeile hat, weil der Bildschirm so breit ist, daher ist es so am Sinnvollsten^^
Code: Alles auswählen
html { background: url(http://lh5.ggpht.com/_WF_rrPSTAQA/TJcTWL_RGdI/AAAAAAAABLQ/Eoho11qzx0g/s800/Tasse.jpg) left top repeat scroll; border-top: 0.7em white hidden; border-right: 1em white double; border-bottom: 0.7em white hidden; border-left: 1em white double; text-align: center; /* Damit auch im IE der Body bei einer größeren Breite Zentriert wird */ } body{ margin: 0 auto; max-width: 1000px; padding:2.5em; }

AHH O.o' und gerade erst gesehen.. was ist ein float: center?
Andere Elemente sollen dieses Objekt Zentral umfließen??
Wo ich mich dann hier kurz Frage, ob du weißt, was das float-Attribut macht^^

Soa, spontan sehe ich dann sonst nichts mehr groß (=
(Das Design beurteile ich nicht, dass ist etwas was ich nicht kann)
Bei Fragen zu meinem Tipps oder zu sonst etwas: Frag

Liebe Grüße
Sarkkan

Hallo nochmal,

und danke für den vielen Text habe mal versucht, dass alles umzusetzen.
Vieles habe ich mir bis dato noch nicht so richtig angeguckt daher die falschen Befehle, ich
hoffe ich hab das jetzt richtiger gemacht. Auch die Umsetzung des Designs nur auf eine Seite hatte ich vorher noch nicht so ganz begriffen, ich glaub jetzt gehts, na ja werd noch viel zu lernen haben

von **Peter1978** » Mittwoch 27. Oktober 2010, 18:43

Timifi hat geschrieben:hoffe ich hab das jetzt richtiger gemacht

gibt es eine steigerungsform von richtig?

Wenn etwas richtig ist, wäre es dann nicht wieder falsch wenn es richtiger wäre.
kann man davon ausgehen das richtig 100% Punkte sind und falsch dann null
und da es nicht mehr gibt als alles, dreht es sich um oder fängt von vorne an :mrgreen:

Gruß

von **lauras** » Mittwoch 27. Oktober 2010, 21:18

Was genau hat dieser Beitrag bitte mit dem Thema zu tun??

von **Peter1978** » Donnerstag 28. Oktober 2010, 12:55

richtig gesehen 0%
von der falschen seite ... 100%

sry
oot

von **Timifi** » Donnerstag 28. Oktober 2010, 13:09

Witzbold was

Richtiger oder Wichtiger geht´s nicht mehr ;-)

von **Timifi** » Donnerstag 28. Oktober 2010, 13:11

lauras hat geschrieben:Ein guter Editor ersetzt dir die Sonderzeichen automatisch, damit hast du gar keine Arbeit.

kannst mir da einen netten nennen???

Tutorial HTML, CSS u. PHP - Forum

Zeichencodierung umstellen?

Zeichencodierung umstellen?

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Umstellung auf UTF8

Re: Zeichencodierung umstellen?

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Re: Zeichencodierung umstellen?

Re: ??? zu http://www.schreibundausfüllhilfe.de/

Re: Zeichencodierung umstellen?

Re: Zeichencodierung umstellen?

Re: Zeichencodierung umstellen?

Re: Zeichencodierung umstellen?

Re: Umstellung auf UTF8

Wer ist online?