Tutorial HTML, CSS u. PHP - Forum

von **Monitsch** » Freitag 14. Oktober 2011, 10:02

Guten Tag zusammen!

Ich benutze den Editor Scriptly und der spuckt mir, sobald ich eine HTML Datei schreibe, eine DOCTYPE aus, die ich natürlich nur noch bei den META TAGs beschriften muss.
Meine Frage: Kann ich mich blind auf diese Vorgabe des Editors verlassen? Im Netz stehen viele Versionen von DOCTYPE Definitionen und ich blicke da nicht richtig durch.

Ich habe meine index.html in den top 5 Internet Browsern getestet (Firefox, IE, Chrome, Opera, Safari). Abgesehen von ein, zwei mini-Abweichungen im Design scheint alles zu funktioneren. Benutze bis jetzt auch nur html und css und keinen anderen Schnick Schnack. Ist die DOCTYPE in Ordnung, wenn die gängigsten Browser meine Seite so anzeigen, wie ich es will oder gibt es da noch weitere Kniffe auf die ich achten sollte?

So sieht DOCTYPE aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>HIER MEIN WICHTIGER TITEL</title>

<meta charset="ISO-8859-1"> <--fügt der Editor mir hier immer das "aktuelle" charset ein?
<meta name="description" content=""> <--Hier beschreibe ich kurz und knapp meine Seite?
<meta name="author" content=""> <--mit Author bin ja wohl ich gemeint?
<meta name="keywords" content=""> <--das ist klar. Aber auf wie viele Zeichen sollte ich mich beschränken?
<meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)"> <--nun hier macht der Editor seine Werbung rein

?

<link href="design.css" type="text/css" rel="stylesheet"> <-- Verweis auf CSS ist auch klar!
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon"> <--was ist das?
</head>

Diese DOCTYPE wird in allen Browsern angezeigt, kann ich das immer als Indiz nehmen, ob eine DOCTYPE "gut oder schlecht" ist?
Welche anderen META TAGs würdet ihr empfehlen, oder sind diese voll ausreichend? Gibt es im Netz eine Liste dieser?

Danke und ein schönes Wochenende!

von **webmaster3000** » Freitag 14. Oktober 2011, 11:36

Hi Monitsch!

erstmal 2 dinge, die mir grad auffallen:
1. Der Doctype ist nur die erste Zeile (bei deinem Codebeispiel sind´s 2 Zeilen).
2. Es heißt nicht "Die DOCTYPE" sondern "der DOCTYPE" (bei mir jedenfalls)

Nun zu deiner Frage bzgl des Doctypes:
Der Doctype teilt dem Browser mit, welche HTML-Version du verwendest. Wenn du in Scriptly ein neues HTML-Dokument erstellst, erscheint ein Dialog, in dem du einstellen kannst, welche Version du verwenden möchtest. Du hast XHTML 1.0 Strict gewählt. Für den Anfang ist das OK, aber diese Version erlaubt nicht alle HTML-Elemente.

Zu den Meta-Tags:
Die dienen Suchmaschinen dazu, deine Seite zu katalogisieren. Mehr info gibts hier.
Der letzte Meta-Tag enthält tatsächlich Werbung für Scriptly, kann aber im Erstellen-Dialog abgewählt werden. Du kannst ihn auch nachträglich einfach löschen, wenn die Besucher deiner seite Nicht wissen sollen, dass du mit Scriptly (also nicht WYSIWYG) arbeitest.

Zu dem link-Tag:
Der enthält einen Verweis auf ein Symbol, welches im Browser neben der Adressleiste erscheint. Auch der kann abgewählt oder nachträglich gelöscht werden. Übrigens: Solche Symbole kanns du mit IcoFX erstellen.

Grüße,
webmaster3000

von **Monitsch** » Freitag 14. Oktober 2011, 12:02

Hallo!

Welche Version von der/dem DOCTYPE (kommt wohl von DER Doktor

) ist denn zu empfehlen und aktuell? Oder kann man keine konkrete feste Antwort in dieser Hinsicht geben? Ich würde am Liebsten gleich mit dem aktuellen anfangen zu lernen, damit alle Funktionen ausgeschöpft werden können! Da ich noch relativ keine Ahnung von Javascript, PHP und so was habe, hat das etwas damit zu tun, was angezeigt werden kann und was nicht?

Was ist der charset und kann ich den problemlos übernehmen?

