Homepage-Tutorial
Description
Homepage-Tutorialvon Johann Eckertwww.johann-eckert.deKopie für nicht-gewerbliche Zwecke erlaubt, allerdings nur mit Nennung der URL!Seite 1/13 www.johann-eckert.de © Johann Eckert 2005I. Grundlagen & Einführung in HTMLMit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt!Bevor man mit dem Erstellen von Internet-Seiten anfängt, benötigt man ein geeignetes Programm dafür.Es gibt zwar sogenannte WYSIWYG-Editoren (WYSIWYG = WhatYouSeeIsWhatYouGet) wie z.B. Frontpage* oder den Dreamweaver*, allerdings klickt man sich in diesen Programmen eher die Seite zusammen und kann auch nicht die Möglichkeiten von HTML* voll ausschöpfen.Daher empfehle ich, ganz normale Text-Editoren zu verwenden. Hier gibt es sogar solche, die einen beim Schreiben einer HTML-Seite durch Hervorheben der Befehle ("Syntax-Highlightning") oder eine eigene Vorschau-Funktion unterstützen.Ich selbst benutze den kostenlosen Editor Textpad, viele Profis verwenden auch Phase 5.Weiterhin benötigt man ein Programm, um die erstellten Seiten anschauen zu können, nämlich einen sogenannten Browser*.Solch ein Programm ist meist schon auf dem Betriebssystem installiert, unter Windows ist es der "Internet Explorer", unter Linux z.B. der "Konqueror".Weit verbreitet sind auch die Mozilla-Browser, wie z.B. "Firefox".Der grundlegende Aufbau einer jeden HTML-Seite sieht so aus: ...
Informations
| Publié par | Oslu |
| Nombre de lectures | 79 |
| Langue | Deutsch |
Extrait
Homepage-Tutorial
von Johann Eckert www.johann-eckert.de
Kopie für nicht-gewerbliche Zwecke erlaubt, allerdings nur mit Nennung der URL! Seite 1/13 www.johann-eckert.de © Johann Eckert 2005
I. Grundlagen & Einführung in HTML Mit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt! Bevor man mit dem Erstellen von Internet-Seiten anfängt, benötigt man ein geeignetes Programm dafür. Es gibt zwar sogenannte WYSIWYG-Editoren (WYSIWYG = hatYouSeeIsWhatYouGet) wie z.B. Frontpage * oder den Dreamweaver * , allerdings klickt man sich in diesen Programmen eher die Seite zusammen und kann auch nicht die Möglichkeiten von HTML * voll ausschöpfen. Daher empfehle ich, ganz normale Text-Editoren zu verwenden. Hier gibt es sogar solche, die einen beim Schreiben einer HTML-Seite durch Hervorheben der Befehle ("Syntax-Highlightning") oder eine eigene Vorschau-Funktion unterstützen. Ich selbst benutze den kostenlosen Editor Textpad , viele Profis verwenden auch Phase 5. Weiterhin benötigt man ein Programm, um die erstellten Seiten anschauen zu können, nämlich einen sogenannten Browser * . Solch ein Programm ist meist schon auf dem Betriebssystem installiert, unter Windows ist es der "Internet Explorer", unter Linux z.B. der "Konqueror". Weit verbreitet sind auch die Mozilla-Browser, wie z.B. "Firefox". Der rundle ende Aufbau einer eden HTML-Seite sieht so aus:
Die erste, ziemlich kompliziert aussehende Zeile beschreibt, wie das Dokument vom Browser interpretiert * werden soll (es gibt nämlich nicht nur das HTML, sondern verschiedene Arten). Im HTML kann man generell sagen, dass eine Anweisung in eckige Klammern gesetzt wird, z.B. <table> und um einen Slash * (/) erweitert wird, um sie wieder zu beenden, z.B. </table . > Die zweite Zeile, zusammen mit der letzten, bezeichnet also, wo der HTML-Code anfängt und wo er wieder aufhört. Hier gibt es ein paar Ausnahmen, wo die Anweisungen nicht wieder geschlossen werden müssen, wie z.B. <img> (Bild einbinden) oder <br> (Zeilenumbruch). Die Anweisungen, die man im HTML benutzt, werden übrigens "Tags" (sprich: tägs) genannt!
Als letztes erkennt man in diesem Grundschema die Elemente <head und <body>. > Im Head (oder auch "Kopf") einer Internetseite stehen Informationen, die meist auf die Darstellung der Seite gar keine Auswirkungen haben, wie z.B. Informationen für die Suchmaschinen * . Der Body ist dann der eigentliche Inhalt der Seite. Hier werden die Informationen hereingeschrieben, die letztendlich auf der Seite angezeigt werden sollen. Dies kann man testen, indem man in den Body einen kleinen Text schreibt, die Datei s eichert und sie im Browser aufruft:
Oder man kann den Browser auffordern, das lokale Email-Programm * zu starten, um eine Email zu entwerfen:
Natürlich kann man auch auf komplett andere Internet-Seiten verweisen, indem man im href-Attribut * a=anchor, href="H er-Reference" die kom lette URL an ibt:
Dieser Link-Text kann einfach in den normalen Text mit reingeschrieben werden, z.B. so:
Um nun Links einzubauen und die Seite so mit anderen Seiten zu verknüpfen, wird folgender, ganz einfacher Code verwendet.
füopieK run sgnneN tim t,ublainrdleal wZcieh receekichtr nerbl-gewE nnrekc02 t50ck-et.er© dehaJo e/331ww.wojahnnung der URL!Seit
Um den Text zu formatieren, können z.B. Tags wie <b> (fett/bold), <i> (kursiv/italic) oder <u> (unterstrichen) verwendet werden. Bilder können mit dem <img>-Tag eingebunden werden, z.B. so: Letztendlich kann man fast alle Tags miteinander kombinieren, um z.B. ein Bild zu verlinken. Alle HTML-Tags hier aufzuführen und zu erklären, wäre aber zu viel des Guten. Deshalb verweise ich an dieser Stelle auf eine sehr nützliche und umfangreiche Seite, wo man Informationen, Erklärungen und Beispiele finden kann: SelfHTML Ein kleiner Tipp noch: Wenn man sich den HTML-Code einer fremden Internet-Seite anschauen möchte, kann man dies jederzeit tun. Man findet ihn im Browser z.B. unter "View" -> "Sourcecode" oder auch "Ansicht" -> "Quelltext anzeigen" (je nach Browser unterschiedlich). Um überprüfen zu lassen, ob der geschriebene Code korrekt ist, kann man das online tun: W3C-Validator Hier wird zwar ziemlich hart geprüft und es gibt auch einige - meiner Ansicht nach -unsinnige Meldungen, aber oft findet man verborgene Fehler oder den Grund, warum die Seite im einen Browser funktioniert aber nicht im anderen. Wenn es noch Fragen gibt, sind diese natürlich im Forum herzlichst willkommen! Letztendlich gibt es jedoch nur eines: Üben, üben, üben! :-)
Schaut man sich nun die gesamte HTML-Seite an, dann könnte das Ergebnis etwa so aussehen:
Frontpage: Programm von Microsoft zum Erstellen von Webseiten Dreamweaver: Programm von Macromedia zum Erstellen von Webseiten HTML: Abkürzung für HyperTextMarkupLanguage Browser: to browse (engl.) = durchstöbern, durchsuchen interpretieren: hier: Umsetzung vom Code zu dem was man sieht Slash: Schrägstrich, auf der dt. Tastatur mit Umschalt + 7 Suchmaschine: z.B. Google, durchsucht das Internet nach Informationen Attribut: Eigenschaft Email-Programm: z.B. Outlook oder Messenger
II. Worauf man im WWW achten sollte Mit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt! Wie überall, gibt es auch im Netz so etwas wie Sitten und Bräuche. Es ist zwar vieles möglich, jedoch sollte man immer auf seine Zielgruppe * achten und seine Webseite dem entsprechend gestalten. Folgende Grundsätze sollte man so gut es geht beherzigen: ∙ Wähle das geeignete Bild-Format Im Internet sind die Formate GIF, JPEG und PNG am weitesten verbreitet. Sie alle haben Vor- und Nachteile: GIF sollte man bei genauen Zeichnungen verwenden oder wenn ein transparenter Hintergrund benötigt wird. Nachteil: Es können nur bis zu 256 Farben verwendet werden! JPEG: Am besten geeignet für Fotos, ungeeignet für "pixelgenaue" Zeichnungen, keine Transparenz möglich. PNG vereint die Vorteile von GIF und JPEG, konnte sich bisher aber kaum im Internet durchsetzen. ∙ Gib die richtige Bild-Größe an Im <img>-Tag kann man durch die Attribute width="..." und height="..." die angezeigte Größe des Bildes bestimmen. Das Bild selbst sollte also möglichst nicht viel größer sein als es später angezeigt wird. Es braucht also um einiges mehr Ladezeit * , wenn man ein riesiges Foto nur in einer Größe von 160*120 Pixeln anzeigt. ∙ Urheberrecht Wenn man fremde Fotos oder generell Bilder von anderen Webseiten einbindet, sollte man sich immer bewusst sein, dass man vielleicht gegen das Urheberrecht verstößt. Am besten ist es, wenn man den jeweiligen Webseiten-Betreiber um Erlaubnis fragt, dann kann nichts passieren.
20t 05nnE kcreed ©oJah-eckert.w.johannew-gblerheicZw eipoüf n rthciKitSeL!URww135/e nneN tim red gnurdinallenur gs receek,t albu
∙ ∙ ∙
Die sogenannten "Counter" zählen die Besucher der Webseite. Doch meistens interessiert das den Besucher gar nicht, zumal eine solche Zahl ohne weiteres manipuliert werden kann. Zudem muss ein Counter meist von einer anderen Seite geladen werden, was die Ladezeit immens erhöht.
∙
50 KB-Grenze Eine Internet-Seite sollte übersichtlich bleiben und außerdem schnell genug geladen werden können. Dies erreicht man am besten, wenn man eine Seite nicht mehr als ca. 50 KB groß macht. Hierzu rechnet man einfach die Größe der HTML-Datei und die Größe der eingebundenen Bilder zusammen. Menü links oder oben Es hat sich im WWW so eingebürgert, dass das Menü einer Webseite - auch Navigation genannt - am linken oder oberen Seitenrand befindet. Das hat auch den Grund, dass man dort normalerweise als erstes hinguckt (man liest ja auch von links nach rechts). Angemessene, konträre * Farben Eine große Aufgabe ist es, die richtige Farbzusammenstellung zu finden. Generell kann man sagen: hell=freundlich, dunkel=mysteriös. In den Weiten des Internets findet man noch viele Informationen dazu unter dem Stichwort "Farbenlehre". Achtung: Blau-Rot ist eine gefährliche Kombination! ;-) Benutze Frames * nur wenn nötig Frames sind inzwischen etwas aus der Mode gekommen. Dies hat v.a. den Grund, dass Unterseiten manchmal nur ohne das dazugehörige Navigations-Menü aufgerufen werden (z.B. über Suchmaschinen). Ein Vorteil von Frames ist, dass der Inhalt nicht neu geladen werden muss, wenn eine andere Unterseite angewählt wird. Bei den Frames sind die Meinungen der Webmaster sehr zweigeteilt! Nur normale Schriftarten Verwende nur die Standard-Schriftarten wie z.B. "Arial", "Helvetica", "Times New Roman" oder "Comic Sans MS . " Es mag vielleicht besser mit einer exotischen Schriftart aussehen, jedoch können diese nur angezeigt werden, wenn sie auch auf dem System des Homepage-Besuchers installiert sind. Vermeide Plugins * Vermeide es, Elemente auf der Seite zu verwenden, die Plugins des Browsers benötigen (z.B. Flash oder Java). Dadurch entsteht eine längere Ladezeit und außerdem hat nicht jeder das passende Plugin installiert! Vermeide Besucherzähler
∙ ∙ ∙
III. CSS & JavaScript Mit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt! CSS Mit einer Technik namens "CSS" * kann man das Aussehen des HTML-Dokuments bzw. der HTML-Dokumente beeinflussen. So ist es z.B. möglich, mit einer Anweisung allen Links der Seite die gleiche Farbe zu geben. Der Grund, warum das besser ist, als es direkt in den HTML-Code zu schreiben ist: Wenn man eine CSS-Datei anlegt, die man auf allen HTML-Seiten einbindet, hat man zu einen kleinere und somit übersichtlichere Seiten (vom Quellcode her gesehen) und zum anderen lässt sich mit einem Schlag z.B. die Farbe aller Links ändern. CSS kann auf folgende Weisen in das HTML-Dokument eingebunden werden: Im <head> der Seite:
Innerhalb von HTML-Tags können auch Anweisungen stehen (dies ist dann nicht mehr im <head> sondern im <body>-Bereich):
∙ Vermeide optimierte Seiten Oft liest man "Optimized for 1024*768" oder "Optimiert für den Microsoft Internet Explorer ab Version 6.123". Versuche, deine Seiten so zu gestalten, dass sie in allen gängigen Browsern und Auflösungen funktionieren! Zielgruppe: hier: Die zukünftigen Webseiten-Besucher Ladezeit: Spielt in heutigen DSL-Zeiten kaum noch eine Rolle Konträr: mit möglichst viel Kontrast, z.B. weiß-blau oder rot-gelb Frames: engl. "Rahmen", Details siehe SelfHTML Plugin: Erweiterung, muss extra heruntergeladen und installiert werden
Als externe * Datei (diese Zeile wird ebenfalls in den Head geschrieben), hier werden die CSS-Anweisungen dann einfach in die Datei "style.css" geschrieben:
bliche ht-gewerüf rn ciKpoei t er0520www.johann-ecker.ted ©oJahnnE kcNet mir deg unnneS!LRU r31/7 etike Zwecubt,erlaeldr la unnisg
Die CSS-Anweisun en selbst haben die Form:
Dieses Beispiel würde bewirken, dass alle Links rot dargestellt werden und der Hintergrund des Dokuments hellgelb ist. Dies und vieles mehr kann man mit CSS machen.
also zum Beis iel:
oder über eine externe Datei:
JavaScript JavaScript-Programmcode besteht aus Elementen wie Zuweisungen * , If-Anweisungen oder Schleifen. Es gibt Variablen und Funktionen, genau wie in ++ anderen Programmiersprachen (z.B. C , Visual Basic oder Basic). Mit JavaScript ist es möglich, Internetseiten interaktiv * zu gestalten oder die Eigenschaften der HTML-Elemente im Nachhinein zu ändern. JavaScript sollte man übrigens nicht mit der Programmiersprache Java verwechseln (das wäre fast wie ein Vergleich von Gummi und Gummibärchen ;-)). Zunächst zur Einbindung von JavaScript-Code: Ähnlich wie CSS lässt sich JavaScri t im Head einbinden:
Hier wird der Code nur ausgeführt, wenn man den Maus-Cursor über den Link bewegt. Aber Achtung: Nicht alle Besucher im Internet haben JavaScript in ihrem Browser aktiviert! Deshalb sollte man seine Seite so gestalten, dass sie genausogut ohne JavaScript auskommen (also als kleines Schmankerl, wie der Bayer sagen würde ;-))! * Es gibt die Möglichkeit, im HTML einen Bereich zu definieren, der nur angezeigt wird, wenn im Browser das JavaScri t deaktiviert ist:
Innerhalb von HTML-Tags können auch Anweisungen stehen, allerdings gibt es hier keinen einheitlichen Befehl, sondern es gibt nur bestimmte Funktionen, z.B.:
IV. FTP, Webspace, Domains Mit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt! Domains Es gibt viele Anbieter im Internet, die es anbieten, eine Domain (zu deutsch: Domäne) in der Form www.meinname.de * für sich reservieren zu lassen. Bei den Top-Level-Domains * (TLD) wird unterschieden in länderspezifische * Domains, z.B. .de/.at/.es/.it und in internationale Domains, z.B. .com/.net/.org und sei neuestem .info/.name/.museum usw. Die Angebote der Provider reichen hierbei von der 19-Cent-Visitenkarte zu "Profi-Webpaketen" für unzählige Euros. Welches Angebot für einen selbst geeignet ist, muss man letztendlich selber entscheiden. Als erstes sollte man sich klar machen, was für Ansprüche das Angebot erfüllen sollte. (PHP, Webspace, Domain, Email-Konten, ...) Für eine kleine Homepage, wo sich kaum etwas ändert und wo keine Skripte (außer JavaScripts) im Einsatz sind, genügt ein kleines Paket, z.B. ohne PHP. Sobald allerdings ein Gästebuch-Skript auf der Homepage installiert wird, benötigt man die Unterstützung der jeweiligen Sprache (also z.B. PHP/Perl/Python). Es empfiehlt sich also, sich vor einer Domain-Anmeldung (realistisch) zu überlegen, was man später auf seiner Webseite haben möchte. Eine sehr gute übersicht über sehr viele Anbieter hat die Webhostlist . Hier gibt es auch eine Suche, wo man die gewünschten Anforderungen eingeben kann. Nur Vorsicht vor "Billig-Hostern" * : Nachdem ich ca. 3 mal den Anbieter wechseln musste, bin ich nun seit langem bei All-Inkl , die ich guten Gewissens weiterempfehlen kann!
CSS: Abkürzung für "Cascading Style Sheet" extern: hier: eigene, einzelne Datei Zuweisung: Einer Variablen einen Wert geben interaktiv: mit Aktionen des Surfers Bayer: ich? nein, ich bin kein Bayer ;-)
Welche riesige Anzahl von Befehlen und Methoden es bei JavaScript gibt, kann sich die umfassende Dokumentation von SelfHTML anschauen!
nn EJohade© ert.50 t02kcre,t laeldrnisg nur mit Nennung red!LRUtieS/9 eww13jow.nnhack-eopieKr n füweg-thciehcilbrekeecZw ublaer 
www.meinname.de: Am besten schauen, ob die gewünschte Domain noch frei ist! Top-Level-Domain: Der "Zipfel" einer Adresse, z.B. .de oder .com länderspezifisch: zu einem bestimmten Land gehörig, z.B. .de = Deutschland Billig-Hoster: Billig ist nicht immer schlecht, aber meist bekommt man, was man bezahlt Webspace: Speicherplatz im Internet, nicht auf dem eigenen Computer FTP: keine Partei, sondern die Abkürzung für FileTransferProtocol Tauschbörse: z.B. Edonkey, Emule oder KaZaA Chat-Programm: z.B. ICQ, AIM, MSN- oder Yahoo-Messenger
Zur Erklärung: "Internet" bedeutet für die meisten Leute: Das was man im Browser sieht. Es gibt aber auch andere Möglichkeiten, eine Internetverbindung zu benutzen (das kennt man z.B. über diverse Tauschbörsen * oder Chat-Programme * ). In diesem Fall wird eine andere Methode benutzt, namens FTP * . Um eine Verbindung über FTP herzustellen, benötigt man ein FTP-Programm, von denen es aber viele kostenlos im Netz herunterzuladen gibt. Ich kann LeechFTP empfehlen, jedoch kann sich natürlich jeder eines nach seinem Geschmack auswählen. ;-) Meistens genügt es, wenn man in dem FTP-Programm dann einfach die Dateien in das Verzeichnis seines Webspaces hochlädt, damit sie unter der Domain im Browser sichtbar sind! Die Details, was man beachten muss, hängt allerdings vom jeweiligen Provider ab, also am besten dort nachfragen wenn es Probleme gibt!
Webspace & FTP Bei der Wahl des Anbieters sollte man darauf achten, dass man genügend Webspace * zur Verfügung hat. Eine Homepage mit 20 HTML-Seiten und 40 Bildern in der Größe 800*600 benötigt ungefähr 10-15 MB an Speicherplatz. Sobald man sich bei einem Anbieter angemeldet hat, bekommt man normalerweise die Daten für den FTP-Zugang mitgeteilt, mit denen man auf seinen eigenen Webspace zugreifen kann. Das könnte z.B. so aussehen:
V. Programmier-Grundlagen / PHP Mit * gekennzeichnete Wörter sind am Ende des Kapitels erklärt! Zu aller erst sollte geklärt werden, was eigentlich PHP * ist: PHP ist eine Programmiersprache, die auf dem Webserver * läuft. Das heißt: Wenn ein Surfer eine Homepage besucht, auf der PHP-Skripte laufen, merkt er höchstwahrscheinlich gar nichts davon! Alles, was beim Computer des Surfers (genannt "Client") ankommt, ist nämlich kein PHP mehr, sondern nur noch HTML (und evtl. JavaScript, CSS und Bilder). PHP-Code sieht man auch nicht im Quelltext beliebiger Seiten. Der Code von PHP wird folglich nicht auf dem eigenen Computer ausgeführt. Wenn man also in PHP schreibt:
Dann gibt es Abfragen, wo ein bestimmter Teil des Programms nur dann ausgeführt wird, wenn eine Bedin un erfüllt ist:
Ein weiterer wichtiger Bestandteil einer jeden Programmiersprache sind die Schleifen. Das heißt, dass ein Teil des Programms wiederholt wird, bis eine Bedingung erfüllt ist. Es gibt mehrere Arten von Schleifen: Die "For-Schleife":
hier ist von Anfang an festgelegt, wie oft die Schleife durchlaufen wird.
dann kommt beim Client (Surfer, wenn er den Quellcode anschaut) nur das da an:
Nun zum Programmieren * selbst: Beim Programmieren gibt es zwar meist jede Menge von Befehlen, die man verwenden kann und die von Sprache zu Sprache unterschiedlich sind, jedoch hat so ziemlich jede Programmiersprache einige Grundstrukturen gemeinsam: Es ibt z.B. die einfache Aus abe von Text hier PHP :
werelbcin cithg-ie für Kopdrelsgni,tbula kelaer heecZw ncEektr2 005r URg deite L!Se rim unnnnu teN.drtkeecanoh Je©www31/11-nnahoj.
© 2010-2024 YouScribe