Little Boxes – der HTML-Crashkurs

DOCTYPE, Stammelement, <head> und <body>

29,95
Machen Sie sich mit den vier Teilen des HTML-Grundgerüsts im Detail vertraut. Dabei handelt es sich um <!DOCTYPE>, <html>, <head> inklusive Seitentitel und Seitenbeschreibung sowie <body>.

Dieser Quelltext ist recht übersichtlich geschrieben, aber wie genau Sie das machen, das ist auch ein bisschen Geschmacksache. Ich mache hier zum Beispiel noch mal'ne Leerstelle rein. Die Einrückungen machen die Sache übersichtlich und Leerstellen auch da, wo sie hingehören. Dem Browser ist das alles völlig schnut pipegal, für den könnte das alles in einer langen Zeile stehen, der interessiert sich nur für die HTML-Tags hier, die liest er aus. Für uns ist die Übersichtlichkeit nicht schlecht, denn der Quelltext wird früher oder später ganz von alleine unübersichtlich. Da müssen wir nicht zutun. Und es hilft uns, das auf einem Blick besser erkennen zu können. Der Doctype oben hat eigentlich nur die Aufgabe, dass er den Browser in einen standartkonformen Modus versetzt. Ich zeige Ihnen das hier einmal. Hier ist die Seite, ich lade sicherheitshalber noch mal neu, klicke mit Rechts drauf und sage Seiteninformationen. Dann sehen Sie hier im standartkonformen Modus und utf-8 als Codierung. Und früher war dieser Doctype sehr viel länger. Sie sehen hier beim w3.org heißt die Website hier, ein paar Beispiele. Dieser hier hat xhtml 1.0 transitional war sehr weit verbreitet. Es gibt noch viele Seiten, die das so haben, die muss man auch nicht nachbearbeiten, das funktioniert nach wie vor, aber es gibt heute keinen Grund mehr, das zu tun. Denn diese Variante ist sehr viel angenehmer. Punkt 2 ist das Stammelement html, das alle anderen Elemente umschließt. Es beginnt, wie gesagt, direkt nach dem DOCTYPE und hört ganz unten auf. Dananch kommt nichts mehr. Das Attribut lang für language gibt an, in welcher Sprache der Inhalt ist. Also das, was zwischen body und /body steht. Im head gibt es Informationen über diese Webseite. Das beginnt mit meta charset, character set, auf Deutsch Zeichensatz, utf-8. Das ist wichtig für die Umlaute, damit Sie hier im Inhaltsbereich später ganz normal Umlaute verwenden können, oder auch hier schon, da ist ein Ü. Benutzt man den Zeichensatz utf-8 in älteren Editoren, müssen Sie da eventuell aufpassen, ansonsten ist utf-8 inzwischen fast standart. Man sagt es hier explizit, damit der Browser weiß, in welchem Zeichensatz diese Seite gespeichert wurde. Direkt danach kommt der Seitentitel, title, t-l-e, titel gesprochen, aber title geschrieben. HTML-Grundgerüst-Vorlage und die Seitenbeschreibung meta name=description und dann kommt hier der Text der Seite. Ich möchte Ihnen dazu einmal kurz demonstrieren, was es damit auf sich hat. Ich schreib mal in die Google-Suche da html title suchmaschinen. Da kommt es schon. So, und hier sehen Sie den ersten Treffer gleich, "Was ist der Title Tag-Seitentitel- Titel in der Webseite". Anmerkung nebenbei. Title-Tag heißt es nicht, sondern Titel-Element. Ein Tag ist das hier ist der Anfangstag, das ist der Endetag. Das Ganze-Anfangstag plus Endetag plus Inhalt-das nennt man Element. Es wird aber häufig als Titletag oder auch Metatag hier unter Bezeichnis auch nicht weiter schlimm, aber nicht ganz korrekt. So, und jetzt zum Eigentlichen. Der Seitentitel-das ist das, was Sie hier dick und fett, lila, bzw. blau in den Suchergebnissen sehen. Direkt darunter, diese zwei Zeilen, das ist die Seitenbeschreibung, die meta description. Ich rufe diese Seite einmal in einem neuen Tab auf hier und schaue mir den Quelltext an Seitenquelltext anzeigen. Und dann sehen Sie hier schon title-das ist der Title-Tag das ist genau das, was Sie im Suchergebnis eben gesehen haben. Und hier ist die meta name description. Der Titletag oder Seitetitel ist das wichtigste Element für top rankings. Und das nimmt Google, wenn nichts Anderes da ist, als Seitenbeschreibung hier unten drunter. Das heißt, wenn Sie einen guten Title suchen hier, dann überlegen Sie sich einfach, wie soll die Seite in den Suchmaschinen aussehen später, wenn sie denn dort erfasst ist. Der Seitentitel ist das dicke, blaue zum Anklicken. Die Seitenbeschreibung ist das, was unten drunter steht. 80 bis 150 Zeichen können das sein, also zwei Zeilen bei Google. Machen Sie Werbung für Ihre Seite und überlegen Sie sich, wie das bei Google aussehen soll, damit die Leute da auch drauf klicken und neugierig werden. Der Seitentitel sollte die Seite also beschreiben, wenn man sie gerade nicht sieht und vorher auch noch nie gesehen hat. "Willkommen auf meiner Homepage" ist nicht so ideal. Das sollte schon ein bisschen aussagekräftiger sein. Bleibt eigentlich nur noch der body. Da werden Sie später den Großteil Ihrer Zeit verbringen. Im Moment steht da nur der Kommentar, aber den Großteil beim Gestalten und beim Erstellen von Webseiten verbringt man zwischen body und /body, da, wo der Inhalt steht, der anschließend im Browserfenster erscheint.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!