Ich hab absolut kein Problem damit, dass Scriptly angezeigt wird, kann ruhig da stehen bleiben. Stört ja keinen

!

Welchen Sinn hat der Link TAG?

Noch was anderes:
Wenn ich in Scriptly validiere, erscheinen Warnungen bei den META TAGs "warning meta not closed", wie schließe ich diese TAGs ordnungsgemäß?!

Gibt es ein Zeichen-Limit bei dem META Content?

Danke und Gruß!

von **webmaster3000** » Freitag 14. Oktober 2011, 16:49

Hallo Monitsch,

ich würde dir XHTML 1.0 Transitional empfehlen. Wenn du schon mit HTML 5 arbeiten willst, kannst du das natürlich auch machen. Mehr Info zu letzterem gibts hier.

Der Charset gibt an, wie in deiner Datei die Textzeichen des HTML-Codes in binäre Zeichen umgewandelt wurden. ISO-8859-1 ist ok, aber in XHTML muss dieser Meta-Tag eingentlich so aussehen:

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

in den anderen Meta-Tags und den link-Tags muss auch noch ein / (Schrägstrich) vor das Ende des Tags, um deutlich zu machen, dass es ein leerer Tag ist, dann nörgelt scriptly auch nicht mehr.

der zweite link-Tag ist ein Verweis auf ein Symbol, dass der Browser neben der Adressleiste und in den Lesezeichen anzeigt. Wenn du ein Solches erstellen möchtest, dann kannst du das mit IcoFX machen.

Zum Schluss noch mal eine ordnungsgemäße XHTML 1.0 Transistional-Seite:

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" /> </head> <body> </body> </html>

Grüße,
webmaster3000

von **Sarkkan** » Freitag 14. Oktober 2011, 17:03

Monitsch hat geschrieben:Welche Version von der/dem DOCTYPE (kommt wohl von DER Doktor ) ist denn zu empfehlen und aktuell? Oder kann man keine konkrete feste Antwort in dieser Hinsicht geben? Ich würde am Liebsten gleich mit dem aktuellen anfangen zu lernen, damit alle Funktionen ausgeschöpft werden können! Da ich noch relativ keine Ahnung von Javascript, PHP und so was habe, hat das etwas damit zu tun, was angezeigt werden kann und was nicht?

Der Doctype bezieht sich wirklich nur auf die Darstellung des HTML's, die erlaubten Attribute und weitere "Kleinigkeiten".
Der Aktuellste Doctype ist der HTML5-Doctype der seeeeehr schwierig aussieht:

Code: Alles auswählen: <!DOCTYPE html>

(Das war es kein Witz^^)
Mit diesem Doctype sind alle neuen HTML5-Semantik-Elemente erlaubt, jedes Element darf folgende Attribute id, Klasse, data-*, contenteditable, draggable, hidden, role und noch einige mehr sowie Element spezifische Attribute haben. Außerdem gibt es mit HTML5 native (also direkt vom Browser) Unterstützung von Audio- und Videowiedergabe.
Dies ist aber alles nur relativ, da der Browser diese Sachen auch wirklich unterstützen muss. Bei alten Browsern muss man immer noch ein "Workaround" in der Hinterhand haben.

Monitsch hat geschrieben:Was ist der charset und kann ich den problemlos übernehmen?

Der Charset, zu Deutsch Zeichensatz, gibt an, mit welcher Kodierung Sonderzeichen abgespeichert wurden.
Hierfür muss die Angabe des entsprechenden meta-Tags mit der Tatsächlichen Kodierung des Dokumentes natürlich übereinstimmen. Es empfiehlt sich den UTF-8 Zeichensatz zu verwenden, da muss man Umlaute nicht kodieren (ä anstelle von ä), sondern kann sie direkt verwenden. Dazu einfach

Code: Alles auswählen: <meta charset=utf-8 />

verwenden und bei Scriptly unten in der Leiste UTF-8 anstelle von ASCII auswählen.

Monitsch hat geschrieben:Welchen Sinn hat der Link TAG?

Er gibt eine externe Ressource an, die du "verlinkst", weil du sie benutzten möchtest.

Monitsch hat geschrieben:Noch was anderes:
Wenn ich in Scriptly validiere, erscheinen Warnungen bei den META TAGs "warning meta not closed", wie schließe ich diese TAGs ordnungsgemäß?!

Tags die keine Schließenden Tag haben werden durch ein abschließendes / geschlossen:

