THEORIE: WEB-ENTWICKLUNG

Webentwicklung ist der Prozess der Erstellung von Webanwendungen oder Websites. Ein Ansatz zur Erstellung
einer Webanwendung ist die Aufteilung der Logik in einen serverseitigen und einen clientseitigen Teil. An
diesem Prozess sind in der Regel Entwickler mit unterschiedlichen Spezialisierungen beteiligt. Im Folgenden
erfahren Sie mehr über diesen Aspekt der Webentwicklung.

FRONTEND- UND BACKEND-ENTWICKLUNG

Es ist üblich, die Webentwicklung in zwei Teile zu unterteilen: Frontend und Backend. Die Frontend-
Entwicklung, auch clientseitige Programmierung genannt, umfasst die Entwicklung der Benutzeroberfläche (mit
anderen Worten, den visuellen Teil von Webanwendungen/-sites) sowie das Schreiben der Logik für die
Benutzerinteraktion. Einfach ausgedrückt, ist die Frontend-Entwicklung für alles verantwortlich, was die
Benutzer sehen, wenn sie eine Webseite öffnen, und für alles, womit sie interagieren.

Backend-Entwicklung, auch
serverseitige Programmierung genannt,
ist die Entwicklung der internen
Serverseite der Webanwendung, die
Implementierung ihrer Logik. Die
Backend-Entwicklung umfasst die
Dinge, die die Benutzer nicht sehen, und
was außerhalb ihres Browsers und
Computers geschieht.

ENTWICKLER

Normalerweise arbeiten verschiedene Spezialisten an der Frontend- und Backend-Entwicklung: Frontend- bzw.
Backend-Entwickler. Um den Unterschied zwischen ihnen besser zu verstehen, werfen Sie einen Blick auf die
Beispiele für die Aufgaben, die diese Entwickler haben.

 FRONTEND-ENTWICKLER erstellen Webseiten nach dem Layout, das sie vom Designer
erhalten haben. Sie sind für die korrekte Funktion und Darstellung von Webseiten in verschiedenen
Browsern und auf verschiedenen Geräten verantwortlich. Dank der Frontend-Entwickler erscheinen
interaktive Elemente auf den Webseiten.
 BACKEND-ENTWICKLER schreiben die grundlegende Geschäftslogik einer Anwendung,
verarbeiten Benutzerdaten, organisieren die Informationsspeicherung in Datenbanken, implementieren
Datensicherheit und -schutz, optimieren Anwendungen für maximale Geschwindigkeit und
Skalierbarkeit. Es gibt auch Personen, die an allen Phasen der Entwicklung von Webanwendungen
beteiligt sind: von der Erstellung des Client-Teils bis zur Implementierung des Server-Teils. Solche
Programmierer werden als Full-Stack-Entwickler bezeichnet.

TRENNUNG VON CLIENT- UND SERVERTEIL

Client-Side und Server-Side sind Begriffe aus der Webentwicklung, die uns sagen, wo der Anwendungscode
ausgeführt wird. Aber warum trennen wir den Client- und den Serverteil? Warum brauchen wir die Darstellung
der Benutzeroberfläche und die Dienstlogik getrennt voneinander? Hierfür gibt es mehrere Gründe:

 Wir können die Frontend- und Backend-Logik unabhängig voneinander ersetzen und so die Anzahl der
Fehler minimieren. Zum Beispiel können wir das Aussehen der Website ändern, ohne die
gemeinsamen Prozesse zu verändern;
 Wir brauchen einen Server, um Daten zu speichern und zu strukturieren;
 Die Daten auf der Client-Seite können veraltet sein, aber die Antworten des Servers sind in der Regel
aktuell;
 Es ist einfacher, Datenflüsse zu verwalten und Prozesse auf einigen wenigen Servern zu orchestrieren
als auf einer Million Clients;
 Einige Aufgaben müssen nicht von einem Server aktualisiert werden, sondern lassen sich schneller
lokal erledigen.

WIE KOMMUNIZIEREN FRONTEND UND BACKEND?

Damit ein Webdienst korrekt funktioniert, müssen Client- und Serverteil interagieren. Dies geschieht durch
HTTP-Anfragen. In der einfachsten Variante läuft die Interaktion zwischen Frontend und Backend wie folgt ab:

