by Schnurfel
Alle, die am Internet interessiert sind (und wer ist das nicht?) haben schon einmal von html gehört. Doch was ist das eigentlich? Was kann man damit machen? Wie kann ich html nutzen ? Was brauche ich dafür? Das und noch viel mehr wird hier geklärt. In Teil 2 gibt es dann eine kleine Einführung in die wichtigsten html-Befehle.
Nebenwirkungen:
Teil 1 und 2 dieses
Kurses werden aus niemandem eine html- Profi machen. Ich bin ja auch keiner.
Aber für eine Überblick und für das Erstellen einer eigenen,
netten Homepage müßte es eigentlich reichen. Natürlich
kann man für alle Arbeiten auch eine html-Editor benutzen. Jeder vernünftige
Browser besitzt inzwischen einen. Dieses Editoren ;) erleichtern einem
schnell schwierige Arbeiten und man kommt schnell vo- ran. Aber das muß
jeder selber wissen.
Was ist html?
html ist die Abkürzung
für Hyper Text Markup Language. Das heißt, daß alle Formatierungen
einer Page im Netz durch Markierungsbefehle vorge- nommen werden, die dann
vom Browser umgesetzt werden. Und da es ver- schiedene Browser gibt, stellen
sie die Seiten manchmal auch unter- schiedlich dar. html definiert im Grunde
nur die logische Struktur eines Dokuments, nicht aber die exakte Darstellung.
Die meisten html- Dokumente sind sogenannte Hypertexte. Das sind die Texte,
die durch Verweise (Links) mit anderen Dokumenten verknüpft sind.
Was brauche ich zum coden?
html
läßt sich mit jedem beliebigen Editor coden. Einzige Bedingung
ist, daß der Text im ASCII-Format gespeichert wird. html-Dokumente
sollten immer als "*.html" oder "*.htm" gespeichert
werden, damit der Browser sie auch erkennt. Ja, natürlich brauchen
wir auch einen Browser! Schließlich müssen wir uns unsere gecodeten
Seiten ja auch ansehen und diese schließlich ins Netz stellen können.
Die Grundstruktur von html-Dokumenten
html-Dokumente (und damit auch WWW-Seiten) bestehen ausschließlich
aus Text. Das, was dargestellt werden soll, wird durch spezielle Tags ange-
geben. Tags treten immer paarweise auf. Sie werden beide jeweils von einem
<> eigerahmt, wobei der hintere Tag noch eine / enthält. Zwischen
den beiden Tags steht das, was auf der Page erscheinen soll. Also:
<Befehl>Darstellungsbereich</Befehl>
Das kann natürlich auch gekoppelt werden:
<Befehl_1><Befehl_2>Darstellungsbereich</Befehl_2></Befehl_1>
Groß- und Kleinschreibung, sowie die Einbindung von Leerzeichen spielen keine Rolle, da der Browser eh maximal nur ein Leerzeichen akzeptiert und Leerzeilen ganz ignoriert, sofern sie nicht mit einem Tag angegeben wurden.
In jedem html-Dokumet MUß es einige Elemente geben, die UNBEDINGT da sein müssen. Das minimale Dokument muß folgendes enthalten:
<HTML> <HEAD> <TITLE>Das erste Mal html</TITLE> </HEAD> <BODY> Ich bin ganz aufgeregt </BODY> </HTML>
Ç1Der Reihe nach:
<HTML> Das muß am Anfang von jedem html-Dokument stehen. Ebenso wichtig ist der Abschluß </HTML>. Der Browser muß ja wissen, was er liest. <HEAD> Hier beginnt der Deklarationsteil (und endet mit </HEAD>). Dieser Tag kann viele Informationen enthalten, die bis auf eine Ausnahme dem Betrachter verborgen bleiben. Und diese Ausnahme ist folgender Tag: <TITLE> Was hier steht, wird in der Fensterzeile des Browser dargstellt. Es ist sozusagen das Motto, unter dem die Page läuft. Z.B. steht auf der Seite "Kleckern und Klotzen" in der Fensterzeile "Netscape - Kleckern und Klotzen". <BODY> Dies ist all das, was am Ende auf der Page zu sehen ist.
html-Codes müssen im ASCII-Format geschrieben werden. Erlaubt sind die Buchstaben a-z, A-Z, die Zahlen 0-9 und die Satzzeichen !?,.;(). Alle anderen Zeichen sind unzulässig. Um sie aber doch benutzen zukönnen, müssen für diese Zeichen sogenannte Sonderzeichen verwendet werden. Diese werden dann im Quellcode statt der anderen Zeichen geschrieben, der Browser erkennt sie aber als Satzzeichen.
Hier eine Tabelle der Sonderzeichencodes:
Zeichen Code Name ä / Ä ä / Ä a-Umlaut
ö / Ö ö / Ö o-Umlaut ü / Ü ü
/ Ü u-Umlaut ß ß Scharfes S < / > <
/ > größer / kleiner & & Kaufmanns - und "
" Wörtliche Rede (c) © Copyright
Damit der Text, der im BODY-Tag auf der Page enthalten ist, nicht nur als großer Block erscheint, braucht man die Textformatierung.
!!! See it in p@rt 2 !!!
zurück zum Inhaltby Schnurfel Ihr könnt alle Beispiele im Kurs sofort ausprobieren. Überall wo ein "->" - Verweis geschrieben ist, könnt ihr eine Datei mit einem Browser aufrufen und euch das Ergebnis ansehen. Der im ersten Teil erwähnte Aufbau von html-Texten ist in der html1.htm enthalten.
Jetzt wissen wir zwar etwas über den Aufbau von html-Dokumeten und welche Regeln man beachten muß, aber richtiger Programmmierstoff (außer <BODY>) war noch nicht dabei. Das kommt jetzt! Alles, was ich hier er- läutern werde, steht im <BODY>-Tag. Fangen wir an mit der
Absatzformatierung
Wie in Teil
1 erwähnt ist, ist es egal, wieviel Leerzeichen oder -zeilen sich
zwischen zwei Worten befinden, da der Browser immer nur ein Leer- zeichen
darstellt. Um nun aber doch Zeilenumbruch oder eine Leerzeile zu erhalten,
benutzt man den <BR>, bzw. den <P>-Tag. <BR> Das steht
für LineBReak und fügt dort, wo es hingesetzt wird, einen Zeilenumbruch
ein. <P> Steht für Paragraph und markiert den Beginn eines neuen
Absatzes. Der <P>-Tag kann optional mit </P> beendet werden.
Der <P> - Tag kann mit verschiedene Attributen versehen werden, um einen speziellen Effekt bei dem neuen Absetz zu bewirken. Als da wären:
algin Hiermit wird bestimmt, welche Ausrichtung der Text haben soll. Hinter "algin" wird ein "=" geklemmt, darauf folgt eines dieser Ausrichttungsatrinute: left Links. Normalerweise (d.h. ohne algin-Atrinut wird der Text immer so formatiert. center Zentriert. right Rechts.
Die Schwäche des Browsers, nur ein Leerzeichen darzustellen, egal wie- viele man haben möchte, wird durch den PRE-Tag beseitigt.
<PRE> Dieser Tag veranlaßt den Browser dazu, in dem Bereich </PRE> zwischen <PRE> und </PRE> alles so darzustellen, wie es im Quellcode steht.
Hier kann man seine Leerzeichenvorstellungen also freien Lauf lassen ;) Außerdem wird der Text, der sich zwischen <PRE> und </PRE> befindet, nicht in proportionaler Schriftgröße dargestellt.
-> html3.htm
Nun haben wir bereits die Möglichkeit, die Formatierung des Textes nach unseren Vorstellungen zu beeinflußen. Wenn wir aber einige Sache be- sonders hervorheben wollen, müssen wir uns mit der Ç3Zeichenformatierung Ç1beschäftigen.
Wie in normalen Textverarbeitungsprogrammen stehen uns hier die Möglich- keiten Fettdruck, Kursivschrift oder das beliebte Unterstreichen zur Verfügung. Dazu kommen noch die netten Spielerein wie hoch- oder tief- gestellt, oder durchgestrichen.
<B> Kommt von bold und bewirkt den Fettdruck zwischen <B> </B> und </B>. <I> Italic (Unterstirchen) </I> <U> Hier haben wir underlined, also den unterstrichenen </U> Text. ACHTUNG: In html-Texten werden Links oft durch unterstrichene Passagen markiert. Um Verwirrung vorzu- beugen, sollte man sich an diese Regel halten und nur dort unterstreichen, wo sich ein Link befindet.
<SUP> Hoher Text, </SUP> <SUB> Tiefer text, </SUB> <STRIKE>Unterstrichen </STRIKE>
Natürlich gibt es auch die Möglichkeit, die Schriftgröße zu verändern. Dies geschieht am einfachsten mit dem <HX>-Tag. X steht für die ge- wünschte Schriftgröße.
<HX> Ändert die Schriftgröße zwischen <HX> und </HX>. Im Anschluss gibt es immer einen Zeilenumbruch.
Beispiel: <H2> Ein Text in Größe zwo! </H2>
-> html4.htm
Falls man jediglich ein Wort oder eine kurze Passage kennzeichenen möchte, sollte man auf einen anderen Tag zurückgreifen. Gemeint ist der FONT-Tag: Damit läßt sich die Textdarstellung fast beliebig beein- flussen. Dazu kommen die Attribute siz, color und face.
<FONT> Verändert die Textdarstellung durch folgende Attribute </FONT> zwischen <FONT> und </FONT>
size Verändert die Schriftgröße zwischen den beiden FONT- Tagen.Möglich sind die Größe 1 bis 7, wobei 3 als Standardgröße gilt und man die Angaben dazu relativ ausdrücken kann, d.h. 7 = +4. color Damit wird die Farbe der Schrift verändert. Hierbei müssen jedoch die Hexadezimalen Codes verwendet werden, die nach dem RGB-Schema umgewandelt werden. Eine Tabelle der wichtigsten Farben und ihrer Codes liegt in der farben.txt bei. -> farben.txt face Damit wird die Schriftart verändert. Die Sache hat je- doch ein paar Haken: Erstens muß der genaue Name der Schrift angegeben werden, zweitens muß die Schrift auch auf dem Rechner des Betrachters vorhanden sein. Am besten ist es da immer noch, dem Computer mehrere Schriften zur Auswahl zu stellen, um Konflikte zu vermeiden. ACHTUNG: Man muß bedenken, daß die gleichen Schriften zwischen PC und MAC oft unterschiedliche Namen haben, z.B: Arial und Helvetica.
Beispiel: Mal angenommen, wir wollen die Worte "Ich liebe html" in Arial möglichst groß darstellen und dazu die Worte noch in rot sehen. Wie das funktioniert, ist im Quellcode der -> html5.htm verzeichnet.
Das war_s fürs erste mit dem zweiten Teil meines html-Kurses. Weiter geht_s in MARS #3 mit dem dritten Teil! Bis dahin wünsche ich viel Spaß beim herumexperimentieren.
Sagt mir doch, was ihr von meinen Artikeln haltet: BenjaminTriebe@t-online.de http://home.pages.de/~schnurfel Euer Schnurfel!
zurück zum InhaltHallo und herzlich willkommen zum dritten Teil meines kleinen html-Kurses!
Nun haben wir uns im ersten und im zweiten Teil dieses Kurses ja bereits ausgiebig mit den Grundtechniken und Textformatierungen beschäftigt. Aber bis jetzt sehen die erstellten Dokument ja noch recht trocken und farblos aus. Das soll sich nun ändern. In diesem Teil des Kurses lernst Du, wie man die Vorder- und Hintergrundfarben des Textes verändert, Hintergrundgrafiken ein- bindet und Listen und Linien erstellt.
Veränderungen im Bereich des BODY-Tags
Wie ich ganz am Anfang erwähnt hatte, ist im BODY-Tag das
erklärt, was schließlich direkt auf der Page zu sehen ist. Das
meiste, was man an Aus- sehensveränderungen überhaupt vornehmen
kann, geschieht hier. Für den BODY- Tag gibt es verschiedene Attribute,
um das Layout der Page zu verändern:
bgcolor Verändern die Farbe für den Browserhintergrund und / oder background:
text: für den normalen Text
link: für noch nicht besuchte Links
vlink: (= visited links) für bereits besuchte Links
alink: (= activated links) für aktivierte Links
Wenn man nun die Farbe eines Textelementes ändern will, gibt man nach dem Attribut den gewünschten RGB-Wert der Farbe an, die man darstellen möchte (-> siehe Teil 2 des Kurses). Man sollte allerdings nicht zu viele Farben auf einmal verwenden, da nicht alle Browser alle Farben wiedergeben können.
-> html6.htm
Aber damit sind die grafischen Getsaltungsmöglichkeiten noch nicht erschöpft. Ihr habt sicherlich schon bemerkt, daß viele Webpages hübsche Hintergrund- bilder haben, die der Page viel mehr Attraktivität verleihen. Hintergrund- bilder werden immer gekachelt im Hintergrund einer Page dargestellt, ihr müßt also nicht nach einem Bild suchen, das genau auf die Seite passt ;). Aller- dings ist auch nicht jedes x-beliebige Bild als Hintergrund überhaupt geeignet. Es darf nicht zu dunkel sein, so daß es die Schrift unlesbar macht. Außerdem sollte es nicht zu eintönig sein. Das passiert meistens, wenn man ein ganz kleines Bild verwendet, daß dann gekachelt wird. Außerdem sollte man nicht auf den ersten Blick erkennen können, daß das Hintergundbild gekachelt ist. Um auf einer Page ein Hintergrundbild zu verwenden, gibt man hinter dem Attribut "background" den Pfad und den Namen der Datei an.
Außer der Möglichkeit, einfache Absätze zu erstellen, um Textteile von einander zu trennen, kann man auch horitontale Linien einfügen, um den Text in verschiedene Passagen zu unterteilen. Zu dem Standardbefehl <HR> gibt es hier auch noch verschiedene Attribute, die Aussehen, Breite und Länge der Linie bestimmen können.
<HR> Mit diesem Befehl läßt sich an der eingefügten Stelle im Text </HR> eine horizontale Linie erzeugen. </HR> ist optional, d.h. muß nicht angegeben werden. Der Befehl kann mit verschiedenen Attributen versehen werden.
width Angabe der Breite der Linie. Die Angabe kann in Pixeln oder Prozent (der jeweiligen Größe des Browserfensters) erfolgen. size Höhe der Linie in Pixeln. noshade Damit wird festgelegt, ob die Linie wie eine Ver- tiefung aussieht, oder ob sie mit Farbe (schwarz) gefüllt werden soll.
Sind dem <HR>-Tag keine Attribute hinzugefügt, entsteht ein vertiefte Standardlinie!
-> html7.htm Nun geht es um Listen: Es gibt drei verschiedene Arten von Listen, die man erzeugen kann. Die normale Standardvariante (1. - 2. - 3. usw.), die Klein- buchstabenvariante (a. - b. - c. usw.) und schließlich die Variante mit römischen Zahlen. Diese sind aber nur ab der Zahl 5 verwendbar. Außerdem gibt es die ganz normalen Listen, die nicht auf der Verwendung von Zeichen ba- sieren. Und weil die am einfachsten sind, fangen wir mit denen an.
Um eine stinknormale Liste zu erstellen, die nur aus Überschriften und eingerückten Wörtern besteht, verwendet man den <DL>-Tag:
<DL> Damit wird dem Browser angezeigt, daß nun eine einfache, eingerückte Liste folgen soll. Auf <DL> folgen normalerweise <DT> Auf diesen Tag folgt die Überschrift der Liste, und mit <DD> wird der nachfolgende Text (die eigentliche Liste) eingerückt dargestellt.
Abgeschlossen wird die Liste wieder mit </DL>.
Und weil es so einfach weitergehen soll, kommen wir nun zu der Liste, die die Inhalte eingerückt mit Punkten darstellen. Wer kennt sie nicht, diese beliebte Art von Listen, die so klein und schnukelig -- aber ich schweife ab!
<UL> Das steht für "unorderd list", und mit diesem Tag wird die Liste eröffnet. <LI> Damit beginnt nun die eigentliche Aufzählung. Jedesmal, wenn man in dieser Liste einen Begriff eingefügt haben will, schreibt man zuerst diesen Tag und daran in Anschluss den Begriff.
Mit </UL> wird die Liste dann wieder abgeschlossen.
-> html8.htm
Und nun zu den anfangs erwähnten numerierten Listen. Wie gesagt, gibt es drei Varianten dieses Listentyps. Um nun eine ganz normale, mit 1., 2., usw. numerierte Liste zu erstellen, benutzt man den Tag
<OL> Im Gegensatz zu <UL> bedeutet es "order list" und markiert den Beginn einer Liste. Wie bei <UL> werden die einzelnen Einträge mit <LI> angeführt.
Um nun aber auch mit Kleinbuchstaben und römischen Zahlen zaubern zu können, benötigt man die Attribute "start" und "type".
start Damit wird dem Browser übermittelt, mit welchem Wert die Liste beginnen soll. "Start" benötigt man, wenn man römische Zahlen benutzten will, da diese erst bei 5 beginnen. type Hiermit wird dem Browser nun die Art der Liste bekanntgegeben. Möchte man Kleinbuchstaben, schreibt man "type=a" und für römische Zahlen lautet der Syntax "type=I start=5".
-> html9.htm
Das wars auch schon mit dem dritten Teil meines HTML-Kurses! War doch gar nicht so schwer, oder? Im vierten Teil geht es um Tabellen. Ich hoffe, die Beispiele in den HTML-Dateien (im Bonus-Verzeichnis) haben es euch leichter gemacht.
Bis zum vierten Teil, euer treuer Schnurfel
BejaminTriebe@t-online.de http://home.pages.de/ ~schnurfel
zurück zum InhaltHallo und herzlich willkommen zum vierten Teil meines kleinen html-Kurses!
Wenn man große Mengen von Daten hat und diese übersichtlich darstellen möchte, empfiehlt sich auf jeden Fall eine Tabelle. Man kann so alles beliebig ein- teilen und zudem sieht eine gute Tabelle auch noch sehr gut aus. Wenn man sie dann noch mit unterschiedlichen Farben füllt kann eine Tabelle ein großer Blickfang sein. Aber weil Tabellen so schön aussehen, sind sie auch ent- sprechend schwer zu programmieren. Schließlich muß man jedes Feld einzeln vereinbaren. Eins ist jedoch bei allen HTML-Tabellen gleich: Eingeleitet wird sie immer mit
<TABLE> Beginn einer Tabelle. </TABLE> Ihr (vorläufiges) Ende.
Obwohl man sehr viele Gestaltungsmöglichkeiten hat, sind die Befehle, die man verwenden kann, immer die gleichen.
<TR> Eine ZEILE beginnt mit diesem Tag und endet wieder mit </TR> <TR> steht für Table-Row.
<TD> Eine ZELLE beginnt mit diesem Tag. </TD> <TD> steht für Table-Data. <TH> Mit ihm werden Überschriftszellen erzeugt. Im Gegen- </TH> satz zu einer normalen Zelle wird der Text hier in Fettdruck und zentriert (in der Tabelle) dargestellt.
-> tabelle1.htm
Bevor man damit beginnt eine Tabelle zu programmieren, sollte man sich im Geiste (oder am besten auf Papier) darüber im klaren sein, wie sie aussehen soll. Zudem muß man beim Erstellen von Tabellen immer zeilenweise denken. Wenn sich zum Beispiel ein Feld über zwei Zeilen erstrecken soll, hat das natürlich zur Folge, daß die nachfolgende Zeile ein Feld weniger besitzt, da dieses von der anderen Zelle schon belegt wurde.
Ein einfaches Beispiel für eine zweizeilige Tabelle befindet sich in der
-> tabelle2.htm
So verhält es sich auch mit Zellen, die sich über mehrere Spalten erstrecken. Für jede Spalte, über die sich eine Zelle erstreckt, muß man in der nächsten Spalte ein Feld weniger, bzw. in den anderen Zeilen eins mehr erstellen. Um alles noch komplizierter zu machen hat der liebe Gott noch einen Haufen Attribute erfunden, die den User ersticken sollen! Here they are:
Befehl Attribut Auswirkung mögliche Werte
TABLE border umrandet die Tabelle Randstärke in Pixeln TABLE width bestimmt Zeilenbreite Angabe in Pixeln oder Prozent (% im Verhält- nis zur Fensterbreite) TABLE height bestimmt Zeilenhöhe analog zu width TABLE bgcolor Hintergrundfarbe RGB-Wert in Hexade- zimal
TR algin horizontale left, right & center Ausrichtung TR valgin vertikale Ausrichtung top, bottom & middle TR bgcolor Hintergrundfarbe analog zu TABLE
TD algin horizontale analog zu TR Ausrichtung TD valgin vertikale Ausrichtung analog zu TR TD width bestimmt Zeilenbreite analog zu TABLE TD rowspan Zeilenhöhe der Zelle Anzahl der Zeilen TD colspan Breite der Zelle Anzahl der Spalten TD bgcolor Hintergundfarbe analog zu TABLE
Für den schnelleren Zugriff stehen alle Attribute in der
-> attribut.txt
Da ich nicht alle Attribute einzeln erläutern möchte, habe ich die wichtigsten in eine Datei zusammengepackt. Dort könnt Ihr Euch sie ansehen und damit experimentieren.
-> tabelle3.htm
So, das waren die wichtigsten Dinge, die man über Tabelle wissen muß. Im nächsten Kaptel geht es um die Einbindung von Grafiken. Falls einer von Euch Probleme mit html hat, oder einfach eine Frage hat, meldet euch bei mir.
-> BenjaminTriebe@t-online.de -> http://home.pages.de/~schnurfel
zurück zum InhaltHallo und herzlich willkommen zum fünften Teil meines kleinen html-Kurses!
Bis jetzt haben wir immer bei der Formatierung des Layouts unserer Page mit html gearbeitet. Abgesehen von der Einbindung einer Grafik als Hintergrund- bild mußten wir alles immer selbst coden. Doch mit html haben wir auch die Möglichkeit Grafiken einzubinden. Einziges Manko: Erlaubt sind nur Grafiken im GIF- oder im JPEG-Format. Beide Format komprimieren die eigentliche Größe der Grafik, aber da die Übertragungsraten im Internet und der einzelnen Modems und ISDN immer noch recht klein sind, empfiehlt es sich nur da Grafiken einzusetzten, wo sie auch wirklich benötigt werden. Und der Betrachter Deiner Page verliert unter Umständen die Lust, wenn er 3 Minuten auf ein Bild warten muß (Tip: Schaltet die Bildanzeige eures Browsers auf AUS. Alle Seiten werden schneller geladen und bei Bedarf kann man die Page auch mit Bildern erneut laden oder einfach einzelne Bilder nachladen).
Um Grafiken auf unserer Page darzustellen, benutzen wir den Befehl
<IMG> Das steht für Image. Der Tag wird dort im Quelltext eingefügt, wo später die Grafik stehen soll. Um dem Browser zu sagen, welche Grafik er laden soll, benut- zen wir das src-Attribut. Hinter dem src-Attribut folgt der Pfad der Grafik.
Achtung: Achtet bei der Adressierung des Bildes auf die richtige Groß- und ~~~~~~~ Kleinschreibung. Wenn man dem Browser befiehlt, BILD.GIF zu laden, finden einige Browser die Datei nicht, wenn sie in real bild.gif heißt.
Beispiel: ~~~~~~~~ <IMG src = bild.gif> oder <IMG src = ../bilder/bild.gif>
Befindet sich die Grafik natürlich nicht im gleichen Verzeichnis wie das HTML- Dokument, muß man natürlich den richtigen Pfad für die Grafik angeben (Nicht den eurer Festplatte, sondern den des Servers). Das "../" weist den Browser an, vom jetzigen Verzeichnis um eines zurückzugehen und von dort ins Vereichnis "bilder" zu wechseln.
Was aber, wenn jemand, wie ich es eben empfohlen habe, die Bildanzeige seines Browsers auf AUS gestellt hat oder einen reinen Textbrowser besitzt? In beiden Fällen sollte man dem User doch sagen, was er gerade verpasst. Außerdem kann der User im ersten Fall ein wichtiges Bild, z.B. ein Imagemap finden und dann speziell laden. Wir benötigen also einen Text, der angezeigt wird, wenn die es die Grafik nicht wird.
Hierfür gibt es das Attribut "alt". Es wird hinter die Pfad- oder Dateiangabe in <IMG> geschrieben. Wenn die Beschreibung des Textes größer als ein Wort ist, muß sie in Anführungszeichen gesetzt werden.
Beispiele:
<IMG src = bild.gif alt = Bild>
oder <IMG src = bild.gif alt = "Ein schickes Bild">
Und wie immer gibt es weitere Attribute, die einem die Plazierung des Pics erleichtern:
algin Legt fest, auf welcher Seite der Pages sich die Grafik befindet. Man kann wählen zwischen left und right
valgin Legt fest, welcher TEIL der Grafik mit dem eventuell nebenstehenden Text auf der selben Höhe ist. Hier gibt es die Werte top, middle und bottom.
-> bild1.htm Beim Ausprobieren dieses Beispiels ist darauf zu achten, daß sich die Datei bild.gif im selben Verzeichnis befindet.
Wenn sich die Pics direkt im Text befinden, haben sie normalerweise einen Abstand von einem Pixel zu dem nächsten Buchstaben neben ihnen. Mit den Attributen hspace und vspace läßt sich dies verändern. Hinter das Attribut setzt man einfach ein Gleichheitszeichen und gibt dann den gewünschten Abstand in Pixeln an. Ein Attribut gilt immer für zwei Seiten gleichzeitig.
hspace Damit wird der Freiraum nach oben und nach unten verändert. vspace Damit wird der Freiraum nach links und nach rechts verändert.
Wenn man dem Browser des Betrachters mitteilen will, welche Größe ein Bild hat, reserviert er den entsprechenden Platz für dessen Darstellung und fährt mit dem Aufbau des restlichen Textes fort, während die Grafiken ebenfalls übertragen werden. Die entsprechenden Werte lassen sich mit faste jedem Grafikverabreitungsprogramm herausfinden.Dies geschieht mit den Attrbuten width und height.
width Legt die Breite des Pics fest height Legt die Höhe des Pics fest
-> bild2.htm Beim Ausprobieren dieses Beispiels ist darauf zu achten, daß sich die Datei bild.gif im selben Verzeichnis befindet. Nun noch ein paar Worte zum grafischen Layout: Ab und zu sollte man die Grafiken, die man abbilden will, mit einem guten Grafikprogramm überarbeiten. Es sollte zum Beispiel vermieden, daß sich die Grafik und die Textfarbe oder der Hintergrund nicht irgendwie stechen. Wenn man ein großes, einzelnes Bild hat, lohnt es sich, dem Betrachter erst eine kleinere Version oder einen Ausschnitt des Bildes zu zeigen. Durch einen Extra-Klick kann der User dann das ganze Bild angezeigt bekommen. Außerdem ist das Web kein Selbstbedienungs- laden für Pics. Man sollte schon gut gucken, wo man seinen Bilder herholt.
Ich hoffe, es hat euch Spaß gemacht,
Euer Schnurfel^Batsch __________________________________ eMail: BenjaminTriebe@t-online.de INet: http://home.pages.de/~schnurfel
zurück zum InhaltHallo, Ihr Coder!
Da dies ja ein Groupmag der Codergroup Cyberdream ist, will ich auch mal was über das Programmieren schreiben. Und zwar in der MS-DOS (ab Version 5) beigelegten Sprache QBasic (wer kennt sie nicht :) ).
Ich möchte ein Programm vorstellen, daß ich neulich programmiert habe. Es gibt Texte im Bildschirmmodus 13 farbig aus. Nun wollte ich nicht jedes Zeichen eines Textes einzelnd anders farbig ausgeben, es kam also nur pixelweise in Frage. Am besten gefällt es mir, wenn die einzelnen Spalten jeweils andere Farben haben. Damit der Text dann aber nicht zusammengewürfelt aussieht, mußten die Farben so gewählt werden, daß sie auch zueinander paßten. Am leichtesten erfährt man das mit diesem kleinen Programm:
SCREEN 13 FOR farbe = 0 TO 255 COLOR farbe PRINT farbe NEXT
Nach dem Start werden einem dann die Farbnummern in ihren Bildschirm- farben angezeigt. Nun muß der Farbwert der ersten Spalte gewählt werden, der jeweils nach 8 Spalten wieder aktiviert wird, da im Modus 13 jeder Buchstabe eine Breite von 8 Pixeln hat. Dieser Wert wird in der Variablen Farbe2% gespeichert. Die Farbnummer des Originals ist in der Variablen Farbe% gespeichert.
Zunächst einmal wird der Originaltext ausgegeben. Er ist in der Variablen Text$ gespeichert. Danach werden die Koordinaten des ersten Pixels, der untersucht werden soll, gewählt, ebenso wie die Koordinaten des letzten Pixels. Die Y-Koordinate des ersten und des letzten Pixels in einer Pixelspalte werden dann in eine FOR...NEXT-Schleife einge- bunden, da ja jeder Pixel einer Spalte kopiert werden soll, danach werden die X-Anfangs- und EndKoordinaten einer Pixelzeile in eine FOR...NEXT-Schleife eingebunden, weil ja auch jeder Pixel einer Zeile kopiert werden soll.
Nun werden die einzelnen Pixel nach 100 Pixeln weiter unten in einer anderen Farbe kopiert. Ich denke, den Rest versteht Ihr auch ohne meine Kommentare.
Hier also das Programm:
SCREEN 13 'Bildschirmmodus 13 (VGA/256 Farben) INPUT "Farbattribut: ", Farbe% 'Farbe des Originals wählen (1-255) Farbe2% = 31 'Anfangsfarbe der Kopie CLS COLOR Farbe% 'gewählte Farbe einschalten Text$ = "Willkommen auf M*A*R*S!!!" LOCATE , 20 - LEN(Text$) / 2 'Für zentrierte Textausgabe PRINT Text$ 'Text schreiben FOR x% = 0 TO 319 'x%=Spaltenvariable von 0 bis 319 Farbe2% = Farbe2% + 1 'Farbe der Spalte um 1 erhöhen IF Farbe2% = 39 THEN Farbe2% = 31 'Falls Farbe dann zu hoch, dann ' wieder herunterschalten FOR y% = 0 TO 15 'y%-Koordinate der Zeile punkt% = POINT(x%, y%) 'Pixel-Farbe ermitteln IF punkt% = Farbe% THEN 'Falls Pixelfarbe=gewählter Farbe, PSET (x%, y% + 100), Farbe2% ' dann Pixel weiter unten in neuer ' Farbe setzen END IF NEXT y% NEXT x% SLEEP CLS
Ihr braucht das Programm nicht abschreiben, es liegt M*A*R*S auch im *.BAS-Format bei. Bei Fragen, Verbesserungsvorschlägen und so weiter, und so weiter, könnt Ihr mir ja im nächsten M*A*R*S berichten :) !
Viel Spaß noch,
Muffin/Cyberdream!
zurück zum InhaltHallo, Ihr Programmierer!
In der Computerlitteratur-Ecke in Karstadt bin ich auf ein sensationelles Buch gestoßen: "Turbo Pascal 7.0 - DAS KOMPENDIUM". Ich sah es mir natürlich sofort an. Als ich auf den Preis sah, habe ich es dann sofort gekauft! Aber dazu später.
Das Buch ist gut und übersichtlich eingeteilt: Im erste Buchteil werden der TP7-Editor und die Grundfunktionen der integrierten Entwicklungs- umgebung behandelt. Ich finde, daß dieser Teil ruhig übersprungen werden kann. Wer schon mal einen Editor wie den MS-DOS-Editor gesehen und bedient hat, hat keinerlei Probleme mit dem TP-Editor, oder?!
Der zweite Teil handelt von den notwendigen Einzelheiten des Programmierens. In ihm werden so etwas wie Kontrollstrukturen, Units, Prozeduren et cetera erläutert. In diesem Teil lernt man schon, einige kleine Programme zu schreiben, ebenso wie Prozeduren, Funktionen und Units. Auserdem wird der Einbau von anderen Dateien besprochen.
Der dritte Teil befaßt sich schon mit Themen wie: Programmierung von Menüführung, speicherresidente Programme, Verwendung von Maus und Joystick, Grafikprogrammierung ... ! Wirklich sehr zu empfehlen!
Der vierte und letzte Teil handelt von dem Programmieren mit Turbo Vision. Dazu kann ich aber noch nicht mehr sagen (bis dahin habe ich noch nicht gelesen. :)).
Alle Beispielprogramme sind auf Diskette (3.5") dem Buch beigelegt. Das einzige, was noch fehlt, ist TP7! Ich habe nur die Version 6.0, aber die Grundlagen sind da doch gleich, womit das Buch auch sehr viel für TP6.0- Programmierer bietet. (Außerdem werde ich mir TP7 sowieso zulegen!).
Aber jetzt kommt der Hammer: das Buch kostet nur 39.95 DM!!! Immerhin hat es knapp 700 Seiten und das Format eines dicken Data Becker- Wälzers!! Also, zuschlagen!
Hier nochmal alle Daten:
Titel : Turbo Pascal 7.0 - Das Kompendium Autoren : Winfried Kassera/Volker Kassera Verlag : Markt&Technik ISBN : 3-8272-5266-4 Preis : DM 39,95; öS 292,-; sFr 37,- Beilage : Diskette (3.5") mit Programmbeispielen
Systemanforderung: PC/AT oder Kompatible mit mindestens 640k Arbeitsspeicher MS-DOS ab Version 3.0, Turbo Pascal 7.0 oder Borland Pascal (auf Begleitdiskette nicht enthalten!)
VORSICHT: EINMALIGE SONDERAUSGABE!!!
Bis denne,
Muffe!
zurück zum Inhalt(c) 1999 by Muffin
Objektorientierte Programmierung, welcher Programmierer hat diesen Begriff noch nicht gehört? Hinter ihm versteckt sich eine völlig andere Programmier- methode als die herkömmliche rein imperative Arbeitsweise mit vielen neuen Vorteilen. In Sprachen wie C++ tritt sie sogar in den Vordergrund. Doch leider erfordert sie eine große Portion Umdenken. Aber ist es nötig, extra für die OOP (Abkürzung der Objektorientierten Programmierung) C++ zu lernen? Nein! Wie Ihr auch in Turbo Pascal effektiv mit dieser neuen Programmiertechnik coden könnt, daß lehrt Euch dieser kleine Kurs.
Ihr solltet allerdings die grundlegenden Befehle und Funktionen von Turbo Pascal kennen, sonst müßte ich zu weit vorne anfangen. Beispielsweise sollte das Arbeiten mit RECORD bekannt sein. Außerdem ist Turbo Pascal ab Version 5.5 von Nöten.
Vorweg möchte ich ein Beispiel für die Denkweise in der OOP nennen. Stellt Euch vor, Ihr wollt ein Programm schreiben, daß zwei verschiedene Strings an zwei verschiedenen Stellen abwechselnd schreibt und löscht. Ein normales Prog sähe in etwa so aus:
PROGRAM Beispiel_01; USES crt; VAR x1, x2, y1, y2, i: byte; text1, text2 : string; BEGIN x1:=10; y1:=10; x2:=40; y2:=5; text1:='Batsch - das'; text2:='neue DiskMag!'; REPEAT GotoXY(x1,y1); Write(text1); Delay(1000); GotoXY(x1,y1); FOR i:=0 TO length(text1) DO BEGIN Write(' '); END; GotoXY(x2,y2); Write(text2); Delay(1000); GotoXY(x2,y2); FOR i:=0 TO length(text2) DO BEGIN Write(' '); END; UNTIL KeyPressed; END.
Das ist ein ziemlich kurzes Programm, aber das war ja zu erwarten. Außerdem ist es relativ übersichtlich. Aber wäre es nicht viel schöner, wenn Ihr ein- fach sagen könntet "Ersten Satz schreiben, jetzt löschen, jetzt alles mit dem zweiten Satz und immer wieder wiederholen!", ohne Euch um die einzelnen Prozeduren für dieses Vorhaben kümmern zu müssen, sie sozusagen "für Euch arbeiten lassen"? Tja, das ist schon ein erster Schritt in die OOP! Diese "Arbeiter" nennt man übrigens "Objekte" und seine Prozeduren "Methoden".
Im ersten Teil dieses Kurses wollen wir jetzt ein solches objektorientiertes Programm schreiben.
Tja, und los geht_s :) ! Es gibt ein Datengebilde namens OBJECT, das außer den Daten auch (Manipulations-) Methoden (das sind Prozeduren und Funktionen) be- inhaltet. Das klingt sehr kompliziert, ist es aber gar nicht :). Hier ein Bei- spiel:
TYPE Zeichen=Object x,y: Byte; (* Koordinaten des Zeichens *) t : String; (* das Zeichen *) PROCEDURE Ini(pt: string; px,py: byte); PROCEDURE Print; PROCEDURE Loesche; END;
Dieses (Teil-) Programm soll dafür Sorge tragen, ein Zeichen an einer bestimm- ten Stelle auf den Bildschirm zu schreiben oder zu löschen. Es ist ein Objekt.
Ein Objekt wird immer im Block TYPE deklariert. Hinter dem Typbezeichner (hier: Zeichen) folgt wie gewohnt ein Gleichzeichen ('=') und anschließend das Wort OBJECT (ohne Semikolon!!!). Darunter werden die objekteigenen Daten als sogenannte Objektfelder wie Variablen deklariert. Darauf folgt wie im INTER- FACE-Teil einer Unit die Kopfzeilen der objekteigenen Prozeduren und Funktio- nen. Das nennt man im übrigen auch eine Forward-Deklarierung, aber das nur so nebenbei. Abgeschlossen wird alles mit "end;". Spätestens jetzt hast Du wohl die Ähnlichkeit eines Object-Typs zu einem Record-Typ erkannt, oder?!
Die Handlungen, die das Objekt beinhalten soll, werden durch seine Methoden bestimmt, also von Prozeduren und Funktionen, die immer direkt hinter dem obi- gen Interface-Teil stehen.
In der ersten Methode "Ini" werden den Objektfeldern "x", "y" und "t" die übergebenen Werte "px, "py" und "pt" zugewiesen.
PROCEDURE Zeichen.Ini(pt: string; px,py: byte); BEGIN t:=pt; x:=px; y:=py; END;
Um zu erkennen, daß die Metode "Ini" dem Objektbezeichner "Zeichen" gehört, muß dieser und ein Trennpunkt vor dem Methodennamen stehen. Die Parameter in der Kopfzeile dürfen nicht die gleichen Bezeichner haben wie die Felder des Objekts. Deshalb habe ich hier jeweils ein "p" vorangestellt.
Die weiteren Methoden sind wiefolgt:
PROCEDURE Zeichen.Print; BEGIN GotoXY(x,y); Write(t); END;
PROCEDURE Zeichen.Loesche; VAR i: Byte; BEGIN GotoXY(x,y); FOR i:=0 TO length(t) DO BEGIN Write(' '); END; END;
Eine typische Eigenschaft eines Objekts soll hier kurz genannt werden: die Datenfelder (hier: "x", "y" und "ch") sind nur den Methoden des Objekts "Zeichen" zugänglich. So können sie nicht überschrieben werden (auch "Daten- kapselung" genannt!).
Um das "zusammengebaute" Objekt "Zeichen" auch benutzen zu können, brauchen wir jetzt nur noch ein Exemplar von ihm. Diese "Instanz" wird ganz normal un- ter VAR deklariert:
VAR text1, text2: Zeichen;Ç1
Tja, das waren zwei Instanzen, aber egal. Die üblichen Variablen könnt Ihr übrigens dazuschreiben.
Diese Instanzen müssen jetzt nur noch initialisiert und mit Ihren einzelnen Methoden aufgerufen werden, Hier folgt das Hauptprogramm:
BEGIN ClrScr; text1.Ini('Batsch - das',10,10); text2.Ini('neue DiskMag!',40,5); REPEAT text1.Print; delay(1000); text1.Loesche; text2.Print; delay(1000); text2.Loesche; UNTIL KeyPressed; END.
In der zweiten Zeile seht Ihr, wie die Instanzen initialisiert werden. Es wird erst der Instanzname, dann ein Trennpunkt und dann die Methode des Objekts geschrieben, selbstverständlich mit den jeweiligen Parametern. Jetzt muß man dem Objekt nur noch sagen, was es zu tun hat, wie es in Zeile 4 und 5 steht. Dies geschieht genauso, wie eben bei der Initialisierung (Instanzname.Methode) beschrieben.
Das ganze Programm sieht dann in etwa so aus:
PROGRAM Beispiel_02; USES Crt; TYPE Zeichen=Object x,y: Byte; (* Koordinaten des Zeichens *) t : String; (* das Zeichen *) PROCEDURE Ini(pt: string; px,py: byte); PROCEDURE Print; PROCEDURE Loesche; END;
PROCEDURE Zeichen.Ini(pt: string; px,py: byte); BEGIN t:=pt; x:=px; y:=py; END;
PROCEDURE Zeichen.Print; BEGIN GotoXY(x,y); Write(t); END;
PROCEDURE Zeichen.Loesche; VAR i: Byte; BEGIN GotoXY(x,y); FOR i:=0 TO length(t) DO BEGIN Write(' '); END; END;
VAR text1, text2: Zeichen;
BEGIN ClrScr; text1.Ini('Batsch - das',10,10); text2.Ini('neue DiskMag!',40,5); REPEAT text1.Print; delay(1000); text1.Loesche; text2.Print; delay(1000); text2.Loesche; UNTIL KeyPressed; END.
Und was sieht man? Es ist länger als das erste Programm! Toll, was? Äh, Moment mal, 'länger'? Ich dachte, Objektorientierte Programmierung ist so toll, warum ist es dann länger? Keine Sorge, wie Ihr auch seht, ist das Hauptprogramm tat- sächlich kürzer und vor allen Dingen: Klarer struktuiert! Wenn man jetzt auch noch die Methoden und das Objekt in eine Unit einbinden würde (wie das geht, erfahrt Ihr in einem der nächsten Teile), wäre das Programm doch tatsächlich nach dem Motto: "Ersten Satz schreiben, jetzt löschen, jetzt alles mit dem zweiten Satz und immer wieder wiederholen!". Und wenn man die Instanzen nicht initialisieren müßte, sondern Objektkonstanten nähme (siehe einen späteren Kursteil :), wäre das Programm sensationell einfach und kurz gehalten! Und das Beste: es wäre immer noch voll ausbaufähig!!! Andere Objekte können deklariert werden und die Funktionen vom Objekt "Zeichen" erben und so weiter und so wei- ter... ! Alles das werdet Ihr auch bald zu schätzen wissen, doch leider müßt Ihr Euch noch bis zum nächsten Kurs gedulden ;) !
Aber bis dahin schreibt doch mal noch ein paar Proggys mit OOP! Hier eine An- regung: schreibt das obige Programm so um, daß es auch Texte in verschiedenen Farben anzeigen kann.
Also, bis zum nächsten Mal und viel Spaß beim Coden
wünscht Euer Muffin.
zurück zum Inhalt