PC Basiswissen

Homepage: Programmiersprachen

 

Als ich begann mich mit dem Thema Internet und Hompage zu befassen, bekam ich von einem Profi den Rat, befasse dich gleich mit HTML, das ist einfacher und er hatte Recht.

HTML (Hypertext Markup Language) ist eine der Programmiersprachen in denen die Seiten geschrieben sind. Wie sieht das aus? Klicken sie einfach mal im Internet Explorer, (mit dem 8er und 9er geht´s jedenfalls), mit der rechten Maustaste in das Bild. Auf "Quellcode anzeigen" klicken. Dann erscheint der HTML Code dieser Seite. Kann sein der Code ist auf die Taskleiste gerutscht.

Dieser Code ist genau die Seite die sie vor sich sehen. Der Browser (Programm das diesen Code liest) wandelt den Code in ein lesbares Bild um.

 
Was brauche ich

Um Webseiten zu programmieren brauchen sie ein Programm in dem sie die Seiten erstellen. Grundsätzlich genügt ein Text Editor.

Der Programmcode wird einfach als Text erstellt und die Datei als html Dokument abgespeichert. Das ist aber nicht sehr komfortabel, da das Programm selbständig erstellt werden muss.

Einfacher geht es mit einem Programm für HTML Seiten Erstellung. Eine gutes kostenloses Programm ist der Phase 5 Editor

http://www.phase5.info/

Ein weiteres gutes und umfangreiches Programm ist Aptana Studio 3 allerdings nur in einer Englischen Version.

http://www.aptana.com/

Eines der besten Programme überhaupt (meine Meinung) ist der Dreamweaver von Adobe. Allerdings unbezahlbar (Orginalpreis von Adobe 534 € Stand 5/2012 und jetzt nur in Lizenz zu bekommen) Aber wenn sie einmal damit gearbeitet haben werden sie es verstehen. Schauen sie sich mal die Testversion an

http://www.adobe.com/de/products/dreamweaver.html

Ein gutes, und bezahlbares, deutschsprachiges Programm ist Mirabyte Webarchitect

http://www.mirabyte.com/de/

Das Internet bietet eine Vielzahl an Programmen und es muss ja nicht das teuerste sein, ich empfehle aber bevor sie eines kaufen, eine Testversion herunterzuladen um einfach mal auszuprobieren.

Das nächste was sie brauchen ist ein FTP (File Transfer Protokoll) Programm mit dem sie ihre Webseiten Up und Downloaden. Ein sehr gutes ist der FTP Uploader (kostenlos) http://www.ftp-uploader.de/index.php und Filezilla ebenfalls kostenlos http://www.filezilla.de/

Es gibt auch die Möglichkeit über Web-FTP, wird von Seitenanbietern angeboten, aber dazu brauchen sie immer eine Internetverbindung und das Laden kann etwas umständlicher sein.

Jetzt fehlt nur noch ein Anbieter (siehe dort) und ihrem Webprojekt steht nur noch eines im Weg. Die Seitenerstellung.

 
Wie wird es gemacht

Um es vorweg zu sagen es ist nicht einfach und nichts was sich in ein paar Tagen lernen lässt. Hier würde es den Rahmen sprengen und so gebe ich nur die Hinweise und keinen Programmierkurs.

Wollen sie es professionell angehen, empfehle ich Bücher, Kurse (Volkshochschule) oder ein Fernstudium. Ebenfalls nicht schlecht sind die Lernvideos von dieser Seite: http://www.video2brain.com/de/

Natürlich kostet es Geld aber dafür haben sie ein zufriedenstellendes Ergebniss. Man kann sich alles auch selbst beibringen, aber dieser Weg ist sehr schwierig und langwierig.

Wie sie vorgehen ist ihre persönliche Entscheidung und hängt davon ab was sie erreichen wollen.

Eine immer noch gute Quelle, wen auch etwas veraltet ist diese Seite: http://de.selfhtml.org/index.htm

Webseiten bestehen aus dem HTML Quellcode und dieser ist immer wieder überarbeitet worden und es gibt mehrere Versionen. Die Web Browser sind so eingestellt, dass sie fast alles lesen können.

Aber es gibt auch hier immer wieder Probleme und sie sollten Seiten immer mit verschiedenen Browsern testen.

