Inhaltsverzeichnis
Die Bedeutung und Verwendung von HTML-Elementen zur Anpassung und Strukturierung von Webinhalten
Da wir im letzten Beitrag bereits unsere erste HTML-Datei erzeugt haben, wird es nun Zeit, dass wir uns in diesem Beitrag im Detail ansehen, wie die HTML-Syntax aussieht. Es ist essentiell, dass wir verstehen, was HTML-Elemente sind, um Inhalte auf unserer Website mit Hilfe von HTML-Elementen anpassen und strukturieren zu können. Bleib also unbedingt dabei, wenn du lernen möchtest, wie du Inhalte auf deiner Website mit HTML-Elementen anpassen und strukturieren kannst.
Entdecke die Möglichkeiten von ‚Programmieren starten Premium‘ für die Umsetzung spannender Praxisprojekte in der Webentwicklung
Bevor wir uns der HTML-Syntax widmen, möchte ich kurz darauf hinweisen, dass du mit unserem kostenlosen Programm „Programmieren starten Premium“ Schritt für Schritt coole Praxisprojekte umsetzen kannst. Du kannst zum Beispiel eine Website erstellen, auf der man online Essen bestellen kann, oder eine komplette Web API für eine Hotelkette entwickeln, um Buchungsanfragen entgegenzunehmen. In „Programmieren starten Premium“ findest du umfassende Einsteigerkurse für verschiedene Programmiersprachen sowie fortgeschrittene Kurse, in denen du echte Praxisprojekte umsetzt und spannende Frameworks kennenlernst. Den Link zu „Programmieren starten Premium“ findest du in der Beitragbeschreibung.
Einblick in die HTML-Syntax und die grundlegenden HTML-Elemente zur Anpassung und Strukturierung von Inhalten
Nun widmen wir uns der HTML-Syntax. Wenn von einer Syntax die Rede ist, sind formale Regeln gemeint, die festlegen, wie eine HTML-Datei aussehen muss, damit sie als valides HTML gilt. Im HTML gibt es grundlegend sogenannte HTML-Elemente, mit denen wir die Inhalte nach Belieben anpassen und strukturieren können.
Anwendung des <u>-Elements zur Unterstreichung von Text in HTML und Einführung in weitere wichtige HTML-Elemente
Um dir eine grobe Vorstellung davon zu geben, was ein HTML-Element ist, zeige ich dir anhand unserer aktuellen Datei, die wir im letzten Beitrag erzeugt haben, wie wir mit Hilfe des <u>-Elements erreichen können, dass die ersten beiden Wörter „Willkommen in“ unterstrichen sind. Dazu schreiben wir vor diesen beiden Wörtern folgenden Code: <u>. Am Ende der Wörter fügen wir den schließenden Tag hinzu: </u>. Wenn wir die Datei speichern, den Browser aktualisieren und die Seite anzeigen, werden die ersten beiden Wörter tatsächlich unterstrichen. Das <u>-Element ist nur eines von vielen HTML-Elementen. Es gibt zahlreiche Elemente, mit denen man nahezu alles umsetzen kann, was man sich vorstellen kann. In dieser Tutorial-Reihe wirst du die wichtigsten Elemente kennenlernen.
Der Aufbau eines HTML-Elements: Öffnendes Tag, Inhalt und schließendes Tag
Bevor wir uns weiter mit den Details der HTML-Syntax beschäftigen, wollen wir den allgemeinen Aufbau eines HTML-Elements genauer betrachten. Ein HTML-Element besteht grob gesagt aus drei Teilen: dem öffnenden Tag, dem Inhalt des Elements und dem schließenden Tag. Das öffnende Tag markiert immer den Start des entsprechenden Elements, der Inhalt ist der Text, auf den das HTML-Element angewendet werden soll, und das schließende Tag beendet das HTML-Element. Im Beispiel von eben ist das öffnende Tag <u>, die beiden Wörter sind der Inhalt und das schließende Tag </u>.
Aufbau und Unterschiede zwischen öffnenden und schließenden HTML-Tags
Der Aufbau eines öffnenden Tags besteht aus dem kleiner-als-Zeichen, dem Elementnamen und dem größer-als-Zeichen. Der Aufbau eines schließenden Tags ist ähnlich, jedoch mit einem Schrägstrich (/) vor dem Elementnamen. Unterschied zwischen dem öffnenden und dem schließenden Tag besteht also darin, dass beim schließenden Tag ein Schrägstrich vor dem Elementnamen steht.
Verschachtelung von HTML-Elementen für formatierten Text: Unterstreichung und Fettdruck
Ein HTML-Element kann auch mehrere verschachtelte HTML-Elemente enthalten. Im Beispiel haben wir bereits zwei Elemente kennengelernt: das <u>-Element und das <b>-Element. Diese beiden Elemente können wir auch ineinander verschachteln, um den Inhalt gleichzeitig unterstrichen und fett gedruckt anzuzeigen.
Kombination von HTML-Elementen zur Formatierung: Fettgedruckter Text mit <b> und <u>
Wenn wir beispielsweise möchten, dass das Wort „HTML“ fett gedruckt wird, können wir das <b>-Element um das bereits vorhandene <u>-Element herum platzieren. Das bedeutet, dass wir nach dem öffnenden Tag <u> das öffnende Tag <b> einfügen und am Ende den schließenden Tag </b>. Achten dabei darauf, dass das zuletzt geöffnete Tag als erstes geschlossen wird. In unserem Beispiel wird also das <b>-Element zuerst geschlossen, dann das <u>-Element.
Effektive Formatierung mit HTML-Elementen: Unterstrichen und fett gedruckter Text
Speichern wir die Datei erneut, aktualisieren den Browser und laden die Seite neu, sehen wir, dass der Text „Willkommen in“ sowohl unterstrichen als auch fett gedruckt ist.
Den Einstieg in die Webentwicklung meistern und Programmieren starten Premium nutzen
Du hast nun die Grundbausteine von HTML kennengelernt, nämlich die HTML-Elemente. Wenn du direkt in die Webentwicklung einsteigen und sie meistern möchtest, empfehle ich dir, „Programmieren starten Premium“ kostenlos zu testen. Den Link findest du in der Beitragbeschreibung. Dort findest du umfangreiche Kurse zu HTML, CSS, JavaScript und fortgeschrittenen Themen wie Angular oder dem Next.js Framework. Außerdem gibt es viele weitere Kurse zu verschiedenen Programmiersprachen und ein exklusives deutschsprachiges Community-Forum. „Programmieren starten Premium“ ist die All-in-One-Lösung, um den Einstieg in die Programmierung zu meistern.
