Inhaltsverzeichnis Webseitenerstellung 1 Einführung...2 1.1 Entwicklungswerkzeuge...2 2 HTML-Grundlagen...2 2.1 Tags...2 2.2 Kommentare...3 2.3 Leerzeichen, Zeilenumbrüche, Tabulatoren...3 2.4 Farben...3 2.5 Grundsätzliche Abschnitte einer HTML-Datei...4 2.6 Kurzübung...4 2.7 Die wichtigsten HTML-Tags und ihre Parameter...4 2.7.1 <HTML>...4 2.7.2 <HEAD>...5 2.7.3 <TITLE>...5 2.7.4 <BODY>...5 2.7.5 <P>...5 2.7.6 <FONT>...6 2.7.7 Übung zu den grundlegenden Tags...6 2.7.8 <BR>...7 2.7.9 <HR>...7 2.8 Listen...7 2.8.1 <UL>...8 2.8.2 <OL>...9 2.8.3 <LI>...9 2.9 Verknüpfungen mit anderen Seiten...9 2.9.1 Aufbau einer URL...10 2.9.2 <A> oder: Das Setzen einer Verknüpfung...10 2.9.3 Übung...11 2.10 Bilder...11 2.10.1 <IMG> oder: Das Einbinden von Bildern...12 2.10.2 Übung...12 2.11 Tabellen...12 2.11.1 <TABLE>...14 2.11.2 <TR>...14 2.11.3 <TD>...15 2.11.4 Übung...15 3 Abschlußübung...16 Seite: -1/15-
1 Einführung Zum Setzen von Webseiten wird HTML 1 verwendet, eine Sprache, in der die Anordnung von Texten und Graphiken auf auf dem Bildschirm beschrieben wird. Ursprünglich war HTML dazu gedacht, die wissenschaftlichen Arbeiten der Physiker am CERN in Genv für das Internet aufzubereiten und die direkte Verknüpfung von Texten mittels Links zu erlauben. Leider haben Phsyiker selten Designerblut in sich, woraus sich auch schnell erklärt, warum es für heutige Webentwickler manchmal sehr schwierig ist, ein ansprechendes Layout in die Sprache des Web umzusetzen: HTML ist einfach nicht dafür gedacht. Glücklicherweise wurde HTML seitdem etliche Male erweitert, so daß es inzwischen mit etwas Vorbereitung auch diese Aufgaben halbwegs meistern kann. 1.1 Entwicklungswerkzeuge Leider passen zu so ziemlich allen verfügbaren WYSIWYG 2 -Programmen die folgenden Attribute: kompliziert zu bedienen erzeugen schlechten und aufgeblähten HTML-Code teuer Aus diesem Grund sollten man von der Verwendung dieser Werkzeuge absehen und sich lieber einen halbwegs benutzerfreundlichen HTML-Editor suchen, in dem man den Code selber aufsetzt. Das hilft zum einen dabei, den Überblick zu bewahren und zum anderen schützt die eigene Faulheit dann auch vor zu langen Ladezeiten und zu vielen Effekten, denn nichts ist schlimmer im Web als eine überladene Seite. Für diesen Kurs wurde der Editor HTMLedit von Uli Meybohm ausgesucht, der zum kostenlosen Download auf der Seite http://www.meybohm.de angeboten wird. 2 HTML-Grundlagen HTML ist ein Klartextformat, d.h. alle Formatierungen und sonstigen Informationen sind im Gegensatz zu anderen gängigen Datenformaten lesbar in einer Datei gespeichert. 2.1 Tags HTML besteht aus Tags 3, ein Begriff, der die mit spitzen Klammern eingefaßten Kommandos bezeichnet. Innerhalb dieser spitzen Klammern können dann zu einem Kommando noch bestimmte Parameter angegeben werden. Grundsätzlich sieht das dann so aus: bzw. <tag> <tag parameter1= wert1 parameter2= wert2 > 1 Hypertext Markup Language 2 What You See Is What You Get 3 Ein Tag ist ein einzelnes Kommando Seite: -2/15-
Dazu kommt dann noch, daß die meisten der Kommandos in einem Bereich gelten wie z.b. die Definition einer neuen Schrift. Dieser Bereich gilt von der schließenden Spitzen Klammer des Tags bis zum zugehörigen Ende-Tag. Das Ende-Tag enthält vor dem Namen des entsprechenden öffnenden Tags einen Schrägstrich. Parameter werden hier niemals übergeben. <font size= +1 > Hier gilt jetzt die vergrößerte Schriftart </font> Ab hier gelten jetzt wieder die alten Schrifteinstellungen Grundsätzlich sollte jedes Tag (von ein paar Ausnahmen mal abgesehen) auch wieder geschlossen werden. Es ist zwar möglich, diese Konvention zu umgehen, aber das führt in den meisten Fällen dazu, daß Browser unterschiedlicher Hersteller die Seite verschieden anzeigen oder aber ganz versagen. Aus Gründen der Lesbarkeit wird Code, der innerhalb eines Tags steht, eingerückt, sobald das Tag nicht wieder in der gleichen Zeile geschlossen wird. Zu den konkreten Anwendungen dieser Regel kommen wir aber erst später. 2.2 Kommentare Es ist möglich im laufenden HTML-Code auch Kommentare einzufügen, also Code, der vom Browser nicht weiter beachtet wird. Das ist manchmal sehr nützlich, um ein Tag, dessen Auswirkungen auf das Erscheinungsbild der Seite man testen möchte, vorrübergehend zu deaktivieren, ohne es gleich ganz zu löschen. Codebeispiel: <!-- dieser Text wird vom Browser nicht beachtet und kann auch ohne Probleme über mehrere Zeilen gehen. --> 2.3 Leerzeichen, Zeilenumbrüche, Tabulatoren Eine beliebige Anzahl Leerzeichen und Zeilenumbrüche zählt grundsätzlich als ein einzelnes Leerezeichen. Es ist nicht möglich, Text durch die Verwendung mehrerer Leerzeichen einzurücken. Tabulatoren werden von den Browsern ganz ignoriert. Die Verteilung des Textes in der HTML-Datei hat wenig mit dem Aussehen des Textes im Browser zu tun - der Satz wird vielmehr durch die in der HTML-Datei enthaltenen Tags kontrolliert. 2.4 Farben Es gibt zwei Methoden, um Farben in HTML-Dokumenten zu verweden: Entweder man gibt sie beim (englischen) Namen an oder man verwendet direkt ihren Rot-, Grün- und Blauwert als Hexcode. Die größere Flexibilität bietet freilich die zweite Methode, da natürlich nur die eindeutigen Farbtöne einen Namen haben. Die für ein ansprechendes Design wichtigen Zwischentöne sind aber nur selten vordefiniert. Ein frei definierter Farbcode besteht aus einem # und dann dreimal je zwei Stellen für jeweils Seite: -3/15-
Rot-, Grün- und Blauanteil. Ein Anteil kann Werte von 0 bis 255 annehmen, die im Hexadezimalsystem als 00 bis FF angegeben werden. Farbe Englischer Farbcode Hexcode Schwarz black #000000 Weiß white #FFFFFF Rot red #FF0000 Grün green #00FF00 Blau blue #0000FF Gelb yellow #FFFF00 Zum Glück ist in den HTMLedit ein Farbwähler eingebaut, der einem das mühselige Ausprobieren und Umrechnen erspart, da er gleich die richtigen Hexcodes in den HTML-Code einfügt. 2.5 Grundsätzliche Abschnitte einer HTML-Datei Eine HTML-Datei besteht aus einem Kopf und einem Körper. Im Kopf sind Daten wie z.b. die Überschrift, die das Browserfenster zeigen soll, aber auch Informationen über den Author und ähnliches gespeichert. Im Körper steht dann der eigentliche Inhalt der Seite. <html> <head> <title>beispielseite</title> </head> <body> Dies ist der Text der Seite. </body> </html> Der Bereich, dem wir die größte Aufmerksamkeit widmen werden, ist natürlich der Body. 2.6 Übung Legen Sie im HTMLedit ein leeres Dokument an und geben Sie das obige Beispiel ein. Betrachten Sie das Ergebnis in der Browservorschau und experimentieren Sie mit dem Einfügen von Leerzeichen, Leerzeilen und Tabulatoren. Seite: -4/15-
2.7 Die wichtigsten HTML-Tags und ihre Parameter 2.7.1 <HTML> Definition einer HTML-Datei Beschreibung Dieses Tag steht direkt am Anfang der HTML-Datei und zeigt dem Browser, daß er die Kommandos in dieser Datei ausführen soll. Parameter 2.7.2 <HEAD>, am Ende der Datei keine Beginn des Kopf-Abschnittes der HTML-Datei Beschreibung Dieses Tag folgt direkt auf das <HTML>-Tag und markiert den Anfang des Bereichs mit den Meta-Informationen. Parameter 2.7.3 <TITLE>, vor dem <BODY>-Tag keine Angabe des Fenstertitels für den Browser Beschreibung Zwischen dem öffnenden <TITLE> und dem schließenden </TITLE> steht der Titel, den das Browserfenster tragen soll. Parameter 2.7.4 <BODY> keine Beginn des eigentlichen Textkörpers Beschreibung Mit dem <BODY>-Tag beginnt der eigentliche Textbereich der Webseite. Als Parameter werden einige Grundlegende Designvorgaben für die Seite eingestellt., vor dem schließenden </HTML>-Tag Parameter bgcolor Angabe der Hintergrundfarbe für die Webseite. text link vlink alink Schriftfarbe. Gilt für alle Überschriften, Absätze, etc. Farbe, die noch nicht besuchte Links haben sollen. Farbe, die bereits angeklickte Links haben sollen. Farbe, die Links haben sollen, während sie angeklickt werden. Seite: -5/15-
2.7.5 <P> Beginn eines Absatzes Beschreibung Normalerweise werden alle Absätze in <P>-Pärchen eingefaßt. Damit lassen sich dann auch die zwischen Absätzen normalerweise vorhandenen Abstände erzeugen., vor dem nächsten Absatz bzw. vor dem Schließen des Übergeordneten Tags. Parameter align Angabe der Ausrichtung des Absatzes. 2.7.6 <FONT> align= left : linksbündig, Standardeinstellung align= right : rechtsbündig align= center : zentriert Verwendung einer anderen Schriftart align= justify : Blocksatz, volle Länge Beschreibung Im Bereich des Font-Tags wird eine andere Schriftart, Schriftgröße oder Schriftfarbe ausgewählt, je nachdem, welche Parameter man angegeben hat. Parameter color Gewünschte neue Schriftfarbe size face 2.7.7 Übung zu den grundlegenden Tags Bauen Sie folgende Seite in HTML nach. Gewünschte neue Schriftgröße, entweder als Absolutwert im Bereich von 1 bis 7 oder als relativer Wert im Verhältnis zur Normalschriftgröße mit +(Zahl) oder -(Zahl). Die Normalschriftgröße ist 3. Neue Schriftart. Es können entweder konkrete Schriftnamen angegeben werden, also z.b. Arial, oder auch die Namen von Schriftfamilien wie serif und sans-serif. Wichtig ist zu beachten, daß nicht alle Schriftarten auf allen Systemen vorhanden sind. Mehrfachnennungen wie Verdana, sans-serif sind auch möglich und erlauben es einem System auf eine ähnliche Schrift auszuweichen, falls die gewünschte nicht installiert ist. Seite: -6/15-
2.7.8 <BR> Beginn einer neuen Zeile oder Einfügen einer Leerzeile Beschreibung Mit diesem Tag läßt sich in einem Absatz eine neue Zeile anfangen, ohne den Absatz dazu beenden zu müssen. Parameter 2.7.9 <HR> Nein keine Einfügen einer Trennline Beschreibung Dieses Tag fügt an der ensprechenden Stelle im Text eine horizontale Trennlinie ein. Parameter 2.8 Listen Nein keine HTML unterstützt das automatische Einfügen von Listen mit automatischer Erstellung der Numerierungen oder alternativ mit verschiedenen Arten von Spiegelstrichen. Zum Erstellen einer unsortierten Liste beginnt man zuerst einen Abschnitt mit <ul> und in diesem fügt man dann die einzelnen Elemente mit <li> ein. Konkret sieht das dann folgendermaßen aus: <ul> Seite: -7/15-
<li>äpfel</li> <li>birnen</li> <li>pflaumen</li> </ul> Das Ergebnis sieht das ganz klassisch so aus: Äpfel Birnen Pflaumen Selbstverständlich lassen sich aus sortierte Listen erzeugen. Entsprechend muß nur das <ul> durch ein <ol> ersetzt werden. <ol> <li>äpfel</li> <li>birnen</li> <li>pflaumen</li> </ol> Hier sieht das Ergebnis dann so aus: 1. Äpfel 2. Birnen 3. Pflaumen 2.8.1 <UL> Beginn einer unsortierten Liste Beschreibung Eine unsortierte Liste ist eine Liste, in der die einzelnen Elemente in keiner bestimmten Reihenfolge genannt werden und daher auch keine Nummern vorneangestellt werden. Parameter type type= circle : Als Aufzählungszeichen wird ein Kreis verwendet. type= square : Als Aufzählungszeichen wird ein Quadrat verwendet. type= disc : Als Aufzählungszeichen wird ein Punkt verwendet. Seite: -8/15-
2.8.2 <OL> Beginn einer sortierten Liste Beschreibung Eine sortierte Liste gibt im Aufzählungszeichen eine Reihenfolge der Elemente wieder. Parameter type Ohne diesen Parameter wird klassisch arabisch numeriert. 2.8.3 <LI> start type= a : Es wird alphabetisch numeriert (Kleinbuchstaben). type= A : Es wird alphabetisch numeriert (Großbuchstaben). type= i : Es wird mit römischen Zahlen numeriert (Großbuchstaben). type= I : Es wird mit römischen Zahlen numeriert (Großbuchstaben). Setzt den Startwert der Zählung Ein Listenelement in einer Aufzählung Beschreibung Jedes Listenelement in einer Aufzählung muß mit <LI> angeführt werden. Parameter value In einer geordneten Liste wird hiermit angeben, welchen Index ein Element haben soll. Damit ist es möglich, bestimmte Indizes zu überspringen. 2.9 Verknüpfungen mit anderen Seiten Mit Abstand das wichtigste Argument für den Durchbruch des Internet ist die Möglichkeit, Seiten miteinander zu verbinden. Um das zu realisieren war es notwendig, den gesamten Inhalt des Internet auf einen Nenner zu bringen und bei einem nach genauen Regeln konstruierten Namen nennen zu können. Dazu gibt es die URL (= Uniform resource locator). Seite: -9/15-
2.9.1 Aufbau einer URL Eine URL besteht aus drei Teilen: Dem Namen des Rechners, von dem man Daten empfangen möchte, einer Verzeichnisangabe, die dem Rechner sagt, wo er nach den Daten suchen soll und dem Dateinamen, also dem direkten Namen der Datenquelle. http://www.mainspessart.de/index.htm Protokol Dateina Verzeichn Rechnerna Das Protokoll ist l me bei Webseiten immer http oder https und is meint das Hypertext Transfer me Protocol. Https ist eine verschlüsselte Variante von http. Der Rechnername fängt in den meisten Fällen mit www. an, was aber nicht zwingend erforderlich ist. Prinzipiell ist jeder Rechnername möglich. Wird kein Verzeichnis angegeben, so ist das oberste freigegebene Webverzeichnis auf dem Server gemeint. Mehrere Verzeichnisse werden mit / getrennt. Der Dateiname ist der Teil der URL nach dem hintersten /. WICHTIG: Verzeichnisse und Dateinamen werden in der Groß- und Kleinschreibung unterschieden. Wird kein Verzeichnisname und kein Dateiname angegeben, dann setzen viele Server einfach index.html oder default.htm ein. Entsprechend sollte man der Startseite eines Webprojektes immer den entsprechenden Namen geben. URLs können relativ sein und zwar aus Sicht der Datei, in der sie vorkommen. Befindet sich in einer Webseite, die die URL http://www.bnmsp.de/verein/seite1.html hat, ein Link mit der Ziel- URL../Schulung/seite1.html, dann hat die Zielseite die absolute URL http://www.bnmsp.de/schulung/seite1.html. Die beiden Punkte.. meinen also das übergeordnete Verzeichnis. Prinzipiell sollte man versuchen, bei der Angabe einer URL immer so wenig wie möglich an Daten zu übergeben. 2.9.2 <A> oder: Das Setzen einer Verknüpfung Setzen eines Links auf eine andere Seite Beschreibung Der Text, der innerhalb des öffnenden und des schließenden <A> steht, wird als Link angezeigt und kann vom Benutzer angeklickt werden. Tut er das, dann lädt der Browser die angegebene Seite. Parameter href Gibt das Ziel der Verknüpfung an. target Bezeichnet den Zielframe für den Link. Eine genauere Erklärung folgt. Seite: -10/15-
GIF-Bilder JPG-Bilder Bürgernetze Main-Spessart e.v. 2.9.3 Übung Erstellen Sie zwei Webseiten, eine mit dem Namen seite1.html und eine mit dem Namen seite2.html und fügen Sie in diese Seiten jeweils einen Link auf die andere Datei ein, so daß man mit dem Browser im Kreis gehen kann. 2.10 Bilder Im Internet sind grundsätzlich zwei Arten von Bildformaten im Einsatz: GIF und JPG. Jedes dieser Formate hat einen bestimmten Einsatzort: bestehen aus maximal 256 unterschiedlichen Farben, können Transparenz enthalten und sind animierbar. Entsprechend verwendet man sie gerne für graphische Elemente einer Seite, die nicht übermäßig farbenfroh sind. Für die Darstellung von Fotos ist GIF ungeeignet. Das GIF-Format hat außerdem noch einen Kleinen Haken: Unisys hat ein Patent auf das angewendete Kompressionsverfahren und verlangt von jedem Webseitenbetreiber 4000 $ Lizenzgebühr. können 16 Millionen Farben darstellen, haben allerdings an Kanten mit starkem Kontrast Probleme. Man kann zwar die stärke der Komprimierung herunterschrauben, dann jedoch werden die Bilder so groß, daß die Ladezeiten schnell ungemütlich werden. JPG ist in erster Linie für Fotos geeignet und für Bilder mit großer Fläche oder vielen Farbverläufen. In letzter Zeit gewinnt ein drittes, neues Format immer mehr an Beliebtheit: PNG. Es handelt sich dabei um eine Entwicklung, die versucht die Vorteile von GIF und JPG in sich zu vereinigen, ohne dadurch aber an Patente oder ähnliches gebunden zu sein. Alle aktuellen Browser unterstützen dieses Format, manchmal jedoch noch mit Bugs. Alle Bilder, die auf einer Webseite erscheinen, liegen als getrennte Dateien auf dem Webserver und werden durch spezielle Tags vom Browser nachgeladen. Aufgerufen werden sie über ihre URLs, genauso wie bei Links auf andere Seiten. Seite: -11/15-
2.10.1 <IMG> oder: Das Einbinden von Bildern Fügt ein Bild an dieser Stelle im Text ein Beschreibung Das Bild wird in den laufenden Text eingefügt und verhält sich wie ein Buchstabe. Es wird also umgebrochen, etc... nein Parameter src Angabe der URL der Bilddatei 2.10.2 Übung border alt height width Setzt die Breite des Rahmens, der um ein Bild angezeigt werden soll. Dieser Parameter muß bei Links auf 0 gesetzt werden, da sonst ein Rahmen mit den verschiedenen Linkfarben gezeichnet wird. Alternativtext, der solange angezeigt wird, bis das Bild geladen ist. Höhe des Bildes in Pixeln Breite des Bildes in Pixeln Bauen Sie eine HTML-Seite in der das Bild aus dem Schulungsverzeichnis (berg_und_wolken.jpg oder eisberg.jpg) ein und spielen Sie ein wenig mit den height- und width-parametern. 2.11 Tabellen Wie schon zu anfang erwähnt, sind Tabellen die Grundlagen jeden Layouts einer Webseite. Das liegt daran, daß die Entwickler von HTML niemals an Grafik gedacht haben, als sie ihre Sprache entwarfen. Im Nachhinein kann man jedoch sagen, daß Tabellen eine recht gute Lösung für das Problem darstellen. Da das Setzen von Tabellen nicht ganz unkompliziert ist und auch recht schnell unübersichtlich wird, ist eine Planung der Seite sehr zu empfehlen. Für die nächste Übung gehen wir vom klassischen Drei-Teile-Layout aus: Titelleiste Navigationsleiste Textbereich Seite: -12/15-
Auch wenn es nicht so aussieht: Die Titelleiste ist eine eigene Tabelle mit zwei Spalten, in der linken Spalte ist linksbündig der Text Jugendnetz MSP als Grafik gesetzt, in der rechten Spalte sitzt rechtsbündig das Powered by -Logo. Die Abstandseinstellungen der Tabelle sind so, daß die nächsten Tabellen direkt bündig ansetzen. Danach folgt eine weitere Tabelle, deren linke Spalte die Navigationsleiste enthält und deren rechte Spalte den eigentlichen Textbereich darstellt. Der redaktionelle Seiteninhalt wird also in eine Spalte einer Tabelle geschrieben. Da HTML mit Bereichen arbeitet, ist es in dieser Spalte natürlich wiederum möglich, Tabellen einzufügen... Seite: -13/15-
2.11.1 <TABLE> Fügt eine neue Tabelle in die Seite ein. Beschreibung Die Tabelle besteht aus Zeilen und Spalten, die alle im Bereich des <TABLE>- Tags in die Datei eingebaut werden.!!! (wenn man es vergißt, kann Netscape die Seite überhaupt nicht anzeigen) Parameter align Ausrichtung der Tabelle entsprechend den Ausrichtungsmöglichkeiten von Text: left, center und right. 2.11.2 <TR> border cellspacing cellpadding height width bgcolor background Gibt die Breite des Tabellenrandes ein. Für Layout-Tabellen muß dieser Wert auf 0 gesetzt sein. Abstand, den die einzelnen Spalten untereinander haben sollen. Für Layouttabellen einfach 0. Abstand, den der Text in einer Zelle zu deren Rand haben soll. Für Layouttabellen einfach 0. Höhe der Tabelle. Angaben sind in Pixeln oder in Prozent der Bildschirmgröße möglich. Breite der Tabelle. Angaben wie bei height. Hintergrundfarbe. Fängt eine neue Tabellenzeile an URL eines Hintergrundbildes. Beschreibung Alle Spalten einer Tabelle befinden sich im Bereich einer Zeile. Es ist nicht möglich, eine Spalte zu definieren, ohne vorher eine Zeile anzufangen. Parameter bgcolor Hintergrundfarbe für alle Spalten Seite: -14/15-
valign= top : valign= middle : valign= bottom : Bürgernetze Main-Spessart e.v. 2.11.3 <TD> Definiert eine Spalte einer Tabelle Beschreibung Aller Text, der in einer Tabelle angezeigt wird, muß in Spalten stehen. Spalten können sich über mehrere Zeilen und Spalten erstrecken. Parameter bgcolor Hintergrundfarbe für diese Spalte 2.11.4 Übung background align valign height width colspan rowspan Bauen Sie folgende Tabelle in HTML nach: URL für ein Hintergrundbild Ausrichtung des Textes in dieser Spalte Vertikale Ausrichtung des Textes Der Text beginnt am oberen Rand der Spalte Der Text ist vertikal in der Spalte zentriert Der Text sitzt bündig am unteren Rand der Spalte Höhe der Spalte, entweder in Pixeln oder in Prozent der Tabellengröße Breite der Spalte, Angabe entsprechend der Höhe Anzahl der Spalten, über die sich diese Spalte erstrecken soll Anzahl der Zeilen, über die sich diese Spalte erstrecken soll 3 Abschlußübung Bauen Sie die Beispielseite für das Jugendnetz nach der Vorlage und unter Verwendung der vorgegebenen Bilder nach. Seite: -15/15-