Trotzdem sollten sie sich von Anfang an angewöhnen einen sauberen Quellcode zu schreiben nach den neuen Standards.

Es gibt ein Consortium welche sich mit den Standard befasst. http://www.w3c.de/about/overview.html

 
Weitere Programmiersprachen

Es gibt außer HTML noch weitere Programmiersprachen. Java ist sicher vielen ein Begriff, das ist eine interaktive Programmiersprache um Webseiten dynamischer gestalten zu können. Es gibt noch weitere Sprachen die bei komplexeren Webprojekten sicherlich notwendig sind wie PHP, Perl, CGI, Python. Zudem wird vielleicht auch der Einstieg in Datenbanken nötig dann benötigen sie weitere Sprachen wie MySQL.

Das alles soll sie nicht abschrecken, aber es zeigt auf, desto intensiver mit der Thematik gearbeitet wird desto mehr Wissen ist erforderlich. Alleine nur HTML ist schon sehr komplex und bietet sehr viele Möglichkeiten. Auf ein paar Grundlegende Befehle gehe ich hier ein.

Nehmen wir mal an sie sollen eine Webseite ihres Vereins betreuen. Das ist ein sehr guter Einstieg, da die Seiten bereits vorhanden sind und sie nur einige Änderungen wie, Termine, Namen und Telefonnummern, oder Bilder ändern sollen. Dazu müssen sie wissen was sich wo im Quellcode befindet.

 
Basiswissen

Der Aufbau einer Seite ist eigentlich sehr einfach klicken sie mal HIER und sie sehen eine einfache Webseite. Sie können sich den Code mit Kommentaren Hier als PDF Dokument ansehen.

Das gibt ihnen einen kleinen Überblick über den HTML Code. Dieser ist noch wesentlich komplexer und es gibt jede Menge an Befehlen aber trotzdem ist mit diesen Angaben eine Webseite erstellt (Weiter unten habe ich eine ausfürliche Seite dazu).

Der Kopf beinhaltet Angaben für die Browser und Angaben zur verwendeten HTML Variante. Außerdem Befehle zur Gestaltung der Seite. Diese Angaben mit der Endung css (Cascading Style Sheets) geben Vorgaben für Schriften und Farben. Außerdem können hier Angaben zu Objekten und ihrer Ausrichtung stehen.

Eine weitere Vielzahl an Möglichkeiten sind mit verschiedenen Befehlen möglich. Das gilt aber immer nur für die eine Seite. Ein Webprojekt aus mehreren Seiten ist auf diese Weise etwas umständlich. Stellen sie sich vor sie wollen die Hintergrundfarbe ändern oder eine Schriftgröße. Diese CSS kann man auch in einer seperaten Datei speichern. Die einzelnen Webseiten enthalten nur eine Referenz zu dieser Seite. Und wenn sie dort etwas ändern wird es auf allen Seiten übernommen.

 
Hintergrund und Texte

Hintergrundfarbe und Textfarben. Die Farbangabe in einem HTML Dokument wird in dem Hexadezimal Code angegeben. Der sieht in diesem Fall so aus: #33FF33. Jede Farbe hat einen anderen Code. Wie bestimme ich nun die Farbe. Web Editoren haben eine Farbtabelle die den Code einfügt, aber es geht auch anders. Nehmen wir mal an auf der Seite die sie betreuen befindet sich für die einzelnen Bereiche (Abteilungen z.B.) ein Schriftzug zur Navigation.

Mit den Schriften ist es so eine Sache. Es gibt tausende von Schriften aber wenn sie eine Schrift verwenden, die sie auf ihrem PC haben, heißt das noch lange nicht, das auch jeder andere diese besitzt. Deshalb wird bei anderen die Schrift so nicht dargestellt, es wird eine Ersatzschrift genommen. Die hat aber zur Folge, das die Darstellung sich verändert und damit das ganze Erscheinungsbild. Da gibt es einen Trick. Sie können die Schrift in einem Word Dokument ertellen und in ein Bild umwandeln. Dieses Bild wird auf die Webseite eingefügt uns schon verändert es sich nicht mehr.

Als Anmerkung, in dem neuen HTML 5 Standard ist es möglich Schriften einzubetten.

Dabei wird aber ein weißer Hintergrund mit umgewandelt und wir wollen ja nur die Schrift sehen. Jetzt kann man in Word einen farbigen Rahmen erstellen in dem die Schrift eingebracht wird und dies dann abspeichern. Aber wie finde ich die RGB Farbe (damit arbeitet Word). Gehen sie mal auf die Seite http://html-color-codes.info/webfarben_hexcodes/. Dort können sie den Farbcode eingeben und bekommen den RGB Code oder umgekehrt. Notieren sie sich den Code und geben ihn in ihrem Word Dokument als RGB ein und schon haben sie die genaue Farbe ihrer Webseite. (In Word eine Form anlegen z. B. Rechteck, rechte Maustaste auf Autoform formatieren, Farbe, neue Farbe, Benutzerdefiniert).

Bei den Farben immer auf Lesbarkeit des Textes achten und bei den Schriften Standardschriften wie Verdana oder Arial verwenden.

Als Hintergrund können auch Grafiken oder Wasserzeichen erstellt werden.

 
Tabellen

In dem Dokument ist eine Tabelle eingefügt. Wenn sie ihren Text ohne die Tabelle in ihr Dokument einfügen wird er einfach fortlaufend dargestellt. Mit Tabellen kann man hier sehr viel gestalten. Unter Profis ist das jedoch verpönt, da Tabellen zweckentfremdet werden.

Mit verschiedenen Befehlen, kann man den Text im Dokument ausrichten und darstellen.

Diese Homepage arbeitet auch mit Tabellen aber der Rahmen ist unsichtbar. Tabellen sind einfache HTML Befehle und beliebig erweiterbar. Auch Angaben zur Größe, Ausrichtung und Farbe der Tabellen sind möglich. Die Positionierung des Textes oder Bildes in der Tabelle sind ebenfalls machbar.

 
Hyperlinks

Hyperlinks sind Verweise zu anderen Seiten. Schauen wir uns mal den Aufbau an. Bitte diese Seite öffnen und "Ein Link zur Anfangsseite" anklicken. Wenn sie alles richtig gemacht haben sind bei ihnen zwei weitere Seiten eine mit grünem und eine mit rotem Hindergrund offen. Schauen sie sich mal den Code an PDF Dokument .Aus dem Code wird ersichtlich, dass sich beim anklicken des Textes "Ein Link zur Anfangsseite" das erste Fenster wieder geöffnet wird. Die Angabe des Ziels, target , bietet mehrere Möglichkeiten, neue Seite "blank" oder der Verweis auf die selbe Seite "self" sind nur einige Angaben. Der rote Hintergrund dient nur dazu die verschiedenen Seiten zu erkennen. Wie sie aber sicher bemerkt , sind die Links auf meinen Seiten so aufgebaut, dass sich entweder ein extra Fenster öffnet oder die Hauptseite sich ändert. So ist es leichter sich zurechtzufinden.

Ebenso lassen sich auch Bilder verlinken, dabei ist das Ziel beliebig wählbar, so bestehen die Bilderlinks hier aus einem kleinen Bild das in die Seite eingebunden ist und ein Fenster mit einem großen Bild öffnet. Hat den Vorteil des Platzbedarfs und der Ladezeit (Größere Bilder sind größere Dateien und brauchen länger zu laden).

Hier ein Beispiel für ein Bild auf der selben Seite. Bitte wieder hier klicken. Wie sie bemerkt haben verschwindet die Seite (Titel im Explorer beachten) und eine neue erscheint. Schauen sie sich den Code an: PDF Dokument Das kleine Bild wird eingefügt und das ganze Bild mit href als Hyperlink eingebunden.

Hyperlinks sind normalerweise als unterstrichene, andersfarbige Zeilen zu erkennen, das ist aber bei Bildern nicht der Fall beobachten sie den Mauszeiger, er verändert sich beim überfahren eines Hyperlinks. Selbstverständlich können Hyperlinks auch anders aussehen, schauen sie nur die Navigation auf der rechten Seite.

Der Nachteil im letzten Beispiel liegt klar auf der Hand, die Seite verschwindet. Natürlich kann ich im Browser mit dem Pfeil zurückgehen aber bei mehreren Seiten wird das mühselig. Wenn sie ein Web-Projekt aus mehren Seiten erstellen, können sie natürlich auf jeder Seite einen Verweis zur nächsten machen. Das geht vielleicht bei fünf Seiten, dann wird es kompliziert. Dafür gibt es andere Lösungen aber vorher noch ein Wort zu Links (Seitenverweisen).

Überlegen sie mal wie sie im Web surfen. Bei manchen Anbietern dürfen sie sich durch etliche Seiten arbeiten bis sie am Ziel sind. Das ist bewußt so gemacht, umso mehr Werbung wird ihnen präsentiert. Ich selbst finde das sehr unschön. Eine gut gemachte Seite besteht nicht aus vielen bunten, blinkenden Fenstern, sondern aus einer übersichtlichen Navigation. Wenn ich meine Information schnell und übersichtlich finde, spare ich Zeit. Ziehen sie das immer in ihren Überlegungen beim Gestalten mit ein.

 
Frames / CSS

So, was gibt es für eine weitere Lösung. Das sind Frames. Ein Frame ist ein Abschnitt auf einer Seite. So besteht diese Seite aus drei Frames. Ich teile die Seite in oben, mitte, und rechts auf. Das ganze wird in einem Frameset gespeichert. Die drei Frames sind drei einzelne Seiten. Das ganze Frameset hat einen Namen, in diesem Fall start . Browser lesen Seiten wie index, start oder home zuerst. Deshalb müssen diese Seiten so benannt werden.

Frames bieten die Möglichkeit einen Teil der Seiten (die Navigation oder den Kopf) bestehen zu lassen, während sich der Inhalt der Hauptseite ändert, wobei über die Navigation ein schnelles auswählen möglich ist.

Schauen wir mal dieses Frameset an: Frameset in PDF Es gibt noch weitere Angaben für Framessets aber es ist klar wie es gemacht wird. Frames sollen aber nicht mehr verwendet werden.

Es gibt auch bei allen Einteilungen Möglichkeiten, Seiten in CSS zu erstellen, diese Seiten sind so erstellt. Hier das Stylesheet in PDF dazu. Dabei wurde auf Frames verzichtet. Diese Methode ist sicherlich eleganter und anpassungsfähiger, da die Bildschirmgrößen einen großen Einfluss auf das Aussehen der Seite haben.

Frames haben Nachteile. Im Titel wird im Browser nur der Name des Framesets dargestellt. Es gibt ältere Browser, welche mit Frames Schwierigkeiten haben. Zudem ist die Aufteilung je nach Bildschirmgröße des Nutzers eventuell unübersichtlich. Beim Ausdruck von Seiten, wird jeder Frame einzeln oder manchmal abgeschnitten, gedruckt. Soll bei einer Navigation zwei Seiten geändert werden, lässt sich das nur über Java Script lösen.

Verkleinern sie mal ihren Browser und schauen sich diese Seiten an. Das ist wichtig zu wissen beim Seitenerstellen, da die von ihnen erstellte Seite je nach Browser und Größe des Bildschirms, anders dargestellt wird. Was hier vielleicht gut aussieht ist bei jemand anders fürchterlich.

Ein Tipp. Wie sie den Code einer Webseite darstellen können habe ich bereits beschrieben. Um das dazugehörige CSS Sheet zu finden, schauen sie in der head Zeile der Quellcode Seite. Dort ist der Pfad zum Stylesheet (sofern vorhanden) angezeigt. Er ist relativ zu dem Dokument angegeben und wenn sie diese Angabe in die Browserzeile übertragen, kommen sie zum Stylesheet einer Seite. So findet man hilfreiche Informationen über Seiten die einem besonders gut gefallen. Natürlich passt der Code nicht exakt auf ihre Seite, aber hilfreiche Tricks darf man sich abschauen.

 
HTML 5 Befehle

Hier habe ich die gängigsten HTML Befehle zusammengestellt. Auf dem folgenden Link öffnet sich eine neue Seite.

Auf dieser Seite wurden die HTML Befehle dargestellt. Um den Quellcode mit den Befehlen und Erklärungen dazu anzusehen, klicken sie auf den ersten Link in diesem Dokument.

Dort öffnet sich eine PDF Datei und in dieser können sie jetzt den Code sehen und mit dem Dokument vergleichen um zu sehen wie die Befehle im Browser dargestellt werden. Diese Dokument hat auch ein Stylesheet welches aber nur wenig Inhalt enthält.

Ich werde demnächst auch ein ausfühliches Stylesheet mit Erklärungen einstellen.

Die Programmiersprache ist natürlich umfangreicher, jedoch können mit diesen Befehlen schon ausführliche Seiten erstellt werden, vor allem ist die Syntax erklärt.

 
Planung

Für die Erstellung ihrer Homepage ist zunächst eine genaue Planung nötig. Wie viele Seiten ungefähr, wie viele Seitenverweise, Navigation wohin. Die Projekte werden, wie auch eine Datenverwaltung, mit Ordnern aufgebaut. Einstieg ist die Index Seite und dann der Rest in einem Ordner. Darin wieder die Aufteilung in Unterordnern. Warum? Nun ich kann alle Seiten auf eine Ebene speichern. Aber trauen sie sich zu eine bestimmte Seite gleich zu finden? Außerdem betreuen sie mal eine Projekt von jemanden (Verein) der das ganze chaotisch geordnet hat, sie werden verzweifeln. Auch bei Webprojekten gilt der Grundsatz der Ordnung.

Die Ordner und einzelnen Seiten werden mit Namen versehen. Meistens benutzen Webmaster Englische Begriffe. Dem Browser ist das aber egal, der interpretiert alle Sprachen und warum dann nicht in Deutsch. Es darf da ruhig ein ausfühlicher, ausagekräftiger Name stehen. Ein Bilderordner kann man ruhig mit "bildern_von_der_weihnachtsfeier_2009" nennen. Die Kleinschreibung ist xhtml Konform und die Namen müssen zusammenhängend sein (dabei ä, ö,ü mit ae, oe und ue schreiben, wegen den Browsern). Jeder der diese Seite übernimmt weiß was darin ist. Außerdem erscheint in der Browserzeile diese Pfadangabe und schauen sie mal genau hin bei großen Seiten wie lang und mit Kürzeln diese Seiten oft versehen sind. Ich würde da nichts finden.

Überlegen sie vorher wo ihre Seiten stehen und erstellen sie diese auch wenn noch nichts darin steht. (Einfach eine Seite unter einem neuen Namen abspeichern). Das erleichtert bei Beginn der Arbeiten die Erstellung von Verknüpfungen. Falls sie eine Datei verschieben müssen sie alle Hyperlinks dahin ändern. Deswegen sind im Web oft Hyperlinks nicht funktionsfähig oder Bilder erscheinen nicht, ganz einfach flüchtige Arbeit.

 
Erstellen Ein Webprojekt können sie in aller Ruhe daheim bei sich auf dem PC erstellen. Erst wenn alles fertig ist senden sie die Dateien ins Netz. Ihre Ordnerstuktur wird so wie sie ist hochgeladen. Genauso wird es mit Änderungen von Seiten gemacht. Arbeiten mehrere Leute an einer Webseite, immer zuerst die Seite runterladen, dann ändern und hochladen. Die Seiten können sie auch auf ihrem PC ansehen wie sie im Browser aussehen, bevor sie hochgeladen werden.  
Bilder

Bei Bildern ist die Dateigröße zu beachten. Bilder von der Digitalkamera, sind je nach Auflösung mehrere GB groß. Im Web braucht dies außer Speicherplatz auf dem Server, auch lange Ladezeiten. Deshalb erstellt man in der Regel ein kleines, wenige byte großes Vorschaubild und durch anklicken öffnet man ein größeres Bild.

Aber auch große Bilder werden nicht in Originalgröße hochgeladen. Deshalb ist es nötig die Bilder zu bearbeiten. Dazu verwendet man Bildbearbeitungsprogramme. Adobe Photoshop ist ein bekanntes und es gibt da auch günstige Versionen, es muss kein Profiprogramm sein. Außerdem können sie ihre Bilder damit bearbeiten wenn die Aufnahme mal nicht so gelungen ist.

Ein weiteres, wie ich finde recht hilfreiches Programm, ist die Diashow mit der sie recht einfach ihre Bilder bearbeiten können. Das Programm wandelt die Original Bilder in zwei Größen um und erstellt eine Gallerie bei der eine Übersicht und Navigationselemente eingebaut sind. Der HTML Code wir dabei automatisch erzeugt. Das Programm erhalten sie hier:  http://www.mediakg.de/products/m_ge_diashow.html

 
  Nach oben   

Kontakt            Impressum             Rechtliche Hinweise                  www.pcbasiswissen.de