Webseiten aufbauen mit HTML Hypertext Markup Language

Transkript

1 Webseiten aufbauen mit HTML Hypertext Markup Language Was ist HTML? Der Grundaufbau von HTML Textformatierung Bilder und Verweise Tabellen Fenster und Formulare Cascading Style-Sheets (CSS) HTML-Editoren Verfasser: Martin Hüsler September 2010 Fachhochschule Nordwestschweiz, FHNW

2 Inhaltsverzeichnis 1. WAS IST HTML? Allgemeines zu HTML Anforderungen Öffnen eines Editors 5 2. DER AUFBAU VON HTML Was sind HTML-Tags? Schreiben eines Textes Übungsaufgabe HTML Textformatierung Grundlagen Die verschiedenen Befehle Bilder Dateipfade im Internet Einbinden eines Bildes Erweiterungsmöglichkeiten Hintergrundbilder Übungsaufgabe HTML Links (Verweise) Allgemein Lokaler Link Link Übungsaufgabe HTML Tabelle Grundlagen Erweiterungen Frames (mehrere Fenster) Grundlagen Eigenschaften von Frames Nachteile von Frames Formulare Grundlagen Eingabefelder Formularbeispiel 19 Informatik Grundlagen Webseiten aufbauen

3 3. CASCADING STYLE-SHEETS (CSS) Grundlagen Einbinden von Style-Sheets Direkt im HTML-Tag Mit dem <SPAN>-Tag Für die gesamte Webseite Separate Textdatei Beispiele möglicher Style-Sheet-Dateien Liste der wichtigsten CSS-Befehle HTML-EDITOREN Microsoft FrontPage AOL-Press Netscape-Composer Hot-Dog-Webeditor ANHANG Ratschläge für das Erstellen von Internet-Seiten Anmeldung bei Suchservern Weitere Information 30 Informatik Grundlagen Webseiten aufbauen

4 1. Was ist HTML? 1.1 Allgemeines zu HTML HTML ist die Beschreibungssprache des World Wide Webs. Damit werden die vielfältigen Informationen, welche rund um den Globus angeboten werden, dargestellt. Die Seitenbeschreibungssprache HTML (Hypertext Markup Language) ermöglicht auf einfache Weise die Erstellung von Informationsseiten. HTML wurde ständig weiterentwickelt, das heisst, die Möglichkeiten wurden immer erweitert. Die Entwicklung der Web-Editoren nähert sich immer mehr, was die Einfachheit betrifft, den luxuriösen Programmen der Textverarbeitung. 1.2 Anforderungen Um HTML-Seiten zu erstellen ist weder eine Internetverbindung noch eine spezielle Software notwendig (obwohl beides natürlich nützlich ist). Grundsätzlich genügt ein gewöhnlicher Text-Editor. Darin können direkt die HTML-Tags angegeben werden. Um das Ergebnis zu betrachten ist ein Internet-Browser notwendig. Die andere Möglichkeit ist, einen speziellen HTML-Editor zu verwenden. Es gibt eine grosse Vielzahl von Web-Editoren. Manche erlauben es, über graphische Oberflächen Seiten per Mausklick zusammen zu stellen. In diesem Modul wollen wir einige Beispiele solcher Web-Editoren kennen lernen. Bekannte sind "Frontpage", " Dreamweaver" und "AOL-Press". Beispiel für einen solchen Editor ist das frei kopierbare AOL-Press. Diese Editoren bieten den Vorteil, dass die Seiten so dargestellt werden, wie sie auch im Internet zu sehen sein werden. Als Browser stehen heute hauptsächlich der "Microsoft Internet-Explorer" oder der "Firefox" zur Verfügung. Für die Entwicklung von HTML Seiten benutzt man am besten einige Browser (und Browserversionen), um sicherzugehen, dass die erstellten Seiten auf allen gut dargestellt werden. Der Softwareriese Microsoft hat heute eine eindeutige Vormachtstellung was die Browser-Software angeht. Firefox folgt weit abgeschlagen an zweiter Stelle. Informatik Grundlagen Webseiten aufbauen

5 1.3 Öffnen eines Editors Unter Windows XP / Windows 7 öffnen Sie den Notepad-Editor, indem Sie unter "Start" den Menüpunkt "Ausführen" wählen. Tippen Sie nun "notepad" und drücken Sie die ENTER-Taste. Der Notepad-Editor wird geöffnet. Wählen Sie im Menu "Datei" die Funktion "Speichern unter". Wählen Sie das Verzeichnis "C:\kurs" und nennen Sie dieses Dokument "beispiel.html". Damit sind Sie nun für den Beginn des HTML-Kurses gerüstet. Informatik Grundlagen Webseiten aufbauen

6 2. Der Aufbau von HTML 2.1 Was sind HTML-Tags? Einzelne Elemente eines HTML-Textes werden durch Anweisungen, sogenannte "Tags", gekennzeichnet. Dabei gibt es öffnende Tags (<TAG>) und abschließende Tags (</TAG>). Nicht alle Tags treten paarweise auf, für einige wird kein schließender Tag benötigt. Das folgende Dokument besteht nur aus denjenigen Anweisungen (Tags), die jedes HTML-Dokument enthalten muß. Beispiel "Grundseite" <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <TITLE>Dokumenttitel</TITLE> Erklärung: Die Tags <HTML> </HTML> umfassen das ganze Dokument, stehen also immer am Anfang, respektiv am Schluss. Zwischen <HEAD> und </HEAD> stehen wichtige Informationen über das Dokument, z.b. der Name des Dokuments. Bitte achten Sie darauf, dass das Dokument beim Speichern die Endung.HTM oder.html bekommt, also z.b. INDEX.HTML, damit es von Browsern korrekt erkannt wird. 2.2 Schreiben eines Textes Beispiel "Texteinbinden" <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <TITLE> "Name" Homepage </TITLE> Willkommen auf der Homepage von "Vorname" "Name". Informatik Grundlagen Webseiten aufbauen