Code: Alles auswählen: <meta name=... /> <link href=... /> <input type=... /> ...

Monitsch hat geschrieben:Gibt es ein Zeichen-Limit bei dem META Content?

Nein, den gibt es nicht^^ Aber es nützt nichts, wenn man hier jeden Sch*** einträgt. Suchmaschinen achten nur relativ wenig auf diese Angaben, man schaut zwar rein aber der Inhalt der Seite wird wichtiger gewertet.

Gruß
Dustin, alias Sarkkan

von **Monitsch** » Samstag 15. Oktober 2011, 19:14

Guten Abend

!
Schon einmal vielen Dank für die Antworten, die habe ich eben erst gelesen! Dennoch muss ich einmal nerven und hoffe ihr könnt mir helfen!

Ich entschuldige mich schon einmal dafür, dass ich meine Fragen umschreibe, oft auch wiederhole. Es hilft mir bei meinem Lernprozess, wenn mir jemand im Nachhinein mein Geschreibsel bestätigt: „Ja, das hast du richtig erkannt!“

Zum DOCTYPE:

Ich weiß nicht, wie es anderen HTML-Neulingen geht, aber ich finde den DOCTYPE höchst seltsam und nervig! :evil:

Vielleicht schreibe ich ihm auch zu viel Bedeutung zu?!

So wie ich es verstanden habe, dient der DOCTYPE ausschließlich nur als HTML-Richtlinienmeister über die Tags und Attribute, die man nehmen darf und welche nicht.
Kann ich nicht einfach den HTML5 DOCTYPE nehmen und einfach mit meinen „gewöhnlichen“ Tags arbeiten wie sonst auch? Ohne vorerst auf <header> und <footer> zurückzugreifen, da man die für die alten Browser doof rumwandeln muss? Oder macht es dann keinen Sinn mit HTML5 zu arbeiten, weil ich sowieso <div id=“footer“> toller finde? Dann kann ich gleich bei XHTML 1.0 Transitional oder strict bleiben?

Laut dem HTML-Seminar, welches ich mir natürlich von A-Z reingezogen habe, unter der Voraussetzung ich habe es richtig verstanden, ist der Transitional nicht ein ganz so strenger HTML-Lehrer, wie es der Strict ist?

Zum Charset:

Webmaster3000 empfiehlt mir folgenden charset auf XHTML Standard:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

Sarrkan empfiehlt den : <meta charset=utf-8 /> --> brauche ich da keinen Content und Equiv?

Ist es eine Frage der genaueren Codierung ob ich den ISO-8859-1 nehme, anstatt den UFT-8?
Habe ich dadurch eine genauere, detailliertere (internationalere) Webseite, wenn ich mit maskierten Zeichen (so heißt das ja auch, oder) arbeite?

Allgemeine Frage zum DOCTYPE und HTML-Standards:
In wie weit ändert sich der DOCTYPE Standard eigentlich? Muss man sich jedes Dreivierteljahr nach Änderungen umsehen, weil man sonst Gefahr läuft eine veraltete Webseite zu haben? Wo kann man sich darüber aktuell informieren?
Ist es ratsam, wegen SEO und den Suchmaschinen, immer auf dem aktuellen Stand zu sein?

Vielen Dank und schönen Sonntag!

von **Sarkkan** » Samstag 15. Oktober 2011, 19:29

Monitsch hat geschrieben:Zum DOCTYPE:

Ich weiß nicht, wie es anderen HTML-Neulingen geht, aber ich finde den DOCTYPE höchst seltsam und nervig! Vielleicht schreibe ich ihm auch zu viel Bedeutung zu?!

So wie ich es verstanden habe, dient der DOCTYPE ausschließlich nur als HTML-Richtlinienmeister über die Tags und Attribute, die man nehmen darf und welche nicht.
Kann ich nicht einfach den HTML5 DOCTYPE nehmen und einfach mit meinen „gewöhnlichen“ Tags arbeiten wie sonst auch? Ohne vorerst auf <header> und <footer> zurückzugreifen, da man die für die alten Browser doof rumwandeln muss? Oder macht es dann keinen Sinn mit HTML5 zu arbeiten, weil ich sowieso <div id=“footer“> toller finde? Dann kann ich gleich bei XHTML 1.0 Transitional oder strict bleiben?

