Interesse, sich (ohne Führung durch einen - grafischen - HTML-Editor) mit der Syntax auseinander zu setzen, die ein Webbrowser zur korrekten Wiedergabe eines gewünschten Inhalts und zur Erfüllung von web-spezifischen Funktionen braucht.
HTML ist die Abkürzung für HyperTextMarkupLanguage. Sie beschreibt die logischen Elemente eines Dokuments. Darunter sind sowohl sichtbare Elemente wie Überschriften, Textabsätze, Listen, Tabellen oder eingebundene Grafik zu verstehen als auch solche zur Herstellung bestimmter Funktionalitäten wie Titelanzeige durch Browser oder unsichtbare Elemente für Durchsuchbarkeit, Programmierbarkeit etc.
Die Funktionalität der Elemente wird durch Attribute erweitert, mit denen der Autor eines HTML-Dokuments insbesondere das Aussehen einer Seite bzw. das der verwendeten Elemente beeinflussen kann.
Die Sprache beinhaltet eine bestimmte Syntax = Sprachregeln, die zur korrekten Interpretation durch den Browser genau eingehalten werden muss.
<
spitzen >
Klammern; Tags bestehen aus <
, dem Tag-Namen, optionalen Attributen und dem schließenden >
und haben fast immer ein Ende-Tag, das besteht aus <
, /
, dem Tag-Namen und >
.<p>…</p>
oder <div class="bla" onmouseover="blubb()">…</div>
<!DOCTYPE html> <html> <head> <title>Struktur einer HTML-Datei</title> <meta charset="utf-8"> </head> <body> <h1>Eine Überschrift</h1> <p>Ein Absatz als noch ein Beispiel für ein Strukturelement!</p> <!-- Ein Kommentar, der nicht angezeigt wird --> </body> </html>
HTML-Sonderzeichen beginnen mit einem &
und enden mit ;
Notwendig sind nur noch
<
und > >
&
Für XML-Kompatibilität müssen auch diese Zeichen im Text durch Entitäten ersetzt werden:
'
"
Nützlich sind außerdem noch:
­
Viele andere Zeichen kann man per Tastatur eingeben oder sie werden sehr selten gebraucht.
Ungeordnete Liste:
<ul> <li>Inhalt</li> </ul>
Ungeordnete Liste geschachtelt:
Sortierte Liste:
<ol> <li>Inhalt</li> </ol>
<table> <caption>Hier steht die optionale Tabellenbeschriftung (Caption)</caption> <tr><th>Spaltenüberschrift Spalte 1</th><th>Spaltenüberschrift Spalte 1</th></tr> <tr> <td>Reihe 1, Zelle 1</td> <td>Reihe 1, Zelle 2</td> </tr> <tr> <td>Reihe 2, Zelle 1</td> <td>Reihe 2, Zelle 2</td> </tr> </table> <br> <br> <table> <tr> <td></td> <td>Reihe 1, Zelle 2</td> </tr> <tr> <td>Reihe 1, Zelle 1</td> <td> </td> </tr> </table>
Unterschieden wird zwischen:
(siehe Style-Sheet-Syntax)
Die 'Hyperlinks', sind anklickbare Bereiche (Text oder Bild) in HTML-Seiten, die andere Dateien aufrufen. Sie realisieren also über Textstelle, Dokument, Rechner und Ländergrenzen hinaus gehende Verbindungen zu den verschiedenster Dateitypen (*.html, *.txt, *.gif o.ä.). Sie machen aus einen Haufen Dateien auf den entferntesten Rechnern erst ein Netz, ein WWW und ermöglichen die Auswahl, was man sich anschauen will.
Sie sind die Basis jeglicher 'Navigation' im Web. Und sie sind Ursache des schönen 'Chaos', wo man sich nach Gusto der Web-Autoren von einer Web-Seite zur nächsten, von hier nach dort und anderswo hangeln kann, ohne das zu finden, was man sucht.
Diese Verweise werden mit dem Anker-Tag in eine Seite eingebunden. Andere Tags (siehe Multimedia), das IMG-Tag für Bildern, außerdem AUDIO-, VIDEO- und OBJECT-Tag zum Einbinden von anderen Multimedia-Dateien stellen weitere Möglichkeiten zur Verknüpfung von verschiedenen Dateien dar. Sie dienen zum Anzeigen von Dateien innerhalb einer Web-Seite.
All diesen Tags ist gemeinsam, das sie eine "Adresse" für eine Datei enthalten müssen, damit diese im Web lokalisiert werden kann; außerdem ist die Information wichtig, wie die Daten der Datei übertragen werden, d.h. welches Übertragungsprotokoll verwendet wird.
Deshalb wird an dieser Stelle zuerst das Thema Adressierungen behandelt, das für alle oben genannten Tags relevant ist.
Im Folgenden geht es dann um die zwei Arten von Hyperlinks, d.h. Verweisen, die beide mit dem Anker-Tag <a></a> in eine HTML-Seite eingebunden werden, um:
Die im folgenden erläuterten Regeln werden nicht nur beim Einbinden von Links für das Attribut href (Hyper Reference) gebraucht, sondern auch zum Einbinden von Bildern, Sounds und anderen Multimedia-Dateien.
Beispiel: http://members.xoom.com/bachmidi/bachmidi.html
Eine Webadresse oder URL (Uniform Resource Locator) setzt sich aus folgenden Bestandteilen zusammen:
Eine Webadresse entspricht in etwa Dateiangabe mit Angabe des gesamten Pfades mit folgenden Unterschieden:
Benutzt man die volle Webadresse http://servername/ … Pfadangabe … /Dateiname.htm spricht man von einer absoluten Adresse. Diese muss man für Links zu Seiten auf anderen Servern benutzen. Bei der Herstellung von Web-Seiten ergibt sich aber ein Problem.
Die Referenz eines Links heißt auf dem Arbeitsplatzrechner z.B. href="c:/Eigene Dateien/homepage/author/aboutme.htm", auf einem WWW-Server dagegen z.B. http://www.Neuland.de/Privatleute/ChristelsHome/author/aboutme.htm Bevor man die Seiten ins Web stellt, müssten alle diese absoluten Adressen geändert werden. Das vermeidet man durch sogenannte relative Adressen.
Bei der relativen Adressierung gelten folgende Regeln:
Beispiel: Verzeichnisstruktur
c:\Eigene Dateien\homepage\index.htm
c:\Eigene Dateien\homepage\author\aboutme.htm
c:\Eigene Dateien\homepage\author\hobby.htm
c:\Eigene Dateien\homepage\bild\logo.gif
Steht die gesuchte Seite hobby.htm
wie im Beispiel im gleichen Verzeichnis wie die Seite aboutme.htm
mit dem Link, genügt href="hobby.htm"
ohne Pfadangabe, weil der Server wie der Pc standardmäßig im aktuellen Verzeichnis nach einer Datei suchen.
Steht die gesuchte Datei index.htm
wie im Beispiel im nächst höherem Verzeichnis über aboutme.htm
und hobby.htm
, genügt href="../index.htm"
ohne Pfadangabe in Links, die zum Index zurückverweisende, weil mit Punkt Punkt Schrägstrich die Anweisung gegeben wird, im nächst höherem Verzeichnis zu suchen.
Steht die gesuchte Datei aboutme.htm
wie im Beispiel im nächst tieferen Verzeichnis, genügt in der Seite index.htm
href="author/aboutme.htm"
im Link, weil der Server wie der PC standardmäßig ausgehend vom aktuellen Verzeichnis nach einer Datei mit Pfadangabe suchen.
Ein Sonderfall sind solche Adressen mit voranstehendem ein Schrägstrich :
es wird ausgehend vom aktuellen Wurzelverzeichnis gesucht; also entweder auf dem Speichermedium des PCs (c: oder a: usw.) oder auf dem WWW-Server, je nach dem, wo die Html-Seite mit einem solchen Link steht. Solche Links müssen also auch angepaßt werden, wenn die Html-Datei verlegt wird.
vorausstehender Schrägstrich /ordner1/ordner2/dateiname.* heißt, es wird vom Wurzelverzeichnis aus gesucht (und ist damit eine absolute Adresse)
Kennt man die Regeln der Adressierung auf Rechnern, ist der Rest einfach: Die Adresse steht im Anker-Tag im Attribut href=" … ", der Text (oder ein Bild) zum Anklicken zwischen Anfangs- und Ende-Tag
Beispiele: Link mit absoluter Adresse auf das Wurzelverzeichnis des TU-Servers: <a href="http://www.tuhh.de/">TUHH-Homepage</a> Link mit relativer Adresse <a href="../index.htm">Startseite</a> Link mit Bild im anklickbarer Bereich <a href="grafik.htm"><img src="link.gif" alt="Link auf die Grafikbeschreibung"></a>
Verwendung: Bei mehrseitigen Projekten kann man:
<a href="index.htm">Zurück zur Startseite</a>
<a href="Seite3.htm">vorherige Seite</a> <a href="Seite4.htm">nächste Seite</a>
Für Sprünge innerhalb eines Dokuments wird im Anker-Tag eine Sprungmarke als Referenz angegeben, im obigen Beispiel href="#Sprungmarke". Man kann auch eine bestimmte Stelle in einer anderen Seite anspringen. Dann lautet die Referenz href="Dateiname.htm#Anderswo".
Beispiele:
Sprungziel innerhalb der gleichen Datei
<a href="#Sprungmarke">Ende der Seite</a>
Sprungziel in anderer Datei
<a href="xyz.htm#Lenz">Quelle S.Lenz</a>
Das Nummernzeichen #
leitet die frei wählbare Bezeichnung des Sprungziels ein. Groß- und Kleinschreibung wird unterschieden.
Als Ziel bzw. Ansprungmarke setzt man an die gewünschte Stelle in einer Seite ein weiteres Anker-Tag, lässt das Attribut href leer und setzt das Attribut Name, z.B Attribut Name="Sprungmarke" oder Name="Anderswo". Den Textbereich des Anker-Tags kann man nutzen oder leer lassen.
Beispiel: Sprungmarke bzw. Sprungziel
<a id="Sprungmarke">Hallo</a>
oder
<a id="Lenz"></a>Siegfried Lenz, Deutschstunde, S. 84
Memo:
Die Unterscheidung von Groß- und Kleinschreibung bedeutet, daß "DLRG" und "Dlrg" und "dlrg" als href auf verschieden Sprungziele verweisen und "dLRg" als Name der Sprungmarke nicht gefunden wird.
Verwendungsmöglichkeiten:
Sprünge kann man zu Querverweisen, z.B auf ein Glossar, auf eine Literaturliste bzw. zu Quellentexten nutzen, in längeren Dokumenten hervorragend in einer vorangestellten Gliederung verwenden.
verweis-sensitive Graphik als Navigations-Instrument
CSS-Elemente werden mit folgender Syntax notiert:
Selektor { Eigenschaft: Wert; … }
Inline-Definitionen nutzen den style-Parameter:
style="Eigenschaft: Wert; …"
Viele Eigenschaften vererben sich von Vater-HTML-Element zu Kind-HTML-Element (Kaskade!), so dass es sinnvoll ist, dateiweite Einstellungen am html- oder body-Tag festzumachen.
CSS-Elemente können mehrfach definiert werden, gültig ist bei gleichrangigen Definitionen das jeweils zuletzt definierte Element, ansonsten das mit der größeren Spezifität.
Selektoren können zu einen HTML-Tags sein: das bedeutet, die Standardeigenschaften von HTML-Tags, die der Browser festlegt, werden redefiniert.
Zweitens können das Identifikatoren (id) sein, die durch eine vorangestelltes '#' gekennzeichnet sind. Diese können über den Parameter id="idname" beliebigen HTML-Tags zugewiesen werden. IDs dürfen nur einmal in einem Dokument vorkommen.
Drittens können das Klassen (class) sein, die durch einen vorangestellten '.' gekennzeichnet werden. Klassen haben ähnliche Eigenschaften wie IDs, dürfen aber mehrfach vorkommen.
Viertens sind (fast) beliebige Kombinationen der drei Basis-Selektoren möglich, wie z.B. 'alle a-Tags, die innerhalb der ID 'head' verwandt werden' oder 'alle ul-Tags, die Kind-Elemente eines p_tags sind' etc. pp.
Eigenschaften sind die Angaben, die manipuliert werden sollen - festgelegt durch die CSS-Syntax - kommt im Weiteren.
Wertangaben können sein: Farben, Größen und feste Namen.
Prinzipiell können CSS-Angaben groß oder klein geschrieben werden, wenn Sie XHTML-Kompatibilität wahren wollen, muss alles klein geschrieben werden.
Größenangaben brauchen zwingend eine Einheit, ausgenommen die '0'.
Einbindung von CSS-Angaben kann erstens inline erfolgen mit dem style-Parameter zu jedem beliebigen HTML-Tag.
Zweitens kann man die CSS-Style im Header einer HTML-Datei notieren mithilfe des style
-Tags:
<style> Selektor1 { Eigenschaft: Wert; ... } Selektor2 { Eigenschaft: Wert; ... } </style>
Drittens kann man die CSS-Definitionen in einer oder mehr externen Datei/en ablegen, die über den link-Parameter im Kopf einer HTML-Datei oder die @import-Anweisung innerhalb eines style-Abschnitts eingebunden werden.
Schriftarten, -größen und -auszeichnungen lassen sich jedem Element zuordnen, werden aber häufig mit dem span-tag in den Text eingestreut. Das span-Tag macht für sich nichts, dient nur als Träger von Style-Sheet-Informationen.
Die Möglichkeiten der Formatierung beschränken sich mit CSS nicht nur auf die gängigen Funktionen, sondern man kann auch ausgefallene Stylings realisieren wie z.B. hochgestellt (font-size:75%; vertical-align:super;)
Die Parameter zur Schriftmanipulation im einzelnen:
Die Angabe von line-height macht idR. nur bei Blockelementen Sinn
Die CSS-Angabe "font" (Schrift allgemein) fasst folgende Parameter zur Schriftformatierung in einer Angabe zusammen:
Bei der Angabe der Schriftarten sollte man immer Alternativen mit angeben (komma-getrennt), so dass auch 'nicht-Windows'-Nutzer eine ähnliche Darstellung genießen könne, wie von Ihnen beabsichtigt, z.B.: font-family:Arial,Helvetica,sans-serif. Beachten Sie bei Schriftnamen die Groß- und Kleinschreibung. Bestehen Schriftname aus mehreren Worten, müssen Sie sie in Anführungszeichen einschließen ("Times New Roman").
Schriftgrößen können entweder absolut (Punkt, Pixel) oder relativ (Em, Prozent) angegeben werden. Dabei sind mehrere Dinge zu beachten:
Styling von Links ist ein beliebtes Thema bei CSS-Anwendern, da viele gerne das Standardaussehen von Links (blau, unterstrichen) an ihr Design anpassen und zusätzlich "Rollover"-Effekte einbauen wollen. Für den ersten Fall kann man ganz einfach das a-Tag umdefinieren und die Unterstreichung entfernen: a {text-decoration:none; color:#006; font-weight:bold}
sorgt für nicht unterstrichene, fette, dunkelblaue Links.
Rollovereffekte erreicht man am über sogenannte Pseudoklassen, die man zusammen mit dem a-Selektor verwendet. Pseudoklassen werden mit einem Doppelpunkt vom tag-Namen getrennt und können sein:
Diese identifizieren die verschiedenen Zustände, die ein Link annehmen kann. Und so schaltet a:visited {color:#060;}
besuchte Links auf dunkelgrün und a:hover {color:#600;}
Links unter dem Mauszeiger auf dunkelrot.
Außerdem kann man auf alle Inline-Elemente auch Formatierungen wie Hintergrundfarben und Rahmen anwenden, siehe nächsten Abschnitt.
Die erste Variante der Gestaltung von Blockelementen ist die Gestaltung des Hintergrunds des Elements. Besonderheit hierbei ist, dass der Hintergrund nicht an Kindelemente vererbt wird, hier kommt immer die Grundeinstellung 'transparent' zum Tragen. Das ist Standard um merkwürdige Effekte besonders bei gekachelten Hintergründen zu vermeiden.
Im Unterschied zu den Hintergrundgestaltungsmöglichkeiten von HTML kann man mit CSS fast alle Elemente stylen, nicht nur Blockelemente, sondern auch Inlineelemente (deshalb gehört dieser Abschnitt eigentlich auch auf eine Seite vorher). Ausserdem eröffnet CSS mehr Gestaltungsmöglichkeiten, z.B. die Positionierung von Bildern.
Die Einstellmöglichkeiten im einzelnen:
Seit CSS3 kann man auch mehrere Hintergrunddefinitionen stapeln, durch mehrere, Komma-getrennte Angaben bei der background
-Eigenschaft
Für Rahmen gilt in etwa das gleiche, was oben zur Hintergrundgestaltung ausgeführt wurde: CSS erlaubt es, fast alle HTML-Elemente mit einem Rahmen zu versehen, nicht nur Tabellen. Dabei können alle Seiten eines Elements unabhängig voneinander gestylt werden.
Die CSS-Eigenschaften in diesem Abschnitt sind im Wesentlichen für Blockelemente gedacht und machen auch nur dafür Sinn, gleichwohl kann man zb. margin und padding auch auf In-Line-Elemente anwenden.
/* Variablen */ // Zahlen var laenge = 5.2; laenge = 5 * 7.562456874378347623147832146723642398073447832147893242314; console.log(laenge); // Boolean var c = true; // String var d = "Eine ganz lange Zeichenkette"; // Array var e = ['a','b','c','d']; // Objekt var f = {marke: 'VW', tueren: 4, raeder: 6, sitze: 23}; // Funktion function rechne(a, b) { return a * b; } laenge = rechne(5, 3.14159); console.log(laenge);