Skript "Einführung in HTML"

Transcrição

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
Fachhochschule Nordwestschweiz, FHNW
September 2010
Inhaltsverzeichnis
1.
WAS IST HTML?
4
1.1
Allgemeines zu HTML
4
1.2
Anforderungen
4
1.3
Öffnen eines Editors
5
2.
DER AUFBAU VON HTML
6
2.1
Was sind HTML-Tags?
6
2.2
Schreiben eines Textes
6
2.3
Übungsaufgabe HTML1
7
2.4
Textformatierung
2.4.1
Grundlagen
2.4.2
Die verschiedenen Befehle
8
8
8
2.5
Bilder
2.5.1
Dateipfade im Internet
2.5.2
Einbinden eines Bildes
10
10
10
2.6
Erweiterungsmöglichkeiten
2.6.1
Hintergrundbilder
2.6.2
11
11
11
2.7
Links (Verweise)
2.7.1
Allgemein
2.7.2
Lokaler Link
2.7.3
E-Mail-Link
2.7.4
12
12
12
12
12
2.8
Tabelle
2.8.1
Grundlagen
2.8.2
Erweiterungen
13
13
13
2.9
Frames (mehrere Fenster)
2.9.1
Grundlagen
2.9.2
Eigenschaften von Frames
2.9.3
Nachteile von Frames
14
14
15
16
2.10
Formulare
2.10.1 Grundlagen
2.10.2 Eingabefelder
2.10.3 Formularbeispiel
17
17
18
19
Informatik Grundlagen
-2-
Webseiten aufbauen
3.
3.1
CASCADING STYLE-SHEETS (CSS)
Grundlagen
20
20
3.2
Einbinden von Style-Sheets
3.2.1 Direkt im HTML-Tag
3.2.2 Mit dem <SPAN>-Tag
3.2.3 Für die gesamte Webseite
3.2.4 Separate Textdatei
21
21
21
21
21
3.3 Beispiele möglicher Style-Sheet-Dateien
22
3.4 Liste der wichtigsten CSS-Befehle
23
4. HTML-EDITOREN
24
4.1 Microsoft FrontPage
25
4.2 AOL-Press 2.0
26
4.3 Netscape-Composer
27
4.4 Hot-Dog-Webeditor
28
5. ANHANG
29
5.1 Ratschläge für das Erstellen von Internet-Seiten
29
5.2 Anmeldung bei Suchservern
30
5.3 Weitere Information
30
-3-
Webseiten aufbauen
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.
-4-
Webseiten aufbauen
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.
-5-
Webseiten aufbauen
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>
<TITLE>Dokumenttitel</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
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>
<TITLE> "Name" Homepage </TITLE>
</HEAD>
<BODY>
Willkommen auf der Homepage von "Vorname" "Name".
</BODY>
</HTML>
-6-
Webseiten aufbauen
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
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> ?
-7-
Webseiten aufbauen
2.4
Textformatierung
2.4.1
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.
2.4.2
Die verschiedenen Befehle
<H4> </H4>
Titel-Schriftgrösse klein
<H3> </H3>
Titel-Schriftgrösse grösser
<H2> </H2>
Titel-Schriftgrösse gross
<H1> </H1>
Titel-Schriftgrösse sehr gross
<BASEFONT SIZE=X>
setzt über den Bereich eines Textes eine BasisSchriftgröße zwischen X = 1 und 7
<FONT> </FONT>
ö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ünBlau-Anteilen.
Farbtabelle:
Farbe:
Weiss
Rot
Grün
Blau
Gelb
-8-
RGB-Wert:
FFFFFF
FF0000
00FF00
0000FF
FFFF00
Webseiten aufbauen
<B> </B>
umschließt Passagen, die fett dargestellt werden
sollen.
<I> </I>
umschließt Passagen, die kursiv dargestellt werden.
<U> </U>
umschließt Passagen, die unterstrichen werden.
<S> </S>
umschließt Passagen, die durchgestrichen werden.
<SUB> </SUB>
Tieferstellen und kleinerer Schriftgrad
<SUP> </SUP>
Höherstellen und kleinerer Schriftgrad
<BIG> </BIG>
relativ größerer Schriftgrad
<SMALL> </SMALL>
relativ kleinerer Schriftgrad
<CENTER> </CENTER>
zentriert
<P></P>
Absatz
<BR>
Zeilenumbruch
<HR>
Trennstrich (horizontale Linie)
<MARQUEE> </MARQUEE>
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.: ü
ü
-9-
Webseiten aufbauen
2.5
Bilder
2.5.1
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 :
"HTTP://"
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.
2.5.2 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>
- 10 -
Webseiten aufbauen
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
2.6.1 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“>
2.6.2
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.
- 11 -
Webseiten aufbauen
2.7
Links (Verweise)
2.7.1
Allgemein
<A HREF="http://Server/Verzeichnis/Datei">Verweistext</A>
2.7.2
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.
2.7.3
E-Mail-Link
<A HREF="mailto:[email protected]">Verweistext</A>
Alle diese E-Mail-Links beginnen mit „mailto“ (ohne // dahinter!). Diese Links funktionieren nur, wenn der WWW-Browser das Erstellen und Absenden von E-Mails erlaubt oder wenn bei solchen Links automatisch das E-Mail-Programm gestartet wird.
2.7.4
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.
- 12 -
Webseiten aufbauen
2.8
Tabelle
2.8.1
Grundlagen
<TABLE> </TABLE>
2.8.2
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>
Gesamtbreite in Pixel oder prozentual zum Anzeigefenster
<TABLE HEIGHT=Y>
Gesamthöhe in Pixel oder prozentual zum Anzeigefenster
<TABLE CELLSPACING=N>
Gitternetzdicke in Pixel
<TABLE CELLPADDING=N>
Abstand in Pixel der Zellinhalte vom Rand
<CAPTION></CAPTION>
nimmt den Tabellentitel auf
<TR>
führt jede Tabellenzeile - auch Kopfzeilen - an, in
der dann die einzelnen Kopf- und Datenzellen stehen
<TH> </TH>
bildet Kopfzellen, d.h. Zellen, die entweder eine
Spalte oder eine Zeile benennen
<TD> </TD>
bildet Datenzellen
GEMEINSAME ATTRIBUTE:
ALIGN=left / center /right
horizontale Ausrichtung in der Zelle
VALIGN=top / middle / bottom
vertikale Ausrichtung in der Zelle
ROWSPAN=X
verbindet X benachbarte Zeilen
COLSPAN=Y
verbindet Y benachbarte Spalten
- 13 -
Webseiten aufbauen
2.9
Frames (mehrere Fenster)
2.9.1
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,*">
<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>
- 14 -
Webseiten aufbauen
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
HEIGHT=0>
MARGIN-
Rahmendicke der Fensterrahmen
<FRAME SRC="top.html" NAME="oberesFenster" FRAMEBORDER=0>
<FRAMESET COLS="200,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
<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="http://www.fhso.ch" TARGET="_blank"> Zur FHSO-Homepage </A>
<A HREF="http://www.fhso.ch" TARGET="_parent"> Zur FHSO-Homepage </A>
<A HREF="http://www.fhso.ch" 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.
- 15 -
Webseiten aufbauen
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.
- 16 -
Webseiten aufbauen
2.10
Formulare
2.10.1 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 E-Mail 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=“mailto:[email protected]“ 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 E-Mail-Adresse mit vorangestelltem
„mailto:“ wie im Beispiel1. Dann werden die Daten an diese E-Mail-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 E-Mail zuschicken lassen, benutzen Sie immer
„method=post“. Weiter sollten Sie bei E-Mail-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 E-Mails.
„Get“
Das zurückgeschickte Formular wird in der CGI-Umgebungsvariablen (QUERY_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.
- 17 -
Webseiten aufbauen
2.10.2 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 E-Mail 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!
- 18 -
Webseiten aufbauen
2.10.3 Formularbeispiel
Vom nebenstehenden Formular finden
Sie den Quelltext unten aufgelistet:
<HTML>
<HEAD>
<TITLE> einfaches Formular </TITLE>
</HEAD>
<BODY>
<H1> Ihre Bestellung </H1>
<FORM ACTION="mailto:[email protected]"
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>
- 19 -
Webseiten aufbauen
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.
- 20 -
Webseiten aufbauen
3.2
Einbinden von Style-Sheets
3.2.1 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>
3.2.2 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>
3.2.3 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>
3.2.4 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>
- 21 -
Webseiten aufbauen
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 TextmarkerEffekt.
<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
- 22 -
Webseiten aufbauen
3.4 Liste der wichtigsten CSS-Befehle
Tabelle der wichtigsten Befehle:
Befehl:
Was wird formatiert?
Was kann formatiert werden?
A:link
Link
A:visited
Besuchter Link
A:hover
Beim Darüberfahren (mit Maus)
A:active
Angeklickter Link
Margin-left
Margin-right
Margin-bottom
Margin-top
Font-family
Font-size
Color
absoluter Abstand zum Seitenrand
Schriftart
Schriftgrösse
Schriftfarbe
Font-variant
Font-weight
Font-style
Letter-spacing
Word-spacing
text-ident
line.height
text.align
Background
Schriftvariante
Schriftgewicht
Schriftstil
Zeichenabstand
Wortabstand
Texteinrückung
Zeilenabstand (Durchschuss)
Textausrichtung
Hintergrundfarbe
Background-image
Background-repeat
Hintergrundbild
Kachel
border-top-width
Dicke der Rahmenlinie
nahezu alle CSS Befehle, wi
Größe, Farbe
Größe, Farbe
Größe, Farbe
Größe, Farbe
numerischer Wert in pt
Arial, Times New Roman, et
yellow, white, etc oder HTML
Farbangabe
normal, small-caps
normal, bold, bolder, lighter
normal, oblique, italic
left, right, center, justify
Yellow. White oder HTMLFarbangabe
none, URL
repeat, repeat-x, repeat-y, no
repeat
thin, medium, thick od. nummerischer Wert
thin, medium, thick od. nummerischer Wert
thin, medium, thick od. nume
rischer Wert
Farbname oder HEX-Wert
s-resize, e-resize, n-resize,
crosshair
border-bottom-width Dicke der Rahmenlinie
border-left-width
Dicke der Rahmenlinie
border-color
Cursor
Rahmenfarbe
Cursorform
Es gibt eine sehr umfangreiche Beschreibung zu CSS unter "http://de.selfhtml.org".
- 23 -
Webseiten aufbauen
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 OfficePaketen 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:
Composer
Microsoft-Frontpage,
AOL-Press,
Netscape-
ASCII-Editoren sind gewöhnliche Text-Editoren. Mit Menubefehlen und einer ButtonLeiste 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.
- 24 -
Webseiten aufbauen
4.1 Microsoft FrontPage
Frontpage ist ein WYSIWYG-Editor. Für Personen, die sich gewöhnt sind mit MicrosoftProdukten 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.
300.- für eine Lizenz (Homepage: www.microsoft.com).
- 25 -
Webseiten aufbauen
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,
www.fhnw.ch/technik/it-manager).
- 26 -
Webseiten aufbauen
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: www.netscape.com)
- 27 -
Webseiten aufbauen
4.4 Hot-Dog-Webeditor
Hot Dog war der am meisten verbreitete Web-Editor. Er unterstützt viele InternetErweiterungen. Bei Hot Dog sieht man noch direkt die HTML-Tags, es ist also ein ASCII-Editor.
"Hot Dog Pro" ist für Windows Windows-Systeme erhältlich. Die Kosten für den WebEditor betragen ungefähr Fr. 120.- pro Lizenz. (Homepage: www.sausage.com)
Weitere ASCII-Editoren:
http://www.meybohm.de
http://www.evrsoft.com
(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.
- 28 -
Webseiten aufbauen
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 http://www.netzwelt.com/selfhtml
oder auf der eigenen Festplatte in einem Verzeichnis speichern.
- 29 -
Webseiten aufbauen
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:
http://de.selfhtml.org
http://www.drweb.de
http://btpdx1.phy.uni-bayreuth.de/people/htmlintro.html
http://www.uni-regensburg.de/WWW_Server/HTML
Spezial:
http://www.cooltext.com
http://www.buttontool.com
http://www.free-graphics.com
http://www.top20free.com
http://www.thecounter.com/stats
- 30 -
Webseiten aufbauen

Skript "Einführung in HTML"

Transcrição

Documentos relacionados

Praktikant/in Multimedia/Video - Ernst-Litfaß

Word Pro - html.lwp - Otto-Brenner

Modernes Webdesign

Bitte beachten Sie auch unsere Datenschutzprinzipien.

HTML Cheat Sheet

schutz vor it-kriminalität

dekra - BOS Auspuff

kostenlose Homepage erstellen

Webentwickler/in - s-lab

Bekleidung 4x Body zum Wickeln Langarm Gr. 54 2x Body zum

Referenzblatt-Sheraton Lagos Hotel DE