HTML – Tutorial, Tipps & Tricks

HTML ist die bekannteste Sprache des Web und bildet zugleich das GrundgerĂŒst einer jeden Website. HTML ist relativ einfach zu erlernen.

Syntax

Die Syntax einer Sprache beschreibt den genauen Aufbau und Aussehen – sozusagen die Grammatik und Rechtschreibung. Auch HTML muss sich an gewisse Regeln halten um möglichst flexibel zu sein.

HTML GrundgerĂŒst

Jede HTML-Datei besteht aus einem festen GrundgerĂŒst. Es besteht aus head (engl. Kopf) und body (engl. Körper), sowie einem alles umschließenden html-Element.

Daten im HEAD

Der head-Bereich umfasst grĂ¶ĂŸtenteils nicht-sichtbare Dinge und definiert die Seite, Skripte oder Stilangaben nĂ€her.

Gestaltung des BODY

Im body-Element sind allgemein alle Elemente einzutragen, die spÀter in der Datei angezeigt werden sollen. Des Weiteren können hier auch Skripte und Formulare sowie fast alle anderen Angaben getÀtigt werden.

Text gestalten

Textformen

In HTML gibt es mehrere Textformen/-arten. Diese werden separat bestimmt und unterscheiden sich von den anderen. Neben dem ‘normalen’ Text gibt es auch noch andere Textformen, die wir Ihnen hier nĂ€herbringen möchten. GrundsĂ€tzlich werden alle Textformen von den jeweiligen Tags umschlossen.

Hyperlinks und Anker

Um schnell zu anderen Seiten springen zu können, oder um auf andere Seiten zu verweisen können Sie Links/Hyperlinks benutzen. Durch einen Klick auf einen Link befördern Sie den Surfer zu anderen Seiten. Ohne Sie wÀre das Internet nur eine wahrlose Ansammlung von Dateien und Daten.

Ausrichtung

Manchmal reicht es nicht Elemente einfach nur auf dem Bildschirm darzustellen, dann soll eine Ausrichtung erfolgen. Die einzelnen Formen der Ausrichtung werden Ihnen nun in diesem Kapitel nÀher erlÀutert.

Listen

FĂŒr Listen oder AufzĂ€hlungen in HTML gibt es mehrere Möglichkeiten der Darstellung. Sie haben dabei immer die gleiche Struktur: Sie bestehen aus einem einleitenden Listen Element, den Listenpunkten bzw. dem Listeninhalt und dem beendenden Listen Element.

Grafiken

Eine gerne verwandte Möglichkeit der Gestalltung von Webseiten ist die Benutzung von Grafiken, Bildern und anderen grafischen Objekten.

Formulare definieren

Formulare kann man sich wie ein gewöhnliches Formular aus Papier vorstellen: Man schreibt etwas rein, kreuzt etwas an und schickt es dann (mit der Post) ab. Ebenso funktionieren auch Formulare in HTML-Dokumenten.

Formulare – Felder

Felder dienen zu Eingabe von Daten, Texten und sonstigem. Im Vergleich zum Papier-Formular stellen sie z.B. ein Feld fĂŒr den Namen, ein Feld fĂŒr einen Text oder Felder fĂŒr ander Dinge dar.

Formulare – Buttons und Boxen

Buttons/Knöpfe werden z.B. zum Absenden oder ZurĂŒcksetzten notwendig. Boxen sind einzellige Felder. Ihre Funktion ist es, das Ankreuzen zu ermöglichen.

Tabellen erstellen

Eine Tabelle setzt sich aus mehreren verschiedenen Elementen zusammen. Das wichtigste ist das TabellengerĂŒst, welches mit dem table-Element beschrieben wird. Beispiel:

Tabelleneigenschaften

Zur Gestaltung einer Tabelle können mehrere Merkmale beitragen. Hier einige davon.

StyleSheets

StyleSheets, genauer Cascading StyleSheets (CSS), sind Definitionen, welche festlegen, wie bestimmte Elemente, Objekte, Klassen (etc.) auszusehen haben. Sie sollen helfen Dokumente zu vereinheitlichen und Umstellungen im Design vereinfachen. Da CSS selbst sehr umfangreich ist, wird hier lediglich darauf eingegangen werden, wie man CSS in HTML einsetzt.

Skripte

JavaScript , VBScript und andere Skriptsprachen können dazu beitragen, die InteraktivitĂ€t zwischen User und Seite zu fördern. Sie sind meist keineswegs mit HTML zu vergleichen und setzten grĂ¶ĂŸtenteils da an, wo HTML aufhört: AktivitĂ€t. So ist es z.B. möglich aktiv in HTML-Dokumente mittels ( Java )Script einzugreifen, Dokumente können personalisiert werden oder andere Dinge können geschehen. Da diese Sprachen einen sehr großen Umfang haben, wird hier lediglich auf die Verwednung in HTML eingegangen werden.

Image-Map

Image-Maps sind Bilder/Grafiken ĂŒber die ein bestimmtes Koordinatenmappe (Map) gelegt wurde. Anhand dieser Koordinaten können nun auf dem Bild/der Grafik Bereiche (Areas) markiert bzw. bestimmt werden.

IFrames

IFrames sind, ebenso wie Frames, Rahmen. Der Unterschied besteht jedoch darin, dass sie “Inline” Frames sind, was bedeutet, dass man sie innerhalb eines Dokumentes einsetzten kann. IFrames sehen im Prinzip aus, wie ein kleines Fenster, mitten in einer Seite; können aber genauso wie Frames mit verschiedenen Dateien ‘gefĂŒttert’ werden.
Leider unterstĂŒtzen derzeit nicht alle Browser diese Art von Frames, deshalb sollten Sie mit der Nutzung vorsichtig sein.

Document Type Definitionen

HTML 5

Im Januar 2008 war es soweit. Das World Wide Web Consortium (W3C) hat den ersten Entwurf fĂŒr HTML in der neuen Version 5 veröffentlicht. Trotz XHTML und XML, die die Zukunft darstellen sollen, wird es eine neue Version der “Ur-Programmiersprache” fĂŒr Webanwendungen geben. Einige der Neuheiten im Zusammenhang mit HTML5 sind bereits in aktuellen Browserversionen enthalten.

Java

Java ist eine C/C++ Àhnliche Programmiersprache. Mit Hilfe von ( Java ) Applets können die Funktionen dieser Sprache in HTML integriert werden.

Multimedia

In HTML-Dokumenten können die verschiedensten Arten von multimedialen Elementen integriert werden. Die Möglichkeiten reichen von Musik/KlĂ€ngen ĂŒber Videos sogar bis hin zu 3D-FlĂŒgen ĂŒber Landschaften. Da es nun schon unzĂ€hlige Arten dieser Dinge gibt, werden wir hier nicht auf jede einzelne eingehen können und werden. Jedoch werden wir versuchen die wichtigsten hier aufzuzeigen und zu erlĂ€utern.

Weiterlesen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>