Einführung in die Programmierung mit HTML und PHP
Einführung in HTML: eine eigene Homepage
Zentrale - Lehrgänge - Einführung HTML+PHP - HTML-Einführung

Lehrziel

Heute beginnen wir mit der eigentlichen Einführung in die Programmierung, und zwar mit den Themen
Sie lernen heute die ersten Ansätze, wie man eine Seite wie diese hier vor Ihrer Nase selber schreibt.

Es geht heute nicht um Perfektion, es geht auch nicht um detailliertes Ausleuchten bis in die abgelegenste Winkel, sondern um schnelle Erfolge mit ersten Eindrücken und eigenen Experimenten und vor allem um den Abbau der Scheu vor der Vielfalt der sich auftuenden Welten.

Das wichtigste am heutigen Tag ist das eigene Experimentieren, um Fertigkeiten mit den Werkzeugen zu erlangen, sowie das Orientieren in den Dokumentationen, zu denen es Anleitungen im Unterricht gibt. Diese beiden Aspekte sind wichtiger als alle fachlichen Details! Ihre Beherrschung bewirkt eine EXTREME(!) Vereinfachung und Beschleunigung des Lernprozesses. Versagen darin ist ... keine Option! Brillieren dagegen bringt Ihnen Vorteile weit über diesen Lehrgang hinaus. In den folgenden Lektionen werde ich die Fähigkeit zur Benutzung dieser Technik voraussetzen. Nehmen Sie sie NICHT auf die leichte Schulter!

Wir werden erreichen, daß Sie am Ende des heutigen Tages, wenn Sie die Aufgabe erhalten, etwas bestimmtes in HTML auszudrücken, was Sie unmöglich im Detail wissen können, nicht mehr in Panik ausbrechen sondern ihren Browser aufschlagen, ein paar Stichworte in einer Google-Suche eintippen oder ein Lesezeichen anklicken und sich im nächsten Moment auf einer Dokumentationsseite wiederfinden, wo alles notwendige im Detail beschrieben und mit Beispielen erläutert ist.
Außerdem werden Sie heute bereits genauso schnell HTML schreiben können wie einen Text in Word.

In begleitende Materialien wird während der Lektion eingeführt.

HTML - Grundstruktur

Wir beleuchten erstmal die grundlegende syntaktische Struktur der Sache, bevor wir uns im nächsten Abschnitt unter den konkreten HTML-Anweisungen umschauen. HTML ist die Abkürzung für "Hyper-Text Markup-Language".
  • Beim "Hypertext" geht's um nichts anderes als Text, der Verweise auf andere Dokumente enthält, die durch einen Automatismus im Dokumentbetrachter zum Nachladen des betreffenden Zieldokuments führen, wenn man sie "aktiviert". Ein Mechanismus, den heute jedes Kind kennt, das einen Internet-Browser bedienen kann, und zwar üblicherweise unter der Bezeichnung "Link". Ein Ding wo Sie draufklicken können.

    Diese Sache ist heutzutage dermaßen selbstverständlich, daß wir das nicht wiederkäuen. Wie man einen Link in HTML erzeugt, werden wir gleich kennenlernen als nur eines unter vielen anderen Elementen. Daß dieser Aspekt es in den Sprachnamen geschafft hatte, liegt nur daran, daß DAMALS, als das Zeug erfunden wurde, Dinge wie Links und das Nachladen von verlinkten Dokumenten noch lange nicht selbstverständlich waren, sondern gegenüber den damals noch vorherrschenden rein statischen, nur fürs Ausdrucken gedachten Dokumenten einen großen Fortschritt darstellten.

  • "Markup Language" (deutsch: "Markierungssprache") bedeutet, daß es um Anweisungen zur Darstellung von Text (oder irgendwelchem anderen Inhalt) geht, wobei man assoziieren soll, daß man Textabschnitte mit Anweisungen "markiert". Dabei geht es um ein extrem einfaches formales Grundprinzip mit
    • Marken (englisch: "HTML-Tags" genannt, auch "HTML-Elemente")
    • und um deren HTML-Attribute

HTML-Tags alias HTML-Elemente
Ein HTML-"Tag" (nochmal zu deutsch: "Markierung") ist ist eine Anweisung, die meistens einen Inhalt umschließt und dazu aus zwei Teilen - einem Start-Tag und einem Ende-Tag besteht. Die Anweisung beschreibt, wie der von ihr umschlossene Inhalt dargestellt werden soll. Dieser Inhalt kann (oft) aus Text bestehen, aber auch andere HTML-Anweisungen enthalten. Die Dinger kann man nämlich beliebig hierarchisch schachteln.

Eine Anweisung wird selbst speziell markiert, indem ihr Start- und ihr Ende-Tag in spitze Klammern (größer- und kleiner-Zeichen <>) eingeschlossen wird. Das sieht dann etwa so aus:
<Anweisung>Inhalt, der von der Anweisung betroffen ist</Anweisung>
Fahren Sie bitte mal mit der Maus über die Zeile und insbesondere über alles, was Ihnen irgendwie "hervorgehoben" vorkommt! Es sind "aufklappende Hinweise" (englisch: "popups") hinterlegt, die angezeigt werden, sobald die Maus kurz zur Ruhe kommt...

Ein konkretes Beispiel für eine konkrete Anweisung:
In diesem Satz sind <b>ein paar Worte fett</b> dargestellt.
("b" steht als Abkürzung für das englische "bold" alias "fett")

Wenn Sie draußen in der Öffentlichkeit unter Freaks über HTML-Anweisungen reden, benutzen Sie statt dem Begriff "Anweisung" den englischen Begriff "Tag" (zu deutsch "Marke" oder "Kennzeichen"). Dieser Name stammt von der Idee, daß typischerweise mit einer solchen Anweisung ein Abschnitt von Text "markiert" wird (wir haben es mit einer "markup language" zu tun!).

Falls eine solche Anweisung nur punktuelle Bedeutung hat, also nichts einrahmt, schreibt man bei einigen Anweisungen nicht ein öffnendes und ein schließendes Tag unmittelbar nebeneinander, sondern nur das öffnende Tag mit einem Schrägstrich vor der schließenden Klammer:
Ein Satz mit Zeilenumbruch<br/>
Danach geht es in der nächsten Zeile weiter.

Anweisungen kann man (beliebig tief) schachteln. Sie dürfen sich aber nicht überlappen!
Beispiel mit fett und kursiv geschriebenem Text:
<b><i>fett+kursiv</i></b>: fett+kursiv
Fehlerhaft: Ähnlich, aber fett- und kursiv-Abschnitt überlappend (HTML-syntaktisch unzulässig):
<b>fett <i>fett+kursiv</b> kursiv</i>: fett fett+kursiv kursiv
Dasselbe nochmal mit korrekter HTML-Syntax:
<b>fett <i>fett+kursiv</i></b><i> kursiv</i>: fett fett+kursiv kursiv
Während Browser in solch einfachen Fällen wie Kursiv-/Fettschrift einen Regelverstoß meist stillschweigend intern korrigieren und das bei eindeutigen Verhältnissen auch konsistent über verschiedene Browser hinweg tun können, wird die Sache sträflich wacklig und inkonsistent, wenn es um nicht mehr ganz so triviale Sachen geht. Besser, Sie gewöhnen sich von vornherein einen sauberen Stil an!

Übung zur Element-Schachtelung
Gute Gelegenheit übrigens, das Werkzeug "Firebug" kennenzulernen, welches Sie in der ersten Lektion installiert hatten:
  • Inspizieren Sie den fehlerhaft definierten Text mit Firebug und sehen Sie sich an, was der Browser draus gemacht hat!
  • Vergleichen Sie das mit der korrekten (nicht überlappenden) Version darunter! Was stellen Sie fest?
HTML-Attribute
Jeder (Start-)Anweisung können außerdem noch Attribute mitgegeben werden. Das geschieht mit folgender formalen Schreibweise:

<Anweisung Attributname="Attributwert">Inhalt</Anweisung>
(Sie dürfen wieder mit der Maus über die hervorgehobenen Sachen fahren...)

Ein konkretes Beispiel:
Hier wird <i title="Mit 'title' kann man eine Erläuterung einblenden lassen.">etwas wichtiges</i> per Maus-Over erläutert.
(Sie erinnern sich an das Spiel mit der Maus?... "i" steht hier als Abkürzung für das englische "italic" alias "kursiv")

Leerraum (englisch: "Whitespace")
Alle ASCII-Steuerzeichen und das Leerzeichen sind "Whitespace". Üblicherweise von der Tastatur aus zu erreichen und daher in Texten wiederzufinden sind
  • Tabulator
  • Zeilenvorschub
  • Wagenrücklauf
Der Sinn dieser Zeichen ergibt sich aus den historischen Ursprüngen: Diese Zeichen wurden ursprünglich in den Anfängen der Telegraphentechnik zur Steuerung von mechanischen Schreibmaschinen erfunden (siehe den Link zur Erläuterung).

In HTML werden alle Whitespaces zu Einheitsbrei vermanscht: Alle Whitespaces gelten als Leerzeichen. Mehrere zusammen stehende Leerzeichen werden zu einem zusammengefaßt.

