Benutzer-Werkzeuge
Inhaltsverzeichnis
HTML Einführung
HTML steht für Hypertext Markup Language, zu deutsch: Hypertext Auszeichnungssprache. Das heißt, dass für den Anwender vor dem Bildschirm, der darzustellende Text gegliedert und lesbar angeordnet (ausgezeichnet) wird. Dies geschiet mit sogenannten TAGs. Beim TAG handelt es sich um einen oder mehrere Textbefehle, der den Text anordnet, wo er zu stehen hat und wie er zu lesen sein soll. Hintergrund und Tabellen können den Text auf der Webseite zusätzlich gliedern.
Ohne HTML TAGs wird eine Webseite mit weißem Hintergrund und der Text wird oben links in schwarzer Farbe in der HTML-Größe 3 in einer Zeile ohne Absätze dargestellt. Durch HTML lässt sich einiges an der Darstellung der Webseite ändern. Zum Testen einfach einen Editor (Notepad, gedit ect.) öffnen, im geöffneten Textfenster zunächst '<'html'>', dann darunter '<'body'>' jeweils ohne Anführungszeichen eingeben, dann einfach einen einfachen Text (z.B. Lorem Ipsum Text) eingeben, am Ende des Textes mit '<'/body'>' und darunter '<'/html'>', ebenso ohne Anführungszeichen (' ') die Eingabe beenden und z.B. als test.html abspeichern. Die HTML-Datei anschließend mit einem Browser öffnen. So, wie der Text im Browser angezeigt werden würde, würde er auch Online aussehen. Langweilig, fad und unübersichtlich. Unabhängig vom Inhalt. Für Besucher der Webseite schnell ermüdend, zumal der Text auch keine Absätze, Überschriften, Textattribute wie Fett, Kursiv und Unterstrichen enthält.
Wie geht es besser?
Mit HTML Tags. Folgendes HTML Beispiel:
<!DOCTYPE html>
<HTML lang=„de-DE“>
<HEAD>
<TITLE>
Dies ist eine Seite von HTML Arena.
</TITLE>
meta name=„generator“ content=„DokiWiki/“
</HEAD>
<BODY bgcolor=„yellow“>
'<'div align=„center“'>' <h1>Willkommen</h1><br />
zu HTML Arena!'<'/div'>'
</BODY>
</HTML>
Es handelt sich hierbei um ein HTML Grundgerüst. Jede HTML Webseite enthält dieses Grundgerüst mehr oder weniger. Bei Durchführung des oben aufgeführten Codes in einem Editor oder Browser wird es nur eine Webseite geben mit gelbenHintergrund und in der Mitte oben in Überschriftgröße 'Willkommen' und in einer neuen Zeile in Normalschrift 'zu HTML Arena!'. Mehr nicht. Man sieht, dass man einiges an Tags verwenden muss, um diese wenigen Zeichen dargestellt zu bekommen. HINWEIS: Die Anführungszeichen an den Klammern ('<>') dienen lediglich dazu den TAG auf der Webseite darzustellen und diesen nicht ausführen zu lassen.
Was bedeuten die einzelnen TAGS?
Zunächst einmal werden Programme, die berechtigt sind Datein zu öffnen durch <!DOCTYPE HTML> darauf hingewiesen, dass die Datei als Dokumenttyp HTML ausgelegt ist. Für Browser heisst das 'Hoppla, Datei könnte für mich sein', da Browser und auch diverse andere Programme darauf ausgelegt sind HTML darzustellen oder zu bearbeiten. Dieser Befehl ist nicht zwingend notwendig, wird aber empfohlen.
'<'HTML lang=„de“'>' heisst, dass ab hier die HTML-Seite beginnt und die Sprache Deutsch ist. (Lang = Language = Sprache, de=deutsch)
'<'HEAD'>' Der Kopfbreich der HTML-Seite. Darin befindet sich u.a. der Titel '<'title'>' der Webseite und die Metainfos(-tags). Die Metatags waren in der Vergangenheit für Suchmaschinen von Bedeutung. Seit SEQ sind die Metatags nicht mehr so wichtig. Die Tags beinhalteten den Autor der Webseite, den Generator der Webseite, den Besitzer der Webseite usw. Einige SEQ Suchmaschinen wie Google, Yahoo, Bing, usw. schauen dennoch in die Metatags, um die Trefferquote der Suchanfrage zu erhöhen. Im Headbereich kann man ebenso CSS Anweisungen oder einen Link zu der CSS Datei eintragen oder Javascripte einsetzen und diese bei Aufruf der Seite ablaufen lassen.
'<'body bgcolor=„yellow“'>' Ab hier beginnt die eigentliche Webseite. Alles was hinter dem Body-Tag eingetragen ist, wird auf der Hauptseite auch angezeigt. Im Gegensatz zum Titel, der in der Browsertitelzeile angezeigt wird. Neben dem Body-Eintrag, befindet sich innerhalb des Tags der Befehl für die Hintergrundfarbe gelb (bgcolor = backgroundcolor = Hintergrundfarbe, Yellow = gelb).
'<'div align=„center“'>' <h1>Willkommen</h1><br /> Diese Zeile mit der div Anweisung dient dazu, den nachfolgenden Text zentriert, also mittig des Bildschirms oder des Contents (Inhaltsfenster) darzustellen. Die darauffolgende h1 Anweisung steht für das Textattribut 'header' (Überschrift) in der größtmöglichen Form von 3 Möglichkeiten (h1 - h3). Nach Ende der h1 Anweisung folgt automatisch ein Zeilenumbruch. Zusätzlich kann man einen weiteren Zeilenumbruch mit der br Anweisung (break) erzwingen. Die br Anweisung ist der einzige Tag in HTML, der nicht mit einem Ende Tag beendet werden muss.
zu HTML Arena!'<'/div'>' Dies ist weiterer Text, der in einer neuen Zeile nach dem 'Willkommen' gezeigt wird. Hier 'zu HTML Arena!' Mit dem Ende div (/div) wird der Browser angewiesen, den nachfolgenden Text nicht mehr zentriert darzustellen.
Mit '<'/BODY'>' wird dem Browser mitgeteilt, dass die Webseite nur bis hierher anzuzeigen ist. Dahinter könnten noch Javascripts oder ähnliches ausgeführt werden, die aber nicht angezeigt, jedoch im Hintergrund ausgeführt werden, wie Statisticscripts für den Webseitenadministrator zum Beispiel.
Zu guter Letzt: '<'/HTML'>' heißt für den Browser, dass die HTML Datei beendet ist.
Jeder Tag, der geöffnet wurde, wurde auch wieder mit einem / geschlossen.
Seiten-Werkzeuge
