|
Thema : HTML-Programmierung
Datum : 18.06.2001
|
Die Anzeige dieses Quelltextes erfolgt mit: ANSICHT -> QUELLTEXT ANZEIGEN
Inhaltsverzeichnis
Einführung
Textformatierung
Schriftschnitt
Schriftarten und Farben
Strichaufzählungen (Unordered List)
Nummerierungen (Ordered List)
Bild einfügen
Bild mit Text
Tabelle einfügen
Tabelle Gitternetz/Spalten&Zeilen verbinden
Der Lebenslauf tabellarisch
Hyperlinks
Text-Hyperlinks
Bild-Hyperlinks
Internet-Hyperlinks einfügen
E-Mail-Hyperlinks einfügen
Link-Farbe festlegen
Frames erstellen in Zeilen
Frames erstellen in Spalten
Frames erstellen in 3 Spalten
Frames erstellen in Spalten und Zeilen
Frames erstellen mit Link-Spalte
Zum Ende
HTML - Hypertext Markup Language
Eine HTML-Seite besteht aus vielen TAGs. Ein TAG sind ein oder mehr
Anweisungen, die in spitze Klammern eingeschlossen sind.
<Anweisung(en)>
HTML-Seiten (HTML-Dateien) beginnen grundsätzlich mit <HTML>
und enden mit </HTML>. Dazwischen liegen die Texte, Grafiken, Links,
Scripts etc.
<HTML>
...
...
</HTML>
Innerhalb des HTML-Tags wird untergliedert in HEAD-Tag (Kopfbereich) und
BODY-Tag, der eigentliche Seitenbereich. Im Kopfbereich befindet sich noch
ein TITEL-Tag, deren Inhalt den Seitennamen darstellt, der in der
Titelzeile des Fensters angezeigt wird (siehe oben).
<HTML>
<HEAD>
<TITLE>
HTML-Programmierung
</TITLE>
</HEAD>
<BODY>
Seiteninhalt
...
</BODY>
</HTML>
Im HEAD-Tag können außerdem noch Java-Scrips, Style-Sheets etc. stehen:
<HTML>
<HEAD>
<TITLE>
HTML-Programmierung
</TITLE>
<script language="JavaScript">
<!--
hier könnte ein JAVA-Script stehen ...
//-->
</script>
<style type="text/css">
hier könnten Style-Cheets stehen ...
</style>
</HEAD>
<BODY>
Seiteninhalt
...
</BODY>
</HTML>
eine blau Linie durch: <hr size=5 color=blue>
Textformatierung
Das ist eine Überschrift Größe 1 durch: <h1>Text</h1>
Das ist eine Überschrift Größe 6 durch: <h6>Text</h6>
Beispiele für Sonderzeichen:
Der Euro: durch: €
Umlaute: Die Tüte durch: Tüte
linksbündiger Absatz durch: <p align="left">
HTML bedeutet HyperText Markup Language.
</p>
zentrierter Absatz durch: <p align="center">
Es handelt sich dabei um eine Sprache,
</p>
rechtsbündiger Absatz durch: <p align="right">
die mit Hilfe von SGML (Standard Generalized Markup Language)definiert wird.
</p>
Blocksatz durch: <p align="justify">
SGML ist als ISO-Norm 8879 festgeschrieben.
HTML ist eine sogenannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe,
die logischen Bestandteile eines Dokuments zu beschreiben. Als Auszeichnungssprache
enthält HTML daher Befehle zum Markieren typischer Elemente eines Dokuments, wie
Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.
</p>
Schriftschnitt
Text kursiv durch: <i>Text kursiv</i>
Text fett durch: <b>Text fett</b>
Text unterstrichen durch: <u>Text unterstrichen</u>
Text kursiv, fett & unterstrichen durch <i><b><u>Text kursiv, fett & unterstrichen</i></b></u>
Text wieder normal
Schriftarten und -farben
Ein rotes Wort
durch: <font color="red">rotes</font>
Ein Wort wird um 1 Schriftgröße größer dargestellt
durch: <font size="+1">Text</font>
Ein Wort in Arial
durch: <font face="arial">Arial</font>
Ein Wort in Arial & 1x größer
durch: <font size="+1" face="arial">Arial</font>
Strichaufzählungen (Unordered List) Standard
<ul> oder <ul type="disk">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ul>
Strichaufzählungen (Unordered List) Quadrat
<ul type="square">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ul>
Strichaufzählungen (Unordered List) Kreis
<ul type="circle">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ul>
Nummerierungen (Ordered List) Standard
<ol>
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ol>
Nummerierungen (Ordered List) mir römischen Zahlen
<ol type="I">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 3. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 4. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ol>
Nummerierungen (Ordered List) mit Großbuchstaben
<ol type="A">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>,
</ol>
Nummerierungen (Ordered List) mit Kleinbuchstaben
<ol type="a">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ol>
Nummerierungen (Ordered List) mit Kleinbuchstaben beginnend mit c
<ol type="a" start="3">
Kopfzeile der Strichaufzählung
- ein Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
- ein 2. Listenpunkt beginnt mit <li> und endet in der Zeile mit </li>
</ol>
Bild einfügen (orginal Größe)
mit: <img src="Dateiname.Suffix">
Bild einfügen mit 25% Größe des Bildschirms (ändert sich je nach Browser-Größe)
mit: <img src="Dateiname.Suffix" width="25%" hight="25%">
Bild einfügen mit 100x100 Pixel
mit: <img src="Dateiname.Suffix" width="100" hight="100">
Bild mit umfließenden Text
mit: <img src="Dateiname.Suffix" align="right">
Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im WWW anbieten wollen, sollten Sie immer die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der WWW-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muß nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. Dadurch kann er die gesamte WWW-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der WWW-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat.
mit: <img src="Dateiname.Suffix" align="left">
Erläuterung:
Mit den Angaben align=left bzw. align=right veranlassen Sie den Browser, die Grafik linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben der Grafik anzuzeigen und um die Grafik herumfließen zu lassen (align = Ausrichtung, left = links, right = rechts).
mit: <img src="Dateiname.Suffix" align="left" vpace="20" hspace="20">
Mit hspace= [Pixel] bestimmen Sie den Abstand zwischen einer Grafik und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace= [Pixel] bestimmen Sie den Abstand zwischen einer Grafik und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Beide Angaben sind auch gleichzeitg möglich, so wie im dritten der obigen Beispiele.
Beachten Sie:
Die Angabe hspace= betrifft immer den linken und den rechten Randabstand von der Grafik, die Angabe vspace= immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einer links ausgerichteten Grafik hspace= definieren, wird nicht nur rechts der Grafik zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie CSS Style-Sheets verwenden. Mit Hilfe der Style-Sheet-Angaben zu Abständen, Rändern, Ausrichtung im <img>-Tag können Sie gezielt Abstände an einer Seite definieren.
Tabelle, einfügen
<table border="1" bordercolor=red width=75% cellpadding="10" >
(Tabelle 75% der Fenstergröße, Platz Text/Tabelle (innen) =10)
<colgroup>
<col width="30%">
<col width="20%">
<col width="40%">
<col width="10%">
</colgroup>
oder:
<colgroup width=25% span="4"> (4 Spalten, alle gleich groß)
</colgroup>
<tr> (eine Zeile)
<th> (Der Tabellenkopf)</th>
<th> (2. Spalte)</th>
<th> (3. Spalte)</th>
<th> (4. Spalte)</th>
</tr>
<tr> (nächste Zeile)
<td>Zeile 2</td>
<td align="center">O</td>
<td>.</td>
<td>O</td>
</tr>
Spalte1 |
Spalte2 |
Spalte3 |
Spalte4 |
Zeile2 |
O |
. |
O |
Zeile3 |
.. |
X |
.. |
</tr>
</table>
Tabelle, Gitternetz verändern
<table align="center" border="1" bordercolor=red width=75% cellspacing="10" bgcolor="lightblue"> (cellspacing=Gitternetzgröße)
Spalte1 |
Spalte2 |
Zeile 1 |
Zeile 2 |
Tabelle, Spalten und Zeilen verbinden
<td rowspan="2"bgcolor="lightblue">Zeile1</td>
<td colspan="2">Zeile 4</td>
Spalte1 |
Spalte2 |
Zeile 1 |
Zeile 2 |
Zeile 3 |
Zeile 4 |
Hyperlinks
<a HREF="gruen.html">Grüne Seite</a>
<a HREF="blau.html">Blaue Seite</a>
Grüne Seite
Blaue Seite
Text-Hyperlinks
<a HREF="Hyperlink im Inhaltsverzeichnis">Zum Inhaltsverzeichnis</a>
<a name="(Sprung-)Überschrift:Inhaltsverzeichnis"><h3>Inhaltsverzeichnis</h3>
Zum Inhaltsverzeichnis
Bild-Hyperlinks
<a HREF="blau.html"><img src="xmoz.jpg" border="0"></a> (ohne Rahmen)
Sprung zur Datei "blau.html" bei Klick auf das Bild
Internet-Hyperlinks einfügen
<a HREF="http://www.fireball.de">Zur Suchmaschine "Fireball"</a>
Zur Suchmaschine "WWW.FIREBALL.DE"
E-Mail-Hyperlinks einfügen
<a HREF="MAILTO:DG1XPZ[at]qsl.net">
E-Mail senden an : DG1XPZ[at]qsl.net</a>
E-Mail senden an : DG1XPZ[at]qsl.net"
Link-Farbe festlegen
Das Ändern der LINK-Farben erfolgt im BODY der HTML-Seite (hier nicht durchgeführt)
<BODY link="Farbe" vlink="Farbe" alink="Farbe">
link=Normalfarbe
vlink=schon besuchter Link
alink=Farbe beim anklicken
Zum Inhaltsverzeichnis
©DG1XPZ 06/2001
|