Damit ist aber HTML gezwungen, eine eigene Steuerung für Tabulatoren und Zeilenvorschübe zu definieren:
  • Zeilenvorschübe hatten wir gerade im Vorbeigehen als HTML-Element "<br/>" kennengelernt.
  • Für Tabulatoren gibt es "echte" Tabellen.
Die normalen Whitespaces dürfen somit beliebig im HTML-Text verteilt werden, ohne daß das im Browser angezeigte Ergebnis der HTML-Seite dadurch beeinflußt wird. Insbesondere kann man den HTML-Text frei nach Geschmack und gutem Überblick formatieren.

Es gibt allerdings Ausnahmen: Das vordefinierte Element "<pre>" stellt seinen Inhalt mit den ursprünglichen, originalen Whitespaces dar. Mitunter ist sowas notwendig (Programmtext-Ansichten) oder erwünscht (Fehlersuche, ACSII-formatierte Texte, ASCII-Art). Mittels CSS kann man dieses Verhalten auch für jedes beliebige Element festlegen.

Sonderformen von HTML-Anweisungen
Kommentare: Man kann in HTML "Kommentare" einbauen, die einfach vom Browser ignoriert werden und dazu dienen können,
  • ausgefallene Formulierungen zu dokumentieren
  • HTML-Abschnitte im Quelltext deutlich erkennbar zu gliedern
  • HTML-Abschnitte zu Debug- oder Entwicklungszwecken temporär auszuschalten
Das sieht dann zum Beispiel so aus:
<!-- Hier steht eine Erklärung -->

Andere Sonderformen von HTML-Anweisungen werden Ihnen im Laufe der Zeit begegnen, an denen wir uns aber im Moment nicht verausgaben wollen. Wir haben wichtigeres vor und benötigen all den Schnickschnack noch lange nicht! Rechnen Sie einfach damit, daß Ihnen Ausdrücke der Art <!....> und <?....> (ohne Tag-Namen) über den Weg laufen werden und brechen Sie dann nicht in Mordgedanken aus. Die meisten Sachen dieser Art - außer Kommentare und PHP-Tags - werden Sie eh immer nur aus Vorlagen kopieren und sich nie wieder einen tieferen Kopf darum machen.

Weiterführendes
Was es im einzelnen für konkrete Anweisungen gibt, was die bedeuten, welche Attribute die haben können, welche Einschränkungen es eventuell für Inhalte gibt - das muß man zumindest entfernt ahnen, um HTML schreiben zu können. Alle konkreten Details findet man auf einen Klick hin im Internet in Referenzdokumentationen und Tutorials. Dazu kommen wir gleich im nächsten Abschnitt.

Zur allgemeinen Struktur könnte man noch eine halbe Ewigkeit weiter in Details gehen und/oder sich etwa über Unterschiede zwischen verschiedenen HTML-Dialekten auslassen. Ich empfehle Ihnen aber einfach zu Ihrem eigenen Vorteil, diese vollkommen sinnlose Vielfalt auf einen Bodensatz von zwingend notwendigen Ausdrucksmitteln zu beschränken, es sei denn, sie hätten es aus Altersgründen dringend nötig, Gedächtnistraining zu betreiben. Alles andere wäre nur sinnloses Zeit totschlagen mit überflüssigem Ballast.

Wer es absolut auf Teufel-komm-raus nicht aushält, findet in verschiedenen weiter unten zusammengestellten Tutorials oder natürlich in den Referenzdokumentationen Material bis zum Abwinken.

Übung zur HTML Grundstruktur
Ein HTML-Dokument erzeugen und ansehen
Was Sie eben kennengelernt haben, werden Sie jetzt selber machen...

Sie erinnern sich noch an das "It works" von gestern?
Dieser Text prangte Ihnen in der Top-Level-Indexdatei Ihres Webservers entgegen (anklicken!).

Erinnern Sie sich auch noch daran, wo diese Datei im Dateisystem Ihres PC's abgelegt war? (Übung aus Lektion 1)
Suchen Sie sich diese Datei erneut und nehmen Sie sie mit dem Texteditor in Bearbeitung!

Jetzt schauen wir mal, wie gut Sie bereits mit Texteditoren umgehen können...
Das Prinzip "kopieren und einfügen" Lage und Benutzung der Einfüge- und Löschtaste kennen Sie sicherlich schon von anderen Gelegenheiten.
Kopieren Sie sich die Texte der beiden konkreten Beispiele (1 und 2) von eben in Ihre HTML-Datei!
Und zwar fügen Sie sie unterhalb der Überschrift (<h1>It works!</h1>) ein!

Am Ende jeder Zeile fügen Sie noch ein: "<br/>"

Speichern Sie und schauen Sie sich das Ergebnis im Browser an!
(Sie HATTEN doch die Startseite in Ihren Lesezeichen abgelegt, oder?! Falls nicht, ist es JETZT an der Zeit, das zu tun...)

Das Ergebnis sollte in etwa so aussehen:

It works!

ein paar Worte fett
etwas wichtiges

Sie dürfen jetzt ein bißchen daran herumspielen:
  • Verändern Sie etwas und schauen Sie sich die Wirkung an!
  • Experimentieren Sie mit den Tags und Attributen, die Sie bis jetzt kennengelernt haben!
  • Versuchen Sie auch mal das Erzeugen von fehlerhaftem HTML, damit Sie später, wenn Sie WIRKLICH und UNBEABSICHTIGT mal fehlerhaftes HTML verbrechen, einigermaßen vorbereitet sind, was Sie erwartet!
Sie lernen durch Experimentieren!

Lassen Sie sich das ganze nochmal in Ruhe durch den Kopf gehen und machen Sie eine Pause!

HTML - Dokumentationen und Anleitungen

HTML ist eine standardisierte Sprache, wobei Standard in diesem Fall allerdings nicht heißt, daß sie ein für allemal auf einen bestimmten Zustand festgenagelt ist, sondern daß alle namhaften Programme, die in der Lage sind, HTML darzustellen, inzwischen diese Darstellung einheitlich zustande bringen.
Als Standard gibt's allerdings sehr wohl definierende Beschreibungen. Damit das vereinbar ist mit einer Weiterentwicklung des Standards, gibt's diesen in verschiedenen Versionen.

WIR werden uns in diesem Lehrgang auf die Version 4 beziehen, die im Jahre 1999 nach längerem Reifeprozeß beschlossen wurde und sich als immerhin dermaßen sinnvoll erwiesen hat, daß sie seit 12 Jahren eine stabile Basis für das gesamte Internet darstellt. Festgenagelt ist diese Version durch das Dokument "HTML 4.01 Specification" vom sogenannten "World Wide Web Consortium", abgekürzt "W3C" (-> Wikipedia-Artikel).

(Für alle, die jetzt über angebliche Englisch-Schwächen stöhnen: Einfach mal Google nach was deutschem fragen! Versuchen Sie sich mal daran!)

Für alle, die weitergehende Experimente unternehmen möchten und dazu deutsche Anleitungen suchen, sei eine der Tutorial-Sammlungen von ans Herz gelegt... (EINE davon reicht! Lesezeichen im Browser anlegen!)


Es gibt in HTML einerseits eine ganze Menge von Anweisungen und eine noch größere Menge von Attributen, andererseits sind das SOVIEL nun auch wieder nicht - zumindest solange wir uns auf den Standard 4 beschränken: Insgesamt sind rund 90 Anweisungen und rund 120 Attribute definiert.
Wenn man von denen pro Tag nur je 5 Stück lernen würde, wäre man in drei Wochen damit durch.

ABER: Man benötigt die meisten davon überhaupt nicht! Die meisten sind nämlich nur unter besonderen, ausgefallenen Situationen verwendbar, denen SIE in IHREM Leben eventuell niemals begegnen werden. Tatsächlich können Sie HTML in zwei Tagen soweit erlernen, daß Sie jedes übliche Textdokument, wie Sie es z.B. aus Word gewohnt sind, erzeugen können.

Sie lernen dazu die Anweisungen und Attribute natürlich niemals auswendig! Sowas wäre einfach Nonsense in einer Welt, in der man JEDE Information auf einen Mausklick hin in die Hand gedrückt bekommen kann.

WAS Sie sehr wohl zwar nicht auswendig, aber in Perfektion zu lernen haben (und zwar JETZT und SOFORT), ist die Benutzung der Google-Suche in Ihrem Browser. Falls Sie es geschafft haben sollten, diese in Ihrem bisherigen Leben zu ignorieren. Damit ist jetzt Schluß, basta!
UND Sie lernen bitte, die Lesezeichen Ihres Browsers zu verwenden. Und darin Ordnung zu halten, indem Sie sie in Verzeichnissen sortieren! Das ist elementarste Grundlage jedes weiteren Lernens von Dokumentbeschreibungs- und Programmiersprachen.
Wenn Sie DAS einmal gefressen haben, ist alles weitere nur noch "learning by doing" (lernen durch anwenden) oder auch "Lernen durch Spielen".

