HTML-Crashkurs kostenlos und schnell HTML lernen!
Wer PHP lernen möchte, kommt an HTML nicht vorbei.
Denn: ohne HTML kein PHP. So einfach ist das. Aber keine Sorge: HTML ist recht einfach und es genügt, wenn Sie die Grundlagen kennen. Deshalb gibt es hier einen HTML-Crashkurs. Alles Wichtige über die Sprache des Webs.
PHP Programmierer buchen!
- Müller, Peter (Autor)
Was ist HTML?
HTML ist die Abkürzung für Hypertext Markup Language. Es ist die Sprache, in der Webseiten geschrieben werden. Jeder Browser liest HTML und gibt als Ergebnis eine Webseite aus – mit Überschriften, Absätzen, Listen, Tabellen, Bildern und zum Teil auch versteckten Elementen.
Wie sieht HTML aus?
Klicken Sie einfach mit der rechten Maustaste auf eine beliebige Webseite und wählen Sie „Quelltext anzeigen“ aus. Es erscheint der HTML-Code. Alles beruht bei HTML auf sogenannten Tags. Das sind die einzelnen Elemente eines HTML-Dokuments, die mit < beginnen und mit > enden.
Wichtig: HTML ist keine Programmiersprache, sondern eine Seitenbeschreibungssprache. HTML ist statisch.
Um eine HTML-Datei zu erstellen, benötigen Sie lediglich einen einfachen Texteditor und einen Browser.
Schreiben Sie zum Anfang diese Zeilen in den Texteditor:
|
1 2 |
<html> </html> |
Das ist schon das einfache Prinzip von HTML: Anhand vom ersten HTML-Tag – Zeile 1, sieht der Browser, dass hier das HTML-Dokument beginnt. In der zweiten Zeile wird mit dem HTML-Tag anzeigt, dass das Dokument an dieser Stelle zu Ende ist.
Und so geht es auch weiter:
|
1 2 3 4 5 6 |
<html> <head> </head> <body> </body> </html> |
Jetzt beginnen die Verschachtelungen.
Die beiden Elemente „Head“ (Kopf) und „Body“ (Körper) werden innerhalb der HTML-Tags platziert. Der Body ist dabei der sichtbare Bereich der Seite. Der Head ist für versteckte Informationen, die aber sehr wichtig sind. Dazu später.
Innerhalb der Body-Tags (also zwischen body und body schreiben Sie jetzt:
|
1 2 |
<h1>Überschrift</h1> <p>Hier ist ein Absatz.</p> |
Benennen Sie die Datei mit „beispiel.html“. Öffnen Sie die Datei in einem Browser. Sie sehen eine große Überschrift und einen kleinen Absatz.
Dies sind grundlegende HTML-Tags:
|
1 2 3 4 5 6 7 8 9 |
<h1></h1> ist eine Überschrift erster Ordnung. <h2></h2> eine Überschrift zweiter Ordnung usw.
<p></p> ist ein Absatz für Text.
<br> ist ein Zeilenumbruch.
<div></div> ist ein allgemeiner Container für Inhalte jeglicher Art, ähnlich wie <p>
Mit <strong></strong> können Sie innerhalb eines Fließtextes Wörter fett markieren. Mit <em></em> werden sie kursiv.
<img src="bild.jpg" width="200" height="100" > ist das Tag für Bilder. „src“ steht dabei für source, also den Pfad zur Bilddatei.
|
Die Angaben bei „src“ für „width“ (Weite) und „height“ (Höhe) sind optional, aber sehr empfehlenswert. Denn die Höhen- und Weitenangaben garantieren einen ruckelfreien Seitenaufbau.
Der Hyperlink
Einer der bedeutendsten Tags – und der entscheidende Faktor für den Erfolg des Internets – ist der Link, genauer gesagt: der Hyperlink. Der simple Verweis auf interne oder externe Seiten im World Wide Web macht das bequeme Surfen und Navigieren erst möglich. Und das funktioniert ganz einfach:
|
1 |
<a href="https://google.de" target="_blank">Google</a> |
HTML-Tags Listen
Listen sind bei Lesern sehr beliebt, denn sie lockern den Text auf und schaffen Übersicht. Es gibt zwei Arten von Listen: nummerierte und unnummerierte.
So sehen die beliebten Bulletpoint-Listen in HTML aus:
|
1 2 3 4 5 |
<ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul> |
Auch hier sieht man wieder das Verschachtelungsprinzip von HTML:
Innerhalb der ul Tags befinden sich die einzelnen Listenpunkte, die wiederum mit li bezeichnet werden und Text beinhalten.
Dasselbe Prinzip gilt für nummerierte Listen:
|
1 2 3 4 5 |
<ol> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ol> |
Das Ergebnis:
Tabellen in HTML
Tabellen sind noch etwas komplizierter als Listen.
Das Prinzip ist jedoch ebenfalls sehr logisch:
Ein Beispiel:
|
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <td>Zeile 1 Zelle 1</td> <td>Zeile 1 Zelle 2</td> </tr> <tr> <td>Zeile 2 Zelle 1</td> <td>Zeile 2 Zelle 2</td> </tr> </table> |
Und so schaut die Tabelle aus:
| Zeile 1 Zelle 1 | Zeile 1 Zelle 2 |
| Zeile 2 Zelle 1 | Zeile 2 Zelle 2 |
Das ist das Grundprinzip einer Tabelle. Profis erstellen HTML-Tabellen zum Beispiel mit Zellen, die über mehrere Zeilen oder Spalten greifen (horizontal oder vertikal). Das kann leicht sehr fehleranfällig werden. Zum Erstellen von Tabellen gibt es jedoch viele Tools, die das Erzeugen komplizierter Tabellen mit HTML vereinfachen.
Wichtig ist vor allem, das Grundprinzip zu verstehen!
Übrigens: Tabellen lassen sich (wie alle anderen Tags in HTML) mit CSS sehr kreativ gestalten, zum Beispiel mit Rändern oder Hintergrundfarben. CSS-Angaben können in den betreffenden Tags notiert werden, üblicher ist allerdings die Angabe im Head-Bereich.
Der Head für Meta-Tags
Nach dem Body nun zum Head. Das ist der sogenannte Kopfbereich einer HTML-Seite. Im Head finden sich Metainformationen, die auf der Seite selbst nicht sichtbar, aber sehr wichtig sind – unter anderem für Suchmaschinen.
Die meisten Meta-Tags sind nach dem folgenden Prinzip aufgebaut:
|
1 |
<meta name="Name des Elements" content="zugewiesener Inhalt"> |
Eine Ausnahme besteht bei einem sehr wichtigen Tag, das den Titel der Seite beschreibt. Was innerhalb von title steht, erscheint auf dem Browser-Tab und bei den Google-Suchergebnissen als Überschrift. Für die Klickzahlen ist der Inhalt dieses Tags also besonders wichtig. Gleiches gilt für das Meta-Tag „Description“:
|
1 |
<title></title> |
|
1 2 |
<meta name="description" content="Hier stehen wichtige Informationen zum Inhalt der Seite."> |
Diese Beschreibung des Seiteninhalts erscheint bei Google oft als Kurzinformation. Description und Title sind also wichtige Elemente für die Suchmaschinenoptimierung.
Hier die weiteren wichtigsten Meta-Tags für den Head-Bereich einer HTML-Seite:
Ist für die Zeichencodierung sehr wichtig. Wenn dieses Tag fehlt, werden Umlaute und andere Sonderzeichen in vielen Browsern nicht richtig dargestellt.
|
1 |
<meta charset="utf-8"> |
Steht für die wichtigsten Keywords der Seite, obwohl die keywords heute nicht mehr relevant sind für die Suchmaschinen und im SEO!
|
1 |
<meta name="keywords" content="Keyword 1, Keyword 2 usw."> |
Weist auf den Autor einer Webseite hin.
|
1 |
<meta name="author" content="Name des Autors"> |
Ist ein sehr praktisches Tag, das eine Seite responsiv macht. Das heißt: Der Seiteninhalt passt sich dem jeweiligen Endgerät an.
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Meine erste Webseite in HTML – Grundgerüst in HTML von einer Webseite:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> <meta name="description" content="Hier stehen wichtige Informationen zum Inhalt der Seite."> <meta name="author" content="Name des Autors"> <meta name="keywords" content="Keyword 1, Keyword 2 usw."> </head> <body> <p>Meine erste Webseite in HTML - Grundgerüst in HTML</p> </body> </html> |
Formulare in HTML
Mit Formularen können Sie Daten vom Benutzer abfragen. Für HTML-Formulare gibt es eine Vielzahl an Elementen. Wichtig ist das input-Element, das verschiedene Formen haben kann und diverse Funktionen unterstützt. Am einfachsten sind die Formularelemente, die eine Texteingabe ermöglichen. Der Reset-Button versendet diese Daten.
Hier ein Bespiel für ein einfaches Eingabefeld:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action="ergebnis.php"> Vorname: <input type="text" name="vorname"><br> Nachname: <input type="text" name="nachname"><br> E-Mail: <input type="email" name="email"><br> Passwort wählen: <input type="password" name="passwort"><br> Newsletter bestellen? <input type="select"> <option value="newsletter_yes">Ja</option> <option value="newsletter_no">Nein</option> </select> <input type="reset" name="senden" value="Senden"> </form> |
Zur Erklärung:
steht, gehört zum Formular und wird versendet an die Datei ergebnis.php.
Es gibt noch eine Vielzahl anderer Formulareingabefelder.
Das sind die wichtigsten Grundlagen von HTML. Mit der Programmiersprache PHP erhalten Sie ein wichtiges Werkzeug, um Webseiten dynamisch zu gestalten.
Style-Tags für CSS & Script-Tags für Javascript
Zwei weitere Standard-Tags für professionelle Webseiten sind
|
1 2 |
<script></script> <style></style> |
für die Einbettung von JavaScript-Code und style für CSS-Angaben. Letztere sind für die Formatierung der Seite essenziell.
CSS
Das Prinzip von CSS (Cascading Style Sheets) ist ebenfalls recht simpel.
Hier ein Beispiel:
|
1 2 3 |
<style> p { color: red; } </style> |
Diese Notation bewirkt, dass der Text in Absätzen (
) in roter Schrift erscheint. Wenn dieser Effekt nur für bestimmte Absätze gewünscht ist, benutzt man Klassen.
Das macht man wie folgt:
|
1 2 3 |
<style> p.rot { color: red; } </style> |
Und im Body werden die Absätze, die in roter Schrift erscheinen sollen, wie folgt gekennzeichnet:
|
1 |
<p class="rot">Hier steht ein roter Text</p> |
Im Folgenden eine Liste der wichtigsten CSS-Eigenschaften:
JavaScript
JavaScript ist eine recht einfache Programmiersprache, die speziell für das Web entwickelt wurde. Mit dieser Scriptsprache lassen sich einfache Effekte zaubern. Zum Beispiel eine Alarm-Box. Hierfür sind zwei Schritte erforderlich.
Im Head notiert man eine Funktion:
|
1 2 3 4 5 6 |
<script> function alarm() { alert("Alarm!"); } </script> |
Und im Body der Seite kann diese Funktion jetzt aufgerufen werden. Zum Beispiel mit einem Link:
|
1 |
<a href="javascript:alarm()>Hier" klicken, um den Alarm auszulösen!</a> |
oder mit einem Button:
|
1 |
<input type="button" onclick="alarm()" value="Hier klicken, um den Alarm auszulösen!"> |