1. HTML (Hyper Text Markup Language)

HTML (Hypertext-Kennzeichnungssprache) ist, als sogenannte Seitenbeschreibungssprache, zuständig für die Darstellung und Vernetzung von Informationen auf Webseiten im World Wide Web.
In diesem Artikel beschreibe ich die Grundlagen des HTML.

2.1 Struktureller Aufbau einer HTML-Datei

Das Besondere an HTML ist, dass es selbstständig zwischen gewöhnlichen Texten und Hypertextfunktionen (Querverweise) unterscheiden kann. So ist es also möglich durch logisches Markup – d.h. spezifizierte Angaben definieren logische Bedeutungen verschiedener Textelemente – Überschriften, Absätze, Zitate,… zu definieren.
Die Definition dieser logischen Markups erfolgt durch sogenannte Tags.
Tags können durch verschiedene Attribute genauer definiert werden (zum Beispiel Hintergrundfarbe). Beinahe jeder Tag muss von einem Endtag abgeschlossen werden. Ausgenommen hiervon ist zum Beispiel die neue Zeile Definition.

<Tagname Attribut ></Tagname>

Ein HTML-Code Beispiel:

<h1>Überschrift 1</h1><br />
<address>Kursiv</address>

Als normaler Text erscheint der HTML Code so:

Überschrift 1

Kursiv

Es ist jedoch zu Beachten, dass natürlich verschiedene Tags ineinander geschachtelt werden können, jedoch müssen innenliegende Tags vor den außenliegenden Tags beendet werden.

Richtig:

<tag1>

<tag2>

…..

</tag2>

</tag1>

Falsch:

<tag1>

<tag2>

….

</tag1>

</tag2>

2.2 Allgemeiner HTML-Aufbau

Jede HTML-Datei beginnt mit dem Tag <html> und endet mit </html>. Jede Datei wird in zwei Bereiche gegliedert:

  • Kopf – definiert durch den Tag <head> … </head>
  • Rumpf – definiert durch den Tag <body> … </body>

Im Kopf werden Informationen für Suchmaschinen hinterlegt, die Seitenüberschrift und Schlüsselwörter.
Diese Informationen werden vom Browser im Hintergrund ausgelesen.
Im Rumpf wird die eigentliche Infomation gespeichert, die auf der Webseite vom Browser dargestellt wird.
Hierzu zählt die Erscheinungsform, zum Beispiel die Hintergrundfarbe oder die Schriftart.

<html>

<head>

<title>Meine bl0gger Welt</title>

</head>

<body>

… (BodyInformationen)

</body>

</html>

EXKURS:

Durch Rechtsklicken auf meine Webseite, kann man sich in dem Menü den ‘Seitenquelltext anzeigen’ lassen. Hier seht ihr wie eine (sehr große) HTML-Datei aussieht. Ebenfalls seht ihr hier ganz gut, wie kompliziert die Tags geschachtelt sind.
Wenn ihr diesen Quelltext in den Editor kopiert und es dann als .html Datei abspeichert, könnt ihr die Seite wieder offline anschauen. Es sind also komplett alle Informationen der Webseiten im Quelltext gespeichert.

2.2.1 Kopf (Head)

Die Information im Head-Bereich kann ein Element, oder bis zu sieben Elemente beinhalten.
Diese Informationen werden nicht vom Browser auf der Webseite angezeigt.

title

Bezeichnet den Titel der Webseite, der in der Titelleiste angezeigt wird. Auf dieser Seite sieht man in der Titelleiste jedoch überall ‘http:bl0gger.de.vu‘. Der Browser sieht diese Seite allerdings als: ‘http://surfopi.wordpress.com/2008/10/30/einfuhrung-in-…arkup-languageeinfuhrung-in-html-hyper-text-markup-language/

meta

Hier werden Meta-Tags hinterlegt, die Suchmaschinen wie Google auslesen.

&lt;meta name="description" content="Meine Bl0gger Welt - Kurze HTML Einführung mit Anwendungsbeispielen" /&gt;

base

Gibt entweder eine Basis-URI oder einen Basisframe an.

link

Dient zur Angabe von logischen Beziehungen zu anderen Ressourcen. Am häufigsten zur Einbindung von Stylesheets benutzt.

