FAQ - HTML Anfänger - Wie und womit erstelle ich eine Internetseite?

[vinaverita]

Diese FAQ richtet sich an Anfänger die ihre erste Webseite am Mac erstellen
möchten, aber nicht wissen welche Programme sie dazu benötigen. Es wird
nur auf eine Umsetzung in HTML eingegangen und keine weitere
Erklärungen bzw Programmtipps zu PHP etc. gegeben.

Welche Programme gibt es oder brauche ich?

Zum einen gibt es die WYSIWYG Editoren.
WYSIWYG ("what you see is what you get") bedeutet, dass diese
Programme ähnlich einem Layoutprogramm funktionieren und den HTML
Code von alleine schreiben. Gerade für Leute die sich nicht mit HTML
beschäftigen wollen bietet dies eine bequeme Möglichkeit dennoch
Webseiten zu erstellen.
Natürlich kann man den Code auch selbständig zudem einbringen.
Meistens ist auch ein FTP Programm integriert, das einem das Hochladen
der Dateien auf den Webserver ermöglicht.

Beispiele für WYSIWYG Editoren:

- Macromedia Dreamweaver
- netscape/mozilla composer
- Freeway
- Rapidweaver

Weiterhin kann man natürlich die Webseiten von Hand schreiben.
Dazu ist im Prinzip kein zusätzliches Programm nötig.
Textedit reicht völlig aus. Es gibt aber auch Programme, die
Syntax Highlighting speziell für HTML Code beherrschen, was
die Arbeit wesentlich erleichtert. Syntax Highlighting bedeutet, dass
Elemente des HTML Codes hervorgehoben werden.

Beispiele für Texteditoren:

- BBedit
- SubethaEdit


Welche Zusatz-Programme benötige ich?

Im Prinzip lassen sich Webseiten ohne weitere Programme erstellen und
auf einem Webserver hochladen. Textedit für den Code, und das integrierte
FTP Programm im Terminal für den Upload. Lediglich für Bildbearbeitung
müsste man sich ein zusätzliches Programm herunterladen/kaufen.
Komfortabler und für Anfänger leichter sind natürlich Programme mit
graphischer Oberfläche, weswegen ich hier nicht näher auf das FTP
Programm im Terminal eingehe.

FTP Programme (File Transfer Protocol) laden deine lokalen Dateien auf
einen Webserver und sind erst dann im Internet für andere sichtbar.
Natürlich gibt es auch die Möglichkeit die Webseite vom eigenen Rechner
zu hosten. Darauf gehe ich später noch ein.

FTP Programme:
- Transmit
- Captain FTP
- interarchy


Bildbearbeitungsprogramme:
- Adobe Photoshop Elements
- Macromedia Fireworks
- Graphic Converter


Wo und wie lerne ich HTML?

HTML kann man über verschiedene Wege lernen. Das Web ist voll von
guten Seiten die anschaulich HTML erklären. Ich persönlich finde
es aber sehr mühselig online zu lernen und bevorzuge Bücher.
Desweiteren kann man sich auch immer von Webseiten den Quellcode
anzeigen lassen und versuchen ihn nachzuvollziehen.
Im folgenden ein paar Links:
http://de.selfhtml.org/

Wie erstelle ich Animationen?

Es gibt 2 Wege das Internet durch Animationen zu bereichern.
Zum einen mit animierten GIFs. Das sind im Prinzip nur Bilder
die hintereinander in einer bestimmten Sekundenzahl innerhalb
einer Bilddatei abgespielt werden.
Als 2. Möglichkeit bietet sich Flash an. Flash ist ein Vektorprogramm,
das speziell für Multimedia Anwendungen für das Internet konzipiert
wurde.
Die exportierte .swf Datei wird in einem HTML Dokument eingebunden
und kann nur mittels eines Plug-Ins im Internet angesehen werden.
Heutzutage wird dieses Plug-In bei den meisten Browsern standardmässig
mitgeliefert.

Programme um animierte GIFs zu erstellen:
- Macromedia Fireworks
- Adobe Image Ready
- Gif Builder
- GIFfun

Programm für SWF Dateien:
- Macromedia Flash
- Adobe Livemotion
- Verschiedene 3D Programme können auch in swf exportieren



Wie veröffentliche ich meine Webseite?

Wie bereits erklärt benötigt man ein Programm um Dateien auf einen
externen Webserver hochzuladen. Wenn man seine Webseite nicht lokal
hosten will (setzt z.B voraus, dass der Computer 24 h an sein muss, damit
die Webseite erreichbar ist) sollte man sich einen Provider im Internet
suchen. Wichtig ist dabei, sich das richtige Angebot des Providers nach
seinen Bedürfnissen auszusuchen. Man sollte sich vorher im Klaren
sein wieviel Speicherplatz man wohl benötigt, oder ob man eine Datenbank
braucht, oder die Unterstützung von PHP, CGI etc.
Anschliessend meldet man bei einem Provider seine Domain an und bestellt
sein Webspace-Paket. Wenn im Angebot der Zugriff per FTP angeboten
wurde, bekommt man seine Zugangsdaten für einen FTP Zugang
zugeschickt und kann diese in einem FTP Programm (Beispiele s.o)
eingeben und zum Server connecten. Nun steht dem Datei-Upload nichts
mehr im Wege. Wichtig: Damit die Webseite auch unter dem Domainnamen
gefunden wird, muss die erste HTML Seite unbedingt index.html heißen und
im root Verzeichnis liegen.

Wie bereits erwähnt, gibt es noch die Möglichkeiten von seinem eigenen
Rechner eine Webseite zu hosten. OS X liefert den Apache (Webserver) von
Haus aus mit. In den Systemeinstellungen muss man lediglich unter Sharing
(Web-Sharing) aktivieren.
Die Dateien müssen in /Library/WebServer/Documents/ abgelegt werden.
Auch hier bitte drauf achten, dass die Startseite index.html heißen muss.
Um den Webserver zu konfigurieren hilft dieser Thread weiter:
https://www.macuser.de/threads/the-php-mysql-faq.32703/
Von Außen ist dein lokaler Webserver über deine IP erreichbar. Über einen
Dynamic Domain Name Service kannst du dir auch eine Domain holen, die
anstelle deiner IP angegeben werden kann. Z.B dort: http://www.dyndns.org/



Ich hoffe diese Übersicht kann HTML Einsteiger helfen.
Falls jemand Ergänzungen hat, bitte per PN an mich.

Gruß Vina

 

[Difool]

Es wurden ja schon so einige genannt. Was einem die Entscheidung jedoch am meisten erleichtert, ist, wenn man die Unterschiede kennt..

Zum besseren Verständnis würde ich es grob in 5 Kategorien einteilen:

1. Reine Code-Editoren (selbst bei vorhandener Vorschau-Funktion, eine grafische Bearbeitung ist nicht vorgesehen).. Coda, Espresso
2. Code- und Layout-Editoren (sowohl Code-Bearbeitung als auch grafische Layout-Bearbeitung ist parallel möglich).. Flux, Dreamweaver, Muse
3. Reine Layout-Editoren (der Code wird erst zum Schluss beim Hochladen erzeugt).. WebAcappella, Freeway Pro
4. Baukasten-Editoren (nicht schlecht für weniger anspruchsvolle Webseiten, alles bleibt aber im Rahmen der Vorlagen).. RapidWeaver, Sandvox
5. Erstellung von animierten Inhalten (man könnte es auch selbst Programmieren, hier überlässt man es der Software).. Edge, Hype

Sicher gibt es noch weitere Programme, die sich in die Liste aufnehmen lassen..

Irgendwie sagen mir die "Code- und Layout-Editoren" am meisten zu, und hier insbesondere Flux, denn man hat die Freiheit: Möchte man am Code arbeiten - bitte schön. Möchte man die Webseite mittels Layout-Werkzeugen grafisch gestallten und den Code automatisch erzeugen - dafür ist das Programm geschaffen! Beide Arbeitsweisen sind parallel möglich. Und wem es nicht schnell genug gehen kann, es stehen auch Vorlagen zur Auswahl, man ist aber nicht darauf beschränkt und hat volle Design-Freicheit. Nachbearbeitung von mit anderen Editoren erstellten Webseiten die man erweitern oder überarbeiten möchte - kein Problem, bei Bedarf sogar direkt auf dem Server. Insgesamt ist Flux eine gelungene Kombination aus Funktionalität und einfacher Benutzung, selbst oder gerade für Anfänger ohne HTML/PHP-Kenntnisse. Natürlich, eine gewisse Einarbeitung in das Programm ist unumgänglich, aber es ist nicht so schwer und dann spürt man die Vorteile, es macht vieles einfacher, und Ideen lassen sich noch schneller umsetzen.

Kostenlose Editoren:

http://netbeans.org/
http://maqetta.org/
http://bluegriffon.org/
Bzw.: Textwrangler für umme > Textwrangler Editor laden