Laut dem HTML-Seminar, welches ich mir natürlich von A-Z reingezogen habe, unter der Voraussetzung ich habe es richtig verstanden, ist der Transitional nicht ein ganz so strenger HTML-Lehrer, wie es der Strict ist?

Naja, er ist schon wirklich wichtig

Bau mal deine Seite mit dem HTML5-Doctype und verwende ruhig deine <div>'s. Wenn du fertig bist ändere einfach mal den Doctype, oder nehm ihn ganz heraus, das Ergebnis is fast schon erschreckend^^ Und ja, strict ist Strenger^^

Monitsch hat geschrieben:Zum Charset:

Webmaster3000 empfiehlt mir folgenden charset auf XHTML Standard:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

Sarrkan empfiehlt den : <meta charset=utf-8 /> --> brauche ich da keinen Content und Equiv?

Ist es eine Frage der genaueren Codierung ob ich den ISO-8859-1 nehme, anstatt den UFT-8?
Habe ich dadurch eine genauere, detailliertere (internationalere) Webseite, wenn ich mit maskierten Zeichen (so heißt das ja auch, oder) arbeite?

Japp, so wie ich es geschrieben habe (inklusive mit ohne Anführungszeichen

) ist es richtig und angenehmerweise auch noch für ältere Browser verständlich

Den Browser suchen erstmal nach dem Wort "charset=" um zu sehen, was dahinter steht^^
Und nein, es ist keine Frage der genaueren Codierung, sondern mehr der dir zur Verfügung stehenden Zeichen

Bei UTF-8 stehen dir eigentlich ALLE Zeichen zur verfügung, ASCII-Kodierungen wie ISO-8859-1 hingegen nicht so ganz.. Gewöhn dir wirklich lieber eine UTF-8 "Programmierung" an, es wird dir später helfen

Monitsch hat geschrieben:Allgemeine Frage zum DOCTYPE und HTML-Standards:
In wie weit ändert sich der DOCTYPE Standard eigentlich? Muss man sich jedes Dreivierteljahr nach Änderungen umsehen, weil man sonst Gefahr läuft eine veraltete Webseite zu haben? Wo kann man sich darüber aktuell informieren?
Ist es ratsam, wegen SEO und den Suchmaschinen, immer auf dem aktuellen Stand zu sein?

Nein^^ Wenn wir jetzt mal sehen, dass wir im Jahre 2011 bei HTML5 angekommen sind (welches sind Streng genommen nur in der Entwicklung befindet) und das die erste HTML-Version 1992 heraus kam.. ungefähr alle 5 Jahre Ändern sich die Standards, aber auch eine Veraltete Webseite lässt sich dank des "alten Doctypes" noch korrekt darstellen ;)
Wegen SEO.. Darauf hat man Streng genommen keinen Einfluss, da Google seinen Algorithmus nicht veröffentlicht^^
Was aber immer dir zu einer guten Position helfen wird:
-> Guter Inhalt
-> Passende, kurze und mit Suchwörtern gespickte Überschriften
-> Keywords ind title- und alt-Attributen

Gruß
Dustin

von **Monitsch** » Sonntag 16. Oktober 2011, 11:23

Okay, Danke für die Antwort!

Mit dem DOCTYPE muss ich mal schauen...ich bau meine Seite erst mal so fertig, wie ich sie haben will und dann setze ich mal den HTML5, dann den Transitional und dann den Strict oben hin und sehe was sich verändert. Aber wenn ich uploade würde ich dann den Transitional oder HTML5 nehmen...du merkst, ich hab's noch nicht gerafft,

aber ich geb mein Bestes! Learning by doing!

Hab grad mal geguckt, Ebay z.B. verwendet HTML 4.01 Transitional, bei Amazon steht nix und HIER das Forum hat XHTML 1.0 Strict...nur mal so dahingesagt

Und beim Charset nehme ich dann denn

<meta charset=utf-8 />

Na gut, dann Danke noch mal und ihr werdet noch von mir hören

Gruß!

von **Sarkkan** » Sonntag 16. Oktober 2011, 11:42

Monitsch hat geschrieben:Mit dem DOCTYPE muss ich mal schauen...ich bau meine Seite erst mal so fertig, wie ich sie haben will und dann setze ich mal den HTML5, dann den Transitional und dann den Strict oben hin und sehe was sich verändert. Aber wenn ich uploade würde ich dann den Transitional oder HTML5 nehmen...du merkst, ich hab's noch nicht gerafft, aber ich geb mein Bestes! Learning by doing!

