-
HTML Workshop
HTML Workshop
Ziele dieses Workshops : Es soll Neueinsteigern ohne Vorkenntnisse helfen eine eigene Homepage zu entwerfen.Wobei der Workshop mit dem Erstellen eines Konzeptes und grundsätzlichen Schritten beginnt. Der nächste Abschnitt beginnt HTML Grundlagen, welche anhand eines konkreten Beispieles
gezeigt werden.
Inhaltsverzeichniss :
1.0 Konzept erstellen ( Online )
1.1 Was für ein Inhalt soll angeboten werden ?
1.2 Wie soll die Homepage aussehen (Layout) ?
1.3 Wer ist meine Zielgruppe ?
1.4 Wo werde ich meine Homepage hosten ?
1.5 Welche Programme brauche ich für die Erstellung ?
1.6 Welche Bilder bzw. Grafiken sollen eingebundenen werden
1.7 Wir entwerfen ein Struktogramm.
2.0 Das HTML Grundgerüst
2.1 Der body
2.2 Text in HTML
2.3 Grafiken in HTML
2.4 Links / Verweise in HTML
2.5 Tabellen in HTML 1
2.6 Tabellen in HTML 2
2.7 Tabellen in HTML 3
2.8 Textabsätze in HTML
2.9 Listen in HTML
3.0 Frames in HTML 1
3.1 Frames in HTML 2
3.2 Formulare in HTML
3.3 Metatags in HTML
Das Layout :
Nach dem die grundlegenden Inhalte feststehen, soll unsere nächste Überlegung das Aussehen und
somit das Grunddesign sein. Grunddesign ? Mit unserem Grunddesign legen wir fest, in welchem Layout unsere Seite erscheinen soll. Hierzu gehören folgende Punkte : Hintergrund Farben , Schriftfarben, Schrifttypen , Positionierung der Menueführung und etwaiger Bilder bzw. Fotos und ganz wichtig legen wir uns auf eine Auflösung fest. Das bestmögliche Vorgehen ist auch hier wieder das Brainstorming. Alle möglichen Ideen, werden mit mit Stift auf normalees DINA4 Papier grob skizziert. Am Ende sollten, wir somit mehere Möglichkeiten zum Layout für die Start- und Unterseiten haben. Aus diesen Vorlagen können wir nun die beste herraussuchen.
Achtung: Bedenken Sie hierbei auf jedenfall den Punkt Umsetzbarkeit ! Nicht jedes schöne Layout lässt sich Problemlos für das Internet umsetzen !
Das Aussehen in unserem Workshop
Nach dem wir verschiedene Rohentwürfe skizziert wurden, haben wir uns nun für einen entschieden.
Welcher sich, wie folgt zusammensetzt :
Auflösung 800x600
Hintergrund heller Grünton
Schrifttyp Arial
Schriftfarbe Grünton
Grafik mittig
Menueführung links neben Grafik
Die Zielgruppe :
Viele werden sich jetzt sicherlich fragen, warum in diesem Teil des Workshops schon über das Thema
Zielgrupprenanalyse gesprochen wird. Oder auch nicht, aber egal ! Es ist auf jedenfall für das zukünftige Layout eine wichtige Vorüberlegung. Machen Sie sich auf jedenfall schon jetzt einmal Gedanken und
halten Ihre Zielgruppen schriftlich fest. Wenn Sie zum Beispiel eine Seite für Kinder gestalten wollen,
sollten Sie auf jeden Fall keine dunklen Farben wählen. Auch der Einsatz an Anzahl und Grösse von verwendeten Grafiken spielt eine Rolle. Auch hierzu ein Beispiel : Eine Seite über Fotomontagen darf
ruhig mehr und grössere Grafiken beinhalten, als zum Beispiel eine Linkliste zu Linux Programmen. Falls Sie sich nicht sicher sind surfen Sie rühig ein wenig durch das Internet und schauen sich die Gestaltung einzelner Auftritte an.
Achtung: Nicht kopieren !!! Sie möchten, ja etwas eigenes kreieren und nicht von jemandem abkupfern.
Die Zielgruppe in unserem Workshop :
In unserem Workshop haben wir als Hauptzielgruppe Blumenliebhaber. Damit ist auch sichergestellt,
dass wir mit dem unter Punkt 1.2 gewählten Layout arbeiten können. Ein Blumenfreund wartet auch mal etwas länger in dem Fall, wo eine ansprechende Grafik einen langsameren Bildaufbau erzeugt. Jedoch ist auch er sicherlich nicht gewillt, für ein paar Tips und Tricks, zu lange auf vollständigen Seitenaufbau
zu warten.
Domain und Speicherplatz für die Homepage :
Ich werde Ihnen hier keine Firma empfehlen. Es gibt aber Punkte, welche Sie auf jeden Fall berücksichtigen sollten. Der Servicesupport, soll und muss reibungslos funktionieren. Nichts ist ärgerlicher, als eine e-mail an den Support zu schreiben, um dann gar keine oder unzureichende Antwort zubekommen. Noch ärgerlicher wird es im Falle einer 0190'er Servicenummer. Ein weiterer Punkt ist auf jeden Fall, der Umfang des Servicepacketes. Es muss nicht gleich ein CGI-BIN Verzeichniss oder gar MySQL zur Verfügung stehen. Viel wichtiger ist der Aspekt, dass solche Erweiterungen problemlos geordert werden können. Auch entstehende Unkosten spielen sicherlich für den einen oder anderen ein Rolle. Achtung : Begutachten Sie gerade die Billigangebote sehr sorgfältig, was die eben angesprochenen Punkte anbegeht ! Diese erfüllen selbst die grundlegensten Anforderungen an einen Seriösen Anbieter so gut wie nie. Als Anfänger ist es sicherlich nicht leicht, dass KnowHow eines Anbieters buerteilen zu können. Falls Sie keine Fachkundige Person kennen, sollten Sie sich am besten in den grossen Foren über Webdesign über Ihre Wahl unterhalten.
Unsere Wahl ( Beispiel ) :
15 MB Speicherplatz
1 de Domain inklusive
3 POP3 Mailboxen
CGI und PHP (eigene Scripte)
Telnet- und FTP Zugriff
2 GB Datentransfer inkl., je weiteres GB DM 80
Optional : SQL Datenbankanbindung*
Optional : SSL Verschlüsselung*
Optional : Zusätzliche Domains*
Optional : Zusätzlicher Speicherplatz*
*Diese Serviceleistungen können gegen Aufpreis jederzeit zugeschaltet werden.
Anfallende Kosten für dieses Packet : Einrichtungsgebühren EUR ~ 20, sowie EUR ~ 10 monatlich.
Die benötigten Programme und deren Bezugsquellen :
Hier stehen wir mittlerweile vor einer Schier unübersichtlichen Masse an Homepageditoren. Gehen wir zunächst einmal auf die Homepageditoren ein. Diese Programme kann man sehr gut in 2 Kategorien einteilen. Zum einen die reinen Texteditoren (Bsp.: Notepad, Homesite 4.x) und auf der anderen Seite die WYSIWYG Programme (Bsp.: Netscape Composer, Frontpage xx). Die Unterschiede sind leicht erklärt. Während bei den Texteditoren der HTML Code selbst geschrieben werden muss, kann man den WYSIWYG Pogrammen seine Websiten grafisch erstellen und das Programm generiert dabei den entsprechenden HTML Code. Für schnelle Erfolge eignen sich die WYSIWYG Programme am ehesten. Der Lerneffekt mit den herkömmlichen Texteditoren ist jedoch wesentlich höher einzustufen, da Sie jedes Tag selber setzen müssen.
Eine weitere Programmkategorie die auf jedenfall benötigt wird, sind FTP Programme. Das FTP Programm benötigen Sie um Ihre Websiten auf Ihren Speicherplatz zu laden. Auch hierfür steht mittlerweile eine grosse Masse an Programmen zur Verfügung. Zu den Populärsten unter Ihnen zählen CUTE FTP und WS FTP. Alle diese Programme erfüllen gleichermassen Ihren Zweck. Um sich für eines zu entscheiden, installieren Sie sich am besten die 30 Tage Trialversionen und testen die Programme einmal vor Ihrem Erwerb.
Hinweis : In der Regel bieten mittlerweile alle Hersteller von Software, solche Trialversionen an. So können Sie in Ruhe die Software testen bevor Sie sie erwerben.
Unsere Programmwahl :
Als Editor haben wir uns für das unter Windows befindliche Notepad entschieden. Bei den FTP Programmen fiel die Wahl auf WS FTP. Natürlich können Sie für den Workshop auch andere Programme wählen.
Grafiken und Bilder für unsere Homepage :
Fortgeschrittene Webdesigner erstellen Ihre Grafiken und Bilder grösstenteils selber. Auch hierfür steht mittlerweile eine Fülle von Programmen zu verfügung. Hier einmal eine Übersicht der Populärsten unter ihnen (( Reihenfolge optional : Ulead Photoimpact x.x, Macromedia Fireworks x.x, Macromedia Freehandx.x, Adobe Photoshop x.x, PaintshopPro x.x)). Die Anschaffungskosten für diese Software differentieren sehr stark, so dass die entgültige Wahl wohlüberlegt sein will. Aufgrund dessen, dass das dieses Thema Grafikerstellung zu wichtig und umfangreich ist, verzichten wir hier auf weitere Details. Es wird noch Folge Workshops für diesen geben in dem wir uns der Bildbearbeitung widmen werden.
Leider haben wir damit noch keine Grafiken oder Bilder für unsere Homepage. Lösung folgt und diese lautet Freeware Grafikarchive. Freeware Grafikarchive finden sich mittlerweile unzählige im Internet. In diesen finden sich Ansammlungen von Grafiken die ohne Ansprüche des Erstellers verwendet werden können. Dort werden wir uns umschauen, und einige dieser Grafiken für unseren Workshop verwenden.
Desweiteren nehmen wir an, dass ein Bekannter uns einige Digitalfotografien von Pflanzen und unserem Blumengeschäft erstellt hat.
Hier einige Adressen von gutsortierten Grafikarchiven im Internet :
http://www.simplythebest1.com/simplythebest.html
http://www.123gifarchiv.de/
Erstellen eines Struktogramm :
Der letzte Schritt, bevor wir uns auf HTML stürzen widmen wir dem Thema Websitestruktur und dem Erstellen eines Struktogrammes. Warum ein Struktogramm für ein paar HTML Seiten ? Der Vorsorge halber. Sicherlich ist es für kleinere Websites nicht zwingend erforderlich, doch hat die Realität gezeigt, dass einige Websites zu immenser Grösse heranwachsen können und dann durch das ewige anpflicken leicht übersichtlich werden. Hat man aber von vornherein ein Struktogramm über die Website geführt und diese bei jeder Erweiterung von Seiten oder Rubriken gepflegt. Dann kann auch eine noch so grosse Internetpräsenz für den Betreiber übersichtlich erscheinen und die Pflege erleichtern.
Wie erstellt man ein Struktogramm ? Für den Anfang langt es, wenn Sie sich Ihre zu erstellendenen Webseiten einmal auf einem DINA4 Zettel in Form von kleinen Kästchen aufzeichnen. Die Kästchen verbinden Sie dann entsprechend Ihrer Gedanken bezüglich der Verknüpfungen der einzelnen Seiten untereinander.
Hier das Struktogramm für unseren Workshop :
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body>
.............
.............
</body>
</html>
Erklärung des obigen Codes:
# Jede Seite beginnt mit dem html tag
# Nachfolgend wird das head tag gesetzt, es leitet den den html Kopf ein. Alle Anweisungen innerhalb der head tags sind Anweisungen an den Browser, welche keine Auswirkungen auf das Aussehen der Seite selbst hat. Hier steht z.b. das title tag, innerhalb dieses tags schreiben Sie den Titel Ihrer Seite.
# Nach dem head folgt der body. Die Anweisungen innerhalb der body tags stehen für das Aussehen der Seite im Browser. Desweiteren werden hier tags postioniert, welche nach dem der Besucher Sie anwählt eine Folgeaktion auslösen. z.B. das aufrufen einer neuen Seite.
# Wie jedes andere tag, wird auch html geschlossen.
Das Body tag und seine Atribute
In diesem Kapitel werden wir das body tag und seine Atribute besprechen. Was sind Atribute? Atribute zusätzliche Anweisungen, die dem Browser sagen, wie er ein aufgeführtes tag interpretieren soll.
HTML Code:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body bgcolor="lightgreen" text="darkblackgreen">
Dies ist ein Test !
</body>
</html>
Erklärung:
# Mit dem Atribut bgcolor="farbe" wird die Hintergrundfarbe der Seite festgelegt. Das Atribut text="farbe" setzt die Schriftfarbe. Soweit keine anderen Farbangaben innerhalb der body tags gesetzt werden, behalten die im body 'Eröffnungstag' gesezten Atribute ihre Gültigkeit.
# Weitere gültige Atribute für das body tag sind:
background="Pfadangabe zum Bild"
Bsp. background="bilder/tiefsee.gif"
Hier würde der Browser als Hintergrund das Bild 'tiefsee.gif' anzeigen. Das Bild lädt der Browser aus dem Verzeichniss 'bilder', welches sich im gleichen Verzeichniss befindet, wie die anzuzeigende html-Seite.
link="farbe" : die 'Linkfarbe'
alink="farbe" : die 'Linkfarbe' beim anklicken
vlink="farbe" : die 'Linkfarbe' eines besuchten Links
Texte ausrichten und formatieren
In diesem Kapitel werden wir uns anschauen, wie man Texte ausrichten und formatieren kann.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<center>
<font face="arial" size="2" color="blue">
Willkommen in Mustermanns Blumenladen
</font>
</center
</body>
</html>
Erklärung:
# Neu in unserem Quellcode ist das tag center, es hat die gleiche Aufgabe, wie auch seine Übersetzung. Alles zwischen den center tags wird auf dem Browser zentriert angezeigt. Die Zentrierung erfolgt unabhängig von der Bildschirmauflösung des einzelnen Besuchers.
# Wie links zu sehen ist, wird unser Text von dem tag font, welches mit verschiedenen Atributen versehen ist, eingeschlossen. Font steht hierbei für Schrift allgemein.
# Die Atribute face, size und color stehen für :
face="arial" : definiert den Schrifttyp (hier arial)
size ="2" : definiert die Schritgrösse ( Skala: +7>1 >-7)
color="blue" : definiert die Schriftfarbe
Hinweis : Die Textformatierung, in Form des font tag und seiner Atribute, setzt die Formatierung aus dem body 'text="darkblackgreen" ' ausser Kraft. Dieses gilt für den gesammten Text innerhalb des font tag.
# Das tag b steht für big. Der gesammte Text der innerhalb dieses tag steht wird im Browser 'fett' angezeigt. Neben b gibt es auch das strong tag, beide bewirken das gleiche.
# Weitere mögliche tags sind :
text : Text wird kursiv dargestellt
<tt>text</tt>: Schreibmaschinenstil
Grafiken einbinden und ausrichten
Hier nun die Erklärungen rund um das Einbinden von Grafiken in die HTML Seiten.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<center>
<font face="arial" size="2" color="blue">
Willkommen in Mustermanns Blumenladen
</font>
[img]Mein_Logo.gif[/img]
</center
</body>
</html>
Erklärung:
# Mit dem Tag img src="korrekter_pfad zur Quelle" werden die Grafiken eingebundenen. Zu beachten ist hier bei die richtige Pfadangabe zum Bild.
Diese Angaben alleine reichen aus, um die Grafik einbzubinden. Wie im Quellcode rechts zu sehen gibt es auch für das img Tag zusätzliche Atribute, welche gesetzt werden.
width="xxx" : hiermit geben Sie die Breite in Pixel an
height="xxx" : hiermit geben Sie die Höhe in Pixel an
border="xx" : Rahmen um die Grafik, Angabe in Pixel
alt="Ersatz Text" : Dieser Text wird angezeigt, während die Grafik geladen wird. Sollte die Grafik, aus welchen Gründen auch immer, nicht angezeigt werden, wird der Ersatztext angezeigt. Desweiteren wird der Text angezeigt, wenn der Besucher mit dem Mauszeiger auf die Grafik zeigt.
Dieses sind die gängigen Atribute, welche auf das img Tag angewendet werden. Desweiteren gibt es noch folgende Atribute:
align="middle" : Schriftsatz mittig neben der Grafik
align="top" : Schriftsatz oben neben der Grafik
align="bottom" : Schriftsatz unten neben der Grafik
align="left" : Grafik linksbündig, Text rechts umfliessend
align="right" :Grafik rechtsbündig,Text links umfliessend
Links die Grundlage des Internets
Links sind Grundlage für das Bestehen des Internet. Sie sind die Verweise zwischen den einzelnen Internetseiten. Sie können zwischen einzelnen Seiten eines Online Auftritts oder natürlich zu anderen URL's führen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<center>
<font face="arial" size="2" color="blue">
Willkommen in Mustermanns Blumenladen
</font>
[img]Mein_Logo.gif[/img]
<a href="mustermanns-Blumentips.html">
Hier kommen Sie zu unseren Blumentips!</a>
</center
</body></html>
Erklärung:
#Links werden mit dem Tag a href="Zieladresse" gesetzt. Wie im Quellcode links zu sehen, leiten Sie mit dem a href="Zieladresse" den Link ein. Danach schreiben Sie den Text der als Link im Browser dargestellt werden soll. Am Ende schliessen Sie das a href=".." Tag wieder. Nun erscheint der vom a href=".." Tag umschlossene Tag als Link. Klickt ein Besucher auf diesen Link wird er automatisch zur angegebenen Seite weitergeleitet.
Sie haben auch die Möglichkeit eine eingebundene Grafik als Link auszuzeichnen. Bsp. :
<a href="mustermann-Blumentips.html">
[img]Mein_Logo.gif[/img]</a>
Dadurch das nun eine Grafik, statt eines Textes vom a href=".." Tag umschlossen ist. Wird diese nun zur Verweisgrafik. Klickt ein Besucher auf die Gafik, wird er ebenfalls zur entsprechenden Seite weitergeleitet. Verweis grafiken bieten einige kleine Besonderheiten an. Eigentlich wird eine Verweisgrafik von einem kleinen durchgehenden Rahmen gekennzeichnet, dieses können Sie mit dem Atribut border="0" ausschalten. Auch das Atribut alt=".." spielt wieder eine Rolle, den dadurch haben Sie die Möglichkeit eine Beschreibung des Links anzuzeigen, sobald der Mauszeiger auf der Verweisgrafik ruht.
Sicher haben Sie schon beobachtet, daß Links Unterstrichen dargestellt werden. Zusätzlich werden die Links farblich ausgezeichnet. Diese Farben können Sie, wie im Kapitel HTML body besprochenen, von Browserstandard auf eigene Farbwahlen verändern. Sie sollten dieses jedoch lieber bei den Standardfarben belassen. Es sei den der Hintergrund ist so gewählt, daß die Farben darin verschwimmen!
Eine weitere Anwendungsmöglichkeit des a href=".." Tag ist die mailto-Funktion.
<a href="mailto:info@online-tutorial.de>Kontakt</a>
Klickt der Besucher auf den Link Kontakt, öffnet sich das
e-mail Programm des benutzten Browsers. Wobei die e-mail Adresse bereits gesetzt ist. Ein erfolgreiches versenden ist jedoch nur möglich, wenn dieses e-mail Programm auch entsprechend konfiguriert ist.
Links die Grundlage des Internets
Links sind Grundlage für das Bestehen des Internet. Sie sind die Verweise zwischen den einzelnen Internetseiten. Sie können zwischen einzelnen Seiten eines Online Auftritts oder natürlich zu anderen URL's führen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen </title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<center>
<font face="arial" size="2" color="blue">
Willkommen in Mustermanns Blumenladen
</font>
[img]Mein_Logo.gif[/img]
<a href="mustermanns-Blumentips.html">
Hier kommen Sie zu unseren Blumentips!</a>
</center
</body></html>
Erklärung:
#Links werden mit dem Tag a href="Zieladresse" gesetzt. Wie im Quellcode links zu sehen, leiten Sie mit dem a href="Zieladresse" den Link ein. Danach schreiben Sie den Text der als Link im Browser dargestellt werden soll. Am Ende schliessen Sie das a href=".." Tag wieder. Nun erscheint der vom a href=".." Tag umschlossene Tag als Link. Klickt ein Besucher auf diesen Link wird er automatisch zur angegebenen Seite weitergeleitet.
Sie haben auch die Möglichkeit eine eingebundene Grafik als Link auszuzeichnen. Bsp. :
<a href="mustermann-Blumentips.html">
[img]Mein_Logo.gif[/img]</a>
Dadurch das nun eine Grafik, statt eines Textes vom a href=".." Tag umschlossen ist. Wird diese nun zur Verweisgrafik. Klickt ein Besucher auf die Gafik, wird er ebenfalls zur entsprechenden Seite weitergeleitet. Verweis grafiken bieten einige kleine Besonderheiten an. Eigentlich wird eine Verweisgrafik von einem kleinen durchgehenden Rahmen gekennzeichnet, dieses können Sie mit dem Atribut border="0" ausschalten. Auch das Atribut alt=".." spielt wieder eine Rolle, den dadurch haben Sie die Möglichkeit eine Beschreibung des Links anzuzeigen, sobald der Mauszeiger auf der Verweisgrafik ruht.
Sicher haben Sie schon beobachtet, daß Links Unterstrichen dargestellt werden. Zusätzlich werden die Links farblich ausgezeichnet. Diese Farben können Sie, wie im Kapitel HTML body besprochenen, von Browserstandard auf eigene Farbwahlen verändern. Sie sollten dieses jedoch lieber bei den Standardfarben belassen. Es sei den der Hintergrund ist so gewählt, daß die Farben darin verschwimmen!
Eine weitere Anwendungsmöglichkeit des a href=".." Tag ist die mailto-Funktion.
<a href="mailto:info@online-tutorial.de>Kontakt</a>
Klickt der Besucher auf den Link Kontakt, öffnet sich das
e-mail Programm des benutzten Browsers. Wobei die e-mail Adresse bereits gesetzt ist. Ein erfolgreiches versenden ist jedoch nur möglich, wenn dieses e-mail Programm auch entsprechend konfiguriert ist.
Tabellen in HTML Teil II
Mit Tabellentechniken können Sie die unterschiedlichsten Pobleme in der Regel sehr einfach lösen. Sie können Tabellen auf dem Bildschirm erzeugen, die von der Darstellung auch als Tabellen fungieren und Daten tabellarisch anzeigen. Sie können mit Tabellen, jedoch auch Ihrer HTML Seite ein entsprechendes Layout zu weisen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumentips</title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<table align="center" width="700" border="2">
<tr>
<td align="center" valign="top" width="200" bgcolor="white">Blumentip 1</td>
<td align="center" valign="top" width="500" bgcolor="white">Vergessen Sie nie Ihre Blumen zu giessen!</td>
</tr>
<tr>
<td>Blumentip 2 </td>
<td>Nachtschattengewächse im dunkeln lagern</td>
</tr>
</table>
</body>
</html>
Erklärung:
#Hier wurde das td Tag mit zusätzlich Atributen ausgezeichnet, welche direkten Einfluß auf die jeweiligen Zelleninhalte haben. Neu hinzugekommen sind die Atribute align , valign , width , bgcolor.
Diese stehen für folgende Änderungen:
align="center": Zelleninhalt wird zentriert
valign="top": Zelleninhalt wird nach oben ausgerichtet
width="200": Zellenbreite wird auf 200 Pixel gesetzt
bgcolor="white": Zellenhintergrundfarbe weiß
Hinweis:
Die Tabelle hat immer noch 2 Spalten und 2 Reihen, jedoch wurden die Standardvorgaben, dürch die zusätzlich verwendeten Atribute teilweise aufgehoben. Dieses gilt, wie im Quellcode zu sehen ist, nur für die 2 Zellen in der ersten Reihe. Somit also für die gesammte erste Reihe. Für die der 2 Reihe gelten immer noch die Standardvorgaben.
Wobei sich eine Veränderung der ersten Reihe auch auf die 2. Reihe auswirkt. Die veränderten Breitenangaben der einzelnen Zellen in der 1. Reihe nehmen direkten Einfluß auf die darunter folgenden Zellen der 2. Reihe. Dieses geschieht gemäss dem Standard, daß die breiteste Zelle in einer Reihe für die gesamte Breite einer Spalte steht.
Weitere Atribute:
align="right": Zelleninhalt rechts ausgerichtet
valign="middle": Zellinhalt mittig
valign="bottom": Zelleninhalt nach unten ausgerichtet
background="Bild.gif": Hintergrundbild in der Zelle
height="100": Zellenhöhe 100 Pixel
Hinweis zu height:
Aufgrund dessen, daß das height Atribut nur sehr schlecht funktioniert.Sprich es oftmals vom Browser nicht korrekt interpretiert wird. Arbeiten Profis oft Blindgif-Techniken. Hierbei wird die Zellenhöhe durch ein Transparentes Giferzwungen.
Tabellen in HTML Teil III
Mit Tabellentechniken können Sie die unterschiedlichsten Pobleme in der Regel sehr einfach lösen. Sie können Tabellen auf dem Bildschirm erzeugen, die von der Darstellung auch als Tabellen fungieren und Daten tabellarisch anzeigen. Sie können mit Tabellen, jedoch auch Ihrer HTML Seite ein entsprechendes Layout zu weisen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumentips</title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<table align="center" width="700" border="2">
<tr><td colspan="2" align="center" width="700">Blumentips</td></tr>
<tr>
<td align="center" valign="top" width="200" bgcolor="white">Blumentip 1</td>
<td align="center" valign="top" width="500" bgcolor="white">Vergessen Sie nie Ihre Blumen zu giessen!</td>
</tr>
<tr>
<td>Blumentip 2 </td>
<td>Nachtschattengewächse im dunkeln lagern</td>
</tr>
</table>
</body>
</html>
Erklärung:
#Das neu hinzugekommene Tag colspan verbindet zwei Spalten zu einer einzigen Zelle. Diese Zelle erstreckt sich über die gesamte Tabellenbreite. Der Vorteil der uns hiermit gegeben wird. Ist das man sich nun über die Standard-vorgabe, daß die Spalte so breit , wie die breiteste Zelle in Ihr ist, hinwegsetzen kann.
Zusätzlich gibt es noch das Tag : rowspan
Mit Rowspan haben Sie die Möglichkeit, Zellen über mehrere Reihen hinweg zu verbinden.
Die Vorgehensweise ist für beide Tags die Gleiche. Sie setzen erst das Tag und mit der Ziffer teilen Sie dem Browser mit, wieviele Spalten oder Reihen verbunden werden sollen. Wichtig hierbei ist das Sie die Anfangszelle mitzählen, sowie darauf achten, daß sich die Anzahl der einzelnen Zellen in den entsprechenden Reihen vermindert.
Hier ein Beispiel zum Verdeutlichen:
<table border="2">
<tr>
<td>Zelle1 | Reihe1</td>
<td>Zelle2 | Reihe1</td>
<td>Zelle3 | Reihe1</td>
</tr>
<tr>
<td colspan="2">Zelle1 | Reihe2</td>
<td rowspan="2">Zelle2 | Reihe2</td>
</tr>
<tr>
<td>Zelle1 | Reihe3</td>
<td>Zelle2 | Reihe3</td>
</tr>
</table>
Hinweis:
Die einsetzbaren Atribute für das td Tag z.B. bgcolor , align, width,... bleiben erhalten, so daß sich keine Einschränkungen ergeben.
Mit colspan und rowspan lassen sich teilweise sehr komplexe Layouts erstellen. Denken bei Planungen von anspruchsvollen oder komplexen Layouts immer den Einsatz dieser beiden Hilfen.
Textabsätze mit HTML
Durch den Einsatz von DIV , P , SPAN besteht die Möglichkeit, auch ohne Tabellen Textpassagen rechts, links oder zentriert zu positionieren. Desweiteren bietet das SPAN Tag den Einsatz von CCS ( CascadingStyleSheets) innerhalb des HTML Quellcodes.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumentips</title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<div align="center">Unsere Blumentips</div>
<p align="right">Dieser Blumentip ist rechts ausgerichtet</p>
<span style="font-family:arial; font size:14pt">
Dieses ist ein mit span formatierter Blumentip
</span>
</body>
</html>
Erklärung:
#Mit allen drei links gezeigten Möglichkeiten können Sie Textabsätze gestalten und ausrichten.
Als erstes zu den Tags div und p beide Tags arbeiten sehr ähnlich, jedoch mit einem Unterschied. Bei mit p formatierten Absätzen wird über und unter dem Absatz eine Leerzeile eingefügt. Dieses Einfügen entfällt beim Einsatz des div Tags.
Mögliche Ausrichtungen für div und p sind:
align="left": linksbündig
align="right": rechtsbündig
align="center": zentriert
align="justify": Blocksatz
Nun noch zum span Tag:
Wie links unschwer zu erkennen ist die Schreibweise der Atribute doch recht abweichend von dem bis jetzt bekannten. Dieses hat den Hintergrund, daß diese Schreibweise aus den CCS ( CascadingStyleSheets ) kommt. Sie können auf diese Weise einem Bereich einen bestimmten Stil zuweisen. Innerhalb des span Tags können Sie alle bekannten CCS Styles anwenden. Immer im Stil :
Bullet- uns Aufzählungslisten mit HTML
Durch den Einsatz von Bullet- und Aufzählungs-Listen besteht die Möglichkeit Gliederungen anschaulich und übersichtlich darzustellen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumentips</title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
<ul type="circle">[*]Unser Tip 1[*]Unser Tip 2[*]Unser Tip 3[/list]
</body>
</html>
Erklärung:
#Das Tag ul leitet in HTML eine Liste ein. Jeder Darzustellende Unterpunkt, wird durch das li Tag markiert. In unserem Beispiel links findet sich ein extra Atribut im ul Tag. Mit dem Atribut type="circle" legen wir die Art des Aufzählungszeichen fest. In diesem Fall ist das Aufzählungszeichen ein Ring.
Es gibt noch weitere Aufzählungszeichen :
type="square": Darstellung als Quadrat
type="disc": ein gefüllter Kreis
Das ul steht also für Bullet-Listen, es gibt natürlich auch andere Listenarten. Dieses sind Aufzählungs-Listen.
Folgende Typen stehen zur Verfügung:
[list=1]: Die Liste beginnt von 1 aufsteigend
[list=a]: Alphabetisch aufsteigend
[list=I]: Römisch austeigend
Frames in HTML I
Mit Hilfe von Frames läst sich das Browserfenster in mehrere eigenständig Browserfenster aufteilen. Diese Technik bietet in der Gestaltung von HTML Seiten einige Vorteile, die ansonsten nurmit einem grossen Mehraufwand zu bewältigen wären. So läst sich die Menueführung eines grösseren Internet-Auftritts mit Frames leichter realisieren und pflegen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen</title>
</head>
<frameset rows="15%,85%" frameborder=0 framespacing=0 border=0>
<frame src="navigation.htm" name="navi" scrolling=no>
<frame src="inhalt.htm" name="inhalt" scrolling="yes">
</frameset>
<body bgcolor="lightgreen" text="darblackgreen">
Lieber Gast leider kann Ihr Browser die Frametechnik dieser Seite nicht darstellen.Folgen Sie diesem Link für unsere Seiten ohne Frames.
</body>
</html>
Erklärung:
#Für die Darstellung von Frames, wird in der HTML Datei ein weiterer Teilbereich definiert, welcher mit dem HTML Tag frameset eingeleitet wird. Wichtig hierbei ist, daß die Frameset-Definition zwischem dem Head und dem Body gesetzt wird. Der Body kann ganz normal mit HTML Tags editiert werden. Dieser Inhalt wird, jedoch nur angezeigt falls ein Besucher einen nicht Framefähigen Browser besitzt. Mit dem Atribut rows="15%,85%" weisen Sie den Browser an das darzustellende Browserfenster Horizontal in zwei Fenster zu gliedern. Das obere Fenster nimmt 15% und das untere Fenster 85% der Höhe des Bildschirms ein.
frameborder=0 framespacing=0 border=0 :
Hiermit wird die Darstellung von Rahmen unerdrückt.
frame src="navigation.htm":
Lädt die Datei Naviagtion in das entsprechende Fenster.
name="navi":
Weist dem Fenster den Namen navi zu. Hierüber ist das Fenster ansprechbar.
scrolling=no:
Unterdückt das Einblende des Browser-Scrollbalkens. Mit scrolling=yes aktivieren Sie die Scrollfunktion des Brosers.
Weitere Möglichkeiten:
frameset cols="20%,80%":
Teilt den Bildschirm Vertikal. Das Linke Fenster ist 20% der Bildschirmbreite und das rechte Fenster 80%.
Frames mit HTML II
Frames können beliebig tief verschachtelt werden.Das bedeutet Sie können das anzuzeigende Browserfenster Horizontal un d gleichzeitig Vertikal teilen. Bei der Naviagtion innerhalb von Frames sollten Sie bachten, daß Sie beim verlinken der einzelnen Browserfenster diese immer mit dem korrekten Namen ansprechen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen</title>
</head>
<frameset cols="150,*" frameborder=0 framespacing=0 border=0>
<frame src="navigation.htm" name="navilinks" scrolling=no>
<frameset rows="80,*" frameborder=0 framespacing=0 border=0>
<frame src="banner.htm name=banner scrolling=0>
<frame src="inhalt.htm" name="inhalt" scrolling="yes">
</frameset></frameset>
<body bgcolor="lightgreen" text="darblackgreen">
Lieber Gast leider kann Ihr Browser die Frametechnik dieser Seite nicht darstellen.Folgen Sie diesem Link für unsere Seiten ohne Frames.
</body>
</html>
Erklärung:
#Dieses verschachtelte Frameset unterteilt den Bildschirm als erstes in ein linkes und ein rechts Fenster. Dann wird das rechte Fenster zusätzlich in ein oberes und ein unteres Fenster geteilt. Neu in diesem Beispiel ist der Wegfall der Prozentangaben, sowie das ersetzen des zweiten Wertes durch ein Stern.
cols="150,*":
Linkes Fenster mit fester Breite von 150 Pixel. Das rechte Fenster nimmt dynamisch den gesammten restlichen Platz in Anspruch.
rows="80,*":
Das rechte Fenster wird zwei weitere Fenster geteilt. Das eine 80 Pixel, das andere wieder dynamisch den restlichen Platz.
Navigieren innerhalb von Frames:
Um innerhalb der verschiedenen Fenster navigieren zu können, muss das a href="...." Tag um das target Atribut erweitert werden.
<a href="start.html" target="inhalt">:
Mit diesem Link weisen Sie den Browser an, die Datei start.html in das Fenster mit dem Namen inhalt zu laden. Geben Sie bei jedem Link den entsprechenden Fensternamen an. Geben Sie den Fensternamen nicht an, wird die Datei in das gleiche Fenster geladen in der sich der Link befindet.
Sonderfall:
target="_Wunschname":
Inhalt wird in einem neuen Fensternamen angezeigt. Sie können jeden Namen angeben, welcher nicht identisch mit einem der Namen Ihrer Fenster ist.
Formulare mit HTML II
Mit HTML haben Sie die Möglichkeit die verschiedensten Arten von Formularen zu gestalten. Von einzeilgen Textfelder bis hin zu grossen Dropdownlisten stehen Tüt und Tor offen.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen</title>
</head>
<body bgcolor="lightgreen" text="darblackgreen">
Mustermanns Blumenladen Kontakt
<form action="mailto:info@mustermann-blumen.de method="post" enctype="text/plain">
<input type="text" name="name" size="20">
<textarea name="txt" rows="6" cols="40" wrap="physical">
</textarea>
<input type="radio" name="strauss" value="1">Strauss1
<input type="radio" name="strauss" value="2">Strauss2
Schleifenfarbe: <select name"farbe" size="1">
<option value="rot">Rot
<option value="gelb">Gelb
<option value="blau">Blau
</select>
<input type="submit" value="Abschicken">
<input type="reset" value="Reset">
</form>
</body>
</html>
Erklärung:
#Das obige Beispiel zeigt ein Beispiel für ein gängies Formular in HTML. Es beginnt mit einem einzilgen Textfeld, dann einem mehrzeiligen Textfeld, dann zei gruppierte Radiobuttons, dann einer Auswahlliste und zum Schluss den Buttons zum Abschicken und Löschen.
form:
Jeder Formularbereich wird mit dem form Tag eingeleitet. Das Tag wird mit folgenden Atributen gesetzt action, method und enctype.
action="mailto:E-Mail-Adresse":
Beschreibt die Aktion. Hier das versenden des Formulares per mailto. Die Formulardaten können auch an Scripte übergeben werden, welche die Daten weiterverarbeiten.
method="post":
Gibt die Methode an, wie das Formular verschickt werden soll. Bei versenden über das mailto Tag wählen Sie immer post. Beim versenden an cgi/php/asp Scripte können Sie auch get wählen.
input type="text" name="name" size="20":
Ein einziliges Textfeld mit dem Namen name und der angezeigten Länge 20.
textarea type="text" name="txt" rows="6" cols="40":
Ein mehrzeiliges Textfeld mit 6 Reihen, 40 Spalten und der Bezeichnung txt. In unserem Beispiel wird noch wrap=physical gesetzt. Dadurch wird der automatische Zeilenumbruch im Textfeld erzwungen. Wichtig das textarea Tag muß immer geschlossen werden !
input type="radio" name="strauss" value="1":
Setzt einen Radiobutton mit dem Namen strauss und der Variable 1. Im Fall das dieser Radiobutton ausgewählt ist, wird beim verschicken dieser Datensatz übertragen 'strauss=1'. In diesem Fall haben beide Radiobuttons die gleiche Bezeichnung 'strauss', hierdürch sind Sie zu einer Gruppe zusammengefasst. Das Bedeutet es kann nur einer ausgweählt werden.
select und option:
Mit diesen Tags können Sie Auswahllisten erstellen. In diesem Beispiel wird eine Auswahlliste mit 3 Optionen angezeigt. Mit size steuern Sie, die Höhe der Auswahlliste. Das bedeutet die Liste zeigt nur die erste Option an. Durch anklicken der Liste öffnet sich die Liste.
submit und reset:
Hiermit werden 2 Buttons dargestellt. Submit sendet die Daten ab und reset setzt das Formular zurück.
Meta Tags in HTML
Mit Hilfe von Meta Tags können Sie wichtige Angaben für Suchmaschinen innerhalb ihres HTML Quellcodes machen. Meta Tags werden immer in den HEAD Bereich des HTML Grundgerüstes geschrieben.
HTML Quellcode:
<html>
<head>
<title>Mustermanns Blumenladen</title>
<meta name="keyword" content="blume,blumen,....">
<meta name="description" content="Besuchen Sie Mustermanns Blumenladen im Internet">
<meta name="revisit-after" content="10-days">
<meta name="robots" content="index,follow">
<meta name="author" content="Mustermann">
<meta name="copyright" content="Mustermann">
<meta name="date" content="15-05-2000">
<meta name="content-language" content="de">
</head>
<body>
...
...
....
</body>
</html>
Erklrärung:
#Die Metangaben innerhalb des Head-Bereiches sind nur für die Kommumikation für Browser und Spider bzw. Robots der Suchmaschinen. Sie haben prinzipiell keine Auswirkungen auf die Darstellung der Seite.
keyword:
Die Suchbegriffe unter denen Ihre Seite in den Suchmaschinen gefunden werden soll.
description:
Ein Beschreibungstext zu Ihrer Seite.
revisit-after:
Anweisung an den Spider bzw. Robot einer Suchmaschine Ihre Seite in Abständen von 10 Tagen aufzusuchen.
robots:
Anweisung an den Robot der Suchmaschine allen Ihren Textlinks zu folgen, um so alle Seiten in die Datenbank der Suchmaschine zu übernehemen. Gilt für ' index,follow ' ! Soll der Robot den Links nicht folgen setzen Sie den content auf ' ' nofollow ' !
mfg david2502