7 Erklärung: Sie haben zwischen dem Tag <BODY> und dem Tag </BODY> eine weitere Zeile eingefügt. Fast alle weiteren Anweisungen werden zwischen diesen beiden Tags geschrieben. Das Dokument befindet sich also zur Hauptsache zwischen <BODY> und </BODY>. Wenn Sie "Beispiel 2" in einem Browser betrachten, wird der eingefügte Text links oben im Fenster erscheinen. 2.3 Übungsaufgabe HTML1 1. Erstellen Sie ein Dokument entsprechend dem Beispiel "Texteinbinden" und speichern Sie diese Datei unter dem Namen "beispiel.html". Der Dateiname kann unter Windows die Endung.htm oder.html haben und soll keine Leerzeichen enthalten. 2. Betrachten Sie nun Ihre erstellte Seite mit einem Browser. 3. Fügen Sie eine weitere Zeile Text in das Dokument "beispiel.html". 4. Was stellen Sie beim erneuten Betrachten im Browser fest? 5. Fügen Sie zwischen der ersten und der zweiten Zeile das Tag <BR> ein. Was bewirkt das Tag <BR>? Informatik Grundlagen Webseiten aufbauen

8 2.4 Textformatierung Grundlagen Der Textformatierung kommt eine spezielle Bedeutung zu, da sie nicht ganz so leicht zu handhaben ist. Wie Sie vielleicht bei Ihren Besuchen im Internet schon bemerkt haben, wird auf den meisten Seiten der Text in der Standart-Schrift Times dargestellt. Sie könnten prinzipiell diese Schrift und ihre Grösse in jedem Browser individuell einstellen, wir empfehlen Ihnen aber, genau das nicht zu tun. Lassen Sie die Einstellungen so wie Sie sind. Denn schliesslich sollen die Web-Seiten nicht nur auf Ihrem Computer schön und ordentlich aussehen Die verschiedenen Befehle <H4> </H4> <H3> </H3> <H2> </H2> <H1> </H1> <BASEFONT SIZE=X> <FONT> </FONT> Titel-Schriftgrösse klein Titel-Schriftgrösse grösser Titel-Schriftgrösse gross Titel-Schriftgrösse sehr gross setzt über den Bereich eines Textes eine Basis- Schriftgröße zwischen X = 1 und 7 öffnet und schliesst einen Schriftbereich Erklärung: Wenn relative Abweichungen zum "Basefont" gewünscht sind, kann dem Wert ein Vorzeichen (+/-) vorangestellt werden (z.b. <FONT SIZE=+2> </FONT>). FACE="Fontname" - als Fontnamen können ein oder mehrere Namen (Arial, Times Roman,...) angegeben werden, wobei der erste auf dem jeweiligen System installierte zur Darstellung benutzt wird. COLOR="#rrggbb" bestimmt die Farbe des Textes nach Rot-Grün- Blau-Anteilen. Farbtabelle: Farbe: RGB-Wert: Weiss FFFFFF Rot FF0000 Grün 00FF00 Blau 0000FF Gelb FFFF00 Informatik Grundlagen Webseiten aufbauen

9 <B> </B> <I> </I> <U> </U> <S> </S> <SUB> </SUB> <SUP> </SUP> <BIG> </BIG> <SMALL> </SMALL> <CENTER> </CENTER> <P></P> <BR> <HR> <MARQUEE> </MARQUEE> umschließt Passagen, die fett dargestellt werden sollen. umschließt Passagen, die kursiv dargestellt werden. umschließt Passagen, die unterstrichen werden. umschließt Passagen, die durchgestrichen werden. Tieferstellen und kleinerer Schriftgrad Höherstellen und kleinerer Schriftgrad relativ größerer Schriftgrad relativ kleinerer Schriftgrad zentriert Absatz Zeilenumbruch Trennstrich (horizontale Linie) Lauftext definieren Beispiel "Trennstrich": <HR NOSHADE SIZE=3 WIDTH=50% ALIGN=CENTER> Dies ergibt eine Linie über 50% der Seite ohne Schatten zentriert. Sonderzeichen : Ü ü ä ö Leerschlag (Space) Ü ü ä ö Es gibt weiter die Möglichkeit Sonderzeichen über den ASCII-Zahlencode zu definieren: Bsp.: ü ü Informatik Grundlagen Webseiten aufbauen