1. Der Client sendet eine Anfrage an den Server, um Daten über das HTTP-Protokoll abzurufen oder zu
ändern.
2. Das Backend verarbeitet diese Anfrage und gibt die Antwort über HTTP zurück.
3. Das Frontend empfängt die Antwort, verarbeitet sie und zeigt das Ergebnis dem Benutzer an.

Das beliebteste Format für den Datenaustausch zwischen Client und Server ist JSON, aber es gibt auch andere.
Auszeichnungssprachen helfen, die Antwort des Servers benutzerfreundlich darzustellen. Die am häufigsten
verwendeten Auszeichnungssprachen sind HTML und XML.

SCHLUSSFOLGERUNG

In diesem Thema haben Sie erfahren, wie der Webentwicklungsprozess grob organisiert ist, warum es eine
Unterteilung in Server- und Clientteile gibt und wie diese Teile miteinander interagieren. Normalerweise
arbeiten verschiedene Spezialisten an den Server- und Client-Teilen: Backend- und Frontend-Entwickler. Es
gibt aber auch Full-Stack-Entwickler - eine Art Universalentwickler, die sowohl Frontend- als auch Backend-
Entwicklung betreiben. Es liegt an Ihnen, welche Spezialisierung Sie bevorzugen.

THEORIE: HTML-GRUNDLAGEN

WAS IST HTML?

HTML ist eine Sprache, die zur Erstellung von Webseiten verwendet wird: Sie verwaltet deren Struktur und
Inhalt. HTML ist eine Abkürzung, sie steht für HyperText Markup Language. Hypertext bezieht sich auf
Textinformationen, die durch Links mit anderen Texten verbunden sind und so ein zusammenhängendes
Spinnennetz von Seiten bilden.

Hier ist eine einfache Visualisierung dessen, was Hypertext ist. Als erfahrener Internetnutzer sollte sie Ihnen
mehr als vertraut vorkommen:

Die Auszeichnungssprache hilft dem Browser, Textinformationen zu erkennen und sie dem Leser in einer
geeigneten Form zu präsentieren. Es gibt noch andere Hypertext-Auszeichnungssprachen, aber die große
Mehrheit der Seiten im Internet ist in HTML geschrieben.

KURZE GESCHICHTE

HTML wurde von Tim Berners-Lee, einem Mitglied des Schweizer Wissenschaftslabors CERN, entwickelt. Die
Veröffentlichung der ersten HTML-Version wird auf 1989 zurückgeführt. Im Jahr 1991 wurde die Sprache
ergänzt und begann, für die Übertragung von Hypertexten im Internet verwendet zu werden.

Ursprünglich wurde HTML für den Datenaustausch zwischen Wissenschaftlern innerhalb der gleichen
Einrichtung entwickelt.

Wenn Sie neugierig sind, können Sie immer noch die erste HTML-Seite besuchen, die am 6. August 1991
erstellt wurde. Viele Jahre lang war sie nicht mehr verfügbar, aber 2016 wurde die Seite wiederhergestellt.

HTML HEUTE

