Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Little Boxes – die HTML-Basics

HTML-Text für die erste Webseite erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Erfassen Sie im Editor den HTML-Text für die erste Webseite und lassen Sie die Seite im Firefox-Browser anzeigen.

Transkript

In diesem Film erstellen Sie in der momentan noch komplett leeren Datei schnelldurchlauf.html im Ordner littleboxes ein HMTL Grundgerüst, das erste HTML. Und in HTML spielen die < Zeichen eine ganz besondere Rolle. Es geht los mit <! DOCTYPE html <! DOCTYPE html größer als () zum Beenden. Das sagt dem Browser später, dass, was da jetzt kommt im Rest des Dokumentes, das ist ein HTML-Dokument. Weiter geht's mit einmal Enter in Zeile 2. Dort kommt das sogenannte Stammelement und das lautet html und größer als (), sobald ich das drücke, bringt dieser Editor schon das Endetag automatisch. /html sehen Sie hier. Sobald ich den Kursor in das Anfangstag setze, wird das Endetag automatisch hervorgehoben und umgekehrt. Das ist im Moment noch nicht wirklich nötig, aber es wird später etwas unübersichtlicher. So, zwischen html und /html gibt es zwei Geschwisterelemente, nämlich den head, so, auch gleich nach unten schieben hier und unter dem head den sogenannten body, den Körper. Auch da machen wir Dasgleiche. So! Die alle ganz am Anfang beginnen hier. Im head kommen Informationen über das Dokument, über die Webseite und als Allererstes, Tab rücke ich das ein bisschen ein, kommt hier meta. Kleiner als (<), dann klappt eine Liste heraus, me und da sehen Sie schon meta, jetzt mit Enter kann ich das bestätigen. Wenn ich jetzt eine Leerstelle drücke, dann kommen die Attribute für dieses Element und da sehen wir schon charset. Wenn Ihr Editor das nicht macht, können Sie das auch ganz normal alles von Hand hinschreiben. Und als Zeichensatz, als character set, wähle ich hier UTF-8. Das ist die Art und Weise, wie dieses Dokument gespeichert wird. So, eine Zeile tiefer kommt der sogenannte titel. Der Seitentitel title geschrieben, it's English. Und wenn ich das beende mit größer als (), dann kommt das Endetag automatisch wieder dazu. Der Titel dieses Dokumentes soll sein Schnelldurchlauf-Littleboxes. Es wird gleich gezeigt, wo das wieder auftaucht, wo das verwendet wird. Das war's vorerst im head. Noch nicht besonders viel, aber es ist ja auch nur ein Schnelldurchlauf. Im body geht es los mit einer Hautpüberschrift h1 und Sie sehen, da gibt's noch ein paar mehr. Das sind Gliederungsebenen. Den schließe ich auch wieder. Und die Hauptüberschrift soll sein schlicht und einfach Little Boxes. So, am Ende der Zeile Enter und unten drunter kommt ein Absatz, ein paragraph. Und das ist das p Element. In diesem Element werden Fließtextabsätze gespeichert. Ich schreib jetzt einfach mal Webseiten gestalten mit HTML und CSS Und Sie sehen, das ist eigentlich gar kein vollständiger Satz, aber wir nehmen der Einfachheit halber trotzdem ein p Element hier. So, das ist schon das erste Dokument. Ich räume hier noch mal ein bisschen auf. So, die kommen zusammen. Sie könnten das, was den Browser betrifft, alles auch in einer Zeile schreiben, das ist dem Browser ganz egal. Der Browser saust hier durch, guckt nach diesen HTML-Elementen, die in Spitzenklammern stehen. Und ob wir nun Enter zwischendurch machen oder das einrücken, das ist in den allerallermeisten Fällen ganz egal, aber für uns wird es dadurch übersichtlicher und wir müssen ja auch in diesem Quelltext arbeiten. So, gespeichert habe ich das Dokument. Sie sehen, dass hier oben, wenn da ungespeicherte Änderungen sind, ist immer so ein Punkt davor, vor dem Dateinamen. Steuerung s speichert das und dann ist er weg. Jetzt sehen Sie im Ordner hier schelldurchlauf. Ich möchte das einmal öffnen, das Dokument im Firefox. Und hier ist es schon. Hier sehen Sie den Firefox. Da oben ist der Seitentitel. Hier im Tab taucht er wieder auf. Schnelldurchlauf-Little Boxes. Ansonsten bleibt alles, was zwischen head und /head steht, verborgen. Also alles das, was hier auftaucht im Editor zwischen head und /head bis auf den title bleibt das verborgen. Dann sehen Sie hier das h1. Das wird groß dargestellt. Dick und fett, das ist die Hauptüberschrift. Und da unten drunter steht Webseiten gestalten mit HTML und CSS Alles, was also zwischen body und /body steht, das erscheint hier im großen, weißen Bereich im Viewport des Browsers. Das ist eine einfache Seite, die vollständig ist, noch nicht besonders komplex, aber sie besteht aus zwei Teilen, dem head, dem unsichtbaren head und dem body, der später im Browserfenster dargestellt wird.

Little Boxes – die HTML-Basics

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

3 Std. 3 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!