script

Bindet Code in einer bestimmten Skriptsprache ein, hauptsächlich JavaScript.

style

Enthält Stylesheet-Code, hauptsächlich CSS-Regeln. Es enthält Informationen über Textformation und Darstellung der Webseite. Der Browser liest das Stylesheet zwischen

<style type=“text/css”> und </style>.

object

Bindet eine externe Datei ein. Browser dürfen solche Objekte im Dokumentkopf nicht darstellen.

2.2.2 Körper (Body)

Hab ich eigentlich schon weiter oben beschrieben.

Der Bodybereich einer Webseite reicht von dem Tag <body> bis zu dem abschließenden Tag </body>
Zwischen diesen Bereichen sind alle Links, Seitenverzeichnisse, Bilder und normaler Text hinterlegt.

Ebenfalls findet man hier definierte Bereiche der Webseite.
Bei mir z.B.<div id=“page”> und <div id=“header”>

Hier wird die komplette Seite also als “page” definiert und der nächste Bereich ist der “header”.

<div id=“header”>
<h1><a
href=“http://surfopi.wordpress.com/”>- Meine bl0gger Welt -</a></h1>
<div
class=“description”>iPhone Testberichte Uni Segeln Umwelt Bilder</div>

Äußern tut sich die Information im Header-Bereich so:

Da der Header der erste Bereich ist, wird dieser vom Browser auch als erstes dargestellt.

Wie die Datei weitergeht und wie der erste/aktuellste Post in HTML dargestellt wird, erfahrt ihr durch rechtsklicken und “Seitenquelltext anzeigen”.

3. HTML Verlinkungen – Verweise

Die wohl wichtigste Eigenschaft der HTML Documente ist die Möglichkeit mehrere HTML Documente zu vernetzen/zu verlinken (Links bzw. Hypertext References).
Hier kommen ebenfalls Tags zum Einsatz. Meistens wird ein Link, der vom Betrachter aktiviert werden kann, unterstrichen oder in einer anderen Farbe dargestellt.
Je nach verwendetem Attribut dieser Hypertext Reference wird die Datei, auf der der Link zeigt, im gleichen oder in einem neuen Fenster/Tab geöffnet. Doch Links werden nicht nur auf HTML-Documente, sondern ebenfalls auf einzelne Dateien verlinkt. Hierzu muss diese Datei allerdings auf einem Server hochgeladen sein, und somit eine feste Adresse besitzen.
Um einen Link zu erstellen benutzt man den Tag <a></a> (wie Anker) mit dem Attribut href (Hypertext Reference). Zwischen den Tags kann man einen normalen Text hinterlegen, der vom Browser anstatt der Webseiten-Adresse dargestellt wird.

<a href=”http://www.bl0gger.de.vu> Link auf meine Webseite </a>

Die URL (Uniform Resource Locator) ist eine Adresse mit allen Angaben um Ort und Namen der Datei weltweit eindeutig zu bestimmen. Keine URL gibt es zweimal! Jede referenzierte Datei weltweit ist also durch ihre URL einzigartig.

Aufbau der URL:

Protokoll: Dateiname/Directory/Datei#Target
Das im Internet verwendete Übertragungsprotokoll ist http.

Domainname: Eine Domain kennzeichnet ein Verzeichnis auf einen Web-Server durch einen weltweit nur einmal vergebenen Namen.

Directory: Bezeichnet Unterverzeichnisse auf der Domain

Dateiname: Bezeichnet eine Datei in einem Directory

#Target: Bezeichnet eine Sprungdatei in einer Datei. Zum Beispiel einem Anker, eine Sprungdatei. Hier springt der Browser dann zu einer bestimmten Überschrift in der HTML-Datei.

written by Roman Harcke

Related Posts Plugin for WordPress, Blogger...
ÜBER DEN AUTOR

Roman

PG Hey, willkommen auf meinem Blog! Ich bin 24 Jahre alt und studiere Fahrzeug und Flugzeugtechnik an der FH München. In meiner Freizeit betreibe ich diesen Blog und gehe gerne fotografieren. Um mehr über mich und diese Seite zu erfahren, oder Kontakt mit mir aufzunehmen, habe ich die "About-Seite" eingerichtet. Viele Grüße