Übung zu HTML-Dokumentationen und Anleitungen
1. Anlegen und Benutzung von Lesezeichen im Browser
Aufgabe: Legen Sie in Ihrem Browser in den Lesezeichen ein Verzeichnis für Dokumentationen an!
(Sie wissen im Moment gar nicht, wovon ich rede? Lernen Sie, die Suchbox Ihres Browsers zu benutzen! Suchen Sie nach "firefox lesezeichen verzeichnis anlegen"!)
Legen Sie in diesem Verzeichnis Lesezeichen zur HTML-Dokumentation 4.01 an!
Mindestens zu: Wer möchte, in Deutsch!
(Rechtsklick hier auf die Links, dann "Lesezeichen anlegen" und dann deren Verzeichnis einstellen!)

2. Benutzung und Verstehen von Online-Dokumentationen
Wir sind in unseren Experimenten bisher vier Anweisungen begegnet, deren Bedeutung sich intuitiv aus dem Zusammenhang oder durch Hingucken erschlossen hat:
  • <b>old (Fettschrift)
  • <i>talic (Kursivschrift)
  • <h1>eader (Überschrift der Ebene 1)
  • <br/>eak (Zeilenumbruch)
Außerdem haben wir bisher ein Attribut kennengelernt:
  • title (Anmerkung zu einem sichtbaren Elment, die eingeblendet wird, wenn man die Maus draufhält)

Aufgabe: Versuchen Sie sich jetzt daran, Detailinformationen über das "title"-Attribut herauszufinden! Nutzen Sie dazu das Gesamtinhaltsverzeichnis zum HTML, welches Sie inzwischen in Ihren Lesezeichen anklicken können sollten!
(Ich habe aus dem Text hier Links gezielt herausgehalten, damit Sie gezwungen sind, entweder Ihre eigenen Browser-Lesezeichen oder eine Suchmaschine zu benutzen oder auf der Lehrgangsseite hier zu navigieren. Alles zu Ihrem Besten!)

Tipp: Suchen im Browser-Fenster...
Statt in einem großen Dokument (wie das Inhaltsverzeichnis eines ist) mühsam auf Händen kriechend nach dem Stichwort zu suchen, gewöhnen Sie sich ab sofort an, den Computer selber suchen zu lassen!

Drücken Sie (im Gesamtinhaltsverzeichnis stehend) "Strg - F" (Finden)!
Tippen Sie in die aufgegangene Suchbox "title" ein!
Lassen Sie "weiter" suchen, falls die gefundene Stelle noch nicht zusagt!

Suchen Sie auf diese Weise nach einer Stelle, wo das Attribut "title" näher erläutert wird!
Sie sollten an sich auf Anhieb an der richtigen Stelle landen!
Klicken Sie (auf den passenden Eintrag im Inhaltsverzeichnis), um zur Beschreibung des Attributs zu gelangen!

Sie dürfen einen kurzen Blick in die Beschreibung werfen, um sich zu vergewissern, daß Sie auch tatsächlich richtig getroffen haben. Aber näher damit befassen wollen wir uns jetzt erstmal nicht.
WICHTIG war hieran das Prinzip, wie Sie sehr schnell eine benötigte Information gefunden haben, wenn Sie nur wissen, wie das Element oder Attribut heißt!

Noch eine Aufgabe: Suche Sie sich auf gleiche Weise Informationen zum "h1"!
Zack-zack, los geht's! Mit zwei Maus- und drei Tastenklicks sollten Sie am Ziel stehen!

Verstehen der formalen Beschreibungen

Jetzt fehlt noch eine Kleinigkeit zum Glück: Was Sie beim "H1" ganz vorn in der Beschreibung sehen, ist auf den ersten Blick alles andere als intuitiv verständlich. Eher cryptisch.

Das ist aber überhaupt nicht weiter schlimm, weil Sie die formale cryptische Darstellung in der Praxis nie konsultieren brauchen werden. Die ist eigentlich eh nur für Computer zur formalen, programmierten Auswertung gedacht. Die beschreibt nichts weiter als die zulässigen Attribute und ob man Start UND Ende-Tag oder NUR ein Start-Tag schreiben soll und eventuelle Einschränkungen, was zwischen Start- und Ende-Tag gepackt werden darf.
Da es bei DIESEN Regeln aber hochgradig systematisch zugeht, brauchen Sie nur eine Handvoll Regeln überhaupt erlernen, und DIE bekommen Sie von ganz allein im Vorbeigehen durch "spielerisches Lernen beim Anwenden" mit.

Außerdem steht all das Zeug nochmal ausführlichst in normaler Umgangssprache und mit vielen Beispielen erläutert im darauf folgenden Text. Also: Bleiben Sie locker! Wenn Sie sich erstmal ein wenig hineingespielt haben, wird Ihnen die Bedeutung dieser formalen Ausdrücke namens "Document Type Definition" von ganz allein klar. Gewöhnen Sie sich diesbezüglich dasselbe an, was Sie beim Fernsehen, Schaufensterbummel und Internetsurfen mit Werbung machen: Strikt ignorieren!

3. Benutzen von Online-Anleitungen ("Tutorials")
Zum Einstieg ist es günstig, sich ein paar Handvoll Anregungen zu holen. Die bekommt man in Anleitungen alias "Lehrgängen" alias "Tutorials". Jedes Tutorial verfolgt da eine eigene Philosophie und Zielstellung. Hier im Lehrgang bekommen Sie einige mit einer ganz bestimmten Zielstellung (wir wollen in einem Crash-Kurs ein Online-Spiel bauen lernen). Der eine oder andere wird aber an weiteregehendem interessiert sein.

Am Anfang dieses Kapitels waren Links zu verschiedenen Tutorials aufgelistet, von denen Sie sich bei weitergehendem Interesse eines raussuchen, das Ihnen am besten zusagt. Ich finde alle aufgelisteten gut und will Ihnen diese Entscheidung deshalb nicht abnehmen.

Aufgabe: Versuchen Sie sich abschließend nochmal daran, dieselbe Information wie vorhin zum "H1" aus der Dokumentation zu greifen!

Es sollte klar werden, daß
  • "HTML.net" als Tutorial (analog dem hier vorliegenden Material) brauchbar ist, aber nicht zum Nachschlagen.
  • "SelfHTML" insbesodere für deutsche Einsteiger recht gut als Nachschlagwerk, aber dank vielen Beispielen auch als Tutorial brauchbar ist.
  • "W3C.org" allerdings die ultimative, vollständige und bestzugängliche Referenz zum Nachschlagen darstellt, die, wenn man sich einmal an das Ignorieren der auf den ersten Blick störenden formellen Anteile gewöhnt hat, dank ausführlicher Beispiele auch als Tutorial brauchbar ist.

Aufgabe: Legen Sie sich zu den hier empfohlenen Seiten Lesezeichen in Ihren Browser!
Legen Sie dazu ein extra Verzeichnis (zum Beispiel "Doks und Tutorials") von Lesezeichen an! (Halten Sie Ordnung!)
Lassen Sie sich das Durchstöbern für später, wenn Sie Lust und Zeit haben, an ihren eigenen Websites zu basteln! Für's erste benötigen wir noch keine tiefschürfenden Kenntnisse, die würden uns nur zutexten und überlasten. Später dagegen werden Sie von ganz allein danach lechzen und sich ärgern, wenn Sie dann erst wieder die Links zu den Tutorials heraussuchen müssen. Betrachten Sie Ihre Lesezeichen als persönliche Suchmaschine!

Gönnen Sie sich jetzt eine Pause!

Orientierung unter den HTML - Ausdrucksmitteln

Nachdem Sie jetzt wissen, wie Sie sich Informationen über restlos ALLES rund um HTML mit wenigen Klicks beschaffen können, könnte ich Sie schon zum Selbstlernen entlassen. Denn in diesem Lehrgang ist es nicht das Ziel, Sie zum Perfektionisten in Sachen HTML auszubilden, sondern Ihnen das Verständnis des Grundprinzips zu vermitteln, so daß sie von jetzt ab alles, was Ihnen mit HTML über den Weg laufen wird, verstehen können.

Und es geht darum, daß Sie zumindest erahnen können, in welche Richtung Sie effektiv weiterlernen müßten, wenn Sie ein umzusetzendes Ziel vor Augen haben und dafür die passenden Mittel suchen. Für diesen letzten Teil sehen wir uns jetzt ganz grob die Klassen der Ausdrucksmittel an, in die sich HTML gliedern läßt, und welchen Sinn die für uns auf Einsteigerlevel ergeben...

