HyperTextMarkupLanguage
Die eigene Web-Seite in 10 Minuten
1.1 Welche Programme braucht man ?
Editor (aus dem Menü Zubehör)
1.2 Erstellen eines Grundgerüstes:
</XYZ>=Abschlußtag
Die DOCTYPE-Steueranweisung dokumentiert die in der Web-Seite verwendete HTML-Version:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Eigentlicher Beginn:
<HTML>
Im Anschluß: Kopfteil: HEADER:
Gibt noch keine Anweisungen für eingentl. Seite an
<HEAD>
Wichtigste Anweisung im Kopfteil:
<TITLE></TITLE>
Danach: Kopfteil-Ende:
</HEAD>
Nun: Beginn des Body-Teiles:
<BODY>
Später Anweisungen für die eigentliche Web-Seite; Dann: Ende des Body-Teiles:
</BODY>
Und schließlich:
</HTML>
Vollständiges Grundgerüst nochmals zusammengefasst:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
TIP.: Ein Grundgerüst abspeichern, um nicht immer alles neu schreiben (und merken) zu müssen.
2. Was ist eigentlich HTML ?
2.1 Der Anfang: HTML 1.0
HTML und WWW wurden im Mai 1991 auf Rechnern des Kernforschungszentrum CERN geboren. W3C - World Wide Web-Consortium war Mitbegründer.
2.2.Die 2. Stufe - HTML 2.0
Wurde nun erst richtig populär. Erweiterung diverser Elemente. Erst 1995.
2.3 Die geteilte Stufe 3.x
Viele Untergruppen von HTML 3.0. Ab Mai 1996
2.4 Up to date: Die Version 4
Seit 1997; Viele Neuheiten: unter anderem: Frames (= spezielle Rahmen im Internet)
2.5 Allgemeines zu HTML
HTMl ist das Zentrum im WorldWideWeb. Es gibt zwar auch noch andere Internet-Sprachen, diese sind aber um ein Vielfaches komplizierter.
3. Die elementaren HTML-Grundregeln
3.1 Das Grundgerüst:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
So sieht eine leere Web-Seite aus. Eingefügt werden können noch Kommentare, die dann nur im "Quelltext", also im HTML-Skript erscheinen, nicht aber auf der Web-Seite.
<!-- TEXT -->
Statt TEXT kann ein belieber Text eingesetzt werden.
3.2 Überschriften für die Übersichtlichkeit:
|
TYP |
BESCHREIBUNG |
|
<H1></H1> |
Überschrift 1. Ordnung |
|
<H2></H2> |
Überschrift 2. Ordnung |
|
<H3></H3> |
Überschrift 3. Ordnung |
|
<H4></H4> |
Überschrift 4. Ordnung |
|
<H5></H5> |
Überschrift 5. Ordnung |
|
<H6></H6> |
Überschrift 6. Ordnung |
3.3 Lokale und Weltweite Verweise
Grundstruktur: <A iTyp"iBezeichner">Verweistext</A>
Lokale Verweise = Verweise auf eine andere Stelle in der selben Seite
Von dort wo verwiesen werden soll:
<A HREF="#Verweisname">Verweistext</A>
Dort wo hin verwiesen wird:
<A NAME="Verweisname">Text auf den verwiesen wurde</A>
Beispiel:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Verweise</TITLE>
</HEAD>
<BODY>
Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text.
<A HREF="#Verweis1">Dieser Text verweist auf den Verweis1.</A>
Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text. Hier steht ganz normaler Text.
<A NAME="Verweis1">Auf diesen Text wurde Verwiesen !</A>
</BODY>
</HTML>
Weltweite Verweise = Verweise auf andere Web-Seiten
Von dort wo verwiesen wird:
<A HREF="http://www.irgendeineseite.com">http://www.irgendeineseite.com</A>
Verweise auf eine andere Internet-Seite im selben Verzeichnis:
<A HREF="irgendeineseite.htm">Verweis auf Irgendeineseite</A>
Verweis als E-Mail = Bei Klick auf Verweis: automatischer Start der E-Mail-Schreib-Software
<A HREF="mailto:ich@du.com">E-Mail an Ich</A>
3.4. Seiten-Layout mit Farben
|
OPTION |
BEDEUTUNG |
|
BGCOLOR |
Bildschirmhintergrund |
|
TEXT |
Textfarbe |
|
LINK |
Farbe von Verweisen |
|
VLINK |
Farbe von Verweisen zu bereits besuchten Zielen |
|
ALINK |
Farbe von Verweisen beim Anklicken |
Anwendung:
<BODY BGCOLOR="Farbe1" TEXT="Farbe2" LINK="Farbe3" VLINK="Farbe4" ALINNK="Farbe5">
Seitenprogramierung
</BODY>
|
FARBANGABE |
BESCHREIBUNG |
|
black |
Schwarz |
|
maroon |
Kastanienbraun, beziehungsweise ein dunkles Rot |
|
green |
Grün |
|
olive |
Olivgrün |
|
navy |
Marine/Navyblau |
|
purple |
Purpurrot |
|
teal |
Dunkler Cyanton |
|
gray |
Grau |
|
silver |
Silber |
|
red |
Rot |
|
lime |
Heller Grünton |
|
yellow |
Gelb |
|
blue |
Blau |
|
fuchsia |
Lilaton |
|
aqua |
Aqua, ein heller Blauton |
|
white |
Weiß |
3.5 Seiten-Layout mit Text- und Absatzformatierung
Befehle zur Texthervorhebung:
<I></I> kursiv
<B></B> fett
<U></U> unterstrichen
<SUB></SUB> tiefgestellt
<SUP></SUP> hochgestellt
<S></S> durchgestrichen
<STRONG></STRONG> fett
<EM></EM> allg. Hervorhebung
<CITE></CITE> Hervorhebung für Zitate
<BLOCKQUOTE></BLOCKQUOTE> Hervorhebung für Zitate
<QUOTE></QUOTE> Hervorhebung von Quellcodes
<VAR></VAR> Hervorhebung von Variablennamen
Schriftgrößen:
<FONT SIZE=[Größe]>
Möglich von (-7) bis 7
Absätze und Zeilenumbrüche:
|
STEUERANWEISUNG |
WIRKUNG |
|
<P> |
Neuer Absatz |
|
</P> |
Absatzende |
|
<BR> |
Zeilenumbruch |
|
<NOBR></NOBR> |
Kein Zeilenumbruch in diesem Abschnitt |
|
<WBR> |
Wenn Zeilenumbrcuh notwendig, dann hier |
Ausrichtung:
<CENTER></CENTER> Eingeschlossener Text wird zentriert dargestellt
<DIV ALIGN=left> Eingeschlossener Text wird linksbündig dargestellt (ursprünglich)
<DIV ALIGN=right> Eingeschlossener Text wird rechtsbündig dargestellet
Trennlinien:
Durch Einfügen des HTML-Tags <HR> wird eine Trennlinie eingefügt.
Die Breite kann durch Ergänzen von WIDTH=[Prozentangabe]% bestimmt werden.
Z.B.: <HR WIDTH=75%>
Die Dicke kann durch Ergänzen von SIZE=[Liniendicke] bestimmt werden.
Z.B.: <HR SIZE=28>
3.6 Bilder sagen mehr: Grafiken einbinden
Zwei Grafikformate im WWW: GIF und JPEG (=JPG)
Einbindung einer Grafik:
<IMG SRC=[Dateiname]>
Verweis auf eine Grafikdatei im gleich Verzeichnis (in diesem Fall "foto.jpg"):
<IMG SRC="foto.jpg">
Grafikdatei aus einem anderen Verzeichnis einbinden:
Bsp.:<IMG SRC="file:///C:/ICH/DU/foto.jpg">
In diesem Fall: Die Datei foto.jpg aus dem Verzeichnis ICH aus deren Unterverzeichnis DU auf dem Laufwerk C.
Bsp.: <IMG SRC="http://www.irgendeineseite.com/verzeichnis/foto.jpg">
Größenangaben für Grafiken:
<IMG SRC="foto.jpg" WIDTH=[Größenangabe] HEIGHT=[Größenangabe]>
Größenangabe in Pixel !
Tip: Originalgröße einer Grafik oder Breite und Höhe im exakten Verhältnis zueinander angaben, da sonst (vermutlich unerwünschte) Verzerrungen auftreten können.
Ausrichtung:
<IMG SRC="foto.jpg" ALIGN=left>
<IMG SRC="foto.jpg" ALIGN=left>
<IMG SRC="foto.jpg" ALIGN=center>
<CENTER><IMG SRC="foto.jpg"></CENTER>
Verweissensitive Grafiken:
Einfach durch Einbindung in Verweis möglich.
Bsp.: <A HREF="http://www.orf.at"><IMG SRC="orf.gif"></A>
3.7 Ordnung, die Erste: Listen einsetzen
Die Bullet-Liste = durch Punkte aufgelistet
<UL>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</UL>
Die numerische Liste = Liste durch 1., 2., 3., aufgelistet
<OL>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
Listen römisch numerien
<OL TEYPE=i>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
Listen alphabetisch numerieren
<OL TYPE=a>
<LI>Punkt 1 der Tagesordnung: Ansprache</LI>
<LI>Punkt 2 der Tagesordnung: Mittagspause</LI>
<LI>Punkt 3 der Tagesordnung: Kaffee</LI>
</OL>
3.8 Ordnung, die Zweite: Tabellen einsetzen
<TABLE> Eröffnung der Tabelle
<TR> Eröffnung der Zeile
<TD> Eröffnung der Spalte
</TD> Schließung der Spate
<TD></TD> kann beliebig oft (wieviele Spalten gebraucht wird) verwendet werden
</TR> Schließung der Zeile
<TR></TR> kann beliebig oft (wieviele Zeilen gebraucht wird) verwendet werden
</TABLE> Schließung der Tabelle
Bsp:
<TABLE>
<TR><TD>Spalte 1/Zeile 1</TD>
<TD>Spalte 2/Zeile 1</TD>
<TD>Spalte 3/Zeile 1</TD>
</TR><TR>
<TD>Spalte 1/Zeile 1</TD>
<TD>Spalte 2/Zeile 2</TD>
<TD>Spalte 3/Zeile 3</TD>
</TR><TABLE>
Allg. Infos zu Tabellen:
Im Tag <TABLE> muß auch noch die Rahmen-Dicke angegeben werden, da ansonsten nur unsichtbare Tabellen entstehen. Z.B.: <TABLE BORDER=5>
Außerdem gelten in der Tabelle die selben Gesetzte wie in der normalen Seite. D.h.: Textformatierung, Grafikeinbindung und dgl. sind kein Problem mehr.
Höhe und Breite von Tabellen angeben
<TABLE WIDTH=[Größe] HEIGHT=[Größe]>
3.9 Special-Effects mit
Hintergrundgrafiken
Grundsätzlich gleich mit normalen Grafiken, zum Einfügen:
<BODY BGCOLOR=black TEXT=yellow BACKGROUND="foto.jpg">
In diesem Fall die Hintergrundgrafik "foto.jpg".
Marquee
Text scrollt von rechts nach links, wird nur von MS Internet Explorer unterstützt.
<MARQUEE></MARQUEE>
Blink
Text blinkt.
<BLINK></BLINK>
4. Seitenaufteilung in Segmente - Frames
4.1 Was sind Frames ?
Die Möglichkeit den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente aufzuteilen. Segmente werden Frames genannt.
4.2 Wie werden Frames in ein HTML-Projekt integriert ?
Erstellen einer Index-Datei zum Aufteilen des Browseranzeigefensters
Grundgerüst dieser Index-Datei:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
Framedefinitionen
</FRAMESET>
</HTML>
Kein Body-Teil !
Framedefinitionen
Reihen = Quer-Frames
Ergänzen von ROWS="[Prozent]%,[Prozent]%" im Bereich <FRAMESET>
Spalten
Ergänzen von COLS="[Prozent]%,[Prozent]%" im Bereich <FRAMESET>
Z.B.: <FRAMESET ROWS="25%,75%">
oder <FRAMESET COLS="45%,55%">
4.3 Der Inhalt von Frames
Wird einfach durch die Erweiterung von <FRAME SRC="[Name]">
Z.B.:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="25%,75%">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
</HTML>
In diesem Fall wird im 1. Frame (dessen Name ist als Frame1 definiert) die Datei frame1.html und im 2. Frame (=Frame2) die Datei frame2.html dargestellt. Die Dateien müssen aber noch erstellt werden.
Die Dateien, die in den Frames dargestellt werden sollen, können ganz normal wie jede andere HTML-Seite erstellt werden.
4.4 Verweise zu anderen Frames
Links werden normalerweise im selben Fenster dargestellt. Wenn das nicht geschehen soll muss man den Frames einen Namen geben.
Z.B.:
<!DOYTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET>
<FRAME SRC="frame1.html" NAME="Frame1">
<FRAME SRC="frame2.html" NAME="Frame2">
</FRAMESET>
</HTML>
Und beim Link in der HTML-Datei (nicht in der Index-Datei) muss den
TARGET=[Name des Frame in dem gelinkte Seite dargestellt werden soll]
Z.B.:
Mitten in einer normalen HTML-Datei:
<A HREF="seite1.html" TARGET="Frame1">Verweis-Text</A>
Reservierte Framenamen
|
RESERVIERTE FENSTERNAMEN |
BEDEUTUNG |
|
_self |
Der URL wird im gleichen Frame dargestellt wie der Verweis. |
|
_parent |
Der URL wird im übergeordneten Frame angezeigt. Falls es kein übergeordnetes Fenser gibt, wird das Verweisziel in einem neuen Fenster angezeigt (ohne Frame-Struktur) |
|
_blank |
Der URL wird in einem neuen Browser-Fenster angezeigt. Dieses neue Browser-Fenster hat defaultmäßig keine Frame-Struktur. |
|
_top |
Der URL wird im vollen Fenser des Browsers angezeigt. Die Frame-Struktur verschwindet. |
Haupt | Fügen Sie Referat | Kontakt | Impressum | Nutzungsbedingungen
