HTML ist eine Auszeichnungssprache, die verwendet wird, um Websites zu strukturieren und zu formatieren. Es ist eine der Grundlagen des World Wide Web und ermöglicht es Entwicklern, Inhalte für die Anzeige im Browser zu erstellen.
Es ist wichtig zu lernen, wie man HTML verwendet, weil es die Grundlage für jede Website ist und es ermöglicht, Inhalte für das Web zu erstellen.
Die wichtigsten HTML-Tags sind Überschrift-Tags (h1, h2, h3 usw.), Absatz-Tag (p), Liste-Tags (ul, ol, li), Bild-Tag (img) und Link-Tag (a).
Um Bilder in HTML einzufügen, verwendet man den img-Tag und gibt die URL des Bildes als Quelle an. Man kann auch die Größe des Bildes anpassen und alternativen Text für Bilder hinzufügen.
Verlinkungen ermöglichen es, zwischen Seiten zu navigieren und zu anderen Websites zu verlinken. Tabellen werden verwendet, um Daten in einer übersichtlichen Weise darzustellen.
Geschichte von HTML in aller Kürze
HTML (Hypertext Markup Language) ist eine standardisierte Sprache, die verwendet wird, um Webseiten und Dokumente für das World Wide Web (WWW) zu erstellen. Es wurde ursprünglich 1989 von Tim Berners-Lee, dem Erfinder des World Wide Web, entwickelt.
HTML besteht aus einer Reihe von Tags, die verwendet werden, um die Struktur und den Inhalt einer Webseite zu beschreiben. Diese Tags ermöglichen es, Text, Bilder, Links und andere Medien auf einer Seite darzustellen. HTML ermöglicht es auch, Webseiten mit anderen Dokumenten und Ressourcen im World Wide Web zu verlinken.
In den frühen Tagen des World Wide Web wurde HTML hauptsächlich verwendet, um einfache Textdokumente mit Links zu anderen Dokumenten zu erstellen. Im Laufe der Jahre hat sich HTML jedoch weiterentwickelt und es wurden immer mehr Tags und Funktionen hinzugefügt, um es Entwicklern zu ermöglichen, komplexere und interaktivere Websites zu erstellen.
HTML wurde durch die World Wide Web Consortium (W3C) standardisiert und es wurden mehrere Versionen veröffentlicht, darunter HTML 4.01 und die aktuelle Version HTML5. HTML5 hat eine Reihe von neuen Tags und Funktionen eingeführt, die es Entwicklern ermöglichen, Websites für mobile Geräte und moderne Webbrowser zu optimieren.
Heutzutage ist HTML eine der wichtigsten Technologien im Web-Entwicklung und es ist unerlässlich für jeden, der eine Karriere im Web-Design oder der Web-Entwicklung anstrebt, um HTML und seine fortgeschrittenen Technologien zu beherrschen.
Welche Versionen von HTML gibt es und wann wurden sie veröffentlicht?
Es gibt mehrere Versionen von HTML, die im Laufe der Jahre veröffentlicht wurden. Hier ist eine Liste der wichtigsten Versionen und ihrer Veröffentlichungsdaten:
- HTML 1.0 (1991): Die erste Version von HTML, die von Tim Berners-Lee entwickelt wurde. Sie enthielt nur wenige Tags und war hauptsächlich für Textdokumente mit Links zu anderen Dokumenten gedacht.
- HTML 2.0 (1995): Eine Weiterentwicklung von HTML 1.0, die mehr Tags und Funktionen hinzufügte, um die Formatierung von Text und die Erstellung von Tabellen zu ermöglichen.
- HTML 3.2 (1997): Eine weitere Weiterentwicklung von HTML, die mehr Tags und Funktionen hinzufügte, um die Erstellung von komplexeren Websites zu ermöglichen.
- HTML 4.01 (1999): Eine weitere Weiterentwicklung von HTML, die die Unterstützung für Cascading Style Sheets (CSS) und die Erstellung von Formularen verbesserte.
- HTML5 (2014): Die aktuelle Version von HTML, die eine Reihe von neuen Tags und Funktionen hinzufügt, die es Entwicklern ermöglichen, Websites für mobile Geräte und moderne Webbrowser zu optimieren.
Es gibt auch weitere Unterversionen von HTML5 wie HTML5.1, HTML5.2 and HTML5.3 Es ist wichtig zu beachten, dass neuere Versionen von HTML nicht immer vollständig rückwärtskompatibel mit älteren Versionen sind und dass ältere Browser möglicherweise nicht alle Funktionen unterstützen, die in neueren Versionen von HTML enthalten sind.
Wofür wird HTML verwendet?
HTML (Hypertext Markup Language) wird verwendet, um Inhalte für die Anzeige im Browser zu strukturieren und zu formatieren. Es ist die Grundlage jeder Website und ermöglicht es Entwicklern, Text, Bilder, Links und andere Elemente hinzuzufügen und zu organisieren. Mit HTML können Entwickler die Struktur einer Seite definieren, indem sie Überschriften, Absätze, Listen und andere Elemente verwenden. Es ermöglicht auch, Links zu anderen Seiten oder externen Ressourcen hinzuzufügen und Tabellen zur Darstellung von Daten zu erstellen.
HTML ist wichtig, weil es die Grundlage für jede Website ist und es ermöglicht, Inhalte für das World Wide Web zu erstellen. Es ermöglicht es Entwicklern, die Struktur und das Layout einer Seite zu definieren und Inhalte wie Text, Bilder, Links und andere Elemente hinzuzufügen. Ohne HTML wäre das Internet nicht in der Lage, die Vielfalt und die Interaktivität von Websites darzustellen, die wir heute kennen.
Warum ist HTML wichtig?
HTML ist auch wichtig, weil es mit anderen Technologien wie CSS und JavaScript kombiniert werden kann, um das Aussehen und die Funktionalität einer Website zu verbessern. CSS ermöglicht es, das Aussehen einer Seite zu gestalten, während JavaScript die Interaktivität erhöht, indem es dynamische Funktionen wie Formvalidierung und Seitenaktualisierungen ohne Neuladen der Seite ermöglicht.
HTML ist auch wichtig, weil es eine standardisierte Sprache ist, die von allen modernen Browsern unterstützt wird. Das bedeutet, dass eine Website, die mit HTML erstellt wurde, von den meisten Internetnutzern problemlos angezeigt werden kann, unabhängig vom verwendeten Gerät oder Browser.
HTML-Editoren
Es gibt viele verschiedene HTML-Editoren, die verwendet werden können, um HTML-Dokumente zu erstellen und zu bearbeiten. Hier sind einige der am häufigsten verwendeten HTML-Editoren:
- WebStorm / PHPStorm
- Microsoft Visual Studio Code: Ein leistungsstarker Code-Editor, der für viele Programmiersprachen geeignet ist, darunter auch HTML. Er bietet Unterstützung für verschiedene Plug-ins und Erweiterungen, die das Erstellen und Bearbeiten von HTML-Dokumenten erleichtern.
- Sublime Text: Ein leistungsstarker Code-Editor, der für viele Programmiersprachen geeignet ist, darunter auch HTML. Es bietet Unterstützung für verschiedene Plug-ins und Erweiterungen, die das Erstellen und Bearbeiten von HTML-Dokumenten erleichtern.
Um eine HTML-Datei zu speichern, musst du einfach die Datei mit der Erweiterung „.html“ oder „.htm“ speichern. Diese HTML-Datei kann dann auf einem Webserver gehostet werden damit sie im Internet aufgerufen werden kann. Wenn du die HTML-Datei nur lokal auf dem eigenen Computer speicherst und öffnest, wird sie nur lokal auf deinem Computer angezeigt.
HTML Dokument Aufbau
Ein HTML-Dokument besteht im Allgemeinen aus drei grundlegenden Teilen: dem Kopf (head), dem Körper (body) und dem Schließenden Tag (closing tag).
Der Kopf (head) enthält Metadaten über das Dokument, wie z.B. den Titel der Seite, die verwendet wird, wenn die Seite in einem Browser-Tab oder Lesezeichen angezeigt wird, und Links zu CSS-Stylesheets und JavaScript-Dateien.
<head>
<title>Meine Webseite</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>Der Körper (body) enthält den eigentlichen Inhalt der Webseite, der angezeigt wird, wenn die Seite im Browser geöffnet wird. Hier werden die verschiedenen Elemente wie Texte, Bilder, Links und Formulare platziert.
<!DOCTYPE html>
<html>
<body>
<h1>Willkommen auf meiner Webseite</h1>
<p>Dies ist ein Beispieltext</p><img src="image.jpg" alt="Beispielbild">
<a href="https://example.com">Link zu einer anderen Seite</a>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Senden">
</form>
</body>
</html>Der Schließende Tag (closing tag) schließt das HTML-Dokument ab. Es ist wichtig, dass jeder Öffnende Tag in HTML einen passenden Schließenden Tag hat.
Jedes HTML-Seite mit <!DOCTYPE> und <html> beginnt und mit </html> endet. Bleibe konsistent und logisch im Code.
Doctype?
Der „doctype“ (Document Type Declaration) ist der erste Teil eines HTML-Dokuments, der anzeigt, welche Version von HTML oder XHTML verwendet wird. Es gibt verschiedene Arten von doctype-Deklarationen, je nachdem, welche Version von HTML oder XHTML verwendet wird.
Der Doctype-Deklaration gibt dem Browser Informationen darüber, wie das Dokument interpretiert werden soll. Ohne eine korrekte Doctype-Deklaration kann der Browser das Dokument möglicherweise nicht richtig darstellen.
In HTML5 ist die Doctype-Deklaration sehr einfach und es reicht <!DOCTYPE html> am Anfang des Dokumentes zu schreiben. Bei früheren HTML-Versionen war es komplexer und es gab unterschiedliche Deklarationen je nach HTML-Version.
Was sind die wichtigsten HTML-Tags?
- Überschrift-Tags (h1, h2, h3, etc.): Diese Tags werden verwendet, um Überschriften und Unterüberschriften zu erstellen, die die Hierarchie und Struktur des Inhalts einer Seite kennzeichnen.
- Absatz-Tag (p): Dieser Tag wird verwendet, um Absätze von Text auf einer Seite zu erstellen.
- Liste-Tags (ul, ol, li): Diese Tags werden verwendet, um ungeordnete und geordnete Listen zu erstellen.
- Bild-Tag (img): Dieser Tag wird verwendet, um Bilder auf einer Seite einzufügen.
- Link-Tag (a): Dieser Tag wird verwendet, um Links zu anderen Seiten oder externen Ressourcen hinzuzufügen.
- Div-Tag (div): Dieser Tag wird verwendet, um einen Container für andere HTML-Elemente zu erstellen, um sie zu gruppieren und CSS anwenden zu können.
- Table-Tag (table): Dieser Tag wird verwendet, um Tabellen zur Darstellung von Daten zu erstellen
- Form-Tag (form): Dieser Tag wird verwendet, um Formulare zur Eingabe von Daten von Benutzern zu erstellen
- input-Tag: Dieser Tag wird verwendet, um verschiedene Arten von Eingabefeldern, wie Textfelder, Auswahllisten und Schaltflächen, in Formularen zu erstellen.
- button-Tag (button): Dieser Tag wird verwendet um Schaltflächen zu erstellen die Interaktionen mit dem Benutzer ermöglichen, wie z.B. das Absenden von Formularen.
Es gibt viele weitere HTML-Tags, die für bestimmte Aufgaben verwendet werden können, aber dies sind die wichtigsten und am häufigsten verwendeten.
- Überschrift-Tags (h1, h2, h3 usw.) Beispiel:
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>- Absatz-Tag (p) Beispiel:
<p>Dies ist ein Absatz mit einem Beispieltext.</p>- Liste-Tags (ul, ol, li) Beispiel:
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ul>
<ol>
<li>Erstes Element</li>
<li>Zweites Element</li>
<li>Drittes Element</li>
</ol>- Bild-Tag (img) Beispiel:
<img src="https://www.example.com/images/example.jpg" alt="Beispielbild">- Link-Tag (a) Beispiel:
<a href="https://www.example.com">Beispiel-Link</a>In diesen Beispielen werden die entsprechenden Tags verwendet, um die jeweiligen Elemente auf der Seite zu erstellen. Beachten Sie, dass die src– und href-Attribute im img- und a-Tag verwendet werden, um die Quelle des Bildes bzw. die Zielseite des Links anzugeben.
Wie genau bindet man Bilder in HTML ein?
Um ein Bild in HTML einzufügen, verwendet man den img-Tag und gibt die URL des Bildes als Quelle an. Beispiel:
<img src="https://www.example.com/images/example.jpg" alt="Beispielbild">Man kann auch die Größe des Bildes anpassen, indem man die width und height Attribute verwendet, z.B:
<img src="https://www.example.com/images/example.jpg" alt="Beispielbild" width="500" height="300">Was ist lazy load?
Lazy Load ist eine Technik, bei der Bilder erst geladen werden, wenn sie sich im sichtbaren Bereich des Benutzers befinden. Dies verringert die Anzahl der geladenen Bilder und verbessert somit die Ladezeit der Seite. Es gibt viele Lazy-Loading-Plugins, die verwendet werden können, um diese Technik in eine bestehende Website zu implementieren.
HTML5 hat die loading Attribute eingeführt, die es ermöglicht, die Lazy-Loading-Technik direkt in den HTML-Code zu implementieren, ohne dass ein Plugin erforderlich ist. Beispiel:
<img src="https://www.example.com/images/example.jpg" alt="Beispielbild" loading="lazy">Das loading Attribute kann drei Werte haben: „eager“, „lazy“ und „auto“. Wenn „eager“ gesetzt wird, wird das Bild sofort geladen, wenn die Seite geladen wird. Bei „lazy“ wird das Bild erst geladen, wenn es sichtbar wird (im viewport des Nutzers ist). „auto“ = entscheidet der Browser selbst, ob er das Bild sofort oder lazy lädt.
Hyperlinks, Anker, mailto
Links, auch als Hyperlinks bezeichnet, ermöglichen es, zwischen Seiten zu navigieren und zu anderen Websites oder Ressourcen zu verlinken. In HTML werden Links mit dem a-Tag erstellt.
HTML <a> Tag
Der HTML <a> Tag, auch bekannt als „Anker-Tag“, wird verwendet, um Links auf andere Webseiten, Dokumente oder Bereiche innerhalb der gleichen Webseite hinzuzufügen. Es ermöglicht es Benutzern, auf andere Webseiten oder Inhalte zugreifen zu können, indem sie auf einen entsprechenden Link klicken.
Ein einfaches Beispiel für den Gebrauch des <a> Tags ist:
Das href-Attribut wird verwendet, um die Zieladresse des Links anzugeben:
<a href="https://www.example.com">Beispiel-Link</a>als relative URL der Seite verwendet:
<a href="about.html">Über uns</a>als Anker: indem man das id-Attribut nutzt:
<a href="#abschnitt1">Gehe zu Abschnitt 1</a>
...
<h2 id="abschnitt1">Abschnitt 1</h2>Links zu E-Mail-Adressen , indem man „mailto:“ vor die E-Mail-Adresse anfügt:
<a href="mailto:info@example.com">Kontaktiere uns</a>Es gibt auch andere Attribute, die man verwenden kann, wie zum Beispiel „target“ um anzugeben, ob der Link in einem neuen Fenster oder Tab geöffnet werden soll, oder „download“ um anzugeben, dass der Link eine Datei zum Download bereitstellt.
<a href="file.pdf" download="filename">Download PDF</a>Wie funktionieren Tabellen in HTML?
Tabellen in HTML werden mit den table, tr, th und td-Tags erstellt.
- Das
table-Tag definiert die Tabelle insgesamt - Das
tr-Tag definiert eine Zeile in der Tabelle - Das
th-Tag definiert eine Kopfzeile in der Tabelle und dastd-Tag definiert eine Zelle in der Tabelle
Beispiel:
<table>
<tr>
<th>Kopfzeile 1</th>
<th>Kopfzeile 2</th>
</tr>
<tr>
<td>Zelle 1,1</td>
<td>Zelle 1,2</td>
</tr>
<tr>
<td>Zelle 2,1</td>
<td>Zelle 2,2</td>
</tr>
</table>Um Tabellen responsive zu machen, kann man CSS verwenden, um die Darstellung der Tabelle auf kleineren Bildschirmen anzupassen, z.B. indem man Spalten ausblendet oder die Schriftgröße verkleinert. Eine Möglichkeit ist das Verwenden von CSS-Media-Queries um die Darstellung der Tabelle an die Bildschirmgröße anzupassen.
Alternative Tabellen (moderne/bessere Option)
Eine alternative für Tabellen sind responsive Design-Elemente wie flexbox oder grid. Sie ermöglichen es, Inhalte flexibel anzuordnen und an die Bildschirmgröße anzupassen. Diese Methoden sind in der Regel besser geeignet, um Inhalte auf kleineren Bildschirmen darzustellen, da sie weniger begrenzt sind als Tabellen. Beispiel:
<div class="grid-container">
<div class="grid-item">Zelle 1,1</div>
<div class="grid-item">Zelle 1,2</div>
<div class="grid-item">Zelle 2,1</div>
<div class="grid-item">Zelle 2,2</div>
</div>.grid-container {
display: grid;
grid-template-columns: auto auto;
}Es gibt viele Möglichkeiten, Tabellen darzustellen, und es hängt von den Anforderungen der Website und dem gewünschten Design ab, welche Methode die beste ist. Generell würde ich aber vom <table> Konstrukt abraten, da es nicht mehr wirklich zeitgemäß ist.
HTML-5 Tags
HTML5 ist die neueste Version von HTML und bringt eine Reihe von neuen Tags und Attributen mit sich, die es Entwicklern ermöglichen, die Funktionalität und die Benutzerfreundlichkeit von Websites zu verbessern. Einige der wichtigsten HTML5-Tags sind:
<header>: Dieser Tag wird verwendet, um den Kopfbereich einer Seite zu kennzeichnen, der normalerweise die Überschrift und die Navigation enthält.<nav>: Dieser Tag wird verwendet, um die Navigation auf einer Seite zu kennzeichnen.<article>: Dieser Tag wird verwendet, um einen unabhängigen, selbstständigen Abschnitt auf einer Seite zu kennzeichnen, wie z.B. einen Blog-Post oder einen News-Artikel.<section>: Dieser Tag wird verwendet, um einen thematisch zusammengehörenden Abschnitt auf einer Seite zu kennzeichnen.<aside>: Dieser Tag wird verwendet, um einen Bereich auf einer Seite zu kennzeichnen, der nicht unbedingt zum Hauptinhalt gehört, wie z.B. eine Seitenleiste oder eine Werbung.<footer>: Dieser Tag wird ver- wendet, um den Fußbereich einer Seite zu kennzeichnen, der normalerweise Kontaktinformationen, Copyright-Informationen und Links zu anderen Seiten enthält.
<figure>: Dieser Tag wird verwendet, um eine Abbildung oder ein Diagramm auf einer Seite zu kennzeichnen, das in Beziehung zum umgebenden Text steht.<figcaption>: Dieser Tag wird verwendet, um eine Beschriftung oder eine Erklärung zu einer Abbildung oder einem Diagramm zu geben.<audio>: Dieser Tag wird verwendet, um Audiodateien auf einer Seite abzuspielen.<video>: Dieser Tag wird verwendet, um Videos auf einer Seite abzuspielen.<canvas>: Dieser Tag wird verwendet, um dynamische 2D- und 3D-Grafiken auf einer Seite darzustellen.<time>: Dieser Tag wird verwendet, um ein Datum oder eine Uhrzeit auf einer Seite anzuzeigen.<mark>: Dieser Tag wird verwendet, um Text hervorzuheben, der auf einer Seite besondere Aufmerksamkeit benötigt.<progress>: Dieser Tag wird verwendet, um den Fortschritt einer Aktion oder eines Prozesses auf einer Seite anzuzeigen.- Es gibt noch viele weitere HTML5-Tags, diese sind jedoch einige der wichtigsten und am häufigsten verwendeten. Mit diesen neuen Tags und Attributen können Entwickler moderne und benutzerfreundliche Websites erstellen, die auf eine Vielzahl von Geräten und Bildschirmgrößen optimal dargestellt werden.
Semantische HTML-Elemente
Semantisches HTML bezieht sich auf die Verwendung von HTML-Elementen, die ihre Bedeutung und Funktion in einem Dokument beschreiben. Es geht darum, die Struktur und Bedeutung des Inhalts einer Webseite für Suchmaschinen und Screen-Reader klar zu machen, um eine bessere Zugänglichkeit und Suchbarkeit zu erreichen.
Einige Beispiele für semantische HTML-Elemente sind:
- header: Verwendet, um den Kopfbereich einer Webseite zu kennzeichnen, der normalerweise die Überschrift, den Navigationsbereich und andere wichtige Informationen enthält.
- nav: Verwendet, um den Navigationsbereich einer Webseite zu kennzeichnen, der Links zu anderen Seiten enthält.
- main: Verwendet, um den Hauptinhalt einer Webseite zu kennzeichnen, der für den Zweck der Seite relevant ist.
- article: Verwendet, um einen unabhängigen, selbstständigen Inhalt innerhalb einer Webseite zu kennzeichnen, z.B. einen Blog-Eintrag oder einen News-Artikel.
- section: Verwendet, um einen thematisch zusammengehörigen Inhalt innerhalb einer Webseite zu kennzeichnen, z.B. einen Abschnitt über Produkte oder Dienstleistungen.
- aside: Verwendet, um zusätzlichen, aber nicht notwendigen Inhalt wie z.B. Zitate oder Werbung zu kennzeichnen.
- footer: Verwendet, um den Fußbereich einer Webseite zu kennzeichnen, der normalerweise Kontaktinformationen, Copyright-Informationen und Links zu weiteren Ressourcen enthält.
- figure und figcaption: Verwendet, um ein Bild oder eine Grafik und eine dazugehörige Beschriftung innerhalb einer Webseite zu kennzeichnen.
Indem man semantische HTML-Elemente verwendet, vermittelt man Struktur und Bedeutung des Inhaltes ideal für Suchmaschinen und Screen-Reader Es ist sinnvoll semantische HTML-Elemente zu verwenden, um Inhalte zu Gliedern anstelle von nicht-semantischen Elementen wie reine div und span, die keine klare Bedeutung besitzen.
In diesem Beispiel werden semantische HTML-Elemente wie header, nav, main, section, aside und footer verwendet, um die Struktur und Bedeutung des Inhalts klar zu machen. Die Verwendung von ID-Attributen ermöglicht es, direkt auf bestimmte Bereiche der Seite zu verlinken. Die Elemente sollten korrekt verschachtelt sein, um die korrekte Struktur und Bedeutung des Inhalts sicherzustellen.
<header>
<h1>Meine Webseite</h1>
<nav>
<ul>
<li><a href="#main-content">Inhalt</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#about">Über uns</a></li>
</ul>
</nav>
</header>
<main>
<section id="main-content">
<h2>Willkommen auf meiner Webseite</h2>
<p>Dies ist ein Beispieltext für den Hauptinhalt meiner Webseite.</p>
</section>
<section id="services">
<h2>Unsere Dienstleistungen</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<section id="about">
<h2>Über uns</h2>
<p>Ein bisschen Information über unsere Firma.</p>
</section>
</main>
<aside>
<h3>Zusätzliche Informationen</h3>
<p>Einige zusätzliche, aber nicht notwendige Informationen.</p>
</aside>
<footer>
<p>Copyright © 2023 Meine Firma</p>
</footer>Formulare
Formulare in HTML ermöglichen es Benutzern, Daten einzugeben und an eine Webseite oder eine Server-Anwendung zu senden. Sie werden mit den form-, input-, textarea-, select-, und option-Tags erstellt.
Ein Beispiel für ein einfaches Formular, das einen Benutzernamen und ein Passwort abfragt, könnte wie folgt aussehen:
<form action="submit.php" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Einloggen">
</form>In diesem Beispiel wird das Formular an die Seite „submit.php“ gesendet, wenn der Benutzer auf die Schaltfläche „Einloggen“ klickt. Der method-Attribut des form-Tags gibt an, welche Methode verwendet werden soll, um die Daten an die Seite zu senden.
Der Unterschied zwischen GET und POST besteht darin, wie die Daten an die Seite gesendet werden und wie sie auf dem Server verarbeitet werden. GET-Anfragen senden die Daten im Anfrage-Header, während POST-Anfragen die Daten im Anfrage-Body senden. GET-Anfragen sind in der Regel für Abfragen verwendet, bei denen keine sensiblen Daten übertragen werden und die Ergebnisse der Abfrage auf derselben Seite angezeigt werden, während POST-Anfragen für die Übertragung von sensiblen Daten oder Daten verwendet werden, die die Server-Anwendung verändern.
Es gibt verschiedene Arten von Eingabe-Types wie z.B. Textfelder, Checkboxen, Radiobuttons, Auswahllisten und Dateiauswahl-Felder. Jeder input-Tag verfügt über ein type-Attribut, das angibt, welche Art von Eingabe verwendet wird. Beispiele:
<input type="text"> <!-- Textfeld -->
<input type="checkbox"> <!-- Checkbox -->
<input type="radio"> <!-- Radiobutton -->
<select>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select> <!-- Auswahlliste -->
<input type="file"> <!-- Dateiauswahl-Feld-->Kommentare in HTML
Der HTML-Kommentartag wird verwendet, um Text oder Code in einem HTML-Dokument als Kommentar zu kennzeichnen, der vom Browser nicht interpretiert oder angezeigt wird. Kommentare können verwendet werden, um Code zu dokumentieren, Hinweise zu hinterlassen oder Code auszuschalten, ohne ihn zu löschen.
Ein HTML-Kommentar beginnt mit dem Öffnungszeichen „<!–“ und endet mit dem Schlusszeichen „–>“. Alles, was zwischen diesen beiden Zeichen steht, wird als Kommentar behandelt und nicht als Teil des Dokuments dargestellt.
<!-- Dies ist ein Beispiel für einen HTML-Kommentar. Er wird nicht im Browser angezeigt -->Du kannst auch mehrere Zeilen Text in einen HTML-Kommentar einfügen, indem Sie den Anfangskommentar „<!–“ am Anfang jeder Zeile einfügen und den Schlusskommentar „–>“ am Ende jeder Zeile einfügen.
Im Browser werden die Inhalte der Kommentare nicht anzeigt, aber sie sind öffentlich im Quellcode sichtbar, wenn man die Seite mit einem Texteditor öffnet, oder wenn man die Seite mit den Developer-Tools inspiziert.
Tipps und Tricks zum lernen von HTML
- Beginne mit den Grundlagen: Verstehe die grundlegenden Tags wie
div,p,h1,a,img, bevor du die komplexeren Themen erlernst. - Verwende einen Code-Editor: wie Sublime Text, Atom, PHPStorm oder Visual Studio Code, um deinen Code zu schreiben und zu organisieren. Diese Tools erleichtern es dir, deinen Code zu bearbeiten und zu formatieren.
- Experimentiere: Probieren die verschiedene Elemente aus und schau, wie sie auf der Website aussehen.
- Verwende die Entwicklertools deines Browsers: Jeder moderne Browser hat einige nützliche Entwicklertools, die es dir ermöglichen, die Struktur deiner Website zu untersuchen und Fehler zu finden.
- Nutzen Online-Ressourcen: Es gibt viele Online-Ressourcen, Tutorials und Dokumentationen, die dir beim Lernen von HTML helfen können, wie z.B. W3Schools, MDN Web Docs, FreeCodeCamp.
- Mach dich mit CSS und JavaScript vertraut: HTML und CSS arbeiten zusammen, um die Optik der Website zu gestalten, und JavaScript ermöglicht es dir, interaktive Funktionen hinzuzufügen.
- Üben regelmäßig: Wie bei jeder Fähigkeit, ist es wichtig, regelmäßig zu üben, um deine Fähigkeiten zu verbessern. Erstelle kleine Projekte und experimentiere mit verschiedenen Techniken, um deine Kenntnisse zu vertiefen.