Grundlagen, Überschriften und Bilder - HTML5 & CSS3
Und damit dann herzlich willkommen zur ersten Folge dieser neuen HTML5-CSS3-Tutorial-Reihe.
Und in dieser Reihe werden wir uns die wichtigsten, grundlegenden Dinge über HTML5 und die Styling-Sprache
CSS3 angucken.
Zu allererst einmal ist wichtig zu bemerken, dass HTML5 ganz klar KEINE Programmiersprache ist
sondern nur eine Markup-Language.
Das sagt der Name auch schon: Hypertext Markup Language.
Das ist nämlich die Bedeutung der Abkürzung HTML.
Wenn wir das jetzt aus dem Weg geschafft haben, können wir auch endlich anfangen.
Ich habe hier bereits ein HTML-Dokument geöffnet in dem Editor Webstorm.
Den kann ich auch nur wärmstens empfehlen, er hat sehr viele praktische Funktionen, ist
sehr umfangreich und man kann mit Plugins alles mögliche so machen, wie man möchte.
Allerdings gibt es auch noch weitere Alternativen.
Zum Beispiel könnte man Atom oder Brackets oder aber auch den Standard-Notepad- oder
aber Notepad++-Editor nutzen.
Ich werde auch mal eine Liste in der Beschreibung verlinken.
Jetzt wollen wir aber auch endlich mal loslegen mit dem eigentlichen "Programmieren".
Wichtig ist, in der ersten Zeile von jedem HTML-Dokument muss dieser Ausdruck stehen:
"DOCTYPE HTML".
Das sagt dem Browser, dass diese Datei auch wirklich HTML ist und nicht irgendeine Datei,
die einfach nur HTML benannt ist.
So, als nächstes werden wir mit dem grundlegendsten Element von HTML bekannt gemacht.
Und zwar sind das die sogenannten Tags.
Diese bestehen aus einem Kleiner-als-Zeichen, dann irgendeinem Namen
und dann einem Größer-als-Zeichen.
In dieser Entwicklungsumgebung wird das automatisch schon vervollständigt, denn es gibt dann
auch meistens noch einen schließenden Tag.
Dieser besteht ebenfalls aus einem Kleiner-als-Zeichen, dann allerdings einem Slash, dann diesem gleichen Namen
- also diese beiden Namen müssen exakt übereinstimmen -
und dann wieder einem Größer-als-Zeichen.
Und jetzt haben wir schon einmal die Klammer, in die wie das HTML-Dokument einbauen können.
Erstmal besteht ein HTML-Dokument immer aus zwei Teilen: erstens dem Header und zweitens
dem Body.
Und zwar haben wir einmal den Head und darunter kommt dann der Body.
In diesen Header können wir jetzt ganz verschiedene Sachen reinmachen.
Das sind dann aber vor allem Informationen ÜBER diese Seite.
Zum Beispiel können wir hier einen Title reinmachen.
Das gibt der Seite dann einen Titel.
Wenn wir hier jetzt zum Beispiel hinschreiben "HTML & CSS Tutorial" und dann das Ganze im Browser mal angucken --- haben wir hier oben "HTML & CSS Tutorial - Folge 1". Da kann man natürlich alles mögliche reinschreiben.
In Zukunft werden wir hier noch mehr reinschreiben: zum Beispiel werden wir Stylesheets verlinken,
Meta-Informationen angeben und so weiter und so fort.
Das möchte ich aber erst in späteren Folgen anschneiden, da sie doch ein wenig fortgeschrittener
sind als das, was wir in dieser Folge machen.
Und dann haben wir noch den Body.
Das ist dann der eigentliche Inhalt der Seite.
Es gibt ganz viele verschiedene Elemente, Tags, die man in HTML verwenden kann.
Meiner Meinung nach das Wichtigste ist das p-Element.
Das dürfte man wahrscheinlich am häufigsten verwenden - zumindest auf textlastigen Seiten.
Das p-Element steht für "paragraph", also "Absatz".
Wenn wir hier also etwas reinschreiben - hier habe ich mal einen Lorem Ipsum-Text reinkopiert
- und das Ganze im Browser wieder angucken
dann sehen wir, dass wir nun einen Text-Paragraphen haben.
Natürlich können wir auch noch einen zweiten machen und da nochmal so einen Text reinschreiben.
Dann sehen wir, dass wir hier zwei Absätze haben mit einer Lücke dazwischen.
Allerdings geht es auch, dass wir zum Beispiel in diesem Paragraph auch noch mal neue Zeilen beginnen.
Man könnte jetzt vielleicht denken, dass man das durch die Enter-Taste macht, aber
wie wir sehen werden
ändert das nichts.
Das liegt daran, dass HTML sich nicht um Leerzeichen, Enter oder sonst irgendwas kümmert, sondern
diese einfach ersetzt, als wären sie nicht so wichtig.
Wenn wir jetzt aber trotzdem neue Zeilen beginnen wollen, können wir das ganz einfach durch
ein br-Tag machen.
Das steht einfach für "break".
Auffällig an diesem Tag ist, dass wir KEIN schließendes Tag brauchen.
Das liegt daran, dass in diesem Tag kein Inhalt vorhanden sein kann abseits von einer neuen
Zeile, was ja bereits das Tag an sich aussagt.
Wenn wir jetzt nochmal die Seite angucken, sehen wir, dass wir eine neue Zeile begonnen haben.
Allerdings wäre es ein wenig langweilig, wenn wir immer nur Paragraphen, Paragraphen,
Paragraphen machen - wir sind hier ja nicht im Jura-Studium.
Und deswegen gibt es auch noch Überschriften.
Die größte Überschrift ist "h1".
Das steht für "header one".
Hier können wir jetzt zum Beispiel einen allumfassenden Titel hinschreiben.
"Willkommen auf dieser Webseite".
Gucken wir das Ganze im Browser an, sehen wir, dass wir hier über dem ganzen Text einen
sehr großen Titel haben.
Allerdings gibt es mehrere Typen von Titeln.
Zum einen wäre da "h2" - das ist dann ein Unterseitentitel.
Und dann gibt es noch "h3".
Das sind die drei wichtigsten Typen, die man am häufigsten verwendet.
Dieser könnte jetzt zum Beispiel in einem längeren Blog-Post ein Abschnittstitel sein.
Und dann gibt es noch "h4" - das ist, wenn man einen Abschnitt noch weiter untergliedern möchte.
Das könnte dann zum Beispiel heißen "1.1".
Dazu werden wir auch in zukünftigen Folgen ein bisschen mehr machen.
Dann gibt es noch "h5".
Und das könnte beispielsweise heißen "1.1.1" und dann noch eine "Weitere Randbemerkung".
Und dann gibt es noch als letzte Überschrift "h6".
Das könne dann "1.1.1.1" heißen und ist eine "Unwichtige Nebeninformation".
Wir sehen, dass ab "h5" der Text ziemlich klein wird und "h6" ist sogar noch kleiner
und unlesbarer als der normale Paragraph.
Jedenfalls sind diese acht bisher angesprochenen Elemente, die wichtigsten und am häufigstesten
benutzten Tags in HTML.
Aber wie man sieht sind sie alle nur auf Text bezogen.
Aus diesem Grund gucken wir uns als nächstes das sogenannte "Image"-Tag an.
Dieser Editor, den ich nutze hat bereits das Ganze automatisch vervollständigt.
Und zwar sehen wir sogenannte "Attribute" in diesem Tag.
Das sind Werte, die man einem Tag geben und dieses so verändern kann.
Ein "img"-Tag ist eben ein "Image"-Tag und kann ein Bild anzeigen.
Wenn wir hier als "Source" zum Beispiel "http://via.placeholder.com/1920x1080" eingeben
und dann die Seite nochmal angucken,
sehen wir, dass wir hier ein Bild haben.
Es ist ein sehr einfaches Bild und einfach nur ein Platzhalter.
Dieses sieht aber noch viel zu groß aus.
Deswegen benötigen wir in der nächsten Folge noch ein wenig Styling.
Das geht dann eben über CSS.
Allerdings haben wir hier noch ein zweites Attribut vorgegeben und das heißt "alt".
Hier können wir zum Beispiel eingeben: "Hier sollte ein Bild erscheinen".
Der Inhalt dieses Attributes wird immer dann angezeigt, wenn die Quelle nicht verfügbar ist.
Das kann zum Beispiel dann sein, wenn gar keine angegeben ist.
Und dann sehen wir hier, dass dieser Text erscheint.
Ansonsten - wenn wir wieder die URL einfügen - erscheint er nicht.
Und das würde ich sagen, war es dann mit dieser ersten Folge.
In der nächsten werden wir uns angucken, wie es mit Stylesheets aussieht
und, vor allem, weitere Elemente uns ansehen.
Vielen Dank für Zusehen, vergesst wie immer nicht, dieses Video zu kommentieren, zu bewerten,
zu teilen, was auch immer.
Ich hoffe wir sehen uns im nächsten Video wieder.
Tschau!
