HTML-Crashkurs

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!

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:

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:

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:

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:

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:

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:

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • 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:

    Das Ergebnis:

  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Tabellen in HTML

    Tabellen sind noch etwas komplizierter als Listen.

    Das Prinzip ist jedoch ebenfalls sehr logisch:

  • Die eigentliche Tabelle befindet sich innerhalb der HTML-Tags table.
  • Eine Zeile wird mit tr geöffnet und geschlossen.
  • Der Inhalt einer Zelle befindet sich zwischen den Tags td.
  • Ein Beispiel:

    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:

    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“:

    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.


    Steht für die wichtigsten Keywords der Seite, obwohl die keywords heute nicht mehr relevant sind für die Suchmaschinen und im SEO!

    Weist auf den Autor einer Webseite hin.


    Ist ein sehr praktisches Tag, das eine Seite responsiv macht. Das heißt: Der Seiteninhalt passt sich dem jeweiligen Endgerät an.

    Meine erste Webseite in HTML – Grundgerüst in HTML von einer Webseite:

    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:

    Zur Erklärung:

  • Alles, was innerhalb von

    steht, gehört zum Formular und wird versendet an die Datei ergebnis.php.


  • Der Input-Typ password bewirkt, dass anstelle der eingetippten Buchstaben im Textfeld nur Punkte oder Sternchen erscheinen.

  • Der Input-Typ select erzeugt aufklappbare Auswahlfelder.

  • Es gibt noch eine Vielzahl anderer Formulareingabefelder.

  • Mit JavaScript können Formulareingaben direkt (und sehr schnell) auf dem Browser des Users geprüft werden. Zum Beispiel erhält der Benutzer die Ausgabe einer alert-Box, wenn er ein Feld nicht ausgefüllt hat.

  • Mit PHP lassen sich Formulare serverseitig auswerten und versenden.

  • 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

    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:

    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:

    Und im Body werden die Absätze, die in roter Schrift erscheinen sollen, wie folgt gekennzeichnet:

    Im Folgenden eine Liste der wichtigsten CSS-Eigenschaften:

  • color (Farbe, zum Beispiel black, white, red usw.)

  • font-family (Schriftart, zum Beispiel serif oder sans-serif, Arial, Verdana usw.)

  • font-size (Schriftgröße)

  • border, margin und padding (Rand, äußere und innere Abstände)

  • font-weight, zum Beispiel bold (fett) oder italic (kursiv)
  • 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:

    Und im Body der Seite kann diese Funktion jetzt aufgerufen werden. Zum Beispiel mit einem Link:

    oder mit einem Button: