In meinem Beitrag Die Fähigkeiten eines Full-Stack-Webentwicklers ging ich auf unterschiedlichen Hard- und Softskills des Full-Stack-Webentwicklers ein. Eine der Skills ist die Sprache, die das Fundament der Webentwicklung bildet: die Hyper Text Markup Language (HTML). Mit ihr ist der Browser fähig zu erkennen was genau die einzelnen Bestandteile der Webseite sind. Man könnte auch sagen, dass HTML das Gerüst einer Webseite ist.
HTML5 ist mittlerweile ein sogenannter Living Standard, der auf der Website von whatwg.org eingesehen werden kann. Die aktuelle PDF-Ausgabe (Stand 26.09.2023) ist sagenhafte 1427 Seiten lang. Wenn man motiviert ist und 10 Seiten pro Tag lesen würde, wäre man in knapp 4,5 Monaten durch. Höchstwahrscheinlich könnte man dann von neuem anfangen und würde immer wieder neue Änderungen finden. Die Alternative ist, man lernt das Minimum an HTML und baut die erste Website. Zu dieser Strategie will ich dich einladen und versuchen, in einem Post die wichtigsten Bestandteile von HTML zu beschreiben. Wenn du mitmachen willst, öffne deinen Code Editor und wir legen los.
Bevor wir in den Code bzw. die Code-Schnipsel rein springen, will ich auf die Begriffe Element, Tag & Attribut eingehen.
Stellen wir uns vor wir wollen unsere erste Webseite erstellen. In der Regel wird es als erstes die Home-Webseite sein. Diese wird fast immer als index.html benannt, damit eine Server sie als diese erkennen kann. Diese liegt im Root-Verzeichnis, auf welches man gelangt wenn man der URL (d)einer Website folgt. Der Server sucht als erstes immer nach der index.html und öffnet diese. Eine HTML-Datei ist ein einfaches Textdokument mit der Endung .html oder .htm und hat am Anfang der Datei eine sogennante HTML-Deklaration.
Die HTML Deklaration selbst ist ein HTML-Element und sagt, dem Browser welche HTML-Version genutzt wird.
<!DOCTYPE html>Code-Sprache: HTML, XML (xml)html steht dabei für die aktuelle HTML5-Version, also den oben erwähnten Living Standard. Ein HTML-Element zeigt, dem Browser somit als was der Inhalt interpretiert werden muss.
Im Englischen ist der Begriff der HTML-Tags sehr gängig, wobei viele HTML-Elemente und HTML-Tags als Synonyme benutzen. Gehen wir einen Schritt weiter finden wir in einem HTML-Dokument das Element html.
<html>
.
.
.
</html>Code-Sprache: HTML, XML (xml)Man erkennt, dass das html-Element eher eine Paar ist als ein Einzelgänger wie das !DOCTYPE-Element. Im englischen würde der erste Teil opening tag und der zweite closing tag genannt. Der erste Teil besteht aus den spitzen Klammern (<html>) und der Elementbezeichnung- bzw. Abkürzung, der zweite Teil beinhaltet zusätzlich einen Schrägstrich (</html>).
Einem HTML-Element bzw. seinem Öffnungs-Tag können Attribute hinzugefügt werden. Es gibt Attribute, die jeden HTML-Element hinzugefügt werden können, und welche die spezifische Attribute eines einzigen HTML-Elements sind.
Wenn dir dem Browser sagen wollen, dass der jeder weitere Inhalt, der sich wischen den html-Tags befindet deutscher Sprache ist, können wir dem ersten Tag ein lang-Attribut hinzufügen.
<html lang="de">Code-Sprache: HTML, XML (xml)lang=“de“ würde in diesem Fall für die deutsche Sprache stehen. Sowohl die Suchmaschinen als auch der Browser wüsten Bescheid und würden die Inhalte für den Nutzer richtig interpretieren und bereitstellen.
Nachdem wir uns mit den Unterschieden von Elementen, Tags und Attributen vertraut gemacht haben, tauchen wir tiefer in die Struktur einer Webseite ein. Der folgende Code ist ein Gerüst mit den Hauptbestandteilen einer Webseite.
<!DOCTYPE html>
<html lang="de">
<!-- Das Ist ein Kommentar -->
<head>
<title>Der Name meiner Webseite</title>
<meta></meta>
<link href="styles.css" />
<script src="main.js"></script>
</head>
<body>
<div id="specificName">
<span class="primaryColor"></span>
</div>
<header>
<nav>
</nav>
</header>
<section>
<article>
</article>
</section>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Code-Sprache: HTML, XML (xml)Da wir uns das Doctype– und HTML-Element bereits angeschaut hatten, steigen wir im Code beim Kommentar ein.
HTML besitzt wie alle anderen Computersprachen eine Kommentarfunktion.
<!-- Das Ist ein Kommentar -->Code-Sprache: HTML, XML (xml)Kommentare werden genutzt um Code zu dokumentieren. Da der Inhalt der Kommentare nicht im normalen Fenster (sondern nur in den Developer Tools) angezeigt wird, kann man mit der Kommentarfunktion Code auch auskommentieren, z. B. so:
<!-- <!DOCTYPE html> -->Code-Sprache: HTML, XML (xml)Dieser Code wir von Browser nicht mehr interpretiert.
Das <head>-Element beinhaltet unterschiedliche Daten, die in der Regel nicht dem normalen User zugänglich sind. In anderen Worten: was im Head steht, sieht der User wenn er eine Website aufruft nicht.
<head>
<title>Der Name meiner Webseite</title>
<meta name="description" content="Ein Blog über Themen der Wirtschaftsinformatik, Full-Stack-Webentwicklung und Persönliches Wachstum.">
<meta name="keywords" content="Wirtschaftsinformatik, HTML, CSS, JavaScript, PHP, MySQL, Full-Stack, Frontend, Backend">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" />
<script src="main.js"></script>
</head>Code-Sprache: HTML, XML (xml)Eine Ausnahme bildet das <title>-Element, das den Titel der Website beinhaltet. Dieser wird im Browser im geöffneten Tab, oder in den Favoriten angezeigt. Zudem ist der Titel relevant für die Suchmaschinenoptimierung, und wird bei Google & Co hoffentlich auf der 1. Seite mitangezeigt, wenn eben die relevanten Inhalte im Titel enthalten sind. Weitere Elemente die für die Suchmaschinen relevant sind, sind die <meta>-Elemente mit den Attributen name=“description“ & name=“keywords“. Die Beschreibung oder die Keywords werden mit content=“…“ beschrieben.
Ein weiteres wichtiges <meta>-Element ist das mit dem name=“viewport“.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Code-Sprache: HTML, XML (xml)content=“width=device-width, initial-scale=1.0″ beschreibt, dass der Browser die Display-Weite des Geräts nutzen und den Inhalt auf 1.0 skalieren soll. Ich weiß, sehr nerdy, aber viel ändern muss man an dem Inhalt nicht.
Die letzte Elemente im Head-Bereich sind das <link>– und <script>-Element.
<link href="styles.css">
<script src="main.js"></script>Code-Sprache: HTML, XML (xml)Das <link>-Element wird in der Regel für das einbinden eines oder mehrerer CSS-Dateien genutzt. Das <script>-Element ist der Counterpart für JavaScript. CSS und JavaScript können beide neben der externen Einbindung auch im Head-Bereich und im Body eingebettet werden. Das Einbinden durch eine externe Datei zählt jedoch als Best Practice.
Nur als kleine Vorfreude für das Lernen-On-The-Go, es gibt viel mehr Elemente sowohl im Head als auch im folgenden Body, diese zu lernen macht jedoch nur Sinn wenn man sie auch in einem speziellen Kontext benutzt, was jedoch am Anfang nicht das Schlauste ist, da man sich in Detail zu gern verlieren kann – ich sage nur 1427 Seiten!
Den Body-Bereich hatte ich oben bereits erwähnt. In ihm befinden sich alle für den User relevanten Inhalte, die auf der Webseite präsentiert werden sollen. Abgesehen von den Kommentaren ist in der Regel alles sichtbar, außer es wird mit CSS oder JavaScript ausgeblendet.
Die im nachfolgenden Kapitel beschrieben Element werden auch als semantisch bezeichnet, weil man an ihrer Bezeichnung ihren Inhalt erkennen kann. Sie stehen in Kontrast zu den nicht-semantischen Elementen wie z. B. <div> und <span>.
<div id="specificName">
<span class="primaryColor">...</span>
</div>Code-Sprache: HTML, XML (xml)Man kann zwar sagen, dass div für Division, also eine Ein- oder Unterteilung steht oder span für eine Spanne steht, mehr weiß man über den Inhalt jedoch nicht. Zur Kennzeichnung und Selektierung durch CSS und JavaScript können beide Elemente jedoch mit IDs und/oder Klassen gekennzeichnet werden.
Wie oben zu sehen werden IDs und Klassen als Attribute in das öffnende Tag eingefügt. Die im oberen Beispiel gesetzte ID im Div-Element hat einen unikaten Namen. IDs sollen im Verhältnis zu Klassen eine Identifizierung gewährleisten, somit sollten IDs nicht mehrfach auf einer Webseite benutzt werden.
Klassen sind jedoch genau für den Zweck gemacht mehrfach genutzt zu werden. Wenn ich wie im oberen Beispiel das Span-Element mit einer Klasse von primaryColor versehe, kann man daraus erkennen, dass der Inhalt der Span höchstwahrscheinlich mit der Primärfarbe im CSS gestaltet wird. Die selbe Klasse könnte ich z. B. auch für eine Überschrift und Buttons nutzen um kohärentes Design zu gewährleisten.
Zusammenfassend haben wir somit gelernt, dass Divs und Spans keine semantischen Elemente sind und nur über IDs oder Klassen klar ist, welchem Zweck sie dienen bzw. was für Inhalte sie enthalten. Bei den nachfolgenden Elementen, den sematischen Elementen, ist es in der Regel klar, was sie enthalten. Der große Vorteil liegt nicht nur für den Programmiere selbst, sondern auch in den Gründen der Accessibility, also der Zugänglichkeit für z. B. Menschen mit Sehbehinderung. Diese nutzen oft sogenannte Screen Reader, welche die Struktur der Website über die einzelnen semantischen Elemente erkennen können. Eine Div mit der Klasse nh-2 könnte z.B. für second navigation in header section stehen, ist jedoch nur für den Programmiere selbst klar definiert. Okay, springen wir nun in die relevanten semantischen Elemente!
<header>
<nav>
</nav>
</header>
<section>
<article>
</article>
</section>
<main>
</main>
<aside>
</aside>
<footer>
</footer>Code-Sprache: HTML, XML (xml)<header> steht für den Kopfbereich. Ganz unten ist mit <footer> der Fußzeilenbereich gekennzeichnet. Im Header verschachtelt findet man <nav>, das für eine Navigation steht. Eine Navigation muss nicht im Header stehen, sonder kann z. B. auch im Footer oder in <aside> verschachtelt sein. Aside steht für Inhalte die wörtlich an der Seite platziert sind. Man könnte dieses Element also als zweitrangig ansehen. Das <main>-Element ist hingegen als äußerst wichtig anzusehen, es könnte z. B. die Alleinstellungsmerkmale, des Produktes, für das die Webseit entwickelt wurde hervorheben. Eine Sektion (<section>) kann wie eine Division genutzt werden und würde die Webseite in unterschiedliche Bereiche unterteilen. Auch der im oberen Beispiel verschachtelte Article (<article>) muss nicht unbedingt in einer Sektion verschachtelt sein, sollte aber als ein Inhalt gesehen werden, der ohne die anderen Inhalte der Webseite gelesen werden kann.
Die Elemente für Überschriften sind <h1>-<h6>. Es gibt somit sechs abgestufte Arten von Überschriften. Diese werden, wenn sie mit CSS nicht abgeändert, im Browser in verschiedenen Größen dargestellt.
<h1>Das ist die Hauptüberschrift der Webseite!</h1>Code-Sprache: HTML, XML (xml)Als Best Practice sollte man vermeiden mehrere H1-Überschriften pro Webseite zu verwenden. In der Regel wird die H1-Überschrift in den Suchmaschinen als fettgedruckter Links in den Suchergebnissen bereitgestellt. Es besteht bei mehreren H1-Überschriften die Gefahr, dass die Suchmaschine eventuell die falsche nimmt. Deswegen Obacht!
Ein Paragraph wird mit dem <p>-Element gekennzeichnet. Werden weitere Inhalt mit einem neuen P-Tag eingefügt, so wird ein automatischen Zeilenumbruch erzwungen.
Es gibt jedoch auch Situation in denen man eventuell einen Umbruch in einem Paragraphen oder in anderen Kontexten erzwingen will. Hierfür nutzt man das <br>-Element.
<p>Das ist ein Paragraph mit einem <br>Umbruch.</p>Code-Sprache: HTML, XML (xml)Im oberen Beispiel wird das Wort Umbruch auf eine neue Zeile gesetzt. Teste das im Editor – WOW oder?
Jetzt könnte man sich fragen, warum das Ganze. Warum nicht einfach einen neuen Paragraphen einfügen und fertig. An diesem Punkt lohnt es sich auf die Unterschiede zwischen Inline- und Block-elementen hinzuweisen.
Das bereits besprochene Paragraph-Element ist ein Block-Element. Wenn ein neuer Paragraph hinzugefügt wird, wird eine Art von neuen Block zu Website hinzugefügt. Wenn man ihn nicht durch CSS oder andere Container begrenzt dehnt sich dieser über die ganze Webseitenweite aus.
Nur ein paar Worte!
Der obere Paragraph wurde von mir mit einer Farbe versehen, und man erkennt, dass der Hintergrund über die vordefinierte Weite der Webseite geht.
Wenn ich jedoch in diesem Satz mehrere Worte fett bzw. mit dem im folgenden Kapitel erklärten <strong>-Element markiere, so werden die Worte nicht als Block auf eine neue Zeile versetzt sondern bleiben in der selben Zeile bzw. Linie und somit inline.
Die hier beschrieben Elemente sind nicht die einzigen Inline- und Block-Elemente. Ein gutes Nachschlagewerk ist für alle weiteren Elemente die w3School.
Wenn ich z. B. das später folgende Link-Element zweimal hintereinander einfügen will um eine Navigation zu erstellen, werden diese hintereinander geschrieben, also inline. Mit dem oben erwähnten <br>-Element könnte ich den Link auf die nächste Zeile bringen, weil ich z. B. eine vertikale Navigation haben will.
Okay, springen wir weiter. Abgesehen von <strong> und <em>, die für strong und emphasized stehen gibt es noch weitere Formen der Textformatierung. Diese würde ich aber on-the-go lernen wenn sie benötigt werden. Auch hier ist die w3School der richtige Ansprechpartner.
<p><strong>Dieser Text wird fett gedruckt.</strong><br>
<em>dieser hingegen schräg und betont!</em><p>Code-Sprache: HTML, XML (xml)strong wird von den Browsern als fett-gedruckt und emphasized als schräggedruck angezeigt. Beide können wie alle Elemente mit CSS geändert werden. Interessant ist jedoch, dass Inhalte, die mit emphasized markiert sind, in den bereits Erwähnten Screenreadern mit spezieller betonung vorgelesen werden. Es lohnt sich also beide Elemente so zu verwenden als würde man die Inhalte der Elemente auditiv hervorheben wollen.
In manchen Kontexten hilft es Inhalte visuell mit einer horizontalen Linien zu trennen.
<p>Das ist ein Paragraph.</p>
<hr>
<p>Er wird von einer <em>horizontal rule (hr)</em> von diesem Paragraphen getrennt.</p>Code-Sprache: HTML, XML (xml)Kommen wir zu den Hyperlinks, im Volksmund auch einfach nur Links genannt. Sie sind ein Teil des Fundaments von dem Internet wie wir es heute kennen. Man unterscheidet zwischen externen Links, die zu einer anderen Website leiten, relativen Links, die zu einer der Webseiten, die zur eigenen Website gehören, leiten und interne Links, die auf der selben Webseite den User zu einer spezifischen Stelle der Webseite springen lassen können. Das ist z. B. interessant wenn man ein Inhaltsverzeichnis am Anfang eines langen Beitrags wie diesen hat. Teste es ruhig oben aus.
Hyperlinks werden mit dem <a>-Element ausgezeichnet. Das a steht in diesem Fall für anchor, das englische Wort für Anker. Wir setzen also einen Anker der in Verbindung zu einer anderen Website steht. Nicht zu verwechseln ist dieses Element mit dem <link>-Element, dass wir aus dem Kopfbereich kennen.
<a href="https://andreas-moor.de" _blank>Website von Andreas Moor</a>Code-Sprache: HTML, XML (xml)Das Element beinhaltet das href-Attribut, dass auf die Website, die gelinkt werden soll, verweist. Zudem erkennt man ein weiteres Attribut, das _blank-Attribut. Dieses sagt dem Browser, dass er den Link in einem neuen (blanken) Tab aufmachen soll. Dies hat den Vorteil, dass man den User von der eigenen Website nicht verliert. Ohne das Attribut würde der User im selben Tag einfach auf die gelinkte Seite springen und eventuell den Lesefluss verlieren, oder eben auch unsre Website.
Wenn wir auf eine Webseite unserer Website verlinken, dann denkt man in Verzeichnis- bzw. Ordnerstrukturen. Das Element würde dann wie folgt aussehen:
<a href="/about.html" _blank>Über Mich</a>Code-Sprache: HTML, XML (xml)Bei diesem Link liegt die about.html, also die Über-Mich-Webseite, in dem Wurzelverzeichnis, im Englischen spricht man auch von root directory. Wenn man sich eine Domain für die eigenen Website sichert, kann man dies in der Regel in einem Packet mit Webhosting, also Speicherplatz auf dem Server des Anbieters, wie z. B. bei Server Profis, mieten. Auf diesem Account ist in der Regel eine Software wie CPanel installiert. Wenn man sich einloggt und auf den Link des Dateimanagers klickt, sieht man die Ordnerstruktur die für einen vorinstalliert wurden. In der Regel wird man seine Website mit allen notwendigen Dateien in den public-html Ordern laden. Dieser Ordner wäre in unserem Fall der root. Wenne wir z. B. drei HTML-Dateien uploaden, sagen wir index.html, about.html und contact.html dann würden wir z. B. von unseren index.html genau so linken, wie es oben im Code-Beispiel angegeben ist.
Wenn wir nun Ordnung schaffen und z. B. einen Ordner für Blogposts anlegen wollen und auf einen der Beiträge linken wollen können wir das so machen:
<a href="blog/HTML-Basics.html" _blank>HTML Basics</a>Code-Sprache: HTML, XML (xml)In diesem Fall haben wir unserem root-Ordner einen Unterordner mit dem Namen blog hinzugefügt und in diesem haben wir die Datails mit den HTML-Basics verlinkt. Einfach, ich weiß!
Wenn wir dem User ermöglichen wollen auf eine spezifische Passage in unserer Webseite zu springen, dann können wir das mit der Hilfe von IDs machen. IDs dienen wie erwähnt der Identifizierung eines Elements. Ich habe die IDs zwar anhand von einem nicht-semantischen Div-Element erläutert, jedoch kann jedes Element auf einer Webseite mit einer ID gekennzeichnet werden.
<h4 id="interne-links">Interne Links</h4>Code-Sprache: HTML, XML (xml)Diese Überschrift 4-ten Grades enthält eine ID mit den Namen interne-links, diese ID kann ich mit einem Link ansprechen.
<a href="#interne-links">Interne Links</a>Code-Sprache: HTML, XML (xml)Wenn ich mich auf der selben Webseite befinde, auf der sich die Stelle befindet zu der ich linken will, so linke ich im href-Attribut mit eine # und dem Namen der ID, in diesem Fall #inerte-links.
Ich kann die Verlinkung jedoch auch von einer anderen meiner Webseiten machen, z. B. von meiner index.html. Nehmen wir einfach den oberen relativen Link nochmal.
<a href="blog/HTML-Basics.html#interne-links" _blank>HTML Basics</a>Code-Sprache: HTML, XML (xml)In diesem Fall verweisen wir auf eine spezifische Stelle, auf einer anderen Webseite. Und jetzt stellt sich natürlich direkt, die Frage ob das auch auf einer externen Webseite funktioniert – Trommelwirbel – ja. Es gibt nur eine Vorannahme: die zu verweisende Stellen hat eine ID, die man nutzen kann. Hier sind die Developer Tools erneut unser Freund, Rechtsklick auf das Element und dann Untersuchen wählen und die ID im HTML-Code der Webseite auslesen.
Kommen wir zu den Bildern, die einer Webseite ihr Leben einhauchen. Wenn du bei den relativen Links alles verstanden hast, solltest du bei den Bildern keine Schwierigkeiten haben. Das Element nennt sich <img> und enthält anstatt des href-Attributs, was übrigens für hyperlink reference steht, das src-Attribut, was für source, also die Quelle der Datei darstellt. Wenn wir unsere Bilder bzw. images ordnungsliebend in einen Order packen, könnten wir ihn z. B. img oder images nennen. Beide Namen sind gängige Konventionen, die man auch in der Webapp-Entwicklung oft wiederfindet. Wir würden dann wie folgt verweisen:
<img scr="images/profile-pic-andreas-moor.jpeg alt="Profilbild von Andreas Moor">Code-Sprache: HTML, XML (xml)Man erkennt auch hier die Ordnerstruktur in dem angegeben Pfad und die verlinkte jpeg-Datei. Neben dem scr-Attribut ist das zweite Attribut das alt-Attribut, was dafür sorgt, dass der Text Profilbild von Andreas Moor angezeigt wird, wenn die Datei, warum auch immer, nicht vom Browser geladen werden kann. Auch die mehrmals erwähnten Screenreader und ihre Nutzer freuen sich über die Beschreibung des Inhalts.
Auch wie bei den externen Links können wir auf Bilder von außerhalb unseres Servers linken. Wir könnten den oberen Pfad leicht anpassen und z. B. von einer anderen Webseite ein Bild in unsere einbinden.
<img scr="https://max-mustermann.de/images/max-m.jpeg alt="Bild von Max Mustermann">Code-Sprache: HTML, XML (xml)Max könnte ja z. B. einen Gastbeitrag auf unser Website veröffentlichen. Wenn dieser jedoch wie angemerkt, das Bild von seinem Server löschen würde, würden wir zumindest den alt-ernativen Text einblenden können.
Fast jede moderne Website enthält Listen. Die beliebteste Verwendung von Listen ist die Struktur einer Navigation. Zwar sind Listen in de Regel vertikal aufgebaut, können aber mit CSS auch horizontal ausgerichtet werden. Jedoch sind Listen im klassischen Sinnen natürlich auch nützlich für jede Arte von Auflistung – ich weiß surprise! Die wichtigsten Listenarten sind die unordered list und die ordered list. Die erste nutzt Aufzählungszeichen wie bullet points, die zweite klassische Nummerierung. Für beide gibt es Variationen – w3School is your best friend.
<ul> steht für die unordered list. Die Listeneinträge werden mit <li> gekennzeichnet.
<ul>
<li>Listeneintrag</li>
<ul>
<li>Untereintrag</li>
<li>Untereintrag</li>
</ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>Code-Sprache: HTML, XML (xml)Der Obere Code generiert die folgende Liste:
Man erkennt, dass Listen auch verschachtelt werden können, was quasi eine Liste in einer Liste darstellt.
Die ordered list ist fast identisch. Sie wird mit dem <ol>-Element gekennzeichnet.
<ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol>Code-Sprache: HTML, XML (xml)Diese Liste würde dann wie folgt aussehen:
Keine Racketenwissenschaft, Supi!
Kommen wird zu den Tabellen. Tabellen sind super um Daten in einer Matrix zu organisieren und Beziehungen darzustellen. Die Tabelle selbst wird mit dem <table>-Element eröffnet. Weiterhin könnte man die Tabelle mit den semantischen Elementen table head (<thead>), table body (<tbody>) & table footer (<tfoot>) unterteilen. Diese sind kein muss, sind aber beim Styling mit CSS super um die einzelnen Bereiche sauber zu selektieren. Weitere wichtige Elemente in der Tabelle sind <tr> aka table row, <th> mit h wie im Überschrichftenelement. Die Zellen in der Tabelle werden mit <td>, was für table data oder tabular data steht. Eine Tabelle könnte somit wie folgt aussehen:
<table>
<thead>
<tr>
<th>Produkt X</th>
<th>Produkt Y</th>
<th>Produkt Z</th>
</tr>
</thead>
<tbody>
<tr>
<td>Feature 1</td>
<td>Feature 1</td>
<td>Feature 1</td>
</tr>
<tr>
<td>Feature 2</td>
<td>Feature 2</td>
<td>Feature 2</td>
</tr>
<tr>
<td>Feature 3</td>
<td>Feature 3</td>
<td>Feature 3</td>
</tr>
</tbody>
<tfoot>
<tr colspan=3>
<td>*Umsatzsteuer nicht inbegriffen.</td>
</tr>
</tfoot>
</table>Code-Sprache: HTML, XML (xml)Im Tabellen-Footer wurden in der table row mit dem Attribut colspan=3 drei Zellen horizontal verschmolzen es wurde ein columnt span erzeugt – also eine Spanne über drei Spalten. Ähnliches ist auch vertikal mit rowspan möglich.
Formulare sind ein weiterer wichtiger Bestandteil von Webseiten. Das Kontaktformular ist wahrscheinlich das am meisten genutzte Formular im Internet. Die Struktur des Formulars wird in HTML gebaut. Was mit den Daten, die in das Formular eingefügt werden passiert, wird in der Regel mit einer Programmiersprache wie z. B. PHP weiterverarbeitet, wie man im nachfolgenden <form>-Element und seinem action-Attribut sieht.
<form action="process.php">Code-Sprache: HTML, XML (xml)Die in der form genutzten Divs, dienen als Containerelement und verpacken ein Lable und einen Input zu einer einheit. Fast jedes Eingabefeld, das mit <input> gekennzeichnet ist, hat ein übergeordnetes <label>-Element, was für die Beschriftung des Inputs genutzt wird. Das Lable selbst ist optional.
Im <lable>-Element ist zudem ein for-Attribut enthalten. Der Inhalt verweist auf die im Input enthaltene ID. Wenn diese übereinstimmen, wird durch einen Klick auf das Lable im Browser, das zugeordnete Input-Feld markiert angezeigt. Diese Funktion ist jedoch nicht verpflichtend sondern nur ein Nice-to-have.
Nimm dir einen Moment Zeit um den gesamten Code-Block durchzugehen. Unter dem Block kommt die Beschreibung für die einzelnen Divs.
<form action="process.php">
<!-- Text -->
<div>
<label for="name">Name</label><br>
<input type="text" id="name" name="name" value="Andreas Moor">
</div>
<!-- Email -->
<div>
<label for="email">Email</label><br>
<input type="email" id="email" name="email" placeholder="your@email.com">
</div>
<!-- Number -->
<div>
<label for="age">Age</label>
<input type="number" id="age" name="age">
</div>
<!-- Date -->
<div>
<label for="date">Birthdate</label>
<input type="date" id="birthday" name="birthday">
</div>
<!-- Textarea -->
<div>
<label for="message">Message</label><br>
<textarea type="message" id="message" name="message"></textarea>
</div>
<!-- Select -->
<div>
<label for="sex">Sex</label>
<select id="sex" name="sex">
<option value="male">Male</option>
<option value="female" selected>Female</option>
<option value="other">Other</option>
</select>
</div>
<!-- Radio -->
<div>
<label for="membership">Membership</label><br>
<input type="radio" id="membership" name="membership" value="simple"> Simple
<input type="radio" id="membership" name="membership" value="standard" checked> Standard
<input type="radio" id="membership" name="membership" value="super"> Super
</div>
<!-- Chekbox -->
<div>
<label for="likes">Likes</label><br>
<input type="chekbox" id="likes" name="likes" value="bike"> Bike
<input type="chekbox" id="likes" name="likes" value="car" checked> Car
<input type="chekbox" id="likes" name="likes" value="boat"> Boat
</div>
<!-- Submit -->
<input type="submit" value="Submit">
</form>Code-Sprache: HTML, XML (xml)Starten wir mit einem normalen Textfeld. Dies kann wie in diesem Beispiel für die Eingabe von einem Namen genutzt werden. Im Input befinden sich die Attribute type=“text“, was den Typ Textfeld darstellt, die bereits oben erwähnte ID und das name-Attribut, was z. B. ein Name des Eintrags in der Datenbank enhalten könnte. In diesem Fall ist das name-Attribut und der Inhalt mit name identisch. Wenn der User seinen Namen in das Eingabefeld eintragen würde, würde in der Datenbanktabelle unter name z. B. Max Mustermann stehen.
<div>
<label for="name">Name</label><br>
<input type="text" id="name" name="name" value="Andreas Moor">
</div>Code-Sprache: HTML, XML (xml)Das letzte Attribut ist value und enthält in dem Fall meinen Namen. Macht das Sinn? Nö! Es soll einfach nur gezeigt werden, dass man auch einen vordefinierten Wert in einem Eingabefeld plazieren kann, das ist alles. Der User kann diesen jedoch wenn er seinen Eintrag tätigt, löschen.
Im nachfolgenden werde ich die id– und name-Attribute nicht mehr erwähnen und nur die änderungen in den weiteren Eingeabefeldern beschreiben.
email ist ein weiteres textbasiertes Eingabefeld. Es ermöglicht die client- bzw. browserseitige Validierung einer Email. Bei der Validierung prüft der Browser ob der eingegebene Inhalt einer Email entspricht, also zum Beispiel das @-Symbol und die Endung einer Domain wie z. B. .de oder .com enthält. Zudem kann mit dem Attribut placeholder ein Wert als Platzhalter eingefügt werden, der nicht gelöscht werden muss, sondern direkt überschrieben werden kann.
<div>
<label for="email">Email</label><br>
<input type="email" id="email" name="email" placeholder="your@email.com">
</div>Code-Sprache: HTML, XML (xml)In Formularen ist es auch möglich Zahlen einzugeben. Im unteren Beispiel nutze ich diese Funktion um z. B. ein Alter einzugeben. Der Typ des Eingabefeldes ist number.
<div>
<label for="age">Age</label>
<input type="number" id="age" name="age"
</div>Code-Sprache: JavaScript (javascript)Ein weiteres nummerisches Eingabefeld ist der Typ date. Mit diesem Eingabefeld ist es möglich ein Datum einzugeben oder es auch aus einem Kalender wählen zu können.
<div>
<label for="date">Birthdate</label>
<input type="date" id="birthday" name="birthday">
</div>Code-Sprache: HTML, XML (xml)Es ist möglich neben einem normalen Textfeld auch größere Textfelder einzubetten. Ein gutes Beispiel hierfür wäre das Feld, das der User nutzt um eine Nachricht an den Empfänger des Kontaktformulars zu schicken. Die Größe und das Aussehen kann wie immer mit CSS definiert werden.
<div>
<label for="message">Message</label><br>
<textarea type="message" id="message" name="message"></textarea>
</div>Code-Sprache: HTML, XML (xml)Mit select ist es dem Use möglich aus einer Liste mit einem Dropdown-Menü zwischen verschiedenen Optionen zu wählen.
<div>
<label for="sex">Sex</label>
<select id="sex" name="sex">
<option value="male">Male</option>
<option value="female" selected>Female</option>
<option value="other">Other</option>
</select>
</div>Code-Sprache: HTML, XML (xml)Jede option hat eine value-Attribut, dass auch hier z. B. in der Datenbank gespeichert werden kann. Der Inhalt zwischen den Tags ist der Inhalt den der User im Browser im Menü sieht. In der zweiten option habe ich zudem das Attribut selected eingefügt, das in dem Fall Female zum vorselektierten Wert macht – wieder nur ein Kann und kein Muss.
Eine weitere Möglichkeit den User etwas wählen zu lassen sind die sogenannten radio buttons. Radio-Buttons sind kleine kreisförmige Knöpfe, welche dem User erlauben einen von ihnen zu wählen. Es besteht jedoch auch hier eine Selektierung durch das Attribut checked vorzunehmen.
<div>
<label for="membership">Membership</label><br>
<input type="radio" id="membership" name="membership" value="simple"> Simple
<input type="radio" id="membership" name="membership" value="standard" checked> Standard
<input type="radio" id="membership" name="membership" value="super"> Super
</div>Code-Sprache: HTML, XML (xml)Die für den User sichtbaren Beschriftungen der einzelnen Buttons werden einfach hinter das input-Tag geschrieben.
Ja, es geht weiter mit mehr Auswahlmöglichkeiten und zwar wortwörtlich. Es gibt für den User die möglichkeiten mehrere Werte auf einmal auszuwählen. Dies geht mit dem Typ checkbox. Checkboxen sind kleine Kästchen in denen der User mit einem oder mehreren Häckchen seine Auswahl treffen kann.
<div>
<label for="likes">Likes</label><br>
<input type="chekbox" id="likes" name="likes" value="bike"> Bike
<input type="chekbox" id="likes" name="likes" value="car" checked> Car
<input type="chekbox" id="likes" name="likes" value="boat"> Boat
</div>Code-Sprache: HTML, XML (xml)Auch hier ist es möglich mit checked eine Vorauswahl zu treffen und ja die Beschreibung steht wieder hinter dem Tag.
Wenn man die Daten im Formular eingeben bzw. übermitteln will, benötigen wir den Input-Typ submit.
<input type="submit" value="Submit">Code-Sprache: HTML, XML (xml)Dieser Typ von Input wird im Browse als ein Button dargestellt. Das value-Attribut, dient in diesem Kontext für die Beschriftung des Buttons.
Okay, zuerst gratuliere ich dir für das Durchhalten! Wenn du bereits in deinem Code Editor den Code aus diesem Beitrag getestet hast, hast du alles richtig gemacht. Wenn du den Post nur gelesen hast, epfehle ich dir auf jeden Fall eine zweite Runde zu drehen und jedes Beispiel selbst zu coden und damit zu spielen. HTML lernen heißt defacto damit spielen und Wissenslücken nachzurecherchieren.
Ich wünsche dir viel Spaß beim weiteren Lernen.
LG Andy ✌️