REFERAT-MenüDeutschGeographieGeschichteChemieBiographienElektronik
 EnglischEpochenFranzösischBiologieInformatikItalienisch
 KunstLateinLiteraturMathematikMusikPhilosophie
 PhysikPolitikPsychologieRechtSonstigeSpanisch
 SportTechnikWirtschaftWirtschaftskunde  



HyperTextMarkupLanguage - HTML

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:



Steueranweisungen in HTML: sogen. "Tag": z.B.:  <XYZ> =Einleitungstag

</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