GVCom Easy Webdesign

Der leichte Weg zur eigenen Homepage


Dies ist nur ein Grundkurs in HTML, kein Lehrgang !

Den Anlaß für diese Seite gab ein Freund, der seine Webseiten mit einem Online-Editor
machte, wie ihn viele Provider anbieten.
Aus verständlichen Gründen war er mit dem Ergebnis seiner Bemühungen nicht zufrieden.

Der einzige Weg um solche eine Seite zu verbessern führt über HTML Grundkenntnisse.

Jeder der die folgenden Erklärungen und Beispiele versteht, kann seine Webseiten leicht
verbessern.
Für weitere Informationen über HTML empfehle ich das Tutorial von Stefan Münz.

Self-HTML von Stefan Münz


Was ist HTML ?

HTML ist eine Befehlssprache zur Gestaltung von Internetseiten.

Die grundsätzliche Struktur einer Webseite richtet sich nach den HTML Kommandos.
Diese nennt man TAGs. Es sind spezielle Kommandos, die zwischen spitze < > Klammern gesetzt werden. Viele der TAGS müssen geöffnet werdem wie <FONT> und wieder geschlossen werden wie </FONT>.

Am Anfang und am Ende der Seite stehen besondere TAGS. <HTML> und </HTML> zeigen an daß HTML verwendet wird.

Die Seite beginnt mit einem Kopf genannt HEAD mit den Titel der Seite genannt TITLE dazwischen.Beispiel: <HEAD><TITLE>hier steht der Titel</TITLE></HEAD>

Mit dem TAG <H1>hier steht der Text</H1> macht man eine Überschrift.
Die Zahlen 1-7 stehen für die Größe des Textes.(1 ist am größten und 7 ist am kleinsten)

Es gibt auch ein besonders Kommando für verschiedene Schriftgrößen im Text.
<FONT SIZE=(Nummer 1 - 7)>hier steht der Text</FONT>

Aus nicht nachvollziehbaren Gründen ist in diesem Fall Größe 1 am kleinsten.


Eine Querlinie zur Teilung macht man mit dem <HR> TAG.
Dieses Kommando braucht auch kein End-TAG.

Die Dicke der Trennlinie wird mit <HR SIZE=?> und die Breite mit <HR WIDTH=?> bestimmt.