HTML-Elemente
Das Inhaltsverzeichnis der HTML 4.01 Referenzdokumentation ist im wesentlichen nach Gruppen von HTML-Elementen gegliedert. Ich empfehle Ihnen, dieses Inhaltsverzeichnis in einem Browser-Lesezeichen bereitzuhalten, weil Sie über dieses sehr schnell an die Beschreibungen der HTML-Elemente herankommen.
Dieses Inhaltsverzeichnis hat für Sie als Einsteiger folgende Relevanz:

  • Themen 1 bis 6: Ignorieren!
    ...weil dort weitgehend nur geschwurbelt wird.
    Soweit dort relevante Sachen vorkommen, werden die eh aus den anderen Beschreibungen heraus verlinkt.

  • Thema 7 "global structure": Relevant
    ...haben Sie aber schon grob durch Anschauung kennengelernt. Die relevanten Details dieses Themas sind:
    • "Meta Data": wird dann interessant, wenn Sie auf Zeichensatzprobleme stoßen, Suchmaschinen füttern wollen oder Seiten automatisch aktualisieren wollen - mit anderen Worten: sobald Sie fortgeschritten sind und langsam zum Spezialisten werden

    • div und span sowie id und class: Wichtig! Das ist das Schweizer Taschenmesser der HTML-Designer: eine Verallgemeinerung von sämtlichem HTML. DIV und SPAN dienen eigentlich (ursprünglich) nur zum verallgemeinerten Gruppieren von anderen Elementen, wurden aber durch Kombination von HTML mit "CSS" (zu diesem kommen wir noch nebenbei) zu einer Art Universalwerkzeug: Man kann mit ihnen vom Aussehen her jedes beliebige andere HTML-Element nachbilden. Wobei die Ausdrucksfähigkeit von CSS wiederum eigentlich dazu führt, daß man generell JEDES beliebige HTML-Element wie JEDES beliebige andere aussehen lassen kann. Dennoch hat sich die Benutzung von DIV und SPAN für solche Chamäleon-Zwecke eingebürgert, da diese wie leere Zeichenblätter sind, während man bei allen anderen Elementen meistens vordefinierte, aber unerwünschte Erscheinungen erstmal "ausradieren" müßte.

      Die Attribute "id" und "class" sind die Bindemittel zwischen HTML und CSS. Wobei die Ausdrucksfähigkeit von CSS eigentlich gestattet, JEDES beliebige HTML-Attribut als Bindemittel zu benutzen. Die Attribute "id" und "class" sind allerdings besonders einfach zu benutzen und deshalb bevorzugt.

      Man könnte auf die Frage kommen, WARUM man HTML-Elemente von ihrem Aussehen her beliebig verändern können sollte. Na ja: Das sind halt Anforderungen von Designern. Eine Reihe von HTML-Elementen haben bestimmte spezielle Funktionen. Diese Funktionen werden durch CSS nicht beeinflußt. Und Designer möchten nun mal hin und wieder, daß Elemente mit ganz bestimmten Funktionen ganz bestimmte Erscheinungsbilder bekommen - ganz nach Geschmack der Designer.
      DAZU gibt's das CSS und die hier erwähnten Werkzeuge namens "DIV", "SPAN", "id" und "class".

    • Überschriften kennen Sie bereits. Sie sind wichtige Gliederungsmittel. Sie werden sie massiv verwenden. Es ist aber nichts weiter besonderes an ihnen.
    • Die restlichen Kleinigkeiten behandeln Sie falls benötigt. (also: erstmal ignorieren!)

  • Thema 8: Ignorieren!
    Ist für Spezialisten, die chinesisch oder arabisch schreiben wollen!

  • Thema 9 und 15: Wichtig: Text-Auszeichnungen.
    Beide von der Nummer her weit auseinanderliegende Themen gehören logisch zusammen. Sie werden nur einige wenige von den Auszeichnungsmöglichkeiten tatsächlich in der Praxius benötigen und noch weniger tatsächlich häufig anwenden.

    Zum einen sind die hier gebotenen Auszeichnungen nur ein unendlich kleiner Bruchteil der unendlich vielfältigen Welt des Dokumentendesigns und eigentlich nur für eine ganz spezielle ausgewählte Klasse von Dokumenten vorgesehen - namentlich wissenschaftliche Abhandlungen. Also Dinge für Leute, die an Schulen und Universitäten arbeiten. Und zweitens werden Sie mit den standardmäßigen Designvorgaben der Browserhersteller eh praktisch nie zufrieden sein und Hand anlegen wollen und müssen. Und wenn Sie eh schon dabei sind, das Aussehen von ihren Ergüssen selber durchzudefinieren, können Sie auch gleich systematisch von einem unbelasteten, leeren Design ausgehen wie es die Elemente DIV und SPAN darstellen, weil Sie sich sonst nur sinnlos oft um das BESEITIGEN UNGEWOLLTER VORDEFINIERTER Effekte kümmern müßten.

    Andererseits sind ein paar wenige Auszeichnungsmittel wirklich sinnvoll, weil die sich nicht umsonst seit Jahrhunderten im Schriftsatz als universelle Werkzeuge zur Hervorhebung etabliert haben: <b>old, <i>talic und seltener <small>, <big>, <sup>er und <sub> sowie der explizit gesetzte Zeilenumbruch <br/> sind Auszeichnungsmittel, die Sie mit Sicherheit gern mal eben im Vorbeigehen einsetzen werden, ohne daß Sie dazu großartige Stildefinitionen erfinden wollen. Weil es um elementare, weltweit anerkannte, partielle Modifikationen des Schriftbildes geht, deren Bedeutung international und historisch einheitlich anerkannt ist und die sich nahtlos in alle sonstigen Stile einbetten lassen. Statt mit Zeilenumbrüchen KANN man sich auch angewöhnen, mit Paragraphen <p> zu arbeiten; man KANN DANN aber auch gleich aufs allgemeinere DIV umsteigen.

    Ansonsten werden Sie ab und zu vielleicht mal <pre> für Programmtexte gut gebrauchen können, weil die bis heute üblichen Browser NUR für DAMIT gekennzeichnete Abschnitte ANSTÄNDIGES Copy & Paste mit Beibehaltung der Zeilenumbrüche und Tabulatoren gestatten (probieren Sie mal aus, die folgenden beiden Abschnitte in Ihren Texteditor zu kopieren, dann werden Sie merken, was ich meine). Und das läßt sich bislang durch nichts beeinflussen.

    Beispiele:
    <code> <div class="kettennavigation"> <div class="l"><a href="../?thema=A-PHP-HTML_1">zurück</a></div> <div class="m"><a href="../?thema=A-PHP-HTML">hoch</a></div> <div class="r"><a href="../?thema=A-PHP-HTML_3">vorwärts</a></div> </div> </code>

    <pre>
    	<div class="kettennavigation">
    		<div class="l"><a href="../?thema=A-PHP-HTML_1">zurück</a></div>
    		<div class="m"><a href="../?thema=A-PHP-HTML">hoch</a></div>
    		<div class="r"><a href="../?thema=A-PHP-HTML_3">vorwärts</a></div>
    	</div>
    </pre>
    

    Alle anderen Elemente dieser Abschnitte werden Sie ignorieren können. Wobei natürlich niemand verbietet, daß Sie sie doch mal verwenden.

  • Thema 10 "Listen" und Thema 11 "Tabellen": Wichtig!
    Das sind zwei praktisch überaus nützliche Ausdrucksmittel, die Ihnen im alltäglichen Dokumenteschreiben fortlaufend unterkommen werden. Neben Überschriften sind dies die wichtigsten Gliederungsmittel. Das konkrete Aussehen stellt man heutzutage üblicherweise mit Hilfe von CSS ein (daß heißt, man benutzt die grundlegenden HTML-Elemente ohne jedweden Schnickschnack von Attributen - jene dürfen Sie ignorieren!).

  • Thema 12 "Links": Elementar!
    Das ist der "Hypertext" im Namen des HTML. Es ist DIE hervorragende ursächliche Eigenschaft, WEGEN der HTML mal entwickelt wurde und wegen der HTML das Rückgrat der Internet-Dokumente bildet. Auch hier lassen Sie die Details erstmal weg: Im Alltag werden für Sie die Links in ihrer simplen Grundform relevant sein. Das, was man auf der ganzen Welt üblicherweise mit "Link" MEINT, HEISST in HTML übrigens "Anchor" (abgekürzt zu <a>), während das, was in HTML "Link" HEISST, von der ganzen Welt ignoriert wird (die "Links" - so wie in der Dokumentation beschrieben - haben sich nie in der Breite durchgesetzt).

  • Thema 13 Objects, Images, and Applets: Ferner liefen...
    Dürfen Sie aber erstmal bis auf die Images (Bilder) ignorieren, weil das Techniken für Fortgeschrittene sind, die zusätzliche Systeme (Plugins) und deren Konfiguration und Programmierung erfordern. Die Bilder werden Sie wieder mal in ihrer schnöden Grundform benutzen, weil heutzutage jedweder Schnickschnack mittels CSS reingebracht wird.

  • Thema 14 "StyleSheets": Wichtig!
    Gibt einen Minimaleinstieg in das Prinzip von "Cascading Style Sheets" (CSS) und zeigt, wie man CSS in HTML einbaut. CSS ist eine eigenständige Auszeichnungssprache, die auf HTML draufgesetzt werden kann und mit Hilfe derer HTML-Elemente vom optischen Aussehen her komplett frei definiert werden können (einschließlich dessen, daß man jedes Element als jedes andere ausgeben kann - von der Optik her zumindest, natürlich nicht nach eventuellen Funktionalitäten).

    CSS ist umfangreicher, allgemeingültiger, systematischer und vielfältiger als HTML. Es ermöglicht beliebig detailliertes Konfigurieren des Erscheinungsbildes, aber dabei gleichzeitig die Trennung des struktur-, inhalts- und funktionsgebenden HTML von dieser Definition des Erscheinungsbildes.

    Das eröffnet krasse Gestaltungsmöglichkeiten, die soweit gehen, daß jeder Internet-Besucher, der Ahnung davon hat, sich das Aussehen des Internets individuell nach seinem Geschmack zurechtbiegen kann. Um einen Eindruck von den Möglichkeiten zu bekommen, statten Sie der Seite Zen Garden einen Besuch ab und schalten Sie die möglichen Styles durch!
    Das ist ALTE Technik von Anfang dieses Jahrhunderts (die Seite stammt aus dem Jahr 2001).

    Eventuell fällt Ihnen auf, daß es IMMER um den EXAKT SELBEN HTML-Text geht, der NUR anders ausgezeichnet wird.
    Und nachdem Ihnen die Bedeutung dessen in vollem Umfang klar geworden ist, vergessen Sie nicht, den Mund wieder zu schließen!

    Es geht auch profaner: Falls Sie die Schnauze von Werbemüll voll haben, können Sie mit Hilfe von eigenen CSS-Zusätzen Werbung ausschalten. Überall. Zuverlässig. Treffsicher. Ganz nach eigenem Geschmack. OHNE dafür eine kostenpflichtige Mitgliedschaft erwerben zu müssen.

    Und es geht noch profaner: Schalten Sie mal Ihren Firebug (im von Ihnen jetzt hoffentlich benutzten Firefox) ein, indem Sie irgendwo auf einer Internet-Seite einen Rechtsklick machen und "Element untersuchen" anklicken! Was Sie daraufhin zu Gesicht bekommen (nehmen Sie sich ruhig die Zeit, mal ein wenig in der Anzeige herumzuspielen!), wird mit CSS gemacht.

    Die Beispiele sollen zum Anfüttern genügen, um Ihnen klarzumachen, daß und warum CSS heutzutage die bevorzugte Art ist, das Aussehen von Internetseiten (also HTML) zu definieren.

    WIR werden HIER im Lehrgang CSS sehr stiefmütterlich am Rande behandeln, weil wir von der Zeit her unmöglich mehr hineinpressen können. Als Anregung und Orientierung wird es aber seinen Zweck erfüllen. Bei weiterem Interesse gibt es spezielle weiterführende Kurse...

  • Thema 16 "Frames": Ferner liefen...
    Dürfen Sie für den Moment aber ignorieren. Ist für Fortgeschrittene gedacht, die Inhalte mehrerer eigentlich voneinander unabhängiger Webseiten (deren HTML- und CSS-Code und sonstiges Zeugs auch zueinander inkompatibel ist) unter einer HTML-Seite vereinen wollen. Kann heutzutage von verrückten Hamburger Richtern als Straftat zu-rechts-gebogen werden. Lassen Sie vorläufig die Finger davon!

  • Thema 17 "Forms": Elementar!
    Neben Links, die man anklickt, sind Formulare das Hauptinstrument zum Datenaustausch mit Servern im Internet. Kein Shop und kein Forum funktioniert ohne Formular.

    Formulare werden sich zum wichtigsten Element in diesem Lehrgang entwickeln. Alles, was Sie bis jetzt über HTML und CSS gehört haben, wird bei uns nur Spielerei am Rand sein, während es EIGENTLICH um den Einstieg ins Programmieren von Web-Anwendungen geht, und DABEI geht es um nichts als Formulare und Links. Und Programme auf Server-Seite, um dieses Zeug zu verarbeiten.
    Auch hier gibts ein paar Details in HTML, die dem optischen Erscheinungsbild dienen (zum Beispiel "Labels"). Bei denen gilt wie überall: Die dürfen Sie ignorieren! Sowas macht man mit CSS.

  • Thema 18 "Script": Erstmal Ignorieren! (Später: Relevant)
    In der Praxis geht es hierbei um nichts anderes als Javascript. Programme, die im Browser eines Internet-Besuchers laufen, können zur Verbesserung der Bedienbarkeit einer Seite beitragen.

    Jedoch wird in der Mehrzahl aller Fälle Javascipt nur für Spielereien eingesetzt, die gar nichts mit Benutzbarkeit und Komfort zu tun haben, sondern nur mit blinkendem, irritierendem Verrücktmachen des Besuchers. Das hat mit der Spezifik des typischen Einstiegs von Anfängern in diese Programmiersprache zu tun: Wer sich nach "Programmierung" im Zusammenhang mit Webseiten umguckt, landet mit fast 100%iger Treffsicherheit auf Javascript. Ein Anfänger aber KANN keine Fähigkeiten im Beurteilen des Sinns von Programmschnipseln und Effekten besitzen, die ihm im Laufe der Beschäftigung mit einer Programmiersprache über den Weg laufen. Da aber bei Javascript jene Beispiele, die vollkommen sinn- und nutzlos sind, naturgemäß eine überlegene Einfachheit und Verstehbarkeit aufweisen, landen Javascript-Anfänger regelmäßig bei Programmierfertigkeiten, die zwar großartige Spielereien sind und eventuell den Mund offen stehen lassen, aber völlig sinn- und nutzlos.

    Dafür haben jene Programmierer typischerweise keinen blassen Schimmer von der Verarbeitung ihrer ach-so-toll schicki-micki-aufgemotzten Formulare. Sie können keine Internet-Anwendung zur Funktion bringen, die über mehr als Spielerei für den einzelnen Internet-Besucher auf seinem eigenen Browser hinausgeht.

    Noch bedeutend schlimmer: Sie tendieren über alle Maßen dazu, Webseiten unter dem Aspekt der Sicherheit der Benutzer gegen Böslinge so unsicher wie nur irgend möglich zu machen. Man kann sie guten Gewissens als Wegbereiter der Internet-Viren einstufen. Auf den höchstdotierten Hacker-Wettbewerben der Anti-Viren-Hersteller ist regelmäßig Javascript an den Exploits beteiligt. Wer es in seinem Browser abschaltet, hat für sich die Mehrzahl der frei im Internet herumgeisternden Exploits abgeschaltet. Wir könnten hier beginnen, Romane darüber zu verfassen und Riesen-Diskussionen der Art "aber es machen ja doch alle so und es geht deshalb gar nicht anders" vom Zaun zu treten, ändern aber damit am nackten Fakt nichts.

    Das Internet auf der anderen Seite lebt wesentlich davon, daß Menschen zusammenwirken, daß sie sich in Foren, in Shops, auf Video- und Nachrichtenportalen und in Spielen treffen. Noch häufiger aber in sozialen Portalen, wo gleich mehrere dieser Anwendungsklassen vereint sind (ohne Anspruch auf Vollständigkeit der Aufzählung). Dieses Zusammenwirken wird von Javascript überhaput nicht bedient.
    Javascript für sich allein benötigt kein Internet und nützt dem Internet nichts. Weil Javascript-Programmiereinsteiger von dem Multi-User-Aspekt und dem Browser-Server-Zusammenwirken, die DAS ZENTRALE kritische Merkmal des Internets sind, keinen blassen Schimmer haben. Wer Javascript nicht zur Unterstützung von Server-Abfragen einsetzt, taugt bestenfalls als Programmierer von autistischen Ein-Mann-Browserspielen etwas (was auch seine Bedeutung hat, aber nur eine winzige Nische ist).

    Später, zweckmäßig eingesetzt in Form von sogenanntem "Ajax", wird Javascript ihre Webanwendungen dahingehend unterstützen, daß deren Reaktion beschleunigt wird. Und eventuell werden sie es auch mal einsetzen, um komplexere, selbständig im Browser laufende Programme umzusetzen.

    Aus diesem Grund bekommen Sie in diesem Einsteiger-Lehrgang auch kein Javascript geboten, sondern erstmal die Server-Programmierung. Damit werden gleich beim Einstieg die Prioritäten zurechtgerückt.

  • Rest (Themen 19 ff.): Ignorieren!
    Sie finden hier in extremer Weise formalisierte Definitionen von HTML, die in erster Linie für Programmierer gedacht sind, die Prüfprogramme (HTML-Validisierer) oder auch Syntax-Highlighter oder Auto-Vervollständiger und dergleichen Scherze bauen und dabei Handarbeit sparen möchten.

