Inhalt der aktuellen Seite
HTML Einsteigerkurs
Dies ist eine kleine kurze Einführung in das Thema HTML. Es behandelt bei Weitem nicht alles, was mit HTML machbar ist, ermöglicht einem aber, sich ein Grundwissen anzueignen, auf dem dann durch Lernen aufgebaut werden kann.
-
Das Grundgerüst
Das Grundgerüst einer HTML-Seite sieht wie folgt aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Meine erste Homepage</title> </head> <body> </body> </html>Der Hauptteil der Homepage wird später zwischen
<body>und</body>eingefügt. Standardangaben, die für die gesamte Seite gelten, für die Text- und Seitengestaltung - wie z.B. Text- und Hintergrundfarbe - werden als Attribute im<body>-Tag eingefügt, z.B.:<body bgcolor="#FFFFFF">
Im<head>-Sektor werden Dinge eingegeben, die man nicht direkt auf der Homepage sieht, so z.B. Meta-Tags, CSS-Angaben oder wie im Beispiel der Seitentitel, welcher in der obersten Zeile des Browser dargestellt wird, hier "Meine erste Homepage", eingefasst in die Tags<title>und</title>. -
Der Link
Nun eines der wichtigsten Dinge auf einer Homepage: der Link! Erstmal nur ein einfacher Textlink:
<a href="start.htm">Startseite</a>Kurze Erklärung: Als Link bekommt man das Wort
Startseiteangezeigt und man wird auf die Seitestart.htmweitergeleitet, welche sich im selben Frame öffnet (zu Frames komme ich später noch).Zusätze: Man kann noch angeben, in welchem Frame der Link ausgeführt werden soll oder noch einige andere Dinge, die im Folgenden aufgezählt werden.
Es gibt folgende Möglichkeiten, die man alstargetangeben kann:_blanköffnet den Link in einem neuen Fenster _parentöffnet den Link im selben Browser-Fenster _selföffnet den Link im selben Frame einframenameöffnet den Link im angegebenen Frame Hier nun ein Beispiel:
<a href="start.htm" target="_blank">Startseite</a>
Dieser Link würde sich nun in einem neuen Browserfenster öffnen! -
Bilder
Im Folgenden nun ein kleines Beispiel, wie man ein Bild einfügen kann:
<img src="bild.jpg" width="300" height="500" alt="Logo">Kurze Erklärung: hinter
src(=source = Quelle) gibt man den Bildnamen an - hierbild.jpg. Der Name kann natürlich variieren.
widthundheightgeben Breite und Höhe des Bildes an,alt(= Alternativ) gibt einen alternativen Text an, welcher angezeigt werden soll, wenn das Bild nicht geladen werden kann oder bei Browsern, die Bilder deaktiviert haben.
Es gibt noch dasborder-Attribut, das man mit einbringen kann, um die Stärke des Außenrahmens des Bildes anzugeben.Im Folgenden ein Beispiel, mit einem Bild, dass 10×10 Pixel groß ist und einen Rahmen der Stärke 2 hat:
<img src="bild.jpg" height="10" width="10" border="2" alt="Logo">Wenn man z.B. keinen Rahmen haben will, gibt man einfach border="0" ein, was z.B. bei verlinkten Bildern sinnvoll ist, da diese sonst eine Rahmenfarbe wie die Farbe von Textlinks bekommen!
Bilder sollten immer die Attributesrc,width,heightundaltbeinhalten. -
verlinkte Bilder
Ein Bild als Link zu machen (wenn man draufklickt, wird man auf eine Seite weitergeleitet) ist eigentlich recht einfach, da man nur einen Link mit einem Bild kombiniert. Das sieht wie folgt aus:
<a href="start.htm"><img src="startbild.jpg" height="50" width="50" border="0" alt="Logo"></a>Kurze Erklärung: Man ersetzt nur einfach bei dem Link den Text, auf den man vorher bei einem Textlink klicken konnte, mit einem Bild. Somit klickt man nun auf das Bild drauf und wird auf die angegebene Seite weitergeleitet. In diesem Fall heißt diese Seite
start.htm. Imimg-Tag findet sich wiederborder="0", was bei einem verlinkten Bild dazu führt, dass kein blauer Rahmen (bei Standardbrowsereinstellung) um das Bild angezeigt wird, bzw. die entsprechenede Farbe, ob der Link nun aktiv oder schon besucht ist! Probieren Sie es einfach mal mitborder="0"undborder="2"aus, Sie werden den Unterschied merken! -
Tabellen
Der Grundaufbau einer Tabelle sieht wie folgt aus:
<table> <tr> <td></td> </tr> </table>Kurze Erklärung: Das
table-Tag leitet die Tabelle ein, in diesem Tag können grundlegende Attribute für die Tabelle eingegeben werden, z.B. die Rahmenbreite und die Breite der kompletten Tabelle! Die Tabelle wird durch das</table>-Tag wieder beendet.Das
<tr>-Tag leitet eine Zeile ein. Später wird die Zeile durch das</tr>-Tag wieder beendet.
Das<td>-Tag leitet eine Spalte innerhalb einer Zeile ein. Die einzelne Zeile wird durch</td>wieder beendet. Im<td>-Tag können einige Attribute eingegeben werden, so z.B. die Spaltengröße und die Hintergrundfarbe der Spalte.
Man sollte immer in jeder Zeile genausoviele Spalten angeben, wie in der vorherigen Zeile, da sonst das Gitterraster durcheinander kommt. Allerdings kann man natürlich eine Spalte auch mal leer lassen, wobei man sie mit einem Leerzeichen (Non Breaking Space) füllen sollte, da manche Browser sonst Probleme bereiten, also sollte die Angabe so lauten:<td> </td>.
Im Folgenden nun ein Beispiel für eine Tabelle mit allen oben angegebenen Optionen:<table border="1" width="400"> <tr> <td bgcolor="#007DFB" width="150">Tastenkürzel:</td> <td bgcolor="#007DFB" width="250">Bedeutung:</td> </tr> <tr> <td>STRG + c</td> <td>Die markierte Datei wird kopiert</td> </tr> </table>Hier nun, wie es der Benutzer sieht:
Tastenkürzel: Bedeutung: STRG + c Die markierte Datei wird kopiert -
Frames
Frames waren vor einigen Jahren (so um 2002) noch recht beliebt. Was vor allem daran lag, dass man mit Frames ohne einer Scriptsprache eine sehr komfortable Navigationsleiste bauen konnte, die man nur einmal aktualisieren musste und sie somit auf jeder Unterseite auch aktualisiert war.
Das Frameset wird vor dem
</html>-Tag eingegeben, also zwischen</head>und</html>! Das<body>-Tag läßt man komplett wegfallen (also<body>&</body>).
Im Folgenden nun ein Beispiel für ein einfaches Frameset:<frameset cols="20%,80%" border="1" frameborder="1"> <frame src="framebsp1.htm" name="navigation" target="main" scrolling="no"> <frame src="framebsp2.htm" name="main" target="_self" scrolling="auto"> </frameset>Erklärung: Im
<frameset>-Tag werden die Grundeinstellungen für das Frameset vorgenommen. Es wird festgelegt ob die Seite horizontal (rows) oder vertikal (cols) geteilt wird. Danach wird in Prozent oder Pixeln angegeben, wie groß das jeweilige Frame sein soll. Anschließend wird noch angegeben, wie groß die Grenze zwischen den beiden Frames ist. Ich habe hierborderundframeborderangegeben, da das eine Attribut für den Internet Explorer ist und das andere für den Netscape Navigator, weil beide leider nicht die gleiche Angabe akzeptieren sondern verschiedene benötigen!
Heutzutage hat der Netscape Navigator keine große Bedeutung mehr, allerdings das Frameset auch nicht.Das
<frame>-Tag geht nun - wie der Name schon sagt - auf das einzelnen Frame ein. Die Reihenfolge der<frame>-Tags ist wie die Reihenfolge der Größenangaben. Im<frame>-Tag wird hinter demsrc-Attribut als Wert die Datei angegeben, die in diesem Frame angezeigt werden soll, beinamegibt man einen Namen für dieses Frame ein, z.B. eine nähere Definition oder ein Name, der einem selbst schnell klar macht, was auf dieser Seite enthalten ist. Untertargetgibt man an, wo die Links des Frames ausgeführt werden. Hier kann man entweder einen Namen (das, was beim Frame alsnameangegeben wurde) angeben, oder - wie beim normalen Textlink - eine der drei Möglichkeiten, wie ein Link noch ausgeführt werden kann (_blank,_selfoder_parent).Mit
scrollingwird angegeben, ob ein Scrollbalken am Rand angezeigt wird, die möglichen Werte sind hier:yes,noundauto. Wasyesundnobewirkt ist - denke ich mal - klar,autoallerdings bedeutet, dass ein Scrollbalken erscheint, sobald in diesem Frame eine Seite angezeigt wird, die nicht komplett hinein passt, sodass ein Scrollbalken benötigt wird. Wenn dies nicht der Fall ist, sieht man auch keinen Scrollbalken!Anmerkung: Wenn man bei
targeteinen anderen Frame-Namen angibt sollte eigentlich automatisch jeder auf dieser Seite angegebene Link auf der untertargetangegebenen Seite ausgeführt werden, allerdings funktioniert das nicht immer, sodass man auf der Seite, auf der sich die Links befinden, noch ein kleines Tag im head-Sektor (zwischen<head>und</head>) angeben muss, nämlich:<base target="FRAMENAME">Das erstmal dazu. Es gibt noch die Möglichkeit ein Frameset zu verschachteln indem man ein Frameset in ein anderes mit hinein baut, was man z.B. dann macht, wenn man erstmal eine Seite vertikal teilt (wie im Beispiel oben) und dann noch die zweite, größere Seite einmal horizontal spalten möchte. Ein solches Frameset würde wie folgt aussehen:
<frameset cols="20%,80%" border="1" frameborder="1"> <frame src="framebsp1.htm" name="navigation" target="main" scrolling="no"> <frameset rows="15%,85%" border="1" frameborder="1"> <frame src="top1.htm" name="top" target="main"> <frame src="framebsp2.htm" name="main" target="_self" scrolling="auto"> </frameset> </frameset>Weitere Erklärungen sind hier wohl nicht nötig, da alles genauso ist wie oben, nur das hier eben ein Frameset im anderen mit "eingebaut" ist.
Im folgenden nun nocheinmal das Beispiel einer einfachen Frameseite und einer verschachtelten Frameseite. Das Frame mit der Datei framebsp1.htm ist rot dargestellt und das Frame mit der Datei framebsp2.htm ist grün dargestellt. Die Datei top1.htm ist blau eingefärbt. Die Grenze zwischen den Frames (
border) ist weiß. -
<body>-Tag
Im
<body>-Tag werden einige grundlegende Einstellungen für das aktuelle Dokument vorgenommen, so z.B. die Hintergrund-, Text- und Linkfarbe. Man kann hier auch alternativ zur Hintergrundfarbe ein Bild als Hintergrund auswählen. Im Folgenden sind diese Möglichkeiten aufgezählt:bgcolor="#000000" färbt den Hintergrund schwarz text="#FFFFFF" färbt den Text weiss link="#FF0000" färbt Links rot alink="#00FF00" färbt aktive Links grün vlink="#0000FF" färbt besuchte Links blau background="bg.jpg" fügt das Bild bg.jpgals Hintergrund einEin Beispiel für das
<body>-Tag:<body bgcolor="#000000" text="#FFFFFF" link="#FF0000" alink="#00FF00" vlink="#0000FF"> -
Textgestaltung
Es gibt in der HTML einige Mittel um einen Text zu gestalten. Zuerst wird hier nun die Textausrichtung gezeigt. Mit dem folgenden Tag können sie ihren Text horizontal ausrichten:
<p align="center">Es gibt bei diesem Tag einige Optionen die man wählen kann:
center Textausrichtung ist mittig left Textausrichtung ist linksbündig right Textausrichtung ist rechtsbündig justify Textausrichtung ist im Blocksatz Des Weiteren gibt es die Möglichkeit ganze Bereiche auszurichten. Dazu fasst man den auszurichtenden Bereich in das folgende Tag:
<div align="center"> auszurichtender Inhalt </div>Hier kann man wieder die selben Optionen (ausgenommen
justify) verwenden.Nun kommen wir zur Textgestaltung. Im Folgenden ist aufgeführt, wie man ein Wort kursiv, fett und unterstrichen darstellen kann:
<i>kursiv</i> <strong>fettgedruckt</strong> <u>unterstrichen</u>Des Weiteren kann man bei geschriebenem Text auch noch die Farbe, Schriftart und Größe bestimmen, wie das geht sehen sie im Folgenden:
<font color="#ff0000">Dieser Text ist rot gefärbt</font> <font face="Arial">Dieser Text ist mit der Schriftart Arial geschrieben</font> <font size="3">Dieser Text hat die Schriftgröße 3</font>Nun zum Abschluss sei noch kurz erwähnt, wie man einen Zeilenumbruch macht. Veranschaulicht an einem kleinen Beispiel:
Der Text hat mitten im Satz
<br>
einen Zeilenumbruch.Kurze Erklärung: Durch das
<br>-Tag wird ein Zeilenumbruch hervorgerufen. In der XHTML würde man dieses Tag<br />schreiben, da in der XHTML alle Tags auch wieder geschlossen werden müssen. Weil<br>kein schließendes Tag besitzt, fügt man ein Leerzeichen und das schließende Slash (/) ein.
social bookmarks
