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=""> <strike> <strong>