Inline- und Block-Elemente
In der Beschreibung von HTML-Elementen ist oft davon zu lesen, daß einige Elemente "inline" und andere Elemente "block" sind.

"Inline" bedeutet nichts weiter, als daß Text (und in diesen "inline" "eingebettete" Elemente) "fließend" angeordnet wird - daß heißt, daß er auf der verfügbaren Seitenbreite horizontal nebeneinander gesetzt wird, solange Platz ist, und dann ein "weicher" Zeilenumbruch an der nächsten Wortgrenze gesetzt wird, womit es in der nächsten Zeile weitergeht. Jedes Element von diesem "Fließtext" bekommt dabei den minimalen horizontalen Platz zugewiesen, der notwendig ist, um das Element (den Buchstaben oder das Bildchen) vollständig anzeigen zu können.

"Block" bedeutet dagegen, daß ein Element eine komplette Zeile einnimmt. Üblicherweise wird es dazu auf die gesamte Zeilenbreite gedehnt.

Und in CSS gibt es die Möglichkeit, beides völlig frei festzulegen und sogar hierarchisch zu mischen.

In der Dokumentation ist an ein paar Stellen zu lesen, daß man "inline" in "block" packen könne, aber niemals "block" in "inline"...
Diese Aussage hat NICHTS(!) zu tun mit dem Inhalt und der Struktur von HTML-Dokumenten.
Sie gilt ausschließlich für den Layout-Prozeß im Browser.
Und ist somit durchaus relevant für Layout-Attribute, die man üblicherweise mit CSS beifügt.

