HTML-Grundwissen
.
.
Eigentlich sind für eine einfache
Homepage überhaupt keine HTML- Kenntnisse erforderlich.Dafür
langt völlig der Netscape-Composer als HTML-Editor. Einen kompletten
Lehrgang
zur Erstellung einer HomePage mit dem Netscape-Composer ist bei TaRo
zu finden. Wer eine einfache Homepage machen will, kann direkt zur
COMPOSER
1 - Seite gehen. Ohne HTML-Kenntnisse kann jeder eine Homepage mit
dem Composer bauen.
Auf dieser Seite hier sind die Grundbefehle
des HTML erklärt - schaden kann es nicht - diese zu kennen.
HTML ist plattformunabhängig,
dh. es ist kein bestimmtes Betriebsystem notwendig um HTML-Dokumente anzuzeigen.
Es läuft unter Windows ,Unix, MAC und alle anderen. HTML besteht aus
ASCII-Code
(
Infos zu Ascii sind hier ), und dieser
ist auf jedem Rechner ausführbar.
Mit dem Netscapage Communicator
wird auch ein HTML-Editor (Composer) mitgeliefert.
Zum besseren Verständnis werden hier nur Grundbegriffe verklickert.
Mehr ist nicht nötig. Der Composer macht das alleine.
Der HTML - Anfänger hat mit
der HTML-Sprache genug zu tun. Nachdem die erste Homepage fertig installiert
ist kann er sich dann um CSS Cascading Style Sheets ( siehe
Style Sheets ) kümmern, die eine Erweiterung von HTML ist.
Grundlagen
Eine HTML-datei kann mit dem WIN
95 Text-Editor Notepad erstellt werden, wenn man die HTML-Sprache auswendig
beherrscht. Das ist aber nicht nötig, da es den Netscape Communicator
4.xx gibt. Mit dem darin ent- haltenen Netscape
Composer ( das ist der HTML-Editor ) kann die Seite erstellt werden.
Siehe hierzu die Seite " Arbeiten mit dem Netscape
Composer" . Aber um einige nachträgliche Änderungen einzufügen,
die der Composer nicht durchführen kann, muss mann mit dem WIN95 Text-
Editor Notepad nachbehandeln. Dazu ist nur ein Grundwissen der HTML- Sprache
notwendig. Zum Beispiel kann der Composer in einer Tabelle 2 benachbarte
Zellen nicht verbinden. Hier muss man dann in der ersten Zelle den Text
col span=2 in die Zeile hinzufügen , und schon geht es. Beispiel
hierzu ist der CyberTaRoIndex
. Man sieht hier , dass
fast alle Zellen einzeln sind, und einige laufen über 2 Spalten. Im
Netscape Communicator ( Navigator ) 4.xx kann über MENUE / ANSICHT
/ SEITENQUELLTEXT das Listing eingesehen werden. Im Netscape Composer 4.xx
kann über MENUE / BEARBEITEN / HTML-QUELLE das Listing aufgerufen
und gleichzeitig editiert (verändert) werden. Mit
dem Texteditor WIN 95 NOTEPAD kann natürlich auch der Quelltext einer
HTML-Datei geändert werden. Nach dem Öffnen vom Notepad wird
eingestellt: Dateityp : Alle Dateien (*.*). Dann die HTML-datei im
Notepad öffnen und verändern.
Das WIE folgt nun.
GRUNDGERÜST
Jede HTML-datei fängt unbedingt
mit <HTML> an und ended mit /HTML>.
Dazwischen spielt sich alles an.
Nach <HTML> kommt zuerst der
<HEAD>. Er ended natürlich auch mit </HEAD>. Zwischen <HEAD>
und </HEAD> kommen die META-Tags. Diese sind wegen ihrer Wichtigkeit
( siehe METATAGS ) für den Home- page-Bastler
hier bei Taro beschrieben, weil dies auch in ihrer Ausführ- lichkeit
sonst nirgendwo zu finden ist. Nach diesen wird der Head wieder mit </HEAD>
geschlossen und der BODY beginnt mit <BODY> .
Gleichzeitig kann aber mit
BGCOLOR eine Hintergrundfarbe angegeben werden z. B. <BODY BGCOLOR="#FFFFCC">.
#FFFFCC entspricht einer hellgelben Farbe.Hier ist eine Tabelle
mit allen FarbCodes. Oder es kann eine Hintergrund- grafik eingefügt
werden mit <BODY BACKGROUND="back.jpg">. Dieses Bild wird nun im Internet-Browser
(z.B. Netscape Communicator oder auch allen anderen ) das Bild sooft wiederholt,
bis der Monitor davon überzogen ist. Die Dateigrösse sollte 1
bis 10 KB betragen und die Bildgrösse sollte 80 mal 80 Pixel sein.
Um zu kontrollieren wie gross eine Datei ist, kann man die entsprechende
Grafikdatei im Paint Shop Pro öffnen und in PSP 4 MENUE / VIEW
/ IMAGE INFORMATION wird beides angezeigt. Wenn alle Eingaben und Formatierungen
enthalten sind, wird der BODY wieder geschlossen mit </BODY> .
Bis jetzt hätten wir dann folgenden Quelltext:
Grundsätzlicher Quelltext
- Gerüst: Head- und Body-eintraege
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
</BODY>
</HTML>
Aber ausser der Hintergrundfarbe
ist nun noch nichts festgelegt. Das tun wir nun:
Grundfunktionen des HTML
Die folgenden HTML-Befehle macht
der Netscape - Composer auch automatisch. Im Netscape Communicator wird
in der Menueleiste erst COMMUNICATOR / COMPOSER aufgerufen. Dann
ist eine leere HTML-Seite da. Jetzt kann sofort der Text eingetippt werden.
Daraufhin soll dann noch MENUE / DATEI / DATEI SPEICHERN UNTER.. der Speichervorgang
auf die Festplatte erfolgen. Aber um die Grundbegriffe zu erlernen wird
hier der Quelltext erklärt.
Einfügen
eines Textes ohne Farbe (Default = schwarz
)
1) Zwischen <BODY> und </BODY>
kann einfach Text geschrieben werden, der dann mit den Defaultwerten auf
der HTML-SEite angezeigt wird.
Eingabe : Text zum Test. Die dazugehörige
Seite sieht so und der Quellcode sieht dann so aus:
<HTML>
<HEAD>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author"
CONTENT="TaRo">
<META NAME="GENERATOR"
CONTENT="Mozilla/4.01 [de] (Win95; I) [Netscape]">
<TITLE>text1</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC">
Text zum Test
</BODY>
</HTML>
Die Zeile <META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> fügt
der Composer automatisch hinzu.
Die Zeile
<META NAME="Author" CONTENT="TaRo"> wird auch vom
Composer erstellt, aber die Angabe des Autorennamens `"TaRo" wird aus Netscape
Comunicator 4.x MENUE / BEARBEITEN / EINSTELLUNGEN / COMPOSER / Name des
Autors geholt.
2) Text mit 14 Punkt hoher Schrift
und mit brauner Farbe einfügen
Diese Zeile sieht im Quellcode
so aus:
<FONT COLOR="#993366"><FONT
SIZE=+1>text zum testen</FONT></FONT>
Und der komplette Quellcode sieht
dann so aus: Die Seite ist hier:
#CCFFFF für
blaue Farbe:
<HTML>
<HEAD>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author"
CONTENT="TaRo">
<META NAME="GENERATOR"
CONTENT="Mozilla/4.01 [de] (Win95; I) [Netscape]">
<TITLE>text zum
test</TITLE>
</HEAD>
<BODY BGCOLOR=#CCFFFF>
<FONT COLOR="#993366"><FONT
SIZE=+1>text zum test</FONT></FONT>
</BODY>
</HTML>
Es geht auch anders:
1) Markiere den vorgenannten lilafarbenenText
von <HTML> bis
einschliesslich
</HTML>.
2) Drücke nun gleichzeitig die Tasten
[Strg] und [C]
3) Öffne mit WIN 95 START/PROGRAMME/ZUBEHÖR
den Notepad .
Besser ist NOTESPAD
8
Öffne eine leere
Txt.Datei im Notepad und klicke in das leere Textfeld
4) Drücke nun gleichzeitig die Tasten
[SHIFT] und [Einf]
5) Der Quellcode muss nun erscheinen
6) Mit Datei - Datei speichern
unter.. soll nun die Datei unter dem Namen
" text2.htm " abgespeichert
werden. Sie könnte auch unter dem Namen
"text2.html" gepeichert
werden, das ist ohne Einfluss. Als Dateityp muss im
Drop-Down-Menue "Alle
Dateien (*)" angegeben sein und nicht
Textdokumente ".txt"
.
7) Nun öffne diese Datei mit dem Browser
- z.B. Netscape Communicator 4
Einfügen einer Textfarbe
<FONT COLOR="#993366"><FONT
SIZE=+1>text zum test</FONT></FONT>
Grafik
- Einfügen einer Grafik mit Alternativ-Text
Im selben Ordner wie die HTM-Datei muss natürlich
eine Datei vorhanden sein, die spider.gif heisst. Mit Alt=
kann ein alternativ-Text angegeben werden, der beim Download erscheint,
wenn die Grafik noch nicht geladen ist. Allerdings gibt es noch 14.4 Modems,
bei denen Grafikanzeigen - deaktiviert ist - und diese sind nur auf den
Alternativ-text angewiesen.
Height und Width sollten angegeben sein, um die Ladezeit zu beschleunigen.
Es ist die Pixelgrösse des Bildes. Die Grösse der Grafik
kann unter Bildeigenschaften im Paint Shop Pro erhalten werden.
Um zu kontrollieren wie gross eine Datei ist
, kann man die entsprechende Grafikdatei im Paint Shop Pro öffnen
und in PSP 4 MENUE / VIEW / IMAGE INFORMATION wird beides angezeigt.
Der Netscape Composer fügt Height und Width automatisch hinzu.
Border ist ein Rahmen um das Bild - der sollte normalerweise o Pixel gross
sein.
<IMG SRC="spider.gif" ALT="CyberTaRo-Grafik"
BORDER=0 HEIGHT=32 WIDTH=135>
Im selben Ordner wie die HTM-Datei muss natürlich
eine Datei vorhanden sein, die spider.gif heisst.
Links
- Einfügen eines Links
(Verknüpfung
zu einer anderen Internetseite)
<A HREF="text1.htm"
base target="_blank"><FONT SIZE=+1>Ein
Link</FONT>
Tabelle
- Einfügen einer Tabelle
Der Text in dieser Seite steht in
einer nicht sichtbaren Tabelle. Gemacht wird dies, indem die Randbreite
( im Netscape Composer
MENUE / EINFÜGEN / TABELLE / TABELLE
) zu NULL gesetzt wird.
Tabellen kann der Netscape - Composer
( Unterprogramm vom Comunicator ). Im
Composer wird einfach auf MENUE / EINFÜGEN / TABELLE / TABELLE
geklickt. Man gibt nur noch die Zeilen- und die Spaltenanzahl an und dann
wird eine einfache Tabelle vom Composer erstellt. Diese sind zum Formatieren
des Textes auf einer HTML-Seite nötig, weil das Layout besser behandelt
werden kann und das Design besser aussieht. Aber es geht auch
ohne. Zusätzlich kann dann noch beim Tabelleneinfügen folgendes
festgelegt werden:
1) Tabellenbreite in % oder Pixel.
Ich empfehle immer 600 Pixel, da dann
auch auf
einem 14 Zoll- Monitor ohne Scrollen alles erscheint.
2) Farbe für den Tabellenhintergrund.
Es kann für jede Zelle ein andere
Hintergrundfarbe
( siehe TaRo`s Tabelle : Farbe ) gelegt werden.
Diese ist natürlich
dann sichtbar und überdeckt die Festlegung von
<BODY BGCOLOR="#FFFFCC">.
Zum Thema Farben und Farbcode wird
hier ausführlich berichtet.
Tabellenformatierung
MERKE - zum Verständnis und der Bearbeitung
einer HTML-Datei im Text-Editor ist folgendes wichtig.
 Tabelle