10 2.5 Bilder Dateipfade im Internet Im nächsten Abschnitt werden Sie lernen, wie man ein Bild auf einer HTML-Seite anzeigt. Damit der Browser aber weiss, woher er das Bild laden soll, muss man ihm den Dateipfad angeben. Hier gibt es verschiedene Möglichkeiten: Wenn sich alle Dateien im gleichen Verzeichnis befinden, reicht es, wenn die erste Seite einen kompletten Pfad hat. Das Bild wird dann nur noch über den Bildernamen angesprochen. Zum Ausprobieren der Seiten auf dem eigenen Computer verwendet man z.b. den Dateipfad "file:///c:/kurs/bsp.gif". In diesem Beispiel wird die Datei kurs/bsp.gif von der Festplatte C:/ geladen. Sind aber Ihre Seiten schon über Internet zugänglich, heisst der Dateipfad anders. Der Aufbau ist meistens wie folgt: "protokoll://adresse/dateinamen" Das Verwenden von relativen Pfaden an einem Beispiel: Wir verlinken von der Seite test.htm auf die verschiedenen Verzeichnisse und Dateien. C:\pfad\test.htm (Aktuelle Seite mit Verzeichnis) C:\test1.htm../test1.htm (In ein höheres Verzeichnis) C:\pfad\images\test2.gif images/test2.gif (In ein tieferes Verzeichnis) C:\ordner\test3.htm../ordner/test3.htm (In ein höheres, anderes Verzeichnis) Hier noch eine Erklärung zu dem Dateipfad : " steht für das Protokoll, über das die Seiten angesprochen werden. Es kann heute beim Surfen im Internet meist weggelassen werden, wird aber beim HTML-Seitenlayout dennoch manchmal gebraucht Einbinden eines Bildes Zwischen dem Tag <BODY> und dem Tag </BODY> (Sehen Sie in Beispiel 1 nach) können nun weitere Elemente eingefügt werden. Mit <IMG SRC="datei.gif"> bindet man Grafiken in ein Dokument ein. Beispiel "Bild einbinden" <HTML> <HEAD> <TITLE>Bild der Technik</TITLE> </HEAD> <BODY> <IMG SRC="pics/bild_tech.jpg"> </BODY> </HTML> Informatik Grundlagen Webseiten aufbauen

11 2.6 Erweiterungsmöglichkeiten ALT="Text" ALIGN=left / right BORDER=X WIDTH=X HEIGHT=Y zeigt einen alternativen Text an, wenn die Grafik nicht geladen werden kann. läßt Text rechts oder links um die Grafik fließen Rahmen mit X-Pixel um die Grafik Skalierung der Grafik in der Breite absolut oder prozentual Skalierung der Grafik in der Höhe absolut oder prozentual Hintergrundbilder Dem <BODY>-Tag kann das Attribut background angefügt werden um ein Hintergrundbild einzufügen. Dieses Bild wird dann x-fach wiederholt im Hintergrund angezeigt. <BODY BACKGROUND= pics/hintergrund.gif > Wenn der Hintergrund lediglich eingefärbt werden soll, kann das Attribut bgcolor verwendet werden. <BODY BGCOLOR= #FFFF00 > Übungsaufgabe HTML2 1. Erstellen Sie ein HTML-Dokument mit einem Bild in der Mitte. Rechts und links des Bildes soll der Text "Beispiel" stehen. 2. Erstellen Sie ein Dokument, in dem ein Bild rechtsseitig von Text umflossen wird. Die Höhe des Bildes soll 150 Pixel sein, die Breite 200 Pixel. Informatik Grundlagen Webseiten aufbauen

12 2.7 Links (Verweise) Allgemein <A HREF=" Lokaler Link <A HREF="Datei.htm">Verweistext</A> - Verweis auf Datei im gleichen Verzeichnis <A HREF="../Pfad/Datei.htm">Verweistext</A> - Verweis auf Datei in anderem Verzeichnis (relativ) <A HREF="file://localhost/LW:/Pfad/Datei.htm">Verweistext</A> - Verweis auf Datei in anderem Verzeichnis (absolut) Grafische Links lassen sich einfach dadurch realisieren, daß statt eines Verweistextes <IMG SRC="Grafik.gif" > angegeben wird Link <A HREF="mailto:hans.muster@bluewin.ch">Verweistext</A> Alle diese -Links beginnen mit mailto (ohne // dahinter!). Diese Links funktionieren nur, wenn der WWW-Browser das Erstellen und Absenden von s erlaubt oder wenn bei solchen Links automatisch das -Programm gestartet wird Übungsaufgabe HTML3 1. Erstellen Sie einen lokalen Link auf Ihrer beispiel.html-seite auf die Seite beispiel2.html. 2. Fügen Sie auf Ihre beispiel.html-seite einen Link auf die Internetseiten der ABB ein. Informatik Grundlagen Webseiten aufbauen

13 2.8 Tabelle Grundlagen <TABLE> </TABLE> diese Tags umschließen das Tabellenprojekt Erweiterungen <TABLE BORDER=N> veranlaßt, daß das Gitternetz der Tabelle angezeigt und der Außenrahmen mit einer Stärke von N -Pixel dargestellt wird <TABLE ALIGN=left / center / right > horizontale Ausrichtung der Tabelle <TABLE WIDTH=X> <TABLE HEIGHT=Y> <TABLE CELLSPACING=N> <TABLE CELLPADDING=N> <CAPTION></CAPTION> <TR> <TH> </TH> <TD> </TD> Gesamtbreite in Pixel oder prozentual zum Anzeigefenster Gesamthöhe in Pixel oder prozentual zum Anzeigefenster Gitternetzdicke in Pixel Abstand in Pixel der Zellinhalte vom Rand nimmt den Tabellentitel auf führt jede Tabellenzeile - auch Kopfzeilen - an, in der dann die einzelnen Kopf- und Datenzellen stehen bildet Kopfzellen, d.h. Zellen, die entweder eine Spalte oder eine Zeile benennen bildet Datenzellen GEMEINSAME ATTRIBUTE: ALIGN=left / center /right VALIGN=top / middle / bottom ROWSPAN=X COLSPAN=Y horizontale Ausrichtung in der Zelle vertikale Ausrichtung in der Zelle verbindet X benachbarte Zeilen verbindet Y benachbarte Spalten Informatik Grundlagen Webseiten aufbauen

