Einführung
in HTMLErstellen einer eigenen WWW-Seite im CIP-Pool:
Das eigene Home-Verzeichnis muß für alle ausführbar sein:
> cd
> chmod 711 .
(Zum Überprüfen: > ls -al )
Erstelle das Verzeichnis public_html:
> mkdir public_html
> chmod 711 public_html
In das Verzeichnis public_html werden alle Dateien abgelegt, die für die Internetseite benötigt werden.
Als Startseite für z.B. cip.physik.uni-bonn.de/~Login-Name ruft der www-Server automatisch die Seite index.html (oder index.htm für alle, die ihre Seite auf dem heimischen Windows-Rechner schreiben) auf. Andere Html-Seiten können durch einen Link auf der Index-Seite oder durch direkte Eingabe der Adresse aufgerufen werden. Die Dateien können dabei auch in einem Unterverzeichnis von public_html stehen:
z.B.: cip.physik.uni-bonn.de/~Login-Name/Welt/hallo.html
Das Unterverzeichnis Welt muß natürlich ebenfalls für alle ausführbar sein, während alle Dateien (sowohl Html-, als auch Bild-Dateien), die man betrachten kann für alle lesbar eingestellt sein müssen.
Zum Beispiel:
> chmod 644 *.html
Das Grundgerüst einer HTML-Seite:
<html> <!-- Dokumenttyp -->
<head>
<title>Test-Dokument</title>
</head>
<body>
<!-- In diesem Bereich steht die komplette Seite -->
</body>
</html>
Kommentar:
<!-- Kommentar -->
Optionen für Body:
text="black" generelle Textfarbe
link="#FF0000" Verknüpfungsfarbe
vlink="#CCFFFF" Farbe benutzter Verknüpfung
alink="#33FF33" Farbe aktiver Verknüpfung
bgcolor="#CCCCCC" Hintergrundfarbe
background="Bild.jpg" Hintergrundbild
Einige Grundbefehle:
Überschriften (header):
<h1>Überschrift</h1>
Die Prioritäten der Überschriften sind gestaffelt von 1-6.
Neue Zeile erzwingen:
<br>
Trennlinien (horizontal rule):
<hr>
zusätzliche Parameter:
width="50%" Breite in Prozent der Größe des Browserfensters
width="50" 50 Pixel breit
size=3 Höhe der Trennlinie (default:2)
noshade schaltet 3D-Effekt aus
Verknüpfung:
Auf externe Seiten oder Dokumente:
<a href="http://www.altavista.com">AltaVista</a>
Auf eigene (lokale) Dateien, bzw. Seiten:
<a href="andereSeite.html">AltaVista</a>
Lädt die WWW-Seite andereSeite.html, vorausgesetzt, daß diese im selben Verzeichnis liegt, wie die Vorherige .
Sprungmarke innerhalb eines Dokuments:
<a name="anfang"> Definiert Sprungmarke im Text
<a href="#anfang">zum Anfang</a> Link der zu der Sprungmarke führt
Mail-Adresse:
<a href="mailto:wittsche@cip.physik.uni-bonn.de">Schreibt doch mal :) </a>
Einbinden von Bildern:
<img src="nas146.jpg" height=200 width=320>
Bindet das Bild nas146.jpg ein. Die Optionen HEIGHT und WIDTH geben die Darstellungsgröße des Bildes in Pixeln an. Soll das Bild in Originalgröße dargestellt werden, kann man die Parameter weglassen.
Hyperlinks hinter Bilder legen:
<a href="http://www.nasa.gov"><img src="nas146.jpg" alt="NASA Link"></a>
Listen: Es gibt zwei verschiedene Sorten von Listen, numerierte ol und unnumerierte ul:
<ul>
<li> bla 1
...
<li> bla n
</ul>
Erzeugt eine Liste mit ungefähr folgendem Aussehen:
...
<ol type=I>
<li> bla 1
...
<li> bla n
</ol>
Erstellt folgende Liste:
...
Tabellen:
<table border width="614" cellspacing="1" cellpadding="4">
<tr>
<td>Erste Zeile - Erstes Feld</td>
<td>Erste Zeile - Zweites Feld</td>
</tr>
<tr><td>Zweite Zeile - Erstes Feld</td><td>Zweite Zeile - Zweites Feld</td></tr>
<tr><td>Dritte Zeile - Erstes Feld</td><td>Dritte Zeile - Zweites Feld</td></tr>
</table>
Erzeugt folgende Tabelle:
|
Erste Zeile - Erstes Feld |
Erste Zeile - Zweites Feld |
|
Zweite Zeile - Erstes Feld |
Zweite Zeile - Zweites Feld |
|
Dritte Zeile - Erstes Feld |
Dritte Zeile - Zweites Feld |
Tabellenoptionen:
border="2" ist Standard, wenn nur border angegeben wird Möchte man eine Tabelle ohne sichtbare Rahmen und Gitternetzlinien erzeugen, muss border="0" eingegeben werden
width="Pixel/Prozent" Breite der Tabelle in Pixel oder Prozent
cellspacing="1" Zellenabstand - Abstand der Zellen untereinander in Pixeln
cellpadding="4" Zelleninnenabstand - Abstand zwischen Zellenrand und Zelleninhalt in Pixeln
bgcolor="red" Hintergrundfarbe
background="Bild.jpg" Hintergrundbild
<caption> bla </caption> Tabellenüberschrift (oder mit eingefügtem align=bottom auch Tabellenunterschrift)
Allgemeine Formatierungen:
Als Option:
align=left ... center ... right Ausrichtung. Fast überall einsetzbar.
Als eigener Befehl:
<center> zentiert </center>
<div align=right>kann auch ausrichten</div>
<font size=+4 color=red>Groß und Rot</FONT>
Sonderzeichen
| Zeichen | Name in HTML | Bedeutung |
| ä | ä | a Umlaut |
| ö | ö | o Umlaut |
| ü | ü | u Umlaut |
| Ä | Ä | A Umlaut |
| Ö | Ö | O Umlaut |
| Ü | Ü | U Umlaut |
| ß | ß | scharfes S |
| < | < | Kleiner als-Zeichen |
| > | > | Größer als-Zeichen |
| & | & | Kaufmannsund, Ampersand-Zeichen |
| " | " | Anführungszeichen, Double quote sign |
| | festes Leerzeichen, non-breaking space | |
| © | © | Copyright-Zeichen |
Weitere Sonderzeichen finden Sie unter SELFHTML (HTML-Zeichenreferenz)
Ein Beispiel für eine HTML Seite finden Sie hier