Sie sind hier : Web Design > HTML DinkostaOnline 
  

Home
Themen
Computer
Web Design
Software
Einführung ins HTML
 HTML (Hypertext Markup Language) ist die Sprache die man braucht um Web Seiten zu machen. Ich werde den Teil über die Geschichte und die Entwicklung des HTML überspringen und mich auf den praktischen Gebrauch konzentrieren.
 Um ein HTML Dokument zu erzeugen, öffnen Sie Notepad und tippen Sie foldendes ein:
<html><head>
<title>Der Titel</title>
</head>
<body>
Tippen Sie hier etwas Text ein ...
</body></html>
Jetzt gehen Sie zu Datei>Speichern unter...(File > Save As...), im Feld Speichern als Dateityp wählen Sie Alle Dateien, und im Feld darüber tragen Sie einen Namen für die Datei ein, setzen einen Punkt und fügen htm oder html hinzu (zum Beispiel: "einname.html" - ohne Anführungszeichen). Speichern.
 Jedes HTML Dokument muss die Tags haben, die Sie im obigen Beispiel sehen (nur wenn es sich um ein Frames-Dokument handelt - dann setzt man anstatt des "body" den "frameset" Tag).
Wenn wir nun die Hintergrundfarbe und die Textfarbe für das Dokument bestimmen wollen, fügen wir dem BODY Tag die Attribute bgcolor und text mit den entsprechenden Werten hinzu. Um als Hintergrundfarbe Rot und als Textfarbe Schwarz zu setzen:
<body bgcolor=red text=black>
Das HTML Dokument hat jetzt einen roten Hintergrund und schwarzen Text den Sie eingetragen haben. Um die Hintergrundfarbe zu ändern müssen wir den Wert für das Attribut "bgcolor" ändern (der Name der entsprechenden Farbe in Englisch - z.B. green, azure, magenta etc. oder in der hexadezimalen Form - "#000000" für Schwarz, "#FFFFFF" für Weiss, "#FF0000" für Rot usw.). Um die Farbe oder Grösse eines Textabschnittes oder Wortes zu ändern, können Sie den <font> Tag benutzen (obwohl CSS zu empfehlen ist). Beispiel: <body bgcolor="red" text=black>Text in schwarz<font color="white" size="4">Text in weiß</font>. Die Fontgrösse geht von 1 bis 7 (Standard ist 3), und für die Fontfarbe gilt das Gleiche wie für die Hintergrundfarbe.

Allgemeines: HTML erkennt nicht mehr als eine Leerstelle. Um mehr Abstand zwischen Elementen zu bekommen kann man das Sonderzeichen &nbsp; oder CSS benutzen.
Es wird nicht zwischen Groß- und Kleinschreibung unterschieden. Man kann sogar BODY BGcoLOR=rED eintippen und es wird akzeptiert.
Wenn Sie eine Web Site bauen, dann sollten sich alle HTML Seiten, Bilder, externe Dateien für den Site in einem Ordner befinden, um die Verweise leichter zu definieren.
Einige Tags brauchen keinen Abschluß-Tag, z.B. <BR>, <IMG>, bei manchen ist es optional, z.B. <P>. Aber all die anderen brauchen einen Abschluß-Tag, sonst funktionieren sie nicht.

Der Kopf: Im Kopf (<head>) des Dokuments kann man folgende Elemente einsetzen: <title>, <base>, <meta>, <script>, <link> und <style>.
Die link und style Elemente sind an CSS, während script an Scriptsprachen gebunden ist.
Mit title definiert man den Text, der in der Titelleiste erscheint.
Die meta Elemente sind nützlich für Suchmaschinen im Internet, die eine Web Site damit indexieren. Aber Meta-Angaben können auch verschiedene Anweisungen für den Web-Browser oder Web-Server enthalten. Die wichtigste Attribute für Meta-Tags sind name und content. Beispiel für Meta-Angaben:
<meta name="description" content="Kleine Schule des HTML">
<meta name="keywords" content="html, hypertext markup language, tags, kopf, meta">


Der Körper: Eine der wichtigsten Eigenschaften des HTML ist die Möglichkeit, Links (Verweise) zu definieren, mit denen man zu anderen Stellen im eigenen Site führen kann, aber auch zu beliebigen anderen Adressen im Internet. Ein Link definiert man mit dem A (anchor) Tag und dem href (hyper-reference) Attribut. Beispiel: <a href="eineseite.html">Link</a>. Der Abschluss-Tag </a> ist notwendig, im Namen des Links darf es keine Leerzeichen geben und man muss auf die Gross- und Kleinschreibung achten. Wenn man zu einer Stelle verweist, die ausserhalb des eigenen Sites liegt, benutzt man eine Absolute URL - dh. die komplette Adresse (z.B. <a href="http://dinkosta.tripod.com/eineseite.html"). Damit sich der neue Link in einem separaten Fenster öffnet, setzt man im Tag das Attribut target mit dem Wert "_blank", z.B.: <a href="eineseite.html" target="_blank">Link</a>.
Auf ähnliche Weise werden auch Email-Links gemacht, nur muß in den Anführungszeichen mailto: gefolgt von der Email-Adresse stehen. Beispiel:<a href="mailto:[email protected]">Kontakt</a>

Um Bilder in ein HTML - Dokument einzubinden benutzt man den IMG Tag und das Attribut SRC. Beispiel: <IMG src="bild.jpg">. Weitere Attribute die man mit diesem Tag benutzen kann sind: width, height, alt, border usw.
Für das Ausrichten benutzt man das Attribut Align, z.B.: <P align=right>. Die möglichen Werte sind: left, right, center, justify.
Mit <BR> fügt man an der gewünschten Stelle einen Zeilenumbruch ein. Mit dem <P> Tag erreicht man das Gleiche, nur mit dem Unterschied dass der Zeilenabstand grösser ist und dass dieser Tag Attribute erlaubt (z.B. align, id, class, style).
Tabellen sind ein wichtiges Mittel für die Gestaltung von Seitenlayouts. Mit ihnen kann man die verschiedenen Seitenelemente leichter und besser verteilen. Es ist ziemlich leicht eine einfache Tabelle zu gestalten, z.B.:
<TABLE align="left" bgColor="azure" border="0">
<TR><TD>
Der Inhalt kommt zwischen den TD Tags
</TD></TR></TABLE>

Mögliche Attribute für <TABLE> sind: width, height; border, bgcolor, align, border, id, title usw., für <TR> (Tabellenzeile): height, align, valign, bgcolor, title und für <TD> (Tabellenzelle): width, height, bgcolor, align, title, rowspan usw.
Wenn man aber komplexere und eingenestete Tabellen bauen will, wird es schwieriger und das ist einer der schwierigsten Teile des HTML überhaupt.


Startseite  |  CSS  |  Batch Dateien  |  JavaScript  |  Software  |  Reisetipps  |  Pirot
Hosted by www.Geocities.ws

1