14 2.9 Frames (mehrere Fenster) Grundlagen Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente (Fenster) aufteilen. Jedes Fenster wiederum beinhaltet eine Webseite. Verweise in einem Frame können Dateien aufrufen, die in einem anderen Frame dargestellt werden. Beispiel Frame1: Frame1 Frame2 In HTML (anstelle von <BODY> </BODY>): <FRAMESET COLS="200,*"> <FRAME SRC="navigation.html" NAME="linkesFenster"> <FRAME SRC="haupt.html" NAME="rechtesFenster"> </FRAMESET> Mit der Angabe COLS="200,*" wird der linke Frame genau 200 Pixel breit sein. Sie haben weiter die Möglichkeit mit Prozentzahlen (COLS="10%,*") zu arbeiten. Dabei wird die Grösse des Frames prozentual zur Grösse des Anzeigefensters angezeigt. Beispiel Frame2: Frame1 Frame2 Frame3 In HTML: <FRAMESET COLS="200,*"> <FRAME SRC="navigation.html" NAME="linkesFenster"> <FRAMESET ROWS="50,*"> <FRAME SRC="top.html" NAME="oberesFenster"> <FRAME SRC="inhalt.html" NAME="HauptFenster"> </FRAMESET> </FRAMESET> Auf diese Art kann man beliebig den Browserinhalt aufteilen. Wie rufe ich nun in der Seite "navigation.html" welche unserem Frame1 entspricht eine neue Seite im Frame3 auf? <A HREF="news.html" TARGET="HauptFenster"> Neuigkeiten </A> Informatik Grundlagen Webseiten aufbauen

15 2.9.2 Eigenschaften von Frames Scrollbars Normalerweise verwaltet der Browser die Scrollbars eines jeden Frame-Fensters automatisch. Nun kann aber festgelegt werden, dass ein Fenster kein Scrollbar enthält. <FRAME SRC="haupt.html" NAME="HauptFenster" SCROLLING=NO> Unveränderbare Fenstergrösse <FRAME SRC="navigation.html" NAME="linkesFenster" NORESIZE> Mindestabstände zwischen Fensterrand und Fensterinhalt <FRAME SRC="haupt.html" NAME="HauptFenster" MARGINWIDTH=20 MARGIN- HEIGHT=0> Rahmendicke der Fensterrahmen <FRAME SRC="top.html" NAME="oberesFenster" FRAMEBORDER=0> <FRAMESET COLS="200,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0> <FRAME SRC="navigation.html" NAME="linkesFenster"> <FRAME SRC="haupt.html" NAME="rechtesFenster"> </FRAMESET> "Framespacing" gibt den Abstand in Pixel zwischen den Frames an, also die Breite der Rahmen (spacing = Abstand). "Border" gibt die Breite der Rahmen in Pixel an. "Frameborder" [0/1] oder [yes/no] bedeutet nach Microsoft-Syntax ob ein Rahmen angezeigt werden soll oder nicht. Wenn Sie den Rahmen zwischen den Frames unterdrücken, hat der Anwender keine Möglichkeit, die Grösse der einzelnen Frames zu verändern. Testen Sie deshalb rahmenlose Frames unter mehreren Bildschirmauflösungen und mit unterschiedlichen Anzeigefenstern. Farbige Fensterrahmen <FRAMESET COLS="200,*" BORDERCOLOR="#FF0000"> <FRAME SRC="navigation.html" NAME="linkesFenster" BORDER=10> Frameset beenden <A HREF=" TARGET="_blank"> Zur FHSO-Homepage </A> <A HREF=" TARGET="_parent"> Zur FHSO-Homepage </A> <A HREF=" TARGET="_top"> Zur FHSO-Homepage </A> "_blank" bewirkt, dass das Verweisziel in einem neuen Browser erscheint. Ihr Frameset bleibt im Hintergrund erhalten. (Anstelle von "_blank" kann irgend was geschrieben werden, wenn es kein Fenster mit diesem Namen gibt, öffnen die WWW-Browser ein neues Browser-Fenster. "_parent" bewirkt, dass das Verweisziel in dem Zustand des Anzeigefensters angezeigt wird, der vor dem Start Ihres Framesets aktuell war. "_top" bewirkt, dass das Verweisziel in jedem Fall im gesamten Anzeigefenster angezeigt wird. Informatik Grundlagen Webseiten aufbauen

16 2.9.3 Nachteile von Frames Frames schränken den eh zu knappen Platz auf dem Monitor weiter ein. Tastaturbefehle, wie etwa das Rollen, funktionieren nicht wie gewohnt. Das jeweilige Frame muss erst durch einen Mausklick aktiviert werden. Das Ansehen des Quellcodes sowie das Abspeichern oder Drucken einer Seite wird erschwert. Lesezeichen können nicht auf Einzelseiten gesetzt werden. Frames kosten Besucher, denn Suchmaschinen haben mehr oder weniger große Probleme mit Frames. Es wird nur der Titel des Framesets angezeigt, nicht die Titel der Einzelseiten, was die Orientierung erschwert. Es macht kaum Sinn von außen auf eine Seite innerhalb eines Frames zu linken. Wollte man es trotzdem tun, muss der Besucher selbst die gemeinte Seite finden. Deshalb wird auch auf diese Weise ein nicht unerheblicher Teil des möglichen Besucherauskommens verschenkt. Es gibt immer noch Browser, die Frames nicht anzeigen können, auch wenn diese selten sind. Informatik Grundlagen Webseiten aufbauen