Heutzutage sehen in HTML geschriebene Websites ganz anders aus als früher. Wahrscheinlich stolpern Sie
jeden Tag über sie - sehen Sie sich zum Beispiel diese an:
 Ein Beispiel ist ein Screenshot von der Greenpeace-Website (https://www.greenpeace.org)

Sie können sich vergewissern, dass HTML tatsächlich für die Struktur der Seite verantwortlich ist, indem Sie
den Quellcode der Seite öffnen. Das ist sehr einfach: Klicken Sie mit der rechten Maustaste und suchen Sie die
Zeile Seitenquelltext anzeigen oder verwenden Sie einfach die Tastenkombination STRG+U, und Sie werden
etwas wie das hier sehen:

Milliarden von Menschen sehen jeden Tag auf ihren Computern und mobilen Geräten die Ergebnisse der
Interpretation von HTML-Dokumenten durch ihren Browser. Auch wenn die Hauptleser von HTML die
Browser sind, kann jeder Mensch die Struktur leicht verstehen, da diese Sprache einfach und logisch ist, und
dennoch ist es in der heutigen Welt oft sehr hilfreich, sie gut zu kennen.

VORTEILE VON HTML

HTML hat aufgrund seiner unbestreitbaren Vorteile große Popularität erlangt:

 Die Sprache ist leicht zu erlernen und zu verwenden;

 Sie wird von allen gängigen Browsern unterstützt;
  Sie kann in Programmiersprachen integriert werden.

Tim Berners-Lee, der Schöpfer von HTML, sagte einmal: "Das Web hat Daten zum Gold des 21. Jahrhunderts
gemacht". Wenn wir diese Metapher erweitern, können wir sagen, dass HTML ein primäres Werkzeug für die
Gewinnung und Speicherung des Edelmetalls ist.^

THEORIE: TAGS UND ATTRIBUTE

HTML-Dokumente bestehen aus Wörtern, die Anweisungen für die korrekte Darstellung einer Webseite
enthalten. Diese Anweisungen werden als Tags bezeichnet. Sie geben an, welcher Block angezeigt werden soll.

Wenn ein Browser ein HTML-Dokument empfängt, analysiert er die Tags und verwendet sie, um Elemente zu
bilden, die wir sehen und mit denen wir interagieren können. Mit anderen Worten: Tags sind die Bausteine, aus
denen eine Webseite besteht. Die aktuelle HTML-Spezifikation umfasst etwa 100 Tags. Werfen Sie einen Blick
auf die vollständige Liste aller vorhandenen Tags von W3 Schools. Es wird einige Zeit dauern, sie alle
auswendig zu lernen!

Die Tag-Syntax ist sehr einfach. Der Name eines Elements wird zwischen den Symbolen < und > geschrieben.
Die Groß- und
Sie können CodePen verwenden, um alle Beispiele selbst auszuprobieren.

Kleinschreibung wird nicht beachtet, aber es gilt als gute Praxis, sie klein zu schreiben.

Alle Tags in der HTML-Sprache werden in zwei Haupttypen unterteilt: gepaarte und ungepaarte. Betrachten wir
sie beide im Detail.

GEPAARTE TAGS

Gepaarte HTML-Tags bestehen aus zwei Anweisungen - einem öffnenden Tag (auch Start-Tag genannt), der
den Beginn eines Blocks markiert, und einem schließenden Tag, der genauso aussieht, aber mit einem
zusätzlichen Schrägstrich /.

Als Beispiel betrachten wir den <p>-Tag. Es steht für einen Textabsatz:

1 <p>Some kind of a text</p>

Hier ist <p> ein Start-Tag, Some kind of a text ist der Inhalt, und </p> ist ein Schluss-Tag.

Die Tags sind im Grunde genommen Behälter, in die wir etwas hineinlegen (einschließen) können. Gepaarte
HTML-Tags enthalten in der Regel entweder andere Tags oder Informationen, zum Beispiel Text.

UNGEPAARTE TAGS

Ungepaarte Tags haben keinen Inhalt. Sie bilden grafische HTML-Elemente oder Symbole auf einer Seite.
Ungepaarte HTML-Tags haben also nur ein öffnendes Tag.

Hier ist ein Beispiel für ein ungepaartes Tag:

1 <hr>
Ein Browser zeichnet eine horizontale Linie, sobald er dieses Tag erkennt. Ein weiteres Beispiel für ein
ungepaartes Tag ist <br>, das einen einzelnen Zeilenumbruch definiert.

VERSCHACHTELTE TAGS

Tags können auch verschachtelt werden:

1 <p>You have learned HTML <b>tags</b> <br>Congratulations!</p>

Hier wird <b> verwendet, um ein Wort fett darzustellen.

Diese HTML-Zeile wird wie folgt wiedergegeben:

Ein verschachtelter Tag muss vor dem anfänglich schließenden Tag geschlossen werden.

Der äußere Tag wird als übergeordnetes Element bezeichnet, der innere Tag als untergeordnetes Element.

TAG-ATTRIBUTE

Um die Möglichkeiten der einzelnen Tags zu erweitern und sie einfacher zu verwalten, können wir Attribute
verwenden. Attribute sind Klarstellungen für den Browser, wie ein Tag dargestellt werden soll.

Jedes HTML-Attribut besteht aus Namen und Werten. Das folgende Beispiel zeigt die Syntax von Attributen:

1 <a href="https://hyperskill.org">The link</a>

Hier bedeutet der <a>-Tag einen Link, href ist der Name eines Attributs und "https://hyperskill.org" ist der
Wert. Das Attribut wird einem Wert mit einem Gleichheitszeichen = zugewiesen. In HTML können Sie
Attributwerte ohne Anführungszeichen angeben, wenn sie aus einem Wort bestehen. Die Verwendung von
Anführungszeichen ist jedoch eine gute Praxis. Der Wert eines Attributs kann in doppelte oder einfache
Anführungszeichen ("" oder '') eingeschlossen werden.

Ein weiteres wichtiges Merkmal der HTML-Attributsyntax ist, dass ein Attribut in spitze Klammern
geschrieben werden muss:

1 <img src="image.png">

In diesem Beispiel wird einer Webseite ein Bild mit dem ungepaarten <img>-Tag hinzugefügt. Im src-Attribut
wird ein Verweis auf die Datei angegeben. Der Wert des Attributs ist der Verweis auf das gewünschte Bild.

Es gibt eine Vielzahl von Attributen. Es kann sich lohnen, sie auszuprobieren.

SCHLUSSFOLGERUNG
In diesem Thema haben wir mehrere nützliche Tags und einige Attribute behandelt. Tags liefern dem Browser
Informationen über die Struktur einer Webseite. Denken Sie daran, dass der Name eines Tags zwischen < und >
in Kleinbuchstaben eingeschlossen ist. Sie werden in öffnende und schließende, gepaarte und ungepaarte
unterteilt. Jede Unterart hat ihren eigenen Zweck. Tag-Attribute sind Daddys kleine Helfer. Sie verfeinern Tags
und liefern zusätzliche Informationen über Tags und helfen Ihrem Browser. HTML umfasst eine ganze Reihe
von Tags und Attributen; einige sind üblich, andere nicht. Aber denken Sie daran: Übung macht den Meister!

THEORIE: HTML-SEITENSTRUKTUR
Das Programmieren ist nicht so mechanisch und fremd, wie es scheinen mag: In vielerlei Hinsicht ist es der
menschlichen Welt ähnlich. Dies ist sehr leicht zu erkennen, wenn man sich die Struktur von HTML-Seiten
ansieht, die Elemente wie <head> und <body> enthält. Die Erstellung einer Website ist also ein
Schaffensprozess, und als Schöpfer müssen Sie mit allen notwendigen Bausteinen vertraut sein. Es gibt viel zu
lernen, aber alles beginnt mit den wesentlichen Grundlagen: Bitte begrüßen Sie auf der Bühne die HTML-Tags.

GRUNDLEGENDE TAGS IN HTML

Von den zahlreichen HTML-Tags, die die logische Struktur einer Seite bilden, werden einige als Basis
betrachtet. Die Struktur kann in drei Hauptabschnitte unterteilt werden: <html>, <head>, und <body> .

Werfen Sie einen Blick auf den Code einer einfachen HTML-Seite:

1 <!DOCTYPE html>
2 <html>
3 <head>
4      <meta charset="utf-8">
5     <title>Page title</title>
6   </head>
7   <body>
8     <h1>This is a heading</h1>
9     <p>This is a paragraph</p>
10   </body>
11 </html>

Wenn Sie diesen Code im HTML-Format (.html) speichern und in Ihrem Browser öffnen, sieht die Seite wie
folgt aus:
Das sieht recht einfach aus, aber mit HTML können Sie viel mehr tun: die Struktur des Textes anpassen, seine
visuelle Darstellung verwalten und Absätze, Formulare, Bilder, Titel und Tabellen anzeigen. Mit der Hypertext-
Auszeichnungssprache können Sie Texte formatieren, was sie für Internetnutzer freundlicher macht. Es ist viel
angenehmer, einen Text zu lesen, der klar und logisch aufgebaut ist, als sich durch unstrukturierten Text zu
wühlen.

Kehren wir zum Code des vorherigen Beispiels zurück und betrachten wir die aufgelisteten Tags im Detail.

 Element <!DOCTYPE> gibt den Typ des aktuellen Dokuments an: DTD (Document Type
Definition). Es ist notwendig, dass der Browser versteht, nach welchem HTML-Standard die Webseite
angezeigt werden soll. Wie Sie sehen, ist dies einer der Tags, die nicht gepaart sind;
 der <meta>-Tag mit dem Attribut charset gibt die Dokumentenkodierung an. Wenn es nicht angegeben
ist, können einige Browser obskure Zeichen anstelle des Textes anzeigen;
 Der <html>-Tag zeigt an, dass es sich um ein HTML-Dokument handelt;
 Der <head>-Tag dient dazu, Elemente zu speichern, die dem Browser und den Suchmaschinen bei der
Arbeit mit Daten helfen;
 Der <title> enthält die Überschrift des HTML-Dokuments. Auch wenn dieser Tag nicht obligatorisch
ist, ist er dennoch auf fast allen Webseiten im Internet vorhanden;
 Der <body>-Tag definiert den Inhaltsbereich der Seite. Er umschließt den im Hauptfenster des
Browsers angezeigten Inhalt;
 Der <h1>-Tag enthält den Seitentitel innerhalb des Textkörpers, und der <p>-Tag ist für die Absätze
zuständig. Diese Tags sind nicht die Hauptabschnitte und werden hier nur als Beispiel angegeben, aber
Sie werden sie wahrscheinlich in Zukunft nützlich finden, wenn Sie von der Basis zur Kunst
übergehen.

GRUNDLEGENDE HTML-SEITENSTRUKTUR

Hier sehen Sie eine Visualisierung der grundlegenden HTML-Seitenstruktur:

Wie Sie sehen, hat diese Struktur Ähnlichkeit mit unserer Anatomie. Ich hoffe, diese Analogie hilft Ihnen,
HTML besser zu verstehen.

SCHLUSSFOLGERUNG

Sicherlich sind sowohl Menschen als auch Webseiten viel komplexer und weisen eine große Vielfalt auf.
Moderne Seiten können sehr groß sein und viele verschiedene Tags innerhalb von <body> enthalten, aber ihre
Grundstruktur bleibt immer die gleiche. Das ist auch sehr menschlich, wenn man so will.

THEORIE: ELEMENTE AUF BLOCKEBENE

In diesem Thema werfen wir einen Blick auf die Formatierung von Webseiten. Sie werden erfahren,
wofür HTML-Elemente auf Blockebene benötigt werden, welche Eigenschaften sie besitzen und wie
man sie am effektivsten für die Erstellung der Struktur des HTML-Codes einsetzt.

WAS SIND HTML-ELEMENTE?

Wie Sie wissen, können HTML-Dateien in Browsern geöffnet werden. Nach dem Empfang eines
HTML-Dokuments liest der Browser die darin enthaltenen Tags und erstellt daraus eine HTML-Seite,
die der Benutzer auf seinem Bildschirm sieht.
Alles, was Sie auf der Seite in Ihrem Browser-Viewer sehen, sind HTML-Elemente. Und genau hier
liegt der Unterschied zwischen HTML-Tags und HTML-Elementen: Elemente sind das, was der
Benutzer auf der Browserseite sieht, während Tags das sind, was der Entwickler beim Erstellen eines
HTML-Dokuments schreibt
Es ist zu bedenken, dass nicht alle HTML-Tags Elemente sind. So sind beispielsweise die DOCTYPE-
Anweisung, die für die korrekte Interpretation des Codes durch einen Browser erforderlich ist, und die Tags in
der Kopfzeile eines HTML-Dokuments keine Elemente.
Es gibt zwei Haupttypen von Seitenelementen: Block-Level-Elemente und Inline-Elemente. Beide haben ihre
eigenen Besonderheiten.

ELEMENTE AUF BLOCKEBENE

Elemente auf Blockebene werden meist verwendet, um die Struktur von Webseiten zu erstellen oder ein
HTML-Dokument logisch in Teile zu unterteilen. Hier sind einige Beispiele für Blockelemente:

 <div> ist ein universeller Inhaltstrenner. Er wird verwendet, um ähnliche HTML-Elemente zu

gruppieren:

1 <div>
2   <h1>Element h1 is inside the div</h1>
3   <p>Element p is also inside the div</p>
4 </div>

 <h1>-<h6> sind Überschriften-Tags:

1 <h1>Heading level 1</h1>
2 <h2>Heading level 2</h2>
3 <h3>Heading level 3</h3>
4 <h4>Heading level 4</h4>
5 <h5>Heading level 5</h5>
6 <h6>Heading level 6</h6>

Das Ergebnis wird im Browser wie folgt angezeigt:

Wie Sie sehen können, erleichtern diese Tags die Identifizierung der Überschriften, die die Wichtigkeit des
Textes vermitteln.

Es wird empfohlen, nur einen <h1>-Tag auf einer Webseite zu verwenden - dies sollte der Titel sein, der das
Hauptthema der Seite darstellt.
  <p> definiert einen Textabsatz:

1 <p>It's a paragraph of the text</p>
2 <p>And this is another paragraph</p>

So sieht es im Browser aus:

Der von diesem Tag eingeschlossene Text wird im Gegensatz zu <h1>-<h6> nicht durch Fettdruck
hervorgehoben.

 <pre> definiert einen Block mit formatiertem Text:

1 <pre>
2 ..........／＞    フ
3 .........|   _   _  |
4 .......／` ミ＿x ノ
5 ....../      |
6 ..../  ヽ    ﾉ
7 ....│    | | |
8 ／￣|    | | |
9 | (￣ヽ＿_ヽ_)__)
10 ＼二つ
11 </pre>

Standardmäßig wird jede Anzahl von Leerzeichen, die im Code in einer Reihe vorkommen, als ein Leerzeichen
auf einer Webseite angezeigt. Der <pre>-Tag zeigt den Text so an, wie Sie ihn haben wollen, mit allen
Leerzeichen zwischen den Zeichen:

 <hr> erzeugt eine horizontale Linie:

1 <hr>

Schauen wir uns nun an, wie sie im Browser angezeigt wird:
 Dies ist bei weitem keine vollständige Liste der Elemente auf Blockebene - es gibt bestimmt noch viele
weitere, die man kennen sollte.

MERKMALE VON BLOCK-LEVEL-ELEMENTEN

Die folgenden Merkmale sind charakteristisch für Block-Level-Elemente:

1. Sie können sowohl Inline-Elemente als auch andere Elemente auf Blockebene enthalten.
2. Die Browser zeigen sie mit einem Zeilenumbruch vor und nach dem Element an. Werfen Sie einen
Blick auf das Verhalten von Block-Level-Elementen und vergleichen Sie es mit dem von Inline-
Elementen, um diese Funktion besser zu verstehen:

3. Elemente auf Blockebene nehmen die gesamte verfügbare Breite ein. Das heißt, wenn sich das
Element innerhalb von <body> befindet, nimmt es die gesamte Breite der Webseite ein. Befindet sich
das Block-Level-Element innerhalb eines anderen Block-Level-Elements, so nimmt es die gesamte
Breite des übergeordneten Elements ein.

Um dies zu überprüfen, drücken Sie einfach die Tasten Strg+Umschalt+I oder Cmd+Opt+I auf einer
Webseite und zeigen mit dem Mauszeiger auf ein Objekt. Im Browser werden Rechtecke mit
unterschiedlicher Höhe und Breite farblich hervorgehoben. Dies ist der Bereich, den die von Ihnen
ausgewählten Elemente einnehmen:

4. Die Höhe eines Elements auf Blockebene wird vom Browser automatisch auf der Grundlage des
Blockinhalts berechnet.

Elemente auf Blockebene verhalten sich so, weil sie wie Container wirken, die ihren gesamten Inhalt in sich
aufnehmen.

SCHLUSSFOLGERUNG
Wir haben die grundlegenden Merkmale von HTML-Elementen auf Blockebene erörtert. Es ist bemerkenswert,
dass die Unterscheidung zwischen Block-Level- und Inline-Elementen bis zur HTML-Version 4.0 verwendet
wurde. In HTML 5 wurden diese Konzepte durch eine komplexere Reihe von Inhaltskategorien ersetzt: Jetzt
muss jedes HTML-Element den Regeln folgen, die bestimmen, welche Informationen darin gespeichert werden
können. Wir werden uns das später noch genauer ansehen. Lassen Sie uns nun das bisher Gelernte mit ein
wenig Übung wiederholen, denn dieses Wissen wird uns sicher irgendwann einmal nützlich sein.

THEORIE: INLINE-ELEMENTE
Für viele Anfänger kann die HTML-Struktur eine Herausforderung darstellen. Webseiten-Elemente und ihre
Eigenschaften können sehr verwirrend sein. Um die Dinge in den Griff zu bekommen, genügt es, den genauen
Typ eines bestimmten Webseitenelements zu kennen.

In HTML 4.01 oder früher gibt es zwei Haupttypen von Seitenelementen: Block-Level und Inline. In HTML5
sind die Elemente jedoch nicht nur in Block-Level- und Inline-Typen unterteilt, sondern sie sind auch nach ihrer
Bedeutung und ihrem Zweck gruppiert und stellen Inhaltskategorien dar. Auf dieses Konzept werden wir in den
nächsten Kapiteln noch ausführlich eingehen. Versuchen Sie zunächst, die Vor- und Nachteile von Inline-
Elementen zu verstehen.

Inline-Elemente sind Elemente eines Dokuments, die einen integralen Bestandteil einer Zeile bilden. Sie heben
einen Teil des Textes hervor und geben ihm eine bestimmte Funktion oder Bedeutung. Sie enthalten in der
Regel ein oder mehrere Wörter.

Schauen wir uns nun sechs Beispiele für Inline-Elemente an.

DER <A>-TAG

Der <a>-Tag ist wahrscheinlich eines der wichtigsten HTML-Elemente. Es ist dazu gedacht, Links zu erstellen.
Dieses Tag wird oft mit dem href-Attribut verwendet, das den Pfad zu einer Datei/Webseite angibt. Betrachten
Sie einen Codeschnipsel, der uns zur JetBrains-Website führt:

1. <a href="https://jetbrains.com">Click here to access the 
2. JetBrains website!</a>

Dies ist die Anzeige im Browser:

Der in das <a>-Tag eingeschlossene Text ist hervorgehoben und unterstrichen. Wenn Sie darauf klicken, führt
der Link Sie zu der im href-Attribut angegebenen Adresse.

DER <SPAN>-TAG

Sie können einen Text oder einen Teil davon in das <span>-Tag einschließen:

1. <p>For the first time <span>on our site</span>?</p>
2. <span>Sign up now!</span> 

Diese Markierung hat keinen Einfluss auf die Textdarstellung:

Sie werden sich vielleicht fragen, wozu wir dieses Tag brauchen? Der <span>-Tag wird verwendet, wenn Sie
das Aussehen eines Textes mit CSS ändern müssen. CSS ist die Sprache, mit der das Erscheinungsbild einer
Webseite beschrieben wird. Im Kurs für Webentwickler wird diese Sprache behandelt; in der Zwischenzeit
lassen Sie uns mit den Inline-Elementen fortfahren.

DER <BUTTON>-TAG

Um eine anklickbare Schaltfläche zu erstellen, verwenden Sie den <button>-Tag. Sie können etwas in dieses
gepaarte Tag einschließen, und der Text wird innerhalb der Schaltfläche angezeigt:

1. <button>Click</button>

DER <B>-TAG

Dieses gepaarte Tag macht jeden Text fett. Die Grenzen des Textes werden durch den <p>-Tag angegeben. Im
folgenden Beispiel haben wir den Umriss des Vor- und Nachnamens der Person geändert:

1. 1 <p>I'm <b>John Doe</b>, and what's your name?</p>

Schauen Sie sich nun das Ergebnis im Browser an:

Wie Sie sehen, ist diese Markierung sehr praktisch und einfach zu verwenden, wenn Sie einen wichtigen Teil
des Textes hervorheben möchten.

DER <SUB>-TAG

Verwenden Sie dieses Tag, um einen tiefgestellten Text zu erstellen. Der Text in diesem gepaarten Tag wird
verkleinert und verkleinert. Schauen wir uns an, wie das funktioniert:
 1. <p>The formula of water is H₂O.</p>

Das Ergebnis ist das folgende:

Diese Markierung ist sehr nützlich, wenn Sie eine chemische Formel schreiben müssen.

DER <SUP>-TAG

Dieses Tag erzeugt einen hochgestellten Text. Es ähnelt dem vorhergehenden Tag, das wir behandelt haben, mit
dem Unterschied, dass der Text, der in diesem Tag eingeschlossen ist, hochskaliert wird:

1. <p>x² = 4</p> 

Das ist das Ergebnis, das wir in einem Browser sehen:

Mit <sup> können Sie mathematische Gleichungen und Formeln auf Ihrer Webseite darstellen.

Dies ist bei weitem keine vollständige Liste der Inline-Elemente, denn es gibt bestimmt noch mehr zu wissen.

MERKMALE DER INLINE-ELEMENTE

Die folgenden Merkmale sind für alle Inline-Elemente charakteristisch:

 Sie können nur Daten und andere Inline-Elemente enthalten. Die einzige Ausnahme ist der <a>-Tag,
der auch Elemente auf Blockebene enthalten kann.
 Ein Browser macht keinen Zeilenumbruch vor und nach einem Tag. Schauen Sie sich das Verhalten
von Inline-Elementen an und vergleichen Sie es mit dem von Elementen auf Blockebene:

 Inline-Elemente funktionieren nur, wenn sie in Tags eingeschlossen sind.

SCHLUSSFOLGERUNG

In diesem Thema haben wir einen kleinen Teil der Inline-Elemente behandelt. Sie sind ein großer Gewinn; man
kann mit ihnen eine Menge anstellen, von der Erstellung eines Links bis zur Darstellung einer komplexen
mathematischen Formel. Es wird einige Zeit dauern, sie alle auswendig zu lernen, also machen Sie weiter und
konzentrieren Sie sich auf die praktische Seite. Wo wir gerade dabei sind, lasst uns unsere Code-
Herausforderungen abschließen!

THEORIE: KOMMENTARE
In HTML-Dateien können Sie einen speziellen Text schreiben, den der Browser beim Öffnen der Datei
ignoriert. Ein solcher Text wird als Kommentar bezeichnet. Warum sollte man ihn schreiben, wenn er am Ende
einfach und absichtlich ignoriert wird? Eigentlich ist es sehr sinnvoll, Kommentare während des
Entwicklungsprozesses zu verwenden, da sie die Lesbarkeit Ihres Codes erheblich verbessern können.

Ein Kommentar im HTML-Code kann allgemein wie folgt definiert werden:

1. <!-- Any text --> 

Jeder Text, der zwischen <!-- und --> steht, wird als Kommentar betrachtet. Der Text des Kommentars kann
entweder in einer einzigen Zeile oder in mehreren Zeilen stehen.

Sehen wir uns nun einige konkrete Beispiele dafür an, wie Kommentare verwendet werden und welchem Zweck
sie dienen.

EINZEILIGE KOMMENTARE

Kommentare, die nur eine Zeile einnehmen, werden als einzeilige Kommentare bezeichnet. Schauen Sie sich
die syntaktischen Merkmale von einzeiligen Kommentaren genau an:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Single-line comments</title>
6. </head>
7. <body>
8. <!-- It's a single-line comment -->
9. <p>It's a paragraph of the text</p>
10. </body>
11. </html>

So würde es in Ihrem Browser aussehen:

Wie Sie sehen können, wird der Kommentartext nicht im Browserfenster angezeigt. Er ist für Besucher von
Webseiten unsichtbar, kann aber für Entwickler sehr nützlich sein. Mit diesen Notizen können Sie sich später
leicht daran erinnern, warum ein bestimmtes Codefragment benötigt wird. Kommentare können auch als
Hinweise für andere Entwickler dienen, die später mit Ihrem Code arbeiten werden.

MEHRZEILIGE KOMMENTARE

Kommentare, die sich über mehrere Zeilen erstrecken, werden als mehrzeilige Kommentare bezeichnet. Werfen
Sie einen Blick auf ihre syntaktischen Merkmale:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Multi-line comments</title>
6. </head>
7. <body>
8. <!--
9. It's
10. a multi-line comment
11. -->
12. <p>It's a paragraph of the text</p>
13. </body>
14. </html>
Im Browser sieht es dann so aus:

Solche Kommentare nehmen, wie ihr Name schon sagt, mehrere Zeilen ein. Dies kann nützlich sein, um einige
besonders komplexe Abschnitte zu erklären oder große Teile des Codes zu deaktivieren.

DEAKTIVIEREN VON CODEFRAGMENTEN

Mit Kommentaren können Sie den Browser veranlassen, bestimmte Teile des Codes auszublenden. Schauen Sie
sich dieses Beispiel genau an:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>Using comments to disable code fragments</title>
6. </head>
7. <body>
8. <p>The first paragraph of the text</p>
9. <!--
10. <p>The second paragraph of the text</p>
11. <p>The third paragraph of the text</p>
12. -->
13. <p>The fourth paragraph of the text</p>
14. </body>
15. </html>

So würde es in Ihrem Browser aussehen:

Einige Tags werden im Browserfenster nicht angezeigt, können aber durch Löschen der Zeichen <!-- und -->
"sichtbar" gemacht werden. Diesen Vorgang nennt man Entkommentieren. Die vorübergehende Deaktivierung
des Codes ist eine gute Strategie, wenn Sie einen Fehler finden müssen. Es ist ziemlich unpraktisch, den Code
einfach zu entfernen, weil man ihn vielleicht wiederherstellen muss, daher ist das
Kommentieren/Entkommentieren eine gute Lösung.

Code-Editoren haben oft spezielle Tastenkombinationen (Shortcuts), mit denen man schnell kommentieren und
unkommentieren kann. Sie finden diese in der Dokumentation des von Ihnen verwendeten Code-Editors, aber in
der Regel ist es STRG + /.