| HTML-Dokumente erstellen
|
|
Um Seiten für das Internet zu
erstellen wird HTML (HyperText Markup Language) verwendet. Ein HTML-Dokument
besteht aus normalem Text versehen mit Steuerzeichen. Diese Steuerzeichen
sind von "<" und ">" eingeschlossen. Die meisten Steuerzeichen (Befehle)
müssen wieder aufgehoben werden wenn sie nicht mehr gültig sein
sollen. Z.B.: <I>Hier steht der Text!</I>
<I> = Befehl für kursive Formatierung.
Hier steht der Text! = Darzustellender Text.
</I> = Befehl für kursive Formatierung wieder aufheben.
Um HTML-Seiten darstellen zu können
werden Browser benötigt. Browser sind Programme die es ermöglichen
Dateien aus dem Internet darzustellen. Gängige Browser sind der Microsoft
Internet Explorer und der Netscape Communicator. Wobei der
Netscape-Browser der technischen Entwicklung leider hinterherläuft. Auch in
diesem Bereich gibt es leider wieder mal ein Microsoft-Monopol. So kann zur Zeit
nur der Microsoft
Internet Explorer empfohlen werden, da nur er DHTML und andere neue Techniken
sauber unterstützt. Obwohl hier auch wieder Microsoft eigene Standards gesetzt
werden. Vorgangsweise:
1. Erstellen des Dokumentes mit einem
Text- oder HTML-Editor. Speichern des Dokumentes als Dateityp DOS-Text oder
Nur-Text
mit der Extension ".htm" oder ".html". Dabei schreibt man den
Dateinamen am besten ganz in Anführungszeichen ("seite1.htm") damit
der Texteditor nicht automatisch eine Endung
anhängt.
2. Testen des Dokumentes mit einem
WWW-Browser. Dazu einen Browser öffnen und im Menü Datei, Öffnen und
Durchsuchen die gerade gespeicherte Datei auswählen. Nun solange zwischen
Schritt 1 und 2 wechseln bis das Dokument fertig ist. TIP: Ein Dokument
sieht in verschiedenen Browsern verschieden aus!
3. Publizieren Dokument per FTP oder von
einem Internet-Provider ins Netz stellen lassen. Unterschiedliche Gebühren
beachten!
4. Dokument in Suchdienste (Yahoo,
AltaVista, Webcrawler,...) eintragen .
5. Dokument regelmäßig updaten. Eine nicht aktuelle Seite wird schnell
uninteressant. Achten Sie beim
Erstellen von HTML-Dokumenten auf die Dateigröße. Viele große Bilder,
möglicherweise auch noch unkomprimiert, verlängern die Wartezeit. Mehr als
einige Sekunden wartet aber niemand um Ihre Seite zu sehen. Daher sollte die
Gesamtgröße ihres Dokumentes incl Bildern nicht weit über 40KB liegen.
Außerdem gilt auch im Internet: "form follows function" frei
übersetzt: "Der Inhalt geht vor!".
Hinweis: Befehle müssen
nicht großgeschrieben werden, es erhöht aber die Lesbarkeit
des Quelltextes.
Das Grundgerüst für ein Dokument
 |