17 2.10 Formulare Grundlagen HTML stellt die Möglichkeit zur Verfügung Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text eingeben, aus Listen Einträge auswählen und Buttons anklicken. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button klicken, um das Formular abzusenden. Sie geben beim Erstellen des Formulars an, was mit den Daten des ausgefüllten Formulars passieren soll. Sie können die Daten beispielsweise per jemandem senden oder die Daten von einem CGI-Programm auf dem Server weiterverarbeiten lassen. An einer beliebigen Stelle im <BODY>-Bereich können Sie ein Formular einfügen: Beispiel1: <FORM ACTION= method= post enctype= text/plain">... Formularfelder </FORM> Beispiel2: <FORM ACTION= /cgi-bin/auswertung.pl method= get >... Formularfelder </FORM> Die Angabe bei ACTION= ist entweder eine -Adresse mit vorangestelltem mailto: wie im Beispiel1. Dann werden die Daten an diese -Adresse gesandt. Die andere Möglichkeit ist ein Skript auf dem Server aufzurufen, ein CGI-Programm, das die Daten weiterverarbeitet, wie Beispiel2 oben zeigt. Bei der Adressierung des CGI-Programms gelten die gleichen Regeln wie bei Links. Wenn sich die Formulardaten per zuschicken lassen, benutzen Sie immer method=post. Weiter sollten Sie bei -Empfang von Formularen immer die Angabe enctype= text/plain mit angeben. Die Formulardaten sind normalerweise nach einem bestimmten Schema formatiert, das für auswertende Programme recht gut geeignet ist, aber für Menschen nicht angenehm zu lesen ist. Mit der genannten Angabe erhält man zumindest von Anwendern, die das Formular mit einem modernen www-browser ausfüllen, ordentlich formatierte s. Get Das zurückgeschickte Formular wird in der CGI-Umgebungsvariablen (QUE- RY_STRING) gespeichert, welche vom CGI-Programm ausgelesen werden kann. Anschliessend verarbeitet das CGI-Programm den Inhalt weiter. Post Mit dieser Methode wird das CGI-Programm aufgefordert, so zu handeln als seien die Formulardaten über die Kommandozeile eingegeben worden. Das CGI-Programm muss aus der Variablen CONTENT_LENGTH die Länge der übermittelten Daten auslesen. Informatik Grundlagen Webseiten aufbauen

18 Eingabefelder Einfaches Textfeld: Vorname: <input type= text name= vorname size= 30 maxlength= 50 > Mehrzeilige Textfelder: Ihr Kommentar: <textarea name= Kommentar rows= 10 cols= 40 > </textarea> Radiobuttons: <input type= radio name= Zahlmethode value= Mastercard > Mastercard <BR> <input type= radio name= Zahlmethode value= Visa > Visa <BR> Checkboxen: <input type= checkbox name= zutaten value= Pilze > Pilze <BR> <input type= checkbox name= zutaten value= Salami > Salami <BR> Auswahlliste: <select name= wohnort size= 3 > <option> Olten </option> <option selected> Solothurn </option> <option> Basel </option> <option> Luzern </option> </select> Absende- und Reset-Button: <input type= SUBMIT value= Abschicken! > <input type= RESET value= Zurücksetzen > Über Type= Submit wird dem Browser mitgeteilt, dass beim Drücken des Buttons der Inhalt übermittelt wird. Über Value wird der Button beschriftet. Klickt der Internet-Surfer den Senden-Button an, wird im Browser zuerst eine Dialogbox eingeblendet, die ihn darüber informiert, dass die Information per und damit unverschlüsselt verschickt wird (Diese Dialogbox kann ausgeblendet werden). Für einfache Informationen mag dies ausreichen, aber die Kreditkartennummer sollte nicht so ungeschützt übermittelt werden! Informatik Grundlagen Webseiten aufbauen

19 Formularbeispiel Vom nebenstehenden Formular finden Sie den Quelltext unten aufgelistet: <HTML> <HEAD> <TITLE> einfaches Formular </TITLE> </HEAD> <BODY> <H1> Ihre Bestellung </H1> <FORM method= post enctype="text/plain"> <FONT SIZE="3" FACE="ARIAL"> <TABLE border="0"> <TR> <TD>Name: </TD> <TD><INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="40"></TD> </TR> <TR> <TD>Vorname: </TD> <TD><INPUT TYPE="text" NAME="vorname" SIZE="30" MAXLENGTH="40"></TD> </TR> <TR> <TD>Strasse: </TD> <TD><INPUT TYPE="text" NAME="strasse" SIZE="30" MAXLENGTH="40"></TD> </TR> <TR> <TD>Wohnort: </TD> <TD><INPUT TYPE="text" NAME="wohnort" SIZE="30" MAXLENGTH="40"></TD> </TR> </TABLE> <BR> <input type="checkbox" name="prospekt" value="weiterbildungsprospekt"> Weiterbildungsprospekt<BR> <input type="checkbox" name="webmaster" value="webmasterprospekt"> Webmasterprospekt<BR><BR> Kommentar zur Bestellung:<BR> <TEXTAREA NAME="Bemerkungen" COLS="40" ROWS="5"></TEXTAREA><BR><BR> <INPUT TYPE="Submit" NAME="OK" VALUE="Senden"> <INPUT TYPE="reset" NAME="zurücksetzen" VALUE="Zurücksetzen"> </FORM> </BODY> </HTML> Informatik Grundlagen Webseiten aufbauen