Beim Layout bedeutet jenes "niemals block in inline", daß immer beim Auftreten eines Block-Elements ein eventuell bis dorthin wirkender inline-Fluß unterbrochen wird. Und das ist mitnichten mystisch: Assoziieren Sie "block" einfach mit "breit" und "platzfressend", dann schlußfolgert Ihr gesunder Menschenverstand genau das, was tatsächlich in der Praxis dabei hinten herauskommt.

Für das Schreiben von HTML ist das Zeug also Mumpitz! Für das Layouten (mit CSS) ist es relevant, aber in diesem Lehrgang erstmal Nebensache.

Allgemeines zu HTML-Attributen
In der HTML-Spezifikation stehen zu jedem HTML-Element (alias HTML-Tag) eine Vielzahl von MÖGLICHEN Attributen beschrieben. Diese stammen fast alle aus einer Zeit, in der CSS noch nicht existierte bzw. in den Kinderschuhen steckte.

Heutzutage fahren Sie viel besser, wenn Sie alle visuellen Merkmale mit Hilfe von CSS definieren, weil Sie sich damit das Zumüllen Ihres HTML-Textes ersparen und das ganze viel systematischer und damit mit weniger Lernarbeit über die Bühne geht.

Wir werden in diesem Lehrgang CSS nur am Rande mitgehen lassen, um unsere Aufmerksamkeit auf die Einführung in die Programmierung konzentriert zu lassen. Aber die veralteten HTML-Attribute brauchen wir deshalb immer noch nicht. Sie würden uns nur noch viel stärker als CSS und völlig sinnlos belasten.

Nur die folgenden paar Attribute werden häufig notwendig sein:
  • id : Zur eindeutigen Kennzeichnung von Elementen auf einer Seite
  • class : Zur Kennzeichnung von Element-Typen (Klassen)
  • title : Zur Erläuterung von Texten mit Hilfe von Popups
  • href : das Ziel eines Links
  • src : die Quelle eines Elements

In Formularen werden Sie ab und zu benötigen (dazu kommen wir noch im Lehrgang):
  • action : Ziel des Formulars (analog href)
  • method : Falls die Formular-Inhalte nicht per URL gesendet werden sollen
  • name : Name eines Formularelements, unter dem sein Inhalt dem Ziel gemeldet wird
  • type : Typ eines Formularelements (Texteingabe/Auswahl/Schalter)
  • value : der aktuelle Zustand (Wert) eines Formular-Elements im allgemeinen
  • checked : der aktuelle Zustand speziell für ein Checkbox-Element
  • selected : der aktuelle Zustand speziell für ein Auswahl-Element
  • multiple : Falls eine Auswahlbox Mehrfachauswahl gestatten soll
  • disabled : Ein inaktiv geschaltetes Wozu sowas?! Wozu ein Formularelement anzeigen, wenn es doch gar nicht benutzt werden soll?

    Es handelt sich hier um eine Maßnahme zur Verbesserung der Ergonomie:

    Wenn in einem variablen Formular (oder Menü) am laufenden Band die Einträge ihre Positionen wechseln, weil dauernd irgendwelche Elemente rausgeworfen werden, die gerade nicht benötigt werden, bedeutet das, daß selbst Freaks, die die betreffende Software ansonsten im Schlaf beherrschen, Schwierigkeiten haben, die Lage der Elemente dieses Formulars (oder Menüs) vorherzusehen. Und daher gezwungen wären, für jeden Klick, den sie im Formular (oder Menü) machen wollen, dieses erstmal auf seinen Inhalt zu scannen, bevor sie sich TRAUEN DÜRFEN zu klicken. Weil bei Falschklick mitunter ja auch schreckliche Dinge passieren könnten (löschen statt einfügen, beispielsweise, oder Festplatte formatieren statt auf Fehler zu scannen - um mal ein paar krasse Ideen kreischend an den Haaren herbeizuzerren).

    Um solch katastrophales Arbeiten zu vermeiden, aber dennoch Formularelemente oder Menüpunkte abzuschalten, die im aktuellen Kontext keinen Sinn machen würden, gibt es dieses Attribut namens "disabled".
    Formularelement

In Tabellen werden Sie ab und zu sinnvoll nutzen (obwohl auch in CSS möglich, dort aber komplizierter):
  • colspan : Zellen über mehrere Spalten zusammenschließen
  • rowspan : Zellen über mehrere Zeilen zusammenschließen

Für Links und Formularelemente werden Sie selten verwenden wollen:
  • target : für Links: wenn diese in einem neuen/anderen Fenster geöffnet werden sollen
  • tabindex : nur für häufig wiederholt zu verwendende Formulare: Navigation mit Tab-Taste
  • accesskey : nur für häufig wiederholt zu verwendende Formulare: Navigation mit Hotkeys

In HTML-Headern wird Ihnen begegnen (wobei Sie das in aller Regel einmalig in Vorlagen ablegen und nie wieder im Leben auch nur anfassen):
  • http-equiv : Name eines Header-Attributes
  • content : Wert eines Header-Attributes
  • media : Medientyp einer eingebundenen CSS-Definition

Ansonsten gibt es ein paar besondere Attribute für ein paar besondere Elemente und Situationen, die nur wenige von Ihnen und diejenigen auch erst dann nutzen werden, wenn sie das Fortgeschrittenen-Stadium erreicht haben. Die werden dann auch keine Hürde mehr darstellen (Image-Maps, Java-Applets, Flash-Objekte und dergleichen).

Eine gesonderte Gruppe von Attributen (sogenannte "Ereignisse") werden relevant, falls Sie die HTML-Seite mit Javascript aufhübschen wollen. Das ist aber ein ganz anderes Thema, welches wir hier komplett ignorieren.

Abschließende Anmerkung:
Wie Sie sehen, schrumpft die Masse des sinnvoll nutzbaren HTML auf ganze 5 (!) wichtige Themen zusammen, die Masse der zu beherrschenden häufig verwendeten HTML-Attribute bei CSS-Benutzung auf rund 14 und eine weitere Handvoll, von der man wissen sollte, daß es sie gibt. DESHALB schafft man es, HTML praktisch sinnvoll in zwei Tagen zu erlernen. Gut, zugegeben: CSS muß man sich dann auch noch antun. Für dieses kommen nochmal 3 Tage drauf, weil es zwar sehr mächtig, aber netterweise auch sehr systematisch ist, so daß man HTML+CSS in einer Woche soweit drauf hat, daß man es selbständig für restlos alle Dokumente aus dem Stehgreif anwenden kann. Bei Problemen hilft Google.

Diese Orientierung bedeutet mitnichten, daß Sie jetzt wie von Sinnen BÜFFELN sollen. Sie dient ganz im Gegenteil dazu, Ihnen sinnlose Arbeit zu ersparen, sobald Sie Zeit finden, mal etwas näher in die Themen hineinzuriechen. Sie hilft Ihnen zu unterscheiden, wo sich größerer Aufwand lohnt und wo der voraussichtlich sinnlos ist.

In diesem Lehrgang werden wir das, was wir brauchen, durch Beispiele und im Vorbeigehen mitnehmen. Wir lernen spielerisch durchs Anwenden. Wir wollen schließlich unseren Spaß dabei behalten!

In der Praxis werden Sie auf lange Sicht die HTML-Elemente nur in ihrer rudimentären Grundform verwenden und HTML-Attribute nur in den seltenen Fällen, wo sie funktionelle Eigenschaften betreffen, die Sie für Ihre Zwecke anzupassen gezwungen sind. Die große Masse Ihrer Arbeit mit HTML wird das Layout betreffen, welches Sie mit Hilfe von CSS formulieren werden. Und DAS ist eine ganz andere Geschichte. Letztlich werden Sie von HTML nur einen winzigen Bruchteil der potentiell vorgesehenen Möglichkeiten benötigen: Mit schätzungsweise 30 HTML-Tags und 15 HTML-Attributen werden Sie über die Runden kommen und nie das Bedürfnis nach mehr empfinden...

Übung zur Orientierung unter den HTML - Ausdrucksmitteln
Aufgabe: Legen Sie sich Links auf die fünf für Sie WICHTIGEN Abschnitte der Referenzdokumentation an!

(Der Abschnitt über CSS soll erstmal als unwichtig gelten, weil sie CSS in diesem Lehrgang unmittelbar in die Hand diktiert bekommen. Später wird das CSS für Sie eine herausragende Stellung bekommen, aber die Dokumentation aus HTML-Sicht belanglos bleiben - es gibt da einfach nicht viel zu lernen.)

Schauen Sie dazu soweit in die Abschnitte hinein, daß Sie erkennen, um welche HTML-Tags es jeweils geht!

Die Aufgabe ist genau dazu da, daß das Inhaltsverzeichnis unter diesem Aspekt eine gewisse Einprägung in ihrem Gedächtnis findet. Und daß von Ihnen der Druck genommen wird, sich von der Fülle an Ausdrucksmöglichkeiten erschlagen zu fühlen.