Sorry, wenn ich das so sage, aber gaaaaaanz Blöde Idee! :O
Wenn der Browser kein Doctype findet versucht er einfach auf gut Glück es zu Rendern, beziehungsweise nach Standards der ersten Webseiten. Baust du dann in diesem Modus deine Seite und setzt dann wenn du fertig bist einen Doctype wirst du sehr niedergeschlagen sein, weil du mit eigentlich jedem Doctype deine Seite neu schreiben musst.
Benutzt einfach den HTML5-Doctype, er ist einfach und bietet alle Funktionalitäten wie du sie brauchst.

Gruß
Dustin

von **Monitsch** » Sonntag 16. Oktober 2011, 13:35

Okay, da ich bisher den Strict hatte, werde ich auf den HTML5er umstrukturieren! Scheint am einfachsten zu sein...

Danke und Gruß,
Monitsch

von **Monitsch** » Sonntag 16. Oktober 2011, 14:06

Bitte noch einmal schauen!!!!!!!!!!!!! Danke!

<!DOCTYPE html>
<html>
<head>
<title> </title>

<meta charset="UFT-8" /> oder meintest du, ich kann den auch ohne "" und KLEIN schreiben?? :roll:

von **Sarkkan** » Sonntag 16. Oktober 2011, 14:20

Japp, bitte ohne Anführungszeichen und kann ruhig klein^^
Außerdem den bitte über den <title>

Hat was damit zu tun, dass der IE wenn er nach X Zeichen diesen <meta> nicht findet er munter drauf los rät^^

von **webmaster3000** » Sonntag 16. Oktober 2011, 16:35

Hi.

sorry allerseits dass ich mich einfach so nochmal einmische, aber mir fallen grad 2 Sachen auf:

1. Wenn du <meta charset=utf-8/> angibst, musst du beim Erstellen des HTML-Dokuments auch UTF-8 beim Zeichensatz (im Dialog: Kodierung) einstellen.
2. Wenn du kein Icon verwendest, solltest du den <link/>Tag diesbezüglich löschen, sonst kriegst du haufenweise 404er, wenn du die Seite online gesellt hast.

Hoffe, ich konnte helfen.

Grüße,
webmaster3000

von **Sarkkan** » Sonntag 16. Oktober 2011, 17:26

Sarkkan hat geschrieben:Der Charset, zu Deutsch Zeichensatz, gibt an, mit welcher Kodierung Sonderzeichen abgespeichert wurden.
Hierfür muss die Angabe des entsprechenden meta-Tags mit der Tatsächlichen Kodierung des Dokumentes natürlich übereinstimmen. Es empfiehlt sich den UTF-8 Zeichensatz zu verwenden, da muss man Umlaute nicht kodieren (ä anstelle von ä), sondern kann sie direkt verwenden. Dazu einfach
Code: Alles auswählen
<meta charset=utf-8 />
verwenden und bei Scriptly unten in der Leiste UTF-8 anstelle von ASCII auswählen.

von **Monitsch** » Sonntag 23. Oktober 2011, 16:51

Hallo!

1. Wenn du <meta charset=utf-8/> angibst, musst du beim Erstellen des HTML-Dokuments auch UTF-8 beim Zeichensatz (im Dialog: Kodierung) einstellen.

Ich hab den Zeichensatz auch in meinem Editor geändert auf UTF-8. Wenn ich allerdings die Kodierung im Einstellungsmenü ändere, steht unten UTF-8 (BOM)? Was ist der Unterschied zwischen UTF-8 und UTF-8 (BOM)?

2. Wenn du kein Icon verwendest, solltest du den <link/>Tag diesbezüglich löschen, sonst kriegst du haufenweise 404er, wenn du die Seite online gesellt hast.

Ich werde den Meta dann erst mal rausnehmen, solange ich noch kein Icon habe...Danke für den Hinweis!

Eine weitere Frage zu den Meta Tags:

1. Kann ich bei jeder HTML Datei andere Meta Tags "Keywords" benutzen bei verschiedenen Content?
2. kann ich (statt die keywords oder descripton usw.) in jedem <head></head> zu wiederholen, einfach die Bemerkungen "revsit" "index" usw. angeben ohne alles immer wieder hin zu kopieren?

Danke!

Tutorial HTML, CSS u. PHP - Forum

DOCTYPE und META TAGs

DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Re: DOCTYPE und META TAGs

Wer ist online?