10
BORDER ( rot )
= Umrandung der Tabelle
Cellspacing ( gelb
) = Abstand der Zellen untereinander
Cellpadding ( blau )
= Abstand des Zellinhaltes zum Zellenrand
| Zelle 1 |
Zelle 2 |
| Zelle 3 |
Zelle 4 |
Tabelle 11
.
Es folgt der komplette Quelltext
für die obenstehende Tabelle 11:
Wenn genau dieser und nur dieser QuellText in eine Textdatei im NOTEPAD
eingefügt wird und dann als z.B.: tabform.htm abgespeichert
wird - ist es möglich diese Datei mit dem Netscape Navigator als normale
HTML-Datei zu öffnen. Als Inhalt der HTML-Datei ist nur die
Tabelle 11 .
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">
<META NAME="Author" CONTENT="TaRo
1998">
<META NAME="GENERATOR" CONTENT="Mozilla/4.05
[de] (Win95; I) [Netscape]">
<TITLE>Tabelle mit 4 Zellen</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4 CELLSPACING=5
CELLPADDING=6 COLS=2 WIDTH="240" BGCOLOR="#FFCC33" >
<TR>
<TD>Zelle 1</TD>
<TD>Zelle 2</TD>
</TR>
<TR>
<TD>Zelle 3</TD>
<TD>Zelle 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Diese Tabelle kann natürlich
auch im Netscape Composer eingefügt werden:
im Composer MENUE / EINFÜGEN
/ TABELLE / TABELLE
Ausfüllen wie im Diagramm
oben
Dann Button ÜBERNEHMEN 
und dann SCHLIEßEN klicken
Nun den Text bitte in den einzelnen
Zellen eintragen. Dann
MENUE / DATEI / DATEI SPEICHERN
UNTER....
Quelltext bzw. Definition einer
Tabelle in HTML:
<TABLE>
.
<TR> <TH colspan=2>fettgedruckte
Kopfzelle </TH></TR>
.
<TR><TD> 1.
Zeile - 1. Zelle </TD><TD> 1. Zeile - 2.
Zelle </TD> </TR>
.
<TR><TD> 2.
Zeile - 1. Zelle </TD><TD> 2. Zeile - 2.
Zelle </TD> </TR>
.
</TABLE>
.
.
Der vorangegangene Quelltext führt
zu dieser Tabelle:
| fettgedruckte Kopfzelle |
| 1. Zeile - 1. Zelle |
1. Zeile - 2. Zelle |
| 2. Zeile - 1. Zelle |
2. Zeile - 2. Zelle |
Einfügen vom Frames
1a) Frameset mit 2
Frames - links
und rechts
Um Frames in der einfachen Art einzufügen
ist folgendes notwendig.
Dazu werden nicht noch weitere
Programme gebraucht.
Dieser Quelltext für ein Frameset
mit 2 Frames kann
immer wieder verwendet werden .
Dateiname - frame1.htm:
<HTML>
<HEAD>
<TITLE>TaRo
Frame Set</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="Cyber
TaRo`s Graphik Seite">
</HEAD>
<FRAMESET COLS="195,*" FRAMEBORDER=2
FRAMESPACING=2 BORDER=2>
<FRAME NAME="links" SRC="linkeseite.htm"
SCROLLING="AUTO">
<FRAME NAME="rechts" SRC="rechteseite.htm"
SCROLLING="AUTO">
</FRAMESET>
<noframes>
Ihr Browser kann keine Frames darstellen. Dazu
brauchen Sie einen
framefaehigen InternetBrowser: Netscape Communicator
oder im Notfall den IE 4;.
<a href="composer1.htm">Hier geht's weiter</a>
</NOFRAMES>
<BODY>
</BODY>
</HTML>
Es geht folgendermassen:
1) Markiere den vorgenannten lilafarbenenText
von <HTML>
bis
einschliesslich
</HTML>.
2) Wenn es markiert ist - drücke nun
gleichzeitig die Tasten [Strg] und [C]
- der Text wird nun
in die Zwischenablage von Windows gelegt
3) Öffne eine leere Txt.Datei im Notepad
und klicke in das leere Textfeld.
Besser ist NOTESPAD
8
4) Drücke nun gleichzeitig die Tasten
[SHIFT] und [Einf]
5) Der Quellcode muss nun erscheinen
.
Den Titel für
die eigenen Zwecke ändern : TaRo
Frame Set
6) Mit Datei - Datei
speichern unter.. soll nun die Datei
unter dem Namen
" frame1.htm " abgespeichert
werden. Sie könnte auch unter dem Namen
"frame1.html" gepeichert
werden, das ist ohne Einfluss.
Als Dateityp muss
im Drop-Down-Menue "Alle Dateien
(.*)" angegeben sein
und nicht
Textdokumente ".txt" .
7) Erzeuge 2 HTM-Dateien mit den Namen wie
im Quelltext: Nämlich
"linkeseite.htm" und "rechteseite.htm"
8) Nun öffne die
Datei " frame1.htm" mit dem Browser - z.B. Netscape
Communicator und der erste
Frame
Set ist fertig
Hier ist das Beispiel dazu
(Frameset für 2 Frames)
1b) Frameset mit 4 Frames
vrframeset-4frames.html
Beispiel für ein Frameset
mit 4 Frames
<html>
<head><title>CyberTaRo Frameset für
4 FRames</title>
</head>
<frameset rows="120,*" border=0 frameborder=0
framespacing=0>
<frameset cols="120,*">
<FRAME
SRC="vrecke.html" NAME="ecke" scrolling=no>
<FRAME
SRC="vroben.html" NAME="oben" scrolling=no>
</frameset>
<frameset cols="120,*">
<FRAME
SRC="vrleiste.html" NAME="leiste" scrolling=no>
<FRAME
SRC="vrhaupt.html" NAME="haupt">
</frameset>
</frameset>
<NOFRAMES>
<font face="verdana, helvetica" size=2><B>Ihr
Browser kann keine "Frames" (Fenster) darstellen.</font></B><p>
Ihr Browser kann keine Frames darstellen. Dazu
brauchen Sie einen
framefaehigen InternetBrowser: Netscape Communicator
oder im Notfall den IE 4;.
<a href="index.html">Hier geht's weiter!</a>
</NOFRAMES>
<body bgcolor=white>
</body>
</html>
NOFRAMES Version für: Wenn
ein Surfer mit nicht - framefähigem Browser zu Dir kommt, erhält
dieser die Nachricht: "Ihr Browser kann keine Frames darstellen. Dazu brauchen
Sie einen framefaehigen InternetBrowser: Netscape Communicator". Der Quelltext
dazu:
</head>
<noframes>
Ihr Browser kann keine Frames darstellen. Dazu brauchen Sie einen
framefaehigen InternetBrowser: Netscape Communicator oder im Notfall
den IE 4;.
<a href="index.html">Hier geht's weiter!</a>
</NOFRAMES>
<body>
</body>
</html>
BASE TARGET
Wenn der Befehl <base
target="_blank"> im Header steht (das
wirkt auf alle LINX im Body) muss base dabei sein. Wenn er im BODY steht
, dann nur target <target="_blank">
. Gross- oder Kleinschreibung von base und TARGET ist egal:
target="_blank"
bewirkt, daß das Verweisziel in einem neuen Instanzfenster des WWW-Browsers
angezeigt wird. Das Anzeigefenster mit Ihrem
Frame-Set bleibt im Hintergrund erhalten. Der Anwender kann wieder zu diesem
Fenster wechseln, wenn er möchte.
target="_parent"
bewirkt, daß das Verweisziel in
dem Zustand des Anzeigefensters angezeigt wird,
der vor dem Start Ihres Frame-Sets aktuell war.
target="_top"
bewirkt, daß das Verweisziel in jedem Fall im gesamten Anzeigefenster
angezeigt wird.
Taros Header von dieser Site:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="description" content="CyberTaRo homepage-bastler
html 4">
<meta name="GENERATOR" content="Mozilla/4.5 [de]C-CCK-MCD
QXW03207
(Win95; I) [Netscape]">
<meta name="keywords" content="CyberTaRo,homepage-bastlerhtmlgrundwissen">
<meta name="author" content="CyberTaRo">
<meta name="resource-type" content="document">
<meta name="robots" content="ALL">
<HTML LANG="de">
<meta name="Language" content="de">
<meta name="Content-Language" content="de">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="de">
<meta name="Distribution" content="Global">
<meta name="ObjectType" content="Document">
<meta name="page-topic" content="internet,homepage">
<meta name="page-type" content="FAQ,Beschreibung">
<meta name="rating" content="automotive">
<meta name="revist-after" content="100 days">
<title>CyberTaRo HomePageBastler HTML-Grundwissen htmlcode
usw</title>
<base target="_blank">
</head>
<body bgcolor="#FFFFCC">
Liste von
einigen Tags
Schriftzeichen-Tags
-
<b> Fettschrift
-
<i> Kursivschrift
-
<tt> Schreibmaschinenschrift
-
<u> Unterstrichene Schrift
Tabellen - Tags
Quelltext bzw. Definition einer
Tabelle in HTML:
<TABLE>
.
<TR> <TH colspan=2>fettgedruckte
Kopfzelle </TH></TR>
.
<TR><TD> 1.
Zeile - 1. Zelle </TD><TD> 1. Zeile - 2.
Zelle </TD> </TR>
.
<TR><TD> 2.
Zeile - 1. Zelle </TD><TD> 2. Zeile - 2.
Zelle </TD> </TR>
.
</TABLE>
.
Absatz-Tags
-
<br> Bewirkt einen Zeilenumbruch - ist
eines der wenigen Tags , die keinen Abschlusstag ( wäre </br>
) benötigen
-
<p> </p>Bewirkt einen Zeilenumbruch
und eine Leerzeile
<center> </center> Bewirkt einer
Zentrierung zur Mitte der Seite
Überschriften-Tags
<h1> 1. Überschrift (größte
Überschrift)
<h2> 2. Überschrift
<h3> 3. Überschrift
<h4> 4. Überschrift
<h5> 5. Überschrift
<h6> 6. Überschrift (kleinste Überschrift)
|