(Die tatsächliche Dicke hängt vom verwendeten Betrachter (Browser) ab.
Bitte beachten Sie daß auch Ihr Editor im Vorschau-Modus dies vielleicht
nicht korrekt anzeigt.

Beispiel 1


Beispiel 2

Beispiel 3

Natürlich kann man auch Bilder als Trennlinien verwenden.

Beispiel

Zum Einsetzen von Bildern kommen wir später.


Am Ende der Seite benutzt man

<ADDRESS>hier ist Platz für Ihre Adresse</ADDRESS>

für die Postanschrift und E-Mail Adresse.


Es folgt nun ein Beispiel für das Grundgerüst eine Webseite.

Betrachten es sorgfältig und versuchen Sie die Kommandos zu verstehen.

<HTML>
<HEAD>
<TITLE>GVCom Easy Webdesign</TITLE>
</HEAD>
<BODY>
<H1>GVCom Easy Webdesign</H1>
<H2>Der leichte Weg zur eigenen Homepage;/H2>

Hier ist Platz für den Text
und die Bilder

<HR>
<ADDRESS>
Gerhard Huber<BR>
<A HREF="mailto:G.Huber@gmx.net">G.Huber@gmx.net</A>
</ADDRESS>
<P>
Copyright © 1998 Gerhard Huber<BR>
</BODY>
</HTML>


Eine Homepage die nur Text enthält wäre langweilig.

Mit dem Befehl <IMG SRC="beliebiges Bild - example.gif - example.jpg>

können Sie Bilder in Ihre Homepage einbauen.

Wie Sie vielleicht bisher herausgefunden haben braucht HTML eine besonderes
Kommando <BR>(Line-break)wenn die Zeile zu ende sein soll.
Ohne das LINE-BREAK <BR> und Absatz <P> Kommandos wird jeder Betrachter
(Browser)Ihren Text anders anzeigen, weil der Zeilenumbruch von der Größe
des Bildschirms und des Bildausschnittes abhängt.

(Endzeichen </BR> and </P> werden von den meisten Browsern nicht
unbedingt benötigt.)


Sehr wichtig sind Tabellen.

Viele Anwender verzweifeln wenn sie Texte und Bilder exact nebeneinander
positionieren möchten.
Die einfachste Methode unter HTML ist dafür die Vewendung von Tabellen.
In die einzelnen Felder der Tabellen kann man Texte und Grafiken einfügen.
Leere Tabellenfelder dienen als Abstandhalter.

Tabellen werden mit den folgenden Kommandos (TAGS) aufgebaut.

<TABLE BORDER=1>
<TR><TD>text 1</TD><TD>image 1</TD>
<TR><TD>text 2</TD><TD>image 2</TD>
</TR></TABLE>

Das erste Kommando zum Aufbau eine Tabelle ist <TABLE>
mit oder ohne den Zusatz BORDER.

Bei der Verwendung von <TABLE BORDER=1> kann man die Struktur der Tabelle
erkennen während man daran arbeitet.
Später ersetzt man BORDER=1 durch BORDER=0 um den Rand zu verbergen.
(siehe nachstehendes Beispiel)

Natürlich brauchen Tabelle verschiedene Kommandos die den Beginn <TABLE>
und das Ende </TABLE> anzeigen.

Der Anfang und das Ende eine Zeile/Reihe wird mit <TR>und </TR> definiert.
mit <TD>und </TD> werden die Felder für Text und Grafiken erstellt.
Bespiel:

text 1image 1
text 2image 2


text 1image 1
text 2image 2

text 1image 1 text 2
text 3image 2 text 4

Mit den Kommandos <TD WITH=(Zahl)> oder <TD WITH="Zahl%"> kann man die
Größe der Tabellenfelder vorgeben.
Dies ist besonders wichtig, wenn man leere Felder als Abstandhalter
benutzen will.

Beispiel:(<TABLE WIDTH="100%" BORDER=1>)

Breite 20%Bild oder Text
Breite 70%Breite 30%

Selbstverständlich sind dies nicht alle Kommandos für die Gestaltung
von Tabellen.
Für fortgeschrittene Anwender gibt es zum Beispiel noch
<TD ROWSPAN=?> und <TD COLSPAN=?>

text 1ROWSPAN=2 text 2
text 3Text 4

COLSPAN=3
text 1jedes Bild Text 2

Nochmals im Klartext ROWSPAN=(Zahl) gibt die Anzahl der Zeilen (ROW) die
überspannt werden und COLSPAN=(Zahl) gibt die Anzahl der Spalten (COLUMS).


Keine Seite wäre vollständig ohne LINKS.

Links sind Verweise und Querverbindungen zum Aufruf von anderen Seiten.

Ein Link setzt man mit dem folgenden Kommando:

<A HREF="http://members.aol.com/Dein-Name.htm oder andere Web-Adresse"></A>

Links kann man auch mit Bildern verknüpfen:

<A HREF="http://members.aol.com/Dein-Name.htm or any other Web-Address">
<IMG SRC="irgend ein Bild - example.gif - example.jpg></A>

Ein Link ist umschlossen vom Anker-TAG <A> und </A> und beginnt mit <A HREF=" >

Bitte vergessen Sie nicht den End-TAG </A> zu setzen.
Die Ergebnisse sind zwar lustig aber unbefriedigend.


Wenn Sie diese Beispiele und Kommandos verstanden haben, können Sie die Option
"Seitenquelltext" anzeigen Ihres Browsers benutzen um sich den Quelltext von verschiedenen
Seiten anzeigen zu lassen.
Speichern Sie diese als HTML-Seiten ab und experimentieren Sie damit.


Zurück zu meinem Surfboard


Gerhard Huber
G.Huber@gmx.net

Copyright © 1998 Gerhard Huber