Symbol
Name
()
runde Klammern
[]
eckige Klammern
{}
geschweifte Klammern
+
Plus
-
Minus
*
Multiplikation
/
Schrägstrich
%
Modulo
**
Potenz
==
gleich
!=
ungleich
<
kleiner als
>
größer als
<=
kleiner oder gleich
>=
größer oder gleich
&&
logisches Und
!
logisches Nicht
=
Zuweisung
+=
Zuweisung plus
-=
Zuweisung minus
*=
Zuweisung mal
/=
Zuweisung geteilt
;
Semikolon
,
Komma
:
Doppelpunkt
#
Raute
@
At-Symbol
Drücke auf dem Mac Cmd + Option + I, um die Entwicklertools zu öffnen.
HTML (Hypertext Markup Language) ist die Standard-Auszeichnungssprache, die verwendet wird, um Webseiten zu erstellen. Es ist der Grundbaustein jeder Webseite. Ich werde dir hier die Grundlagen beibringen, die du benötigst, um mit HTML zu beginnen.
1. Grundstruktur einer HTML-Seite
Jede HTML-Seite hat eine Grundstruktur, die folgendermaßen aussieht:
html
Code kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner ersten Webseite</h1>
<p>Dies ist ein Absatz von Text.</p>
</body>
</html>
Erklärung der Struktur:
<!DOCTYPE html>: Diese Zeile sagt dem Browser, dass das Dokument in HTML5 geschrieben ist.
<html>: Dies ist das Wurzelelement des HTML-Dokuments.
<head>: Der Kopfbereich enthält Metadaten über das Dokument, wie den Titel und die Zeichenkodierung.
<meta charset="UTF-8">: Diese Zeile stellt sicher, dass Sonderzeichen korrekt angezeigt werden.
<title>: Der Inhalt dieses Elements wird im Tab-Titel des Browsers angezeigt.
<body>: Der Hauptinhalt der Webseite befindet sich innerhalb dieses Elements.
2. Textformatierung in HTML
HTML bietet verschiedene Tags, um Texte auf verschiedene Weise zu formatieren:
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<p>Dies ist ein normaler Absatz.</p>
<b>Fett gedruckter Text</b> und <i>Kursiver Text</i>
<h1> bis <h6>: Diese Tags werden für Überschriften verwendet, wobei <h1> die wichtigste und <h6> die am wenigsten wichtige ist.
<p>: Dieses Tag wird verwendet, um einen Absatz zu erstellen.
<b>: Fett gedruckter Text.
<i>: Kursiver Text.
3. Links und Bilder einfügen
Mit HTML kannst du Links und Bilder zu deiner Webseite hinzufügen:
<a href="https://www.example.com">Besuche Example.com</a>
<img src="bild.jpg" alt="Beschreibung des Bildes">
<a>: Erstellt einen Hyperlink. Das href-Attribut gibt die URL an, auf die verwiesen wird.
<img>: Fügt ein Bild ein. Das src-Attribut gibt den Pfad zur Bilddatei an, und das alt-Attribut gibt eine Beschreibung des Bildes an.
4. Listen erstellen
Es gibt zwei Haupttypen von Listen in HTML: ungeordnete und geordnete Listen.
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
</ul>
<ol>
</ol>
<ul>: Erstellt eine ungeordnete Liste (Bullet Points).
<ol>: Erstellt eine geordnete Liste (nummerierte Liste).
<li>: Jedes Listenelement wird mit diesem Tag gekennzeichnet.
5. Tabellen erstellen
HTML ermöglicht es dir auch, Tabellen zu erstellen:
<table>
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
</table>
<table>: Erstellt eine Tabelle.
<tr>: Definiert eine Zeile in der Tabelle.
<th>: Erstellt eine Tabellenüberschrift.
<td>: Erstellt eine Tabellenzelle.
6. Formulare erstellen
Formulare sind ein wichtiger Bestandteil vieler Webseiten, um Benutzereingaben zu erfassen:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Absenden">
</form>
<form>: Erstellt ein Formular. Das action-Attribut gibt an, wohin die Formulardaten gesendet werden, und das method-Attribut gibt die HTTP-Methode an (z. B. post oder get).
<label>: Verknüpft eine Bezeichnung mit einem Formularfeld.
<input>: Erstellt ein Eingabefeld. Der type-Attributwert bestimmt die Art des Eingabefelds (z. B. text, email, submit).
7. Kommentare
Kommentare in HTML sind für den Benutzer nicht sichtbar, können aber nützlich sein, um den Code zu dokumentieren.
<!-- Dies ist ein Kommentar -->
8. Grundlegende Attribute
HTML-Elemente können mit verschiedenen Attributen ausgestattet werden, die das Verhalten und Aussehen steuern. Hier sind einige häufig verwendete Attribute:
class: Dient zur Gruppierung und Formatierung von Elementen mit CSS.
id: Ein eindeutiger Bezeichner für ein Element.
style: Ermöglicht das Anwenden von Inline-CSS-Stilen auf ein Element.
title: Zeigt einen Tooltip an, wenn der Benutzer über das Element fährt.
9. Übung: Erstelle eine einfache Webseite
Jetzt, wo du die Grundlagen kennst, kannst du eine einfache Webseite erstellen, die eine Überschrift, einen Absatz, ein Bild, einen Link und eine Liste enthält. Versuche, diese Elemente miteinander zu kombinieren, um eine kleine, aber funktionale HTML-Seite zu erstellen.
Das sind die wichtigsten Grundlagen, um mit HTML anzufangen. Sobald du diese verstanden hast, kannst du anfangen, mehr über CSS (Cascading Style Sheets) zu lernen, um das Aussehen deiner HTML-Seiten zu gestalten, und JavaScript, um sie interaktiv zu machen.
Lass mich wissen, wenn du an einem bestimmten Thema tiefer interessiert bist oder Hilfe bei den nächsten Schritten benötigst!
Hier ist eine kompakte Zusammenfassung der wichtigsten HTML-Tags und Konzepte, die du auswendig lernen kannst:
<!DOCTYPE html>: Deklariert HTML5.
<html>: Wurzelelement der Seite.
<head>: Metadaten-Bereich.
<meta charset="UTF-8">: Zeichensatzkodierung.
<title>: Seitentitel.
<body>: Hauptinhalt der Seite.
2. Textformatierung
<h1>, <h2>, ..., <h6>: Überschriften.
<p>: Absatz.
<b>: Fett.
<i>: Kursiv.
3. Links und Bilder
<a href="URL">Linktext</a>: Hyperlink.
<img src="bild.jpg" alt="Beschreibung">: Bild einfügen.
4. Listen
<ul>: Ungeordnete Liste (Bullet Points).
<ol>: Geordnete Liste (nummeriert).
<li>: Listenelement.
5. Tabellen
<table>: Tabelle.
<tr>: Tabellenzeile.
<th>: Tabellenüberschrift (Zelle).
<td>: Tabellenzelle (Daten).
6. Formulare
<form action="ziel" method="post">: Formular.
<label for="feld">Text</label>: Bezeichnung.
<input type="text/email/submit">: Eingabefeld.
<!-- Kommentar -->: Nicht sichtbarer Kommentar.
8. Attribute
class: Gruppierung und Styling.
id: Eindeutiger Bezeichner.
style: Inline-Styling.
title: Tooltip.
Hier sind die wichtigsten Dinge über Links in HTML:
Link zu einer externen Website in einem neuen Tab: htmlCode kopieren <a href="https://www.beispiel.com" target="_blank">Externe Website im neuen Tab</a>
Link zu einer anderen Stelle auf derselben Seite: htmlCode kopieren <!-- Zielmarke -->
<h2 id="ziel">Zielpunkt auf der Seite</h2>
<!-- Link zur Zielmarke -->
<a href="#ziel">Gehe zu Zielpunkt</a>
Link zu einer anderen Seite auf deiner Website: htmlCode kopieren <a href="seite2.html">Gehe zur zweiten Seite</a>
Wichtige Attribute:
href: Ziel des Links (URL oder Anker).
target="_blank": Öffnet Link in einem neuen Tab.
id: Definiert eine Stelle auf der Seite für Anker-Links.
1
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispielseite mit Sektionen</title>
<!-- 1. Navigation (N in navApp) -->
<nav>
<li><a href="#about-us">Über uns</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact">Kontakt</a></li>
</nav>
<!-- 2. Abschnitte (A in navApp) -->
<section id="about-us">
<h2>Über uns</h2>
<p>Wir sind ein Unternehmen, das sich auf Webentwicklung spezialisiert hat.</p>
</section>
<section id="services">
<h2>Unsere Dienstleistungen</h2>
<p>Wir bieten Webdesign, Programmierung und Suchmaschinenoptimierung an.</p>
<section id="contact">
<h2>Kontakt</h2>
<p>Schreiben Sie uns eine E-Mail an kontakt@beispiel.com.</p>
Hier ist eine Schritt-für-Schritt-Erklärung des Codes im <body>-Bereich:
Navigation (<nav>):
<nav>: Definiert den Navigationsbereich der Seite.
<ul>: Erstellt eine ungeordnete Liste für die Navigationselemente.
<li>: Jedes Listenelement stellt einen einzelnen Navigationslink dar.
<a href="#about-us">Über uns</a>: Ein Link, der beim Klicken zu dem Abschnitt mit id="about-us"springt.
Abschnitte (<section>):
<section id="about-us">: Ein Abschnitt mit der ID "about-us", der eine thematische Einheit bildet.
<h2>: Eine Überschrift für den Abschnitt "Über uns".
<p>: Ein Absatz, der Informationen über das Unternehmen enthält.
<section id="services">: Ein weiterer Abschnitt mit der ID "services".
<h2>: Eine Überschrift für den Abschnitt "Unsere Dienstleistungen".
<p>: Ein Absatz, der die angebotenen Dienstleistungen beschreibt.
<section id="contact">: Ein dritter Abschnitt mit der ID "contact".
<h2>: Eine Überschrift für den Abschnitt "Kontakt".
<p>: Ein Absatz mit Kontaktinformationen, wie eine E-Mail-Adresse.
Diese Struktur sorgt für eine klare Navigation und eine organisierte Darstellung der Inhalte auf der Webseite.
Ja, du kannst die Anzahl der Wörter steuern, indem du nach "lorem" eine Zahl angibst. Zum Beispiel:
"lorem5" erzeugt 5 Wörter.
"lorem20" erzeugt 20 Wörter.
Du tippst also "lorem" gefolgt von der gewünschten Anzahl der Wörter und drückst Tab.
Kontaktformular
<title>Kontaktformular</title>
<h1>Kontaktformular</h1>
<!-- Name -->
<label for="name">Name: </label>
<input type="text" id="name" name="name" required><br><br>
<!-- E-Mail -->
<input type="email" id="email" name="email" placeholder="Ihre E-Mail-Adresse" required><br><br>
<!-- Nachricht -->
<label for="nachricht">Nachricht:</label><br>
<textarea id="nachricht" name="nachricht" rows="4" cols="40" required></textarea><br><br>
<!-- Formular absenden -->
Schritt-für-Schritt Erklärung
<body>:
Der <body>-Tag umschließt den gesamten sichtbaren Inhalt der Webseite.
Alles, was innerhalb des <body> steht, wird im Browser angezeigt, im Gegensatz zu Informationen im <head>-Bereich, die eher Metadaten für die Seite enthalten.
<h1>Kontaktformular</h1>:
<h1> wurde schon erklärt, es ist eine große und wichtige Überschrift. In diesem Fall wird die Überschrift "Kontaktformular" angezeigt.
<form action="/submit-form" method="post">:
<form> ist der Container für das gesamte Formular.
action="/submit-form": Dies gibt an, wohin die Daten gesendet werden, wenn das Formular abgeschickt wird. Normalerweise wäre dies eine URL auf deinem Server oder einer externen Seite.
method="post": Dies gibt an, wie die Daten gesendet werden. Die Methode POST wird verwendet, um Daten sicherer zu übertragen, da die Daten nicht in der URL sichtbar sind.
<label for="name">Name: </label>:
Das <label>-Tag wird verwendet, um eine Beschriftung für ein Formularfeld anzuzeigen.
for="name": Dies verknüpft das Label mit dem Eingabefeld (in diesem Fall mit dem <input>-Feld für den Namen). Durch diese Verknüpfung wird das Eingabefeld aktiviert, wenn auf das Label geklickt wird.
<input type="text" id="name" name="name" required>:
<input>: Dieses Tag ist für ein Eingabefeld.
type="text": Definiert, dass das Feld ein einfaches Textfeld ist.
id="name": Die ID des Eingabefeldes, sie wird mit dem for-Attribut des Labels verbunden.
name="name": Der Name des Eingabefelds. Dies wird als Schlüssel verwendet, wenn das Formular gesendet wird (der Name wird als Parameter gesendet).
required: Das bedeutet, dass dieses Feld ausgefüllt werden muss, bevor das Formular abgeschickt werden kann.
<br><br>:
<br> fügt einen Zeilenumbruch ein, um den Text und das Formularfeld optisch zu trennen. Zwei Zeilenumbrüche hintereinander fügen etwas mehr Platz ein.
<label for="email">E-Mail:</label> und <input type="email" id="email" name="email" placeholder="Ihre E-Mail-Adresse" required>:
Dies funktioniert genauso wie das Label und das Eingabefeld für den Namen, aber:
type="email": Dies bedeutet, dass das Eingabefeld speziell für E-Mail-Adressen gedacht ist. Der Browser überprüft automatisch, ob eine gültige E-Mail-Adresse eingegeben wurde.
placeholder="Ihre E-Mail-Adresse": Der Platzhalter ist ein Text, der im Eingabefeld angezeigt wird, solange es leer ist. Er verschwindet, sobald der Benutzer etwas eintippt.
<label for="nachricht">Nachricht:</label><br>:
Wieder ein Label für das nächste Feld. Hierfür gilt das gleiche Prinzip wie bei den vorherigen Feldern. Es verknüpft die Beschriftung mit dem folgenden <textarea>-Feld.
<textarea id="nachricht" name="nachricht" rows="4" cols="40" required></textarea>:
<textarea>: Dies ist ein Mehrzeilen-Textfeld, in das der Benutzer eine längere Nachricht eingeben kann.
id="nachricht": Dies verknüpft das Label mit diesem Feld.
name="nachricht": Das ist der Name des Textbereichs, der zusammen mit den anderen Formulardaten gesendet wird.
rows="4" cols="40": Dies definiert die Größe des Textbereichs, in dem die Nachricht eingegeben wird (4 Zeilen und 40 Zeichen pro Zeile).
required: Der Benutzer muss dieses Feld ausfüllen, bevor er das Formular absenden kann.
<input type="submit" value="Absenden">:
Dies ist die Schaltfläche, die das Formular absendet.
type="submit": Ein Button zum Absenden des Formulars.
value="Absenden": Der Text, der auf der Schaltfläche angezeigt wird.
Das sind die wichtigsten Bestandteile des Formulars! Sie stellen sicher, dass die Benutzer Daten eingeben und diese an den Server gesendet werden können. Wenn der Benutzer auf die Schaltfläche "Absenden" klickt, sendet das Formular die Daten an die im action-Attribut angegebene URL.
Last changed4 months ago