Erklärung
|
<HTML>
<HEAD>
<TITLE>Hier steht der Titel!</TITLE>
</HEAD>
<BODY>
Ab hier steht dann der Inhalt des
Dokumentes.
</BODY>
</HTML> |
Beginn
einer HTML-Datei.
Beginn des Dateikopfes.
Titel des Dokumentes.
Ende des Dateikopfes.
Beginn des Dateikörpers.
Ende des Dateikörpers.
Ende der HTML-Datei. |
Nur die Inhalte des Dateikörpers
(<body>) werden im Browserfenster sichtbar.
| Übung 1.1 |
Öffne das
Programm "Editor" (Start, Programme, Zubehör, Editor), kopiere dieses
Beispiel und speichere es unter "test1.htm". Als Dateityp muss Textdatei
ausgewählt werden. Anführungszeichen nicht vergessen!
Öffne einen Browser und lade mit Menü
Datei, Öffnen und Durchsuchen die Datei "test1.htm". |
Hier folgen einige der wichtigsten Befehle, auch Tags genannt. HTML-Referenz
zu BODY
| <BODY BGCOLOR=#RGB> |
Legt die Hintergrundfarbe
fest. (TEXT =Textfarbe, LINK=Linkfarbe, #RGB siehe <FONT COLOR> nächste
Seite) |
| <BODY BACKGROUND="bild.gif"> |
Hintergrundgrafik
anzeigen. |
| <!-- nur für den Autor lesbar
--> |
Kommentar (nicht
sichtbar) |
|
|
|
| Textformatierungen
|
|
Die Befehle und der Text könnten
auch untereinander geschrieben werden, da HTML die Formatierung des Quelltextes
per Voreinstellung nicht beachtet. Soll ein Absatz eingefügt werden,
muss der Befehl <P> verwendet werden.
HTML-Referenz
| <p> |
Absatz. <p align=right> erzeugt einen rechtsbündigen
Absatz (<p align=left>, <p align=center|left|right>). |
| <br> |
Zeilenumbruch (neue
Zeile). |
| <hr> |
Horizontale Linie,
z.B.: <HR NOSHADE SIZE=4 WIDTH=60%>. |
| <h1> ... <h6> |
Formatiert Überschriften
(Headings) größer. Z.B.: <H1 align=center|left|right>HTML-Dokumente
erstellen</H1> |
| <i> |
Italtic (kursiv) |
| <b> |
Bold (fett) |
| <tt> |
Schreibmaschine,
nichtproportionale Schrift |
| <u> |
unterstrichen |
| <sup> |
hochgestellt |
| <sub> |
tiefgestellt |
| <font size=4> |
Schriftgröße
festlegen bis </font> (Besser als <hx> da kein automatischer Zeilenumbruch
erfolgt.). |
| <font color=#rgb> ... </font> |
Stellt die Schriftfarbe
ein. Dabei ist r der Hexadezimalwert (00 bis FF) für Rot, g für
Grün und b für Blau. Die Farbe #ffffff ist weiß, die Farbe
#000000 entspricht schwarz. Farbtabelle |
| <font face=Tahoma> |
Schrift einstellen. |
| <pre> |
Text wird unverändert
mit Leerzeichen und Zeilenumbruch übertragen. HTML-Befehle werden
ausgeführt. |
| <em> |
Hervorhebung |
| <s><strike> |
Durchgestrichener
Text. |
|
|
|
| Die Umlaute
|
|
In internationalen Browsern wurden
die deutschen Sonderzeichen und Umlaute falsch dargestellt. Um dieses zu
vermeiden mussten folgende Ersatzzeichen verwendet werden:
| Ä |
für Ä |
| ä |
für ä |
| Ö |
Ö |
| ö |
ö |
| Ü |
Ü |
| ü |
ü |
| ß |
ß |
| & |
& |
| < |
< |
| > |
> |
|   |
Leerzeichen ohne
Umbruch (Hilfreich bei Einrückungen) |
Durch <meta http-equiv="Content-Type" content="text/html;"
charset="UTF-8" /> wird der Zeichensatz Unicode UTF-8 festgelegt, in dem u.a.
alle deutschen Sonderzeichen enthalten sind. Dadurch ist für neueren Browsern
diese Umwandlung nicht mehr nötig.
| Übung 1.2 |
| Schreibe einige
Sätze und probiere die Formatierungen aus. Datei mit dem Editor wieder
unter dem selben Namen speichern und im Browser das Aktualisieren(Reload)-Symbol
anklicken. |
|
|
|
| Verbindungen
(Links) zu anderen Dokumenten
|
|
Durch Links wird ein Text erst zu
einem Hypertext. Links werden durch das Steuerzeichen <A (Anchor)
eingeleitet. Mit HREF = wird die neue Seite zugewiesen. Nach >kommt
der dargestellte Text des Links. </A> beendet den Link wieder. Sie
bilden also die eigentliche Verknüpfung der Dokumente und ermöglichen
dadurch das World-Wide-Web. Also ein weltweites Netzwerk von verknüpften
Dokumenten in dem man durch Mausklick von einem zum anderen Dokument gelangt.
HTML-Referenz
zu Links
<A HREF="HTML2.htm">HTML für
Fortgeschrittene
</A> |
Verbindung zur
Seite HTML2.htm. |
<A HREF="Schule/HTML2.htm">HTML
für
Fortgeschrittene</A> |
Mit relativer Pfadangabe. HTML2.htm
befindet sich im Ordner Schule. |
| <A HREF="http://www.yahoo.com/">YAHOO</A> |
Link auf einen anderen
Server |
<A HREF="mailto:u.hirschmann@asn-linz.ac.at">
An den Autor</A> |
Beim Anklicken des Links öffnet sich der Email-Client
und trägt diese Anschrift ein. |
<A HREF="http://www.yahoo.com/"
target=_top
>YAHOO</A> |
target gibt
das Ziel eines Links an.
_blank öffnet das neue
Dokument in einem neuen unbenannten Fenster.
_parent Zieldokument wird
im Hauptfenster des aktuelles Fensters geöffnet.
_self
Zieldokument wird im aktuellen Fenster geöffnet.
_top Zieldokument wird im
gesamten aktuellen Fenster, ohne evtl. Frames, geöffnet. |
TIP: Mit ../seite5.htm gelangt man
vom aktuellen Ordner einen Ordner zurück und kann dort die seite5.htm
aufrufen. |
|
|
| URL
|
|
Im World-Wide-Web werden Dokumente
über URL's angesprochen. Diese Uniform Resource Locators sind die Adresse eines Dokumentes. Folgendes Format wird dabei benutzt:
Service://Rechner.Bereich/Pfad/Dateiname.
Unter
anderem können folgende Services verwendet werden: file-Dateiserver,
http-WWW, gopher-Textserver, news-Nachrichtenserver, mail-für
Emails. Jeder Internet-Server
erhält eine eigene Adresse (z.B.: www.ksl.asn-linz.ac.at).
Der Pfad zum HTML-Tutorial ist /ts/htmltut, der Dateiname lautet
index.htm. Da wir das WWW nutzen wollen lautet der komplette Pfad:
http://www.ksl.asn-linz.ac.at/ts/htmltut/index.htm. Der Dateiname kann
weggelassen werden wenn die Startseite einer Homepage geladen werden soll.
Der Server ergänzt dann den Namen automatisch auf index.htm
oder default.htm.
Genauer betrachtet erhält jeder
Server nur eine 4-teilige Nummer (z.B.: 123.123.100.100). Durch eigene
Domain-Name-Server (DNS) wird dann bei jeder Anfrage der Rechner-Name in
diese Nummer übersetzt.
| Übung 1.3 |
| Erstelle 2 HTML-Seiten
mit den Namen "seite1.htm" und "seite2.htm". Als Inhalt brauchen
sie nur ihren Namen. Verknüpfe diese nun durch Links miteinander. Füge
auch einen Link mit deiner Email-Adresse hinzu. |
|
|
|
| Sprünge
|
|
Textstellen können durch Sprungmarken
direkt angesprungen werden. Sie können dabei im selben Dokument oder
in einem anderen aufgerufen werden.
| <A NAME="Sprung">Zieltext</A> |
Erzeugt eine Sprungmarke
im Text mit dem Namen Sprung. |
| <A HREF="#Sprung">Zum Zieltext</A> |
Durch diesen Link
kann dann zu der Sprungmarke gesprungen werden. |
| <A HREF="seite2.htm#Sprung">Zum Zieltext</A> |
Durch diesen Link
kann zur Sprungmarke auf der Seite2 gesprungen werden. |
|
|
|
| Grafiken einbinden
|
|
Grafiken im GIF, und JPEG-Format
können eingebunden werden. Um Ladezeiten zu verkürzen sollten
Bilder mit so wenig Farben wie möglich auskommen. Auch die Größe
und Anzahl der Bilder sollten klein gehalten werden. Zeichnungen, transparente
Bilder und Animationen müssen im GIF-Format sein. Alles andere wie Fotos, inbesondere
bei Verwendung vieler Farben, spart im JPEG-Format viel Speicherplatz.
HTML-Referenz
zu Grafik
| <IMG SRC="boot.gif"> |
Einbinden einer
Grafik. |
| <IMG ALIGN=TOP SRC="boot.gif"> |
Nachfolgender Text
wird an der Oberkante des Bildes ausgerichtet. (ALIGN=TOP, MIDDLE, BOTTOM,
LEFT, RIGHT). |
| <A HREF="HTML2.htm"> <IMG SRC="boot.gif"></A> |
Macht ein Bild
zu einem Link. |
| <IMG SRC="boot.gif" ALT="Bild
Boot1"> |
Für reine
Textbrowser ist es durch ALT= möglich eine Bildbeschreibung
bereitzustellen. |
| <A HREF="schiff.gif"> |
Ein externes Bild
(nicht in das Dokument eingebunden) erhält einen Link. |
| <IMG SRC="test.gif" vspace=50
hspace=80> |
Abstand zwischen
Bild und Text. |
| <IMG SRC="test.gif" width=50 height=50> |
Bildgröße. |
| <IMG SRC="boot.gif" border=0> |
Bildumrandung ausschalten. |
| Übung 1.4 |
| Ergänze Übung3
so, dass auf jeder Seite ein anderes Bild zu sehen ist. Durch Anklicken
der Bilder soll wieder zur jeweils anderen Seite gelangt werden können. |
|
|
|
| Mehrbereichsgrafiken
|
|
Mehrbereichsgrafiken erlauben mehrere
Links auf ein Bild zu legen. Durch MS-Frontpage lassen sich diese Bereiche
komfortabel erstellen.
<map name="Bildmapping">
<area shape="rect" coords="obenlinks,
obenrechts, untenlinks, untenrechts" href="Seite3.htm">
<area shape="rect" coords="obenlinks,
obenrechts, untenlinks, untenrechts" href="Seite4.htm">
...
</map>
<img src="bild.gif" usemap="#Bildmapping" border=0> |
|
|
| Tabellen
|
|
Nicht nur für die Darstellung
von Zahlen werden Tabellen benutzt. Auch Schalter, Bilder und vieles andere
lässt sich durch sie plazieren.
HTML-Referenz
zu Tabellen
<table>
<tr><td>1.Zeile, 1.Zelle</td>
<td>1.Zeile, 2.Zelle</td></tr>
<tr><td>2.Zeile, 1.Zelle</td></tr>
</table> |
Beispiel einer
Tabelle. |
| <table> ... </table> |
Anfang und Ende
einer Tabelle. |
| <tr>... </tr> |
Anfang und Ende
einer Zeile. |
| <th>... </th> |
Kopfzelle für
Überschriften |
| <td>... </td> |
Zelle für
Inhalte. |
| <table border=1> |
Rahmenbreite |
| <table width=100%> |
Tabellbreite |
| <table bgcolor=#rgb> |
Tabellenfarbe (genau
wie bei <td>) |
| <td align=right> |
Zelleninhalt nach
rechts ausrichten. |
Neben diesen exisitieren noch weitere
Tabelleneigenschaften. Tabellen können auch verschachtelt werden.
| Übung 1.5 |
| Erstelle die Tabelle in
der nebenstehenden Grafik. |
|
|
|
| Listen
|
|
Nichtnumerierte Liste
HTML-Referenz
<UL>
<LI>Karotten
<LI>Tomaten
</UL>
Folgende Numerierungspunkte können gewählt werden: <UL TYPE=SQUARE> eckige Bullets
(CIRCLE, DISC).
Numerierte Liste
<OL>
<LI>Karotten
<LI>Tomaten
</OL>
Folgende Numerierungspunkte können gewählt werden: <OL TYPE=A> numeriert ABC,
<OL
TYPE=a> numeriert abc, (auch I, i).
Definitionsliste
<DL>
<DT>Begriff
<DD>Begriff, der hier in diesem
Text erklärt wird.
</DL>
Listen können auch kombiniert
werden. Beispiele
| Übung 1.6 |
| Kopiere
diese Listen ab und verändere sie anschließend. |
|
|
|
| Weitere Befehle
|
| <PRE>, </PRE> |
Übernimmt
Tabs, Leertasten, Returns und Absätze aus dem Quelltext. |
| <CENTER>, </CENTER> |
Zentriert mehrere
Objekte. |
| <ADDRESS>Hirschmann, HTML-Tutorial</ADDRESS> |
Adressformatierung |
| <NOBR>, </NOBR> |
Automatischen Zeilenumbruch
ausschalten. |
TIP: Audio-Files (.au, .aiff,
.mid (Midi)) und Movies (.mov, .mpg) können auch als HREF eingebunden
werden, jedoch muss auf dem Zielrechner die entsprechende Zusatzsoftware (PlugIn)
vorhanden sein.
|
|
|
| Animierte GIFF's |
|
 Bewegte Bilder können z.B.:
mit dem Programm "Gif Construction Set 95" oder geeigneten Grafikprogrammen erstellt werden. Dieses Programme
verknüpfen mehrere Einzelbilder zu einer einzigen Gif-Datei. Im Browser
wird dann diese Folge von Bilder nacheinander abgespielt. Animierte Gifs werden als
ganz normale Bilder eingebunden: <IMG SRC="animboot.gif">.
| Übung 1.7 |
| Erstelle deine
eigene Homepage über dich oder dein Lieblingsthema (z.B. Fanpage,
Sportseite, Musik- oder Kinotips,... ). Verwende dabei mindestens 3 Seiten die
untereinander verknüpft sind. Setze auf jeder Seite ein Bild ein. |
|
| |
| FTP |
| FTP - File Transfer Protocol. Mittels FTP
können Dateien auf den Server gestellt oder von dort wieder abgeholt werden.
Dazu kann man spezielle FTP-Programme wie z.B. WS_FTP verwenden. Diese
findet man z.B. bei www.tucows.de.
Unter Windows geht es aber auch mit dem Explorer oder dem Internet-Explorer.
Dazu benötigt man aber zuerst die Zugangsdaten des Providers, Hostname:
www.dieseite.at, Username: karltester
und das Passwort. Geben Sie in der Adressezeile dann folgendes ein:
ftp:www.dieseite.at. Anschließend werden Sie nach dem Usernamen und dem
Passwort gefragt und können ganz normal auf die Dateien auf dem Server
zugreifen. |
|
|