20 3. Cascading Style-Sheets (CSS) 3.1 Grundlagen Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle. Mit Hilfe von Style-Sheets kann man z.b. festlegen, dass alle Überschriften der 1. Ordnung eine Schriftgrösse von 18 Punkt haben, in der Schriftart Arial und nicht fett erscheinen. Das ist aber noch nicht alles. Style-Sheets bieten noch viel mehr Möglichkeiten. So können beliebige Bereiche einer HTML-Seite mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild oder mit diversen Rahmen versehen werden. Weiter hat man mittels Style-Sheets die Möglichkeit Grafiken auf den Pixel genau zu positionieren. Ein wichtiges Leistungsmerkmal von Style-Sheets ist noch das zentrale Platzieren von Definitionen. Somit muss nur in einem File die gesamte Definition der Schriftarten bestimmt werden und diese kann in jede HTML-Seite eingebaut werden. Welche Formatierungen kann ein StyleSheet übernehmen? Schrift, Schriftgröße und -farbe Textauszeichnungen (Kursiv/ Fett/ Unterstrichen und andere) Textausrichtung (Links/ Rechts/ Mittelachse/ Blocksatz) Zeilenabstand Wortabstand Formatierung der Hyperlinks (Farben/ Unterstreichung/ Hover) Die Eingabefelder der Formulare verändern Mauszeiger können neue Formen annehmen Rahmen Hintergrundfarbe oder Hintergrundbild (auch für Textteile) Randabstände Mauszeiger Positionierungen (relative und absolut für beliebige Objekte) Beispielsweise lässt sich der Zeilenabstand (Durchschuss) eines Textblockes verändern, was mit traditionellem HTML nicht möglich ist. Dazu ist keine Formatvorlage notwendig, sondern lediglich eine Style-Definition dort, wo sie benötigt wird. Ältere oder ganz alte Browser sind hier übrigens keine Gefahr, sie kümmern sich nicht um Style Sheets. Informatik Grundlagen Webseiten aufbauen

21 3.2 Einbinden von Style-Sheets Direkt im HTML-Tag Diese Befehle wirken nur an bestimmten Stellen einer Seite. Beispielsweise innerhalb einer Überschrift oder eines Absatzes. <h1 style="color : red">überschrift</h1> <p style="color : red">text</p> Mit dem <SPAN>-Tag Größere Bereiche können mit dem Befehle <span> definiert werden. Alles, was sich innerhalb der "Spanne" befindet, wird beeinflusst. <span style="line-height : 150%">Text</span> Für die gesamte Webseite Man kann innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben definieren. Mit dem Befehl <STYLE...>... </STYLE> im HEAD der HTML-Datei wird der Bereich für die Style-Sheet-Angaben reserviert. Der Aufbau ist wie folgt: <HEAD> <TITLE> Titel der Seite </TITLE> <STYLE TYPE="text/css"> <!-- Hier werden die Style-Sheet-Angaben eingebaut. --> </STYLE> </HEAD> Separate Textdatei In vielen Fällen wünscht man einheitliche Formate für alle HTML-Dateien eines Projekts. In diesem Fall können die Angaben in einer zentralen Datei gespeichert werden. Diese Textdatei wird man anschliessend in jede gewünschte HTML-Seite einbinden. Dieses Einbinden sieht wie folgt aus: <HEAD> <TITLE> Titel der Seite </TITLE> <LINK REL=stylesheet TYPE="text/css" HREF="allgemein.css"> </HEAD> Informatik Grundlagen Webseiten aufbauen

22 3.3 Beispiele möglicher Style-Sheet-Dateien Im folgenden Beispiel wird das Textformat in einem zentralen "allgemein.css" definiert. Textformatierung span {font-family:verdana,arial,helvetica,sans-serif} font {font-family:verdana,arial,helvetica,sans-serif; font-size:11px; color:#ffffff} td {font-family:verdana,arial,helvetica,sans-serif; font-size:11px} th {font-family:verdana,arial,helvetica,sans-serif; font-size:11px; text-align:left} a:link {color:#ff3333; text-decoration:none} a:visited {color:#990000; text-decoration:none} a:active {color:#ff0000; font-style:italic} p {font-family: Verdana,Arial,Helvetica,sans-serif}.size {font-size: 10px} Textmarker-Effekte sind in anderen Medien beliebt, im Web sieht man sie jedoch nur selten. Dabei ist es doch ganz einfach und vor allem sehr wirkungsvoll. Der zu markierende Text wird mit einem <span>-tag umgeben, dort findet sich dann Platz für die Anweisungen für die Schriftfarbe (color) und die Hintergrundfarbe (background), der eigentliche Textmarker- Effekt. <span style="color : black; background: yellow">textmarker-effekte erzielen Sie mit: </span> Noch mehr Text Textmarker-Effekte erzielen Sie mit: Noch mehr Text Hintergrundbild Entsprechend dem folgenden Beschrieb kann ein Hintergrund genau plaziert werden. <STYLE TYPE="text/css"> BODY {background-image:url(back.gif); background-repeat:no-repeat; background-position: 3cm 5cm;} </STYLE> Masseinheiten Bei allen numerischen Angaben in CSS, also bei Schriftgrössen, Rändern und Positionierung stehen diverse Masseinheiten zur Verfügung. pt Punkt (= 1/72 inch) pc Pica (= 12 Punkt) in Inch (= 2,54 cm) mm Millimeter cm Zentimeter Informatik Grundlagen Webseiten aufbauen

23 3.4 Liste der wichtigsten CSS-Befehle Tabelle der wichtigsten Befehle: Befehl: Was wird formatiert? Was kann formatiert werden? A:link Link nahezu alle CSS Befehle, wi Größe, Farbe A:visited Besuchter Link nahezu alle CSS Befehle, wi Größe, Farbe A:hover Beim Darüberfahren (mit Maus) nahezu alle CSS Befehle, wi Größe, Farbe A:active Angeklickter Link nahezu alle CSS Befehle, wi Größe, Farbe Margin-left absoluter Abstand zum Seitenrand numerischer Wert in pt Margin-right absoluter Abstand zum Seitenrand numerischer Wert in pt Margin-bottom absoluter Abstand zum Seitenrand numerischer Wert in pt Margin-top absoluter Abstand zum Seitenrand numerischer Wert in pt Font-family Schriftart Arial, Times New Roman, et Font-size Schriftgrösse numerischer Wert in pt Color Schriftfarbe yellow, white, etc oder HTML Farbangabe Font-variant Schriftvariante normal, small-caps Font-weight Schriftgewicht normal, bold, bolder, lighter Font-style Schriftstil normal, oblique, italic Letter-spacing Zeichenabstand numerischer Wert in pt Word-spacing Wortabstand numerischer Wert in pt text-ident Texteinrückung numerischer Wert in pt line.height Zeilenabstand (Durchschuss) numerischer Wert in pt text.align Textausrichtung left, right, center, justify Background Hintergrundfarbe Yellow. White oder HTML- Farbangabe Background-image Hintergrundbild none, URL Background-repeat Kachel repeat, repeat-x, repeat-y, no repeat border-top-width Dicke der Rahmenlinie thin, medium, thick od. nummerischer Wert border-bottom-width Dicke der Rahmenlinie thin, medium, thick od. nummerischer Wert border-left-width Dicke der Rahmenlinie thin, medium, thick od. nume rischer Wert border-color Rahmenfarbe Farbname oder HEX-Wert Cursor Cursorform s-resize, e-resize, n-resize, crosshair Es gibt eine sehr umfangreiche Beschreibung zu CSS unter " Informatik Grundlagen Webseiten aufbauen

24 4. HTML-Editoren Heute gibt es eine grosse Anzahl von Web-Editoren auf dem Markt, die ständig verbessert und weiterentwickelt werden. Der Anwender hat die Qual der Wahl aus dem grossen Angebot einen geeigneten Editor für sich auszuwählen. Jeder Softwareentwickler, der HTML-Editoren herstellt, behauptet natürlich, sein Produkt biete die meisten Vorzüge. Es gibt zwei verschiedene Arten Editoren: WYSIWYG-Editoren (WYSIWYG = What You See Is What You Get) stellen alles schon so auf dem Bildschirm dar, wie es später auch im Browser erscheinen soll. Mit Menubefehlen und einer Buttonleiste können auf einfache Weise Elemente wie Tabellen oder Bilder eingefügt werden. Der HTML-Text kann aber bei den meisten solchen Editoren optional eingesehen und verändert werden. Zukünftige Versionen von Office- Paketen sind oft auch eine Art WYSIWYG-Editoren, da sie HTML direkt unterstützen. Besitzen Sie z.b. Microsoft Office 97, lassen sich mit Word erstellte Dokumente problemlos im HTML-Format abspeichern. Beispiele für WYSIWYG-Editoren: Microsoft-Frontpage, AOL-Press, Netscape- Composer ASCII-Editoren sind gewöhnliche Text-Editoren. Mit Menubefehlen und einer Button- Leiste können auf einfache Weise HTML-Befehle eingefügt oder aktualisiert werden. Der HTML-Text ist direkt sichtbar. Meist ist zum Betrachten der Seiten noch ein Browser notwendig. Beispiel für einen ASCII-Editor: Hot-Dog-Webeditor, Ulli Meybohms - Webeditor Auf den folgenden Seiten finden sie einen kurzen Überblick über die Web-Editoren, welche die grösste Verbreitung haben. Drei davon sind WYSIWYG-Editoren, einer ein leistungsfähiger ASCII-Editor. Informatik Grundlagen Webseiten aufbauen

25 4.1 Microsoft FrontPage Frontpage ist ein WYSIWYG-Editor. Für Personen, die sich gewöhnt sind mit Microsoft- Produkten zu arbeiten, bietet Frontpage diverse Vorteile. Formatierungen wie fett, kursiv usw. werden direkt übernommen. Es lassen sich mit Frontpage auch Analysen über die Struktur des eigenen Web-Servers machen. Frontpage ist nur für Windows (alle Systeme) erhältlich. Die Kosten betragen ca. Fr für eine Lizenz (Homepage: Informatik Grundlagen Webseiten aufbauen

26 4.2 AOL-Press 2.0 Wie Frontpage ist auch AOL-Press ein WYSIWYG-Editor. Einer der grössten Vorteile von AOL-Press 2.0 ist, dass diese Software kostenlos per Internet geladen werden kann. AOL-Press ist ein guter Web-Editor und auch ein Internet-Browser. Er ist sehr einfach in der Bedienung und mit einigen Mausklicks können bereits erste Resultate erzielt werden. Das Programm bietet zusätzliche Hilfen in der Tabellenerzeugung. Frames (Unterteilungen des Browser-Bildschirms) werden voll unterstützt. Erhältlich für Windows XP, NT, Vista, MacOS und div. UNIX (zu finden auf den IT-Manager Webseiten der Fachhochschule Nordwestschweiz, Informatik Grundlagen Webseiten aufbauen

27 4.3 Netscape-Composer Der Netscape-Composer ist auch ein WYSIWYG-Editor. Er hat seine Stärke in den Tabellenfunktionen. Im weiteren gibt es die interessante Funktion, alle Formatierungen mit einem Mausklick rückgängig zu machen. Für die Bildbearbeitung ist ein weiteres Software-Paket notwendig. Der Netscape-Composer ist ab der Software "Netscape Communicator 4.X" im Lieferumfang eingeschlossen. (Homepage: Informatik Grundlagen Webseiten aufbauen

28 4.4 Hot-Dog-Webeditor Hot Dog war der am meisten verbreitete Web-Editor. Er unterstützt viele Internet- Erweiterungen. Bei Hot Dog sieht man noch direkt die HTML-Tags, es ist also ein AS- CII-Editor. "Hot Dog Pro" ist für Windows Windows-Systeme erhältlich. Die Kosten für den Web- Editor betragen ungefähr Fr pro Lizenz. (Homepage: Weitere ASCII-Editoren: (Ulli Meybohms-Webeditor) (1st Page 2000) Anmerkung: Diese Liste ist bei weitem nicht vollständig. In Computerzeitschriften werden jeweils die neusten Versionen verschiedener Web-Editoren miteinander verglichen. Informatik Grundlagen Webseiten aufbauen

29 5. Anhang 5.1 Ratschläge für das Erstellen von Internet-Seiten - Achten Sie bei der Gestaltung der Seiten darauf, dass Sie die Seiten nicht mit Graphiken überladen (verhindert schnellen Seitenaufbau). - "Corporate Identity" gilt auch beim Web-Publishing. Versuchen Sie, Ihre Seiten durchwegs einheitlich zu Gestalten. - Verwenden Sie eine einzige Schriftfamilie, z.b. Helvetica. Zuviele Schriften erschweren die Lesbarkeit Ihrer Seiten. - Verwenden Sie Aufzählungspunkte beim Auflisten. Dadurch lässt sich die Seite besser lesen. Es gibt zwei Möglichkeiten: Entweder den Tag <LI> oder eine Graphik in einer Tabelle. - Verwenden Sie für Echtfarbgrafiken das Format JPEG. Dieses Kompressionsformat braucht 5-10 mal weniger Speicherplatz, indem es alle unnötigen Information weglässt und diese zufällig zu erzeugen versucht. Dieses Format eignet sich deshalb nicht für Bilder mit 256 oder weniger Farben. - Verwenden Sie für Graphiken mit 256 oder weniger Farben das Format GIF. - Sichern Sie immer ein Original der Graphik in einem anderen Format. - Lesen Sie die hervorragende HTML-Dokumentation von Stefan Münz. Sie können die Dokumentation online lesen oder auf der eigenen Festplatte in einem Verzeichnis speichern. Informatik Grundlagen Webseiten aufbauen

30 5.2 Anmeldung bei Suchservern Sie können META-Kennzeichen im "Head" Ihrer Webseite einführen, um folgendes zu erreichen: Zusätzliche Kennwörter eingeben, die die Indexierung Ihrer Seite beeinflusst Eine eigene Beschreibung angeben, die als Suchergebnis angezeigt werden soll Bei einer Webseite, die beispielsweise für einen Tierpflege-Service wirbt, werden automatisch alle Wörter dieser Seite aufgenommen. Sie können jedoch einzelne Wörter oder Phrasen als sogenannte Schlüsselwörter hinzufügen, die Ihren Service beschreiben. Benutzen Sie das META-Kennzeichen, und geben Sie name="keywords" ein, um diese Wörter dem Index hinzuzufügen. Damit erhöhen Sie die Wahrscheinlichkeit, dass Benutzer Ihre Seite finden: <META name="keywords" content="tierpflege, Fell"> Mit dem beschreibenden META-Kennzeichen können Sie angeben, was in der Kurzdarstellung als Suchergebnis angezeigt werden soll. Für Ihre Tierpflegeseite können Sie beispielsweise folgenden kurzen Werbesatz formulieren: <META name="description" content="alles über Pudelpflege, wir sind die Spezialisten!"> In diesem Beispiel können Benutzer Ihre Seite finden, wenn sie nach "Tierpflege" oder "Fell" suchen. Statt die ersten Zeilen der Webseite anzuzeigen, zeigt das Suchergebnis nun den Text des Meta-Tags "description" an. Bei vielen Suchmaschinen finden Sie die Anmeldung neuer Adressen unter den Stichwörtern "Add URL", "URL hinzufügen" oder "Neue Seiten hinzufügen". 5.3 Weitere Information Weitere Informationen finden Sie unter folgenden Adressen: Spezial: Informatik Grundlagen Webseiten aufbauen