Aufgabe: Finden Sie die zu diesen Referenzdokumentationen äquivalenten Kapitel in dem von Ihnen favorisierten deutschen Tutorial!

Falls Sie sich noch nicht mit einem angefreundet haben sollten, nehmen Sie für die Übung das erste beste!

Ihnen sollte eine gewisse Äquivalenz der Gliederungen auffallen. Jeder Tutor gliedert ein bischen anderes und hält mal das eine, mal das andere für wichtiger. Aber die grobe Gliederung werden Sie überall gleich wiederfinden.

Zurücklehnen, abspannen und Pause machen!

Experimente mit HTML: Eine eigene Homepage

Sie beginnen jetzt, richtig ernsthaft HTML zu schreiben. Damit Sie auch wirklich was davon haben, werden Sie Ihre Notizen zum Lehrgang und Ihre Übungen komplett in HTML schreiben.
Und jetzt  fangen wir damit an!

Übung zu HTML-Grundlagen
Vorlagen basteln
Sie kennen bereits "copy & paste" - wir hatten das vorhin beim Kopieren von Texten mit der Tastatur angeschnitten. Das Prinzip läßt sich verallgemeinern... Sie können genau dann effektiv arbeiten, wenn Sie sich strikt angewöhnen, stinkefaul zu sein. Und zwar in dem Sinne, daß Sie jedwede stupide Wiederholung wenn irgend möglich vermeiden! Und was für billige Tipsen schon wichtig ist, ist für Programmierer (die wir ja werden wollen) schlicht essentiell.

Das schafft man ganz allgemein bei allem, was mit PC's zu tun hat, durch das Anlegen und spätere Kopieren von "Mustern" alias "Vorlagen". Sobald Sie etwas fertiggestellt haben, von dem Sie denken, es demnächst nochmal wiederverwenden zu können, speichern Sie es unter einem sinnvollen Namen an einem sinnvollen (wiederzufindenden, ja?!) Ort ab!

Natürlich werden Sie sich dazu auch etwas Ordnungssinn angewöhnen müssen, namentlich die Benutzung von Verzeichnissen, um die Übersicht zu behalten.


Aufgabe: HTML-Grundstruktur-Vorlage anlegen!
Sie erinnern sich noch an die Übung von vorhin zur HTML-Grundstruktur?
Suchen Sie sich die Datei (wie bei der Übung aus Lektion 1) und speichern Sie sie unter dem Namen "HTML-Grundstruktur.html" in einem Verzeichnis "Vorlagen", welches Sie während des Lehrgangs im Dokumente-Verzeichnis Ihres Webservers ablegen! (Anleitung)
Vergleichen Sie mit dem hier verlinkten Beispiel!...

Aufgabe: HTML-Quelltext anzeigen lassen!
Wenn Sie diese Datei, die nur die HTML-Grundstruktur hat, im Browser anzeigen kassen, zeigt der erstmal nur ein leeres Blatt. Das ist korrekt. Soll so sein.
Den ursprünglichen Inhalt der HTML-Datei, der Anweisungen für den Browser zum Erzeugung einer Seitendarstellung darstellt, nennt man auch "Quelltext" oder englisch "source".
Den bekommt man im Browser zu Gesicht, wenn man dem Browser eine Anweisung zur Anzeige desselben gibt. Je nach Browser ist diese unterschiedlich versteckt. Beim Firefox unter anderem über einen Rechtsklick auf die Seite (im Kontextmenü) zu erreichen ("Quelltext anzeigen").

Probieren Sie "Quelltext anzeigen" mit der Vorlage aus!
Sie können auch aus der Quelltextansicht heraus "copy & paste" machen. Probieren Sie das aus!

Das habe ich Ihnen jetzt EINMAL gezeigt. Ab sofort legen Sie Vorlagen selbständig aus eigenem Antrieb ohne weitere Erwähnung an! Zu Ihrem eigenen Vorteil! Und benutzen "copy & paste" zum Erzeugen neuer Dokumente!

Copy & Paste mit Internet
Einen hab ich noch...
Das Internet ist nicht nur for Porn, das Internet ist vor allem for Copy & Paste! Auch wenn es heutzutage unter Politikern und Firmen dauernd Mega-Hickhacks mit selbstgemachten Gesetzen gibt, die allzu oft zu schmerzhaften Schüssen in die eigenen Knie verkommen.

Zumindest mit ihren eigenen Dokumenten dürfen Sie völlig frei und frech kopieren, aber auch Fragmente aus allem, was im Internet veröffentlicht ist, solange es dabei um elementare technische Grundlagen geht, die in etwa so grundlegend sind wie das Benutzen von Lungen zum Atmen von Luft ("nicht schützenswert"). Wenn Sie also anhand der Quelltextansicht von irgendwelchen Dokumenten im Internet die Technik zur Formulierung von HTML-Seitenbeschreibungen erlernen (und allein dadurch NATÜRLICH kopieren), wird Ihnen niemand daraus einen Strick drehen.

...Es sei denn, Sie stießen auf eine Seite, deren Technik Ihnen den Mund aufklappen und den Sabber herausschießen läßt. Die so geil ist, daß Ihnen die Augen herausfallen und die Hände schwitzen. DANN schalten Sie den gesunden Menschenverstand ein und sind vorsichtig mit dem Kopieren: Zumindest sollten Sie in so einem Fall das Zeug aus eigenen Ideen heraus neu aufsetzen, was Ihnen eh gleich hilft, die Technik tatsächlich zu verstehen...

Inhaltsverzeichnis für den Lehrgang
komplexe Aufgabe: Jetzt basteln wir uns ein Inhaltsverzeichnis für den Lehrgang...

Wir werden in jeder Lektion Experimente ausführen. Was bei uns heißen wird: Dokumente und Programme schreiben. Und weil wir die für das Anwendungsgebiet "Internet" schreiben, werden wir gleich konsequent die speziellen Fähigkeiten des Internets ausnutzen - Dokumente universell miteinander zu verlinken und dadurch mit simplen Klicks für jedes Kindergartenkind navigierbar zu machen (daß man dazu lesen können muß, drücken wir für diese rethorische Übertreibung mal in den Skat).

Dazu brauchen wir erstens ein neues Dokument und zweitens in diesem mindestens zwei HTML-Elemente:
  1. eine "Überschrift"
  2. die rechten "Links"

Ein Neues Dokument können Sie inzwischen mit "Copy & Paste" erzeugen: Vorlage auf und speichern unter neuem Namen! Nehmen Sie was sinnvolles wie "HTML-PHP-Lehrgang.html"!

Wie eine Überschrift geht, haben wir schon kennengelernt (<h1> - falls Sie sich noch erinnern.) Das können Sie jetzt gleich mal üben. Als Inhaltsverzeichnis des HTML/PHP-Lehrgangs könnte die Überschrift ganz sinnvoll "HTML/PHP-Lehrgang" heißen.

Es macht sich auch sehr gut, die Haupt-Überschrift einer Seite als title-Tag in den Kopf (<head>-Abschnitt) der HTML-Seite aufzunehmen. Dieser Titel wird dann in der Kopfleiste des Browsers bzw. im betreffenden Tab-Reiter angezeigt. Schauen Sie sich dazu das Beispiel an! (Quelltext-Ansicht nicht vergessen!)

Einen Link machen wir jetzt zum Kennenlernen, und zwar von der Haupt-Indexdatei des Webservers aus auf dieses Lehrgangs-Inhaltsverzeichnis:
  • Sie HABEN bereits ein Lesezeichen auf die Haupt-Index-Datei Ihres Webservers in Ihrem Browser zu liegen, nicht wahr?! Rufen Sie diese Datei im Browser auf!
  • Wir werden jetzt in diese Datei einen Link auf das neue Lehrgangs-Inhaltsverzeichnis legen... Dazu öffnen Sie diese Index-Datei im Editor!
  • Kopieren Sie in etwas Freiraum unterhalb der Überschrift:
    <a href="HTML-PHP-Lehrgang.html">HTML/PHP-Lehrgang: Experimente</a>
    (Wenn Sie einen anderen Dateinamen für Ihr Inhhaltsverzeichnis gewählt haben, dann natürlich DEN beim "href"-Attribut einsetzen, ja?!...)
  • Speichern und im Browser "aktualisieren" (F5 drücken)!
    Im Ergebnis sollte auf Ihrer Startseite etwa folgendes erscheinen: HTML/PHP-Lehrgang: Experimente
  • Klicken Sie das Ding an! Wenn Sie sich nicht vertippt oder sonstwie vertan haben, sollten Sie auf Ihrem Lehrgangs-Inhaltsverzeichnis landen!

Nach diesem Schema können Sie von jetzt ab zu jedem Experimente-Thema, welches als Aufgabe erscheint oder zu welchem Sie aus eigenem Antrieb Lust kriegen, rux-fix eine eigene Seite anlegen und diese aus Ihrem Inhaltsverzeichnis heraus verlinken (vielleicht mit einer Kurzbeschreibung, was dort passiert).
Und schon sind Sie auf dem besten Weg, HTML-Guru zu werden...

Extra Seite für Experimente von heute
komplexe Aufgabe: Experimentalseite für HTML-Elemente...

So, jetzt nochmal eine Wiederholung zur Festigung:
Legen Sie sich nochmal eine neue Seite für Experimente zu den Grundlagen von HTML an (Vorlage! Copy & Paste!)! Denken Sie sich einen vernünftigen Dateinamen (zum Beispiel "HTML-Einführung.html") und eine vernünftige Überschrift (zum Beispiel "HTML-Einführung") aus! Wie man Überschrift und Title setzt, wissen Sie bereits... Speichern!

Setzen Sie jetzt in das Inhaltsverzeichnis des Lehrgangs einen Link auf diese Seite zu HTML-Grundlagen!
Ausprobieren!
Freuen und Schulterklopfen!
Wie man das ganze gestalterisch hübsch macht, lernen wir nebenbei in kleinen Schritten und nach Bedarf. Wobei niemand Sie von Eigeninitiative abhält. Gestalterische Perfektion ist aber nicht unmittelbares Ziel dieses Lehrgangs, deshalb nur am Rande eingebaut. Bei Bedarf dürfen Sie an einem CSS-Lehrgang teilnehmen.

Und JETZT legen Sie eine Runde selbständige Experimente ein, um die nächst wichtigsten Elemente von HTML mit eigenen Händen auszuprobieren (in der Datei zu HTML-Grundlagen):
  • Thema 9 und 15: Text-Auszeichnungen (mit den paar Elementen, die ich Ihnen da hervorgehoben hatte)...

    Schreiben Sie jeweils ein bißchen Text (BE-schreiben Sie ruhig das, was Sie jeweils gerade ausprobieren) und fassen Sie den dann in die zur Diskussion stehenden Tags!
    Und gucken Sie sich das Ergebnis an!

  • Thema 10 "Listen": Üben Sie hier gleich mal den Gebrauch der Referenzdokumentation im Internet, indem Sie sich die Syntax von Listen selbständig heraussuchen!

(Pause für die Aufgabenlösung)

Vergleichen Sie untereinander Ihre Lösungen! Herauskommen könnte zum Beispiel etwas in dieser Art...

Weitere Hilfsmittel
Abschließend zur Übung noch Tips zur Erleichterung der Arbeit...
Sie werden mit Sicherheit sehr oft (eigentlich ständig) irgendwelche Details nicht im Kopf haben...

  1. Die primäre Anlaufstelle für sowas - die HTML-Referenzdokumentation beim W3C - hatten Sie sich ja bereits ausführlich angeschaut.

  2. Die nächste Anlaufstelle ist Google (oder eine analoge Suchmaschine).
    Perfekt, sobald man passende Stichworte kennt. Wenn man Details/Erklärungen/Beispiele zu Programmiersprachen sucht, ist eine Suchmaschine normalerweise sehr zielführend.

  3. Die nächste Anlaufstelle - auch über Google zu erreichen - sind gut besuchte Foren, in denen sich jede Menge Programmierer mit gleichen Interessen herumtreiben. Wobei es gar nicht so trivial ist, gut besuchte deutsche Foren ausfindig zu machen: Es gibt eine Menge kleinerer solcher, aber die sind sinnlos für schnelle Problemklärungen. Sie brauchen eines, wo ständig wenigstens ein paar zig Leute herumhängen! Deshalb kan ich Ihnen guten Gewissens nur ein deutsches Forum wirklich empfehlen, weshalb ich hier noch englische Alternativen beigepackt habe: Es KANN zudem hilfreich sein, eine ganz allgemeine Frage-Antwort-Seite zu verwenden - und zwar wegen der schieren Masse an Leuten, die dort herumhängen. Empfehlenswert:
    • stackoverflow.com: (englisch) für alles rund um Rechentechnik
    • Gute-Frage.net: (deutsch) gegen ersteres eine Mikro-Ausgabe, total allgemein angelegt, aber vorrangig für Rechentechnik-Fragen genutzt
    Im Zweifelsfall hilft eine Google-Suche zum konkreten Problem und dann die Auswahl des erstbesten Forums aus dieser, weil dort mit hoher Wahrscheinlichkeit am intensivsten über Ihr Problem diskutiert wurde.

  4. Gegen Flüchtigkeitsfehler (die den größten Teil aller Fehler ausmachen) gibt es eine Reihe von sogenannten "Validisierern". Das sind Seiten, die Ihnen gestatten, eine HTML- oder CSS-Seite hochzuladen, die dann auf syntaktische Korrektheit geprüft wird. Zum Beispiel: Unten auf der Startseite von www.w3schools.com verlinkt (aber auch in jeder anderen Tutorial-Sammlung).

  5. Nachschlagwerke, die speziell auf die Alltagsbedürfnisse der Anwender zugeschnitten sind, sind mitunter (nicht immer) wesentlich leichter zu handhaben als Referenzdokumentationen. Die auf www.w3schools.com extrem übersichtlich gruppiert verlinkten Ressourcen sind da ein empfehlenswertes Beispiel.

    Die Seite ist schlechthin einfach top! Es lohnt sich, dafür Englisch zu lernen!

Legen Sie sich Lesezeichen auf diese Hilfsmittel in Ihrem Browser an!
Und machen Sie nochmal eine Pause!

Den Editor aufmotzen

Übung zur Benutzung des Texteditors
Letzter Schritt für heute...

Nachdem wir nun unsere Experimente mit HTML hinter uns haben, bemerken Sie eventuell erste Blasen und Tendenzen zur Hornhautbildung an Ihren Fingerkuppen. Zumindest mental.

Das Ausschreiben der HTML-Anweisungen geht einem doch schnell auf den Wecker. Aus anderen Textverarbeitungsprogrammen ist man ein ganz anderes und nicht umsonst seit Jahrzehnten standardisiertes Vorgehen gewohnt, welches krass intuitiver ist:
  1. zu formatierenden Textblock markieren
  2. Formatierungs-Hotkey drücken
  3. fertig

SOWAS wollen wir für HTML auch!
Und netterweise geht das denkbar einfach! Ich erkläre das für den Editor "Notepad++" (den Sie ja benutzen sollten)...

Der Editor hat ein Menü namens "Macro":
Macro-Menü beim Notepad++
Dort kann man Tastenklicks aufzeichnen (und später wiedergeben oder noch viel besser auf einen Tastenklick ("Hotkey") legen) lassen...

Das probieren wir jetzt, und zwar für eine Überschrift....
  • Schreiben Sie irgendeinen Text irgendwo hin!
  • Markieren Sie diesen Text!
  • Starten Sie das "Recording" alias "Aufzeichnung"!
  • Löschen Sie den markierten Text in die Zwischenablage! ("Edit + Cut" alias "Bearbeiten + Ausschneiden")
  • Schreiben Sie: <h1>!
  • Fügen Sie die Zwischenablage ein! ("Edit + Paste" alias "Bearbeiten + Einfügen")
  • Schreiben Sie: </h1>!
  • Beenden Sie das "Recording" alias "Aufzeichnung"!

Jetzt haben Sie ein Makro, mit dem Sie jeden Text (den Sie mal eben irgendwie irgendwo markiert haben) in eine Überschrift verwandeln können.
Noch fix auf einen Hotkey gelegt ("Save Current Recorded Macro" alias "Aktuelles Makro speichern"):
  • Schreiben Sie als Name "<h1>" (damit Sie es später mal in einer angewachsenen Liste wiedererkennen können)
  • Wählen Sie zum Beispiel "strg" + "1" als Hotkey!

Jetzt probieren Sie das noch schnell an einem weiteren Text aus (irgendwas markieren und dann "strg 1" drücken!)!

DAS machen Sie ab sofort mit jedem Kinkerlitzchen, was sich häufig wiederholt, so daß Sie am Ende des Lehrgangs HTML schneller schreiben können als ein Dokument in Word!

Üben Sie das gleich mal, indem Sie sich Überschriften-Hotkeys für die Überschriftsebenen 2 bis 6 vorbereiten (strg-2 bis -6)!
Und dann noch ein Makro für Links! Da fügen Sie den Text aus der Zwischenablage doppelt ein: einmal im href-Attribut, einmal zwischen den Anchor-Tags (auf Hotkey strg-a zum Beispiel)! Den Zeilenumbruch legen Sie sich auch noch auf einen Hotkey (strg-enter macht sich dafür gut)! Wer noch kann: Fettschrift und Kursivschrift (<b> und <i>) können dasselbe vertragen!

Listen und Tabellen legen Sie sich bereit, sobald wir die Dinger in Benutzung nehmen. Andere Sachen legen Sie besser in Vorlagen ab. Für heute reicht das erstmal.

Üben Sie noch ein wenig, mit diesen Hotkeys zu schreiben! Sie dürfen sie natürlich auch eventuellen anderen Vorlieben oder Gewohnheiten anpassen: Hauptsache, Sie werden damit vertraut und sind effektiv!

Ende für Heute! Pause!
Und nochmal in Ruhe durch den Kopf gehen lassen und natürlich fleißig anwenden!
Viel Spaß dabei!



Impressum
Email
aktualisiert: 2015-05-14 17:50