#1 5. Mai 2007 1.) Vorraussetzungen 2.) HTML für Anfänger 3.) Der Webspace/Server 4.) CSS 5.) Verwenden von PHP in HTML 6.) Häufig gestellte Fragen 7.) Spielereien (folgt) 1.) Vorraussetzungen “Um eine Homepage zu erstellen brauchst du nicht mehr als ein Grafikprogramm, Dreamweaver und Spaß am klicken” würden viele sagen, aber das ist falsch. Natürlich kannst du deine Homepage einfach im Baukastensystem zusammen klicken, aber so richtig das wahre ist das nicht. Nehmen wir einmal an du kannst kein HTML und erstellst dir so eine Homepage, was ist wenn du aber später eine Sache anders haben willst, oder dir etwas am Aufbau nicht mehr gefällt? - Alles noch einmal neu? Was tust du wenn du neue Elemente einbinden willst, aber nur Optisch weißt wo und im Quelltext alles vollgemüllt mit irgendwelchen Tabellenzeilen ist? - Den Quelltext einfach posten und warten das dir jemand hilf? Wirkliche Vorraussetzungen zum erstellen eigener Webseiten sind folgende: - Zeit und Lust zu lernen und gelerntes umzusetzen. - Ein HTML-Editor - Kaffee Für zweiteres empfehle ich dir -> keinen <- WYSIWYG-Editor. Solche Editoren sind zwar ganz nett, aber würden dich dann doch nur wieder zum “Zusammenklicken” verleiten. Wenn du HTML wirklich erlernen willst, dann solltest du anfangen deine Quelltexte von Anfang bis Ende per Hand zu schreiben. 2.) HTML für Anfänger Du siehst also ein erstellen ohne irgendwelche Vorkenntnisse ist nicht von Vorteil und langfristig gehst du nur irgendwelchen Leuten ständig auf den Sack! Im folgenden Tutorial werde ich dir nicht zeigen wie man HTML von Grund auf erlernt, dafür gibt es besser Seiten die dir das erklären. Manche Seiten (man mag es kaum glauben) haben es sich sogar zu reinen Aufgabe gemacht das zu tun. SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) (Diese Seite sollte, falls nicht schon geschehen, in deine Favoriten wandern) 1x1 f http://www.privatseite.com/htmlkurs.html Aber ich denke das posten des Suchergebnisses bei Google sollte hierfür reichen: html f Die Grundkenntnisse der Syntax sind sehr sehr einfach und mit ein wenig Elan auch sehr schnell zu lernen. ---- Ich gehe nun davon aus das du dir die oben genannten Seiten ein wenig angeschaut und das Grundlegende einigermaßen verinnerlicht hast. Sicher sagt dir der Begriff “TABLE” etwas. Dieser Begriff steht für das Erstellen und Anzeigen einer Tabelle in HTML. Wenn du früher schon mit Programmen wie Dreamweaver gearbeitet hast ist dir der Begriff sicher schon des öfteren begegnet wenn du eines deiner Designs damit bearbeitet hast. Sicher macht das benutzen einer Tabelle zum erstellen einer Homepage vieles einfacher, aber richtig dafür geeignet bzw.: dafür vorgesehen ist sie nicht. Eine Tabelle sollte man nur dann verwenden wenn man auch wirklich eine Tabelle erstellen will. Eine Homepage selbst ist aber keine Tabelle wie du mittlerweile wissen solltest, deshalb werde ich den Punkt <table> auch nicht weiter behandeln. Das sog. Layouten übernimmt man mit CSS, aber dazu später mehr. 3.) Der Webspace/Server Natürlich hilft es dir nicht viel deine Webseiten local (d.h. auf deinem eigenem Rechner) zu lagern, immerhin möchtest du diese ja aller Welt zeigen. Deshalb begeben wir uns nun auf die Suche nach Webspace. Für den Anfang reicht es sich einen (von vielen) kostenlosen Angeboten zu nutzen. Erstelle dir hierfür einfach ein Account bei Funpic ( Funpic.de - Kostenlose Homepage mit FTP, MySQL und PHP ) oder Ohost ( Ohost.de - Kostenloser Webspace ), bei diesen beiden Beispielen bist du auch für später voll ausgerüstet um deine ersten Schritte mit z.B.: PHP zu machen. Aber Vorsicht, die ersten Versuche eine eigene Homepage zu erstellen sollten nie die sein eine Warez-Seite ins Netz zu stellen! Sicher bekommst du ein Größeres, oder sagen wir ein Sicheres Publikum, denn eine Seite zum Downloaden von Musik, Filmen und vor allem s lockt mehr Besucher als eine “Hallo das ist meine erste Homepage” - Homepage. Dennoch wirst du von deinen “Kollegen” nicht mehr als Spott und vielleicht sogar Verachtung dafür bekommen. Also belasse deine ersten Versuche bei der wie schon erwähnten “Das ist meine erste Homepage” - Homepage. Auf folgende Dinge solltest du achten beim wählen deines Webspaces - FTP Zugang - Wenn möglich keine Banner oder Textwerbung die sich automatisch in das Layout deiner Seite einbaut und dir wohlmöglich dein Design zerschießt. Ganz oben oder unten ist OK, ein Layer ebenso. - PHP/MySQL Unterstützung (Ist wie oben erwähnt für später ganz Praktisch) - Genug Speicherplatz (Min. 5MB sollten es schon sein) - Genug Traffic (Für eine Hobby-Seite sollten 5-10GB/Monat reichen) 4.) CSS CSS ist die wohl beste Methode deinen Webseiten ein aussehen zu verleihen. HTML-Anweißungen wie z.B.: size=“12” wird meist von jedem Browser anders aufgefasst, aber ein style=“font-size: 12px;” dagegen bleibt in jedem Browser gleich. Nunja wenn ich näher auf das Thema CSS eingehen würde, dann könnte ich wohl ein extra Tutorial daraus machen, deswegen hier wieder Seiten die sich ausgiebig damit beschäftigen: http://css4you.de (Diese Seite sollte jetzt in deine Favoriten wandern) SELFHTML: Navigationshilfen / Kurzreferenz: CSS CSSHilfe.de - Wegweiser durch Netz zum Thema CSS Professionelles Webdesign mit (X)HTML und CSS Es gibt zwei Methoden einem HTML-Objekt ein aussehen mit CSS zu geben. 1. Direkt in dem Objekt: <font style=“color: #000000;”>Text</font> Oder 2. Als Klasse / ID: <font class=“text”>Text</font> / <font id=“text”>Text</font> Zu 2. Musst du diese Klassen noch definieren, und das geht so: HTML: <style type=“text/css”> <!-- .text { color: #000000; } #text { color: #000000; } --> </style> Ein Punkt vor der Anweisung steht für class=“” eine Raute vor der Anweißung steht für id=“”. Du kannst beide im selben Objekt benutzen, aber wo ist der Unterschied? Die Frage sollte hier ihre Antwort finden: dciwam | FAQ : Unterschied zwischen id und class Eine id="" kann man nur einmal zuweißen, das soll heissen wenn ein Onjekt eine ID bekommen hat, dann ist diese nur noch auf dieses eine Objekt bezogen. Man mach mit einer ID ein Objekt einzigartig. Klassen hingegen dürfen auf mehr Objekte angewendet werden. Man kann auch zwei Klassen auf ein Objekt anwenden, das funktioniert so: <font class="klasse_a klasse_b">Text</font>. Durch ein Leerzeichen trennt man diese voneinander. Obriges Beispiel könnte man so verwenden: HTML: <html> <head> <style type="text/css"> <!-- .klasse_a { color: red; } .klasse_b { text-decoration: underline; } --> </style> </head> <body> <font class="klasse_a klasse_b">Text</font> </html> Das Ergebnis würde so aussehen: Text 4.2) CSS und HOVER Da ich es noch für erwänenswert halte behandele ich das CSSAtribut HOVER nocheinmal extra. Mit HOVER ist nichts anderes gemaind als das verhalten eines Objekts wenn man mit der Maus über diesen fährt. Aber vorsicht, nicht jedes Objekt reagiert auf dieses Atribut. Im folgenden Beispiel zeige ich euch wie man Verweiße (Links) damit bearbeitet. Hierfür gibt es zwei möglichkeiten, die erste passt alle links im Dokument an: HTML: <html> <head> <style type="text/css"> <!-- a { color: red; } a:hover { color: green; } --> </style> </head> <body> <a href="#">Das ist ein Link</a> <a href="#">Das ist noch ein Link</a> <a href="#">Und noch ein Link</a> </body> </html> Das Ergebnis wäre hier drei rote Link's die beim überfahren mit der Maus Grün werden würden. Jetzt will ich aber nicht das jeder Link so formatiert wird! Deswegen hier die zweite Methode: HTML: <html> <head> <style type="text/css"> <!-- .link { color: red; } .link:hover { color: green; } --> </style> </head> <body> <a href="#" class="link">Das ist ein Link</a> <a href="#">Das ist noch ein Link</a> <a href="#">Und noch ein Link</a> </body> </html> In diesem Falle würde nur der erste Link auf die CSS-Anweisung reagieren, die anderen beiden würden sich an den Standard deines Browsers richten. Bei Links ist dieses HOVER überhaupt kein Problem, aber bei anderen Objekten sieht das ganze wieder anders aus bzw. ist Browserabhängig. Im Mozilla (Firefox...) würde dieses Hover auch auf ein DIV funktionieren, aber sollte dennoch nicht verwendet werden. Immerhin will man ja ein breites Publikum erreichen und nicht jeder ist mit einem Browser von Mozilla unterwegs. Aber wie gesagt, bei Link's ist das überhaupt kein Problem. 4.3) CSS und DIV Hier solltest du ein wenig genauer lesen, denn DIV ist die wohl gängiste Methode zu Layouten. Viele deiner Landsleute wissen zwar was das ist, aber einfachste Anweisungen wie z.B.: ein einfacher Rand um deine Webseite wird mit einer Tablelle erledigt. Schau dir mal beide Beispiele an: Beispiel 1: HTML: <html> <body> <table cellpadding="*" cellspacing="*" align="*" style="border: 1px solid black"> <tr> <td>Hier endlich der Inhalt...</td> </tr> </table> </body> </html> Beispiel 2: HTML: <html> <body> <div style="padding:*px; border: 1px solid black;">Ui das ging ja schnell^^</div> </body> </html> Na was fällt dir auf Umso weniger Quelltext (in diesem Fall unnötiger Quelltext), desto schneller hat dein Besucher deine Webseite vor der Nase, außerdem ist das Arbeiten mit DIV viel übersichtlicher. Sicher ist das auf einer Hobbyseite nicht weiter von belang, aber warum jetzt zu Anfang mit Tabellen arbeiten wenn man später eh auf DIV umsteigen wird (und glaub mir das wirst du ). Aja mit Tabellen layouten nur nubs mit vorzugsweise Dreamweaver! *gg Es mag so klingen als ob ich Dreamweaver schlecht reden will was aber keineswegs der Fall sein soll! Immherhin hast du ja satte 500€ dafür bezahlt *hust* von daher sollte er auch was können was ich in keinsterweiße abstreiten will, aber als absoluter Nerd sollte man niemals mit Profiprogrammen arbeiten. Es gibt 1000 kostenlose Alternativen, such dir eine aus. Aber jetzt genug abgeschweift... Wie du siehst ist das Arbeiten mit CSS sehr viel konfortabler und übersichtlicher, du kannst komplett mit einer Anweißung alle HTML Objekte bearbeiten oder gezielt ein Objekt formatieren und viele andere möglichkeiten verwenden was mit reinem HTML garnicht mehr möglich wäre. Die Grenzen sind nach oben hin offen wie diese Seite beweißt: Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style Und um das Thema CSS zu beenden noch die Antwort auf die Frage "Warum ist das <style type="...></style> im <head> untergebracht?" Ganz einfach: Weil es dahin gehört . Sicher kann es sein das sich nicht jeder daran hält, was auch nicht weiter schlimm ist den diese Anweisung funkioniert auch auserhalb des headbereiches, aber trotzdem sollte man die Styleangaben gleich mit dem head der Seite an den Browser schicken (geht schneller). Aja fast vergessen, schon ofter habe ich gesehen das Leute zweimal die Styleanweißung verweden (<style type="...></sytle><style type="..></style>) keine Angst das ist nicht weiter schlimm, aber ist es sinnvoll? - Nein! Setze dir einmal in deinem Dokument diese Anweißung und schreibe alle Formatierungen in diese rein, ist 10x mehr übersichtlicher und das soll es ja werden. Hier noch ein Lehrgang zu CSS der mir anfangs sehr geholfen hat: http://de.html.net/tutorials/CSS/ 5.) Verwenden von PHP in HTML Hier sind wir nun an einem Punkt der um einiges mehr an Zeit und Lust abverlangt. Ein gutes Tutorial findest du hier: http://tut.php-q.net/ Erklärungen zu Funktionen findest du hier: PHP: Hypertext Preprocessor (Hersteller Seite) Bevor du dich aber mit PHP beschäftigst, solltest du aber das Thema HTML abgehakt haben., denn beides zur selben Zeit wäre zuviel auf einmal wie ich finde. Aber lass dir auch gesagt sein "Du wirst beide Themen nie richtig fertig gelernt haben"! 6.) Häufig gestellte Fragen Hintergrundfarbe und/oder Bild für ganze Seite oder Objekt? Tabelle mit 1px Rand? Seite in die Mitte? Wie Breit soll ich meine Homepage machen? Link über ganze Zeile klickbar? Dropdownmenu mit CSS? Dropdownmenu mit Javascript? Inhalte dynamisch mit PHP einbinden? Inhalte dynamisch mit AJAX einbinden? Formulare wie geht das? Formular über mehrere Seiten? 6.1 Hintergrundfarbe und/oder Bild für ganze Seite oder Objekt? Nichts leicher als das: HTML: bgcolor="" background="" Aber vorsicht, das funktioniert nicht überall, deswegen empfehle ich folgende Beispiele: HTML: <div style="background-color: #000000;">Schwarzer Hintergrund</div> <div style="background-image: url(./bg.gif);">Hintergrund ist jetzt das angegebene Bild (bg.gif)</div> Das ganze funktioniert auch bei Objekten: HTML: <input type="text" size="*" name="text" style="background-color: #000000;" /> <input type="text" size="*" name="text" style="background-image: url(./bg.gif);" /> Auch kann man hier mit einer Klasse arbeiten: HTML: <html> <head> <style type="text/css"> .in_bgcolor { background-color: #000000; } .in_bgimage { background-image: url("./bg.gif"); } </style> </head> <body> <input type="text" class="in_bgcolor" /> <input type="text" class="in_bgimage" /> <div class="in_bgcolor">Schwarzer Hintergrund</div> <div class="in_bgimage">Bild als Hintergrund</div> </body> </html> + Multi-Zitat Zitieren
#2 5. Mai 2007 AW: Murdoc’s FAQ zum erstellen einer eigenen Homepage! finds gut dass du sowas schreibst, aber wir wissen genau, dass dieser thread bald in den tiefen des boards verschwindet und der nächste noob mit überflüssigen fragen kommt btw, wenn du schon mit class und id anfängst, schreib am besten gleich dazu, was der unterschied ist. + Multi-Zitat Zitieren
#3 6. Mai 2007 AW: Murdoc’s FAQ zum erstellen einer eigenen Homepage! sry hatte grad den kopf voll mit anderen sachen^^ ich werd diese faq ständig erweitern und mit den erweiterungen den thread immerwieder pushen wer lust hat der kann mitmachen! + Multi-Zitat Zitieren
#4 6. Mai 2007 AW: Murdoc’s FAQ zum erstellen einer eigenen Homepage! das mit dem verschwinden könnte man verhindern zumindest könnte man überlegen den thread zu pinnen, wenn die FAQ etwas ausgebaut ist den ansatz finde ich auf jeden fall schon sehr gut ich hoffe der ein oder andere anfänger wird sie auch lesen + Multi-Zitat Zitieren
#5 11. Mai 2007 AW: Murdoc’s FAQ zum erstellen einer eigenen Homepage! bissl geupdatet, wer fehler findet einfach sagen + Multi-Zitat Zitieren
#6 15. Mai 2007 AW: Murdoc’s FAQ zum erstellen einer eigenen Homepage! Du könntest gleich noch eine Liste von guten Editoren einfügen, wenn du schon so auf Dreamweaver herumhackst (nicht, dass ich Dreamweaver o.Ä. gut fände; und auch nie damit gearbeteitet). Die drei besten Editoren (meiner Meinung nach) sind: - Phase 5 - VIM - Notepad++ + Multi-Zitat Zitieren