balthier9999
Bekanntes Gesicht
- Mitglied seit
- 26.02.2007
- Beiträge
- 7.598
- Reaktionspunkte
- 0
Anfänger Tutorial
» Nachdem ich ein Tutorial für bereits Erfahrene geschrieben hab, möchte ich nun den Anfängern helfen ? also jenen, die überhaupt noch nie mit HMTL in Berührung kamen. Natürlich bedarf es da etwas mehr Text, und einige wissen eventuell schon mehr, als andere. Deshalb habe ich das ganze wieder in Kategorien eingeteilt; zur Übersicht findest du schon hier alle Themen:
1. Was ist überhaupt HTML, und wofür brauche ich es?
2. Funktionsweise/ Syntax
3. Wie fange ich an?/ Was brauche ich?
4. Tags
5. Beispiel-Profil
6. Weiterführende Informationen
! Wie zuvor auch der Hinweis, dass HTML-Codes manchmal nicht richtig dargestellt werden. Das liegt am sogenannten BB-Code, mit dem dieser Text zum Teil geschrieben wurde. Das ist eine Art einfaches HTML für Foren, jedoch verursacht es manchmal Probleme. Also der Hinweis: Manche Codes sind nicht völlig korrekt...
1. Was ist überhaupt HTML, und wofür bauche ich es?
» HTML heißt übersetzt Hypertext Markup Language. Es ist also eine Sprache. Diese Sprache ermöglicht es Webprogrammieren/ -designern, Internetseiten zu erstellen, die für jeden Browser (Internetzugriffs-Programm, wie Firefox, Internet Exporer...) sichtbar, bzw. interpretierbar sind. Es ist eigentlich DIE Internetsprache, denn fast jede Website nutzt HTML. Allerdings bekommen wir davon nichts mit, denn HTML ermöglicht es, nur durch reine Textinformationen, Dinge wie Bilder, Tabellen, Texte etc. darzustellen.
Speziell für uns heißt das, mit HTML können wir unsere Profile gestalten! Es gibt ja bekanntlich die Möglichkeit, in Cynamite.de einen Begrüßungstext zu erstellen (Auf dem Profil: Profil bearbeiten » Begrüßung bearbeiten; oder noch einfacher: http://www.cynamite.de/_misc/community/profiles/edit_welcome.cfm). Man kann dies mit dem Standard-Editor (BB-Code) machen; das hat den Vorteil, dass es bereits einen Editor (ein Programm, dass mir automatisch Codes erzeugt) enthält. Man braucht z.B. nur einen Text anwählen, die Farbe angeben, und schon haben wir den Text in der ausgewählten Farbe. Man kann das Profil aber auch in HTML gestalten; dazu klickst du oben auf HTML-Editor... Das Problem ist nun, es gibt keinen praktischen Editor, man muss den Code manuell eingeben. Deswegen empfehle ich auch, das HTML-Profil offline zu bearbeiten. Das machen wir, wie folgt:
1.) Wir legen einen Ordner an, indem wir in Zukunft sämtliche Dateien reintun, die unser Profil betreffen. Wähle einen günstigen Namen, wie »Cynamite-Profil«...
2.) Wir öffnen das Programm »Editor« (Windows: Start » Programme » Zubehör » Editor), und wählen im Datei-Menü »Speichern Unter«
3.) Nun wählst du den zuvor erstellten Ordner als Speicherort aus, benennst die Datei am besten als »Profil-Konzept_1« und schreibst hinter dem Namen die Endung .htm, also so: »Profil-Konzept_1.htm«. Dann wählst bei »Dateityp« »Alle Dateien«, bei Codierung »Unicode«, und dann speicherst du. Es sollte sich nun eine leere Browserdatei in dem Ordner befinden.
Damit wäre der Anfang gemacht. Wir gehen im Thema »Wie fange ich an?/ Was brauche ich?« weiter darauf ein...
2. Funktionsweise/ Syntax
» Wie kann reiner Text Bilder darstellen, wird man sich fragen. Ganz einfach: Indem der Text dem Browser sagt, was er tun soll; zum Beispiel Bilder darstellen. Damit der Browser aber weiß, was echter Text ist, und was eine Aufforderung (ein Befehl), bedient man sich sogenannter Tags (engl. Anhänger, Symbol, Zeichen). Diese Tags werden immer in Größer-als- und Kleiner-als-Klammern eingeschlossen, z.B. : ... Wenn ein Browser so etwas sieht, dann weiß er, jetzt folgt ein Befehl, in diesem Fall der Befehl p, der bedeutet, dass der folgende Text in einem Absatz erscheinen soll. Es gibt zwar Ausnahmen (werden wir noch durchnehmen), aber generell müssen diese Tags immer geschlossen werden, damit der Browser weiß, wann der Befehl zuende ist. Man teilt dies mit einem Endtag mit, der einen Schrägstrich vor dem Befehl enthält, also im Falle des p´s: ... Wenn wir nun das ganze mal zusammenfassen, würde der Code für einen Text so aussehen:
Das ist ein Text
Der Browser wird die Tags nicht darstellen; sie sind Hintergrundinformation, aber sie sind auf jeden Fall da. Vielleicht wirst du dich fragen, was man tun soll, wenn man zum Beispiel eben in einem Text schreiben will... schließlich erfasst der Browser das als Befehl, und es wird nicht auf der Website dargestellt. Dafür wurden sogenannte Entities erschaffen. Sie umschreiben jene Symbole; das ist jedoch vorerst unwichtig, da man diese Entities nur äußerst selten braucht.
Wenn du möchtest, kannst du den obigen Code schonmal in der Editordatei ausprobieren. Gehe dazu in deinen Ordner, wähle die Datei mit der rechten(!) Maustaste aus, und wähle »Öffnen mit » Editor«... Daraufhin sollte sich der bekannte Editor öffnen. Da wir html-Tags usw. für Cynamite nicht brauchen, kannst du den Code oben einfach reinkopieren; dann Speichern (Kurzform: Strg+S). Schließe den Editor nicht, denn es könnte sein, dass du etwas ändern möchtest. Geh nun wieder in den Ordner, und doppelklicke nun auf die Browserdatei. Nun siehst du das, was später auch in Cynamite ungefähr zu sehen sein wird: Ein Text, ohne Tags, nur reiner Text. Wenn du etwas ändern möchtest, gehe wieder auf die Editor-Datei, ändere sie, speichern, dann gehst du wieder zum Browser, und klickst einfach auf »Aktualisieren«.
! Übrigens: Es ist durchaus möglich Tags IN Tags einzubauen. Das klappt nicht mit jedem Tag, (mit demselben zum Beispiel nicht) aber häufig ist es sogar wichtig!
3. Wie fange ich an?/ Was brauche ich?
» Grundsätzlich solltest du erst anfangen, wenn du überhaupt ein Konzept hast. Damit verhinderst du, dass dein Profil blöd aussieht, dass du während des Arbeitens wie wild nach irgendwelchen Bildern suchst, oder du stundenlang mit dem Text, statt dem Code beschäftigt bist. Suche dir also VORHER Bilder aus, und schreibe vorher auf, was später in deinem Profil stehen soll. Klar, man kann Änderungen während des Codens vornehmen, gar kein Problem. Nur ohne Konzept geht´s nicht. Man muss ja etwas haben, an dem man sich festklammern kann. »So soll es aussehen« sollte es lauten^^
Wenn du Zeit sparen willst, kannst du dir außerdem noch einen sogenannten WYSIWYG-Editor besorgen (WYSIWYG= What You See, Is What You Get, engl.: Was du siehst, ist, was du bekommst). Der übernimmt das Tag-Schreiben, und vielleicht dient er auch als Tag-Bibliothek, je nach dem, was du für einen Editor hast.
4. Tags
» Wir gehen nun auf die einzelnen Befehle ein. Jedes Tag hier ist brauchbar, und sollte immer als Lösung betrachtet werden. Folgende Tags sind übrigens jene, die mit einem Endtag beendet werden müssen. Der Inhalt kommt dann zwischen dem Anfangs- und Endtag.
= Ein Absatzelement erzeugen. Alles in diesem Tag wird in einem Absatz zusammen gefasst. Der Absatz endet mit dem jeweiligen letzten Inhalt. Das Absatzelement braucht KEINE Zeilenumbrüche, denn die erstellt es selber. Das Element passt sich automatisch an die Breite des überliegenden Elements an (bei Cynamite ist die maximale Breite 671px). Man kann also bequem langen Text in diesem Element darstellen. Sollte deswegen immer für Text eingesetzt werden!
= Einen Link erzeugen. Die von diesem Element eingeschlossenen Objekte (Text, Bilder etc.) werden zu einem Link. Wenn der User darauf klickt, gelangt er zu einer neuen Seite. Damit der Browser weiß, wohin die Reise gehen soll, muss die URL-Adresse angegeben werden. Das passiert so:
Link
Das href zeigt dem Browser die Adresse, die vollständig und fehlerfrei in "-Klammern daneben geschrieben wird. In diesem Fall ist es http://www.cynamite.de...
Nun passiert folgendes: Je nachdem, welchen Browser der User benutzt, wird beim Klick auf den Link die neue Website anders geöffnet. Mal wird sie auf derselben Seiten geöffnet, mal wird ein neuer Tab oder gar ein neues Fenster geöffnet. Um festzulegen, dass der Link in einem neuen Tab geöffnet wird (denn das ist am optimalsten), müssen wir zusätzlich zur Adresse das target angeben. Es gibt verschiedene Targets, für uns jetzt _blank interressant:
Link
Der Link würde nun in einem neuen Tab/Fenster geöffnet.
Es gibt aber noch eine andere Art von Links: die internen. Dadurch kannst du eine Navigation per Links durch dein Profil gewähren. Momentan wird ein Profil zu klein sein, damit die Wirkung von Ankerlinks erkennen kannst. Nichtsdestotrotz:
Der Punkt, an dem du den User hinführen willst, wird mit einem
Anstatt Oben kannst du jeden anderen Namen eingeben. Hauptsache, du merkst ihn dir.
Nun erstellst du irgendwo anders einen Link, der in diesem Beispiel so lautet:
Nach oben
Du siehst, anstatt einer Internetadresse, habe ich das Oben verwendet, und ein # davorgetan. Der Browser wird nun, beim Klick auf diesen Link, auf den zuvor bestimmten Punkt springen. Einfach mal mit einem langen und großen Profil ausprobieren: Ganz oben erstellst du den Anker (also ), und ganz unten kommt der Link...
Weitere Tags werden im letzten Thema erklärt.
» Nun folgen jene Tags, die NICHT mit einem Endtag beendet werden müssen, weil das auch kein Sinn macht. Diese werden so beschrieben:
= Ein Zeilenumbruch. Zwar kannst du auch mit einem neuen p-Befehl einen Zeilenumbruch erzeugen, aber ein br erzeugt nur einen einzelnen. Außerdem ist es damit viel bequemer, auch wenn es nicht den Vorstellungen der w3 entspricht...
= Ein Bild einfügen. Anstatt des »...« muss die Adresse angegeben werden. Es sollten nur GIFs, JPEGs, oder PNGs verwendet werden! Möchtest du eigene Bilder verwenden, suche bei Google nach einem Imagehoster. Dort lädst du die Bilder hoch, und kopierst anschließend den Direktlink, und fügst ihn hier ein:
Das src ist sowas ähnliches, wie das href beim a-Befehl. Es soll source (engl.: Quelle) bedeuten, und verlinkt das Bild. Möchtest du das Bild als Link verwenden, umschließe das img-Tag mit a-Tags (und der Linkadresse beim a), und gebe zusätzlich im img-Tag »border="0"« an, damit keine ekligen Rahmen erzeugt werden... Das sieht dann so aus:
Es kann sein, dass der Imagehoster mal nicht funktioniert (weil der Server überlastet ist, o.ä.). Damit die User nun kein komisches »Getrennt«-Symbol sehen müssen, sollte dem Bild ein Alternativ-Name gegeben werden. Dieser erscheint, wenn das Bild nicht geladen werden kann. Diesen erstellst du durch die Eigenschaft: alt="Name". Anstatt Name kommt der alternative Name für dein Bild. So sieht´s dann aus:
5. Beispiel-Profil
» Wir haben zwar noch nicht viel Möglichkeiten, unser Profil zu gestalten (machen wir aber noch, keine Sorge), aber die Grundbefehle, und den Syntax kennen wir. Ich weise nochmal darauf hin, dass es sein kann, dass der Code etwas verfälscht dargestellt wird. [Schau dazu bitte mal in den Komments, ob etwas nicht stimmt]
Fangen wir zunächst mit dem Konzept an, auch wenn es nervt: Ich möchte eine Überschrift, dann einen Absatz, wo ich mich beschreibe, dann eine neue Überschrift, dann möchte ich einen Club erklären, mitsamt Links und Bild. Das ganze wird in Standardschrift sein; ohne Farbe, oder sonstige Gestaltung. Wie schon erwähnt, wir wollen erstmal die Syntax kapieren. Ich werde jede Stelle einzeln durchgehen. Zum Schluss folgt der gesamte Code, den du auch kopieren kannst...
Schritt 1 ? Die erste Überschrift
Dazu bedienen wir uns einfach dem p-Befehl. Zwar erzeugt dieser Absätze, aber für eine Überschrift reicht es allemal. Also schreiben wir erstmal , gefolgt von einem , denn wir wollen nur diese Überschrift in dem Absatz haben. Nun schreiben wir zwischen beiden Tags den gewünschten Überschriftstext, also zum Beispiel Willkommen auf meinem Profil!
Nun haben wir die Überschrift... Wir können den Text übrigens ausrichten! Dazu bedienen wir uns einem sogenannten Attribut. Attribute erweitern die Einstellungen für ein Tag. Beinah jedes Tag kann mit Attributen modifiziert werden, was auch extrem wichtig und notwendig ist. Attribute werden im Anfangs-Tag (also in dem Falle ) eingefügt. Es können mehrere Attribute eingesetzt werden, die durch ein einfaches Leerzeichen getrennt werden. Attribute werden so geschrieben: ... Für jedes Tag gibt es unterschiedliche Attribute. Hier findest du eine Liste, die aber momentan erstmal zu viel ist für unsere Vorhaben (also heb den Link für später auf). Wir wollen nun den Text mittig ausrichten. Das Attribut dafür heißt »align«, die Variablen sind »right« »left« »center« »justify«. Wir wollen Center, also schreiben wir: ... Zusammengefasst sieht der Code nun so aus: Willkommen auf meinem Profil!... Probier den Code ruhig aus. Beachte immer, dass alle Tags geschlossen sind, alle Wörter richtig geschrieben, Leerzeichen nicht vergessen, das = nicht vergessen, und das center schön mit "-Klammern einschließen! Am Ende haben wir in der Browservorschau (also Datei speichern, sie normal öffnen... oder wenn schon offen »Aktualisieren« klicken) einen mittig ausgerichteten Text. Nun folgt der Absatz zu meiner Person...
Schritt 2 ? Der erste Absatz
Und zwar machen wir genau dasselbe. Unter der Überschrift schreiben wir wieder ... wohl gemerkt, wenn du im Editor Leerzeichen oder Zeilenumbrüche erstellst, werden die vom Browser ignoriert! Du kannst also jeden Befehl in einer neuen Zeile schreiben, so wie hier:
Text
Nun schreibst du einfach den gewünschten Text zwischen die Tags. Am Ende wird ein neuer Absatz im Browser erzeugt.
Schritt 3 ? Clubbeschreibung mit Bildern und Links
Nun folgt ein neuer Absatz mit Text. Also wieder dasselbe Spielchen, wie oben. Doch diesmal wollen wir noch ein Bild einfügen. Zuvor suchen wir uns das Bild, damit wir die Adresse rauskriegen. Haben wir eins gefunden (wenn´s geht, nur eigene Bilder, oder welche von Cynamite... wegen Copyrights), dann rechtsklicken wir darauf, und wählen »Grafikadresse kopieren«. Jetzt geht´s wieder in den Editor. Der Text sollte schon stehen. Dann erstellen wir folgenden Befehl IM Text (ja, richtig gelesen^^): ... Klicke im Editor nun zwischen die beiden "-Klammern und drücke die Strg-Taste und die V-Taste gleichzeitig (also der Kurzbefehl für Einfügen). Nun sollte die Adresse, des zuvor gewählten Bildes zu sehen sein. Speicher ab, und schau im Browser nach. Wenn du noch mit dem Internet verbunden bist, sollte das Bild zu sehen sein. (wenn nicht, schau nach, ob du alles richtig geschrieben hast. Zwischen den "-Klammern sollten keine Leerzeichen sein!)
Nun haben wir das Bild... Jetzt wollen wir aber noch einen Link zum Club erstellen. Dazu geh wieder zu Cynamite.de, suche einen Link zu deinem Club, und rechtsklicke au ihn. Wähle »Linkadresse kopieren«. Dann geht´s wieder zum Editor. Schreibe am Ende deines Textes den Befehl , damit ein Zeilenumbruch erstellt wird. Nun schreibe einen Link. Der Befehl lautet a, also ... Du siehst, der Tag muss geschlossen werden. Das heißt, zwischen den Tags kann etwas hin, und zwar das Wort, dass zum Link werden soll. Idealerweise ist es der Name des Clubs, also Clubname... Nun klickst du wieder im Editor zwischen den "-Klammern und drückst wieder Strg+V (Einfügen). Fertig. Um nochmal sicher zu gehen, so sieht der Link ungefähr aus: Clubname
» Nachdem ich ein Tutorial für bereits Erfahrene geschrieben hab, möchte ich nun den Anfängern helfen ? also jenen, die überhaupt noch nie mit HMTL in Berührung kamen. Natürlich bedarf es da etwas mehr Text, und einige wissen eventuell schon mehr, als andere. Deshalb habe ich das ganze wieder in Kategorien eingeteilt; zur Übersicht findest du schon hier alle Themen:
1. Was ist überhaupt HTML, und wofür brauche ich es?
2. Funktionsweise/ Syntax
3. Wie fange ich an?/ Was brauche ich?
4. Tags
5. Beispiel-Profil
6. Weiterführende Informationen
! Wie zuvor auch der Hinweis, dass HTML-Codes manchmal nicht richtig dargestellt werden. Das liegt am sogenannten BB-Code, mit dem dieser Text zum Teil geschrieben wurde. Das ist eine Art einfaches HTML für Foren, jedoch verursacht es manchmal Probleme. Also der Hinweis: Manche Codes sind nicht völlig korrekt...
1. Was ist überhaupt HTML, und wofür bauche ich es?
» HTML heißt übersetzt Hypertext Markup Language. Es ist also eine Sprache. Diese Sprache ermöglicht es Webprogrammieren/ -designern, Internetseiten zu erstellen, die für jeden Browser (Internetzugriffs-Programm, wie Firefox, Internet Exporer...) sichtbar, bzw. interpretierbar sind. Es ist eigentlich DIE Internetsprache, denn fast jede Website nutzt HTML. Allerdings bekommen wir davon nichts mit, denn HTML ermöglicht es, nur durch reine Textinformationen, Dinge wie Bilder, Tabellen, Texte etc. darzustellen.
Speziell für uns heißt das, mit HTML können wir unsere Profile gestalten! Es gibt ja bekanntlich die Möglichkeit, in Cynamite.de einen Begrüßungstext zu erstellen (Auf dem Profil: Profil bearbeiten » Begrüßung bearbeiten; oder noch einfacher: http://www.cynamite.de/_misc/community/profiles/edit_welcome.cfm). Man kann dies mit dem Standard-Editor (BB-Code) machen; das hat den Vorteil, dass es bereits einen Editor (ein Programm, dass mir automatisch Codes erzeugt) enthält. Man braucht z.B. nur einen Text anwählen, die Farbe angeben, und schon haben wir den Text in der ausgewählten Farbe. Man kann das Profil aber auch in HTML gestalten; dazu klickst du oben auf HTML-Editor... Das Problem ist nun, es gibt keinen praktischen Editor, man muss den Code manuell eingeben. Deswegen empfehle ich auch, das HTML-Profil offline zu bearbeiten. Das machen wir, wie folgt:
1.) Wir legen einen Ordner an, indem wir in Zukunft sämtliche Dateien reintun, die unser Profil betreffen. Wähle einen günstigen Namen, wie »Cynamite-Profil«...
2.) Wir öffnen das Programm »Editor« (Windows: Start » Programme » Zubehör » Editor), und wählen im Datei-Menü »Speichern Unter«
3.) Nun wählst du den zuvor erstellten Ordner als Speicherort aus, benennst die Datei am besten als »Profil-Konzept_1« und schreibst hinter dem Namen die Endung .htm, also so: »Profil-Konzept_1.htm«. Dann wählst bei »Dateityp« »Alle Dateien«, bei Codierung »Unicode«, und dann speicherst du. Es sollte sich nun eine leere Browserdatei in dem Ordner befinden.
Damit wäre der Anfang gemacht. Wir gehen im Thema »Wie fange ich an?/ Was brauche ich?« weiter darauf ein...
2. Funktionsweise/ Syntax
» Wie kann reiner Text Bilder darstellen, wird man sich fragen. Ganz einfach: Indem der Text dem Browser sagt, was er tun soll; zum Beispiel Bilder darstellen. Damit der Browser aber weiß, was echter Text ist, und was eine Aufforderung (ein Befehl), bedient man sich sogenannter Tags (engl. Anhänger, Symbol, Zeichen). Diese Tags werden immer in Größer-als- und Kleiner-als-Klammern eingeschlossen, z.B. : ... Wenn ein Browser so etwas sieht, dann weiß er, jetzt folgt ein Befehl, in diesem Fall der Befehl p, der bedeutet, dass der folgende Text in einem Absatz erscheinen soll. Es gibt zwar Ausnahmen (werden wir noch durchnehmen), aber generell müssen diese Tags immer geschlossen werden, damit der Browser weiß, wann der Befehl zuende ist. Man teilt dies mit einem Endtag mit, der einen Schrägstrich vor dem Befehl enthält, also im Falle des p´s: ... Wenn wir nun das ganze mal zusammenfassen, würde der Code für einen Text so aussehen:
Das ist ein Text
Der Browser wird die Tags nicht darstellen; sie sind Hintergrundinformation, aber sie sind auf jeden Fall da. Vielleicht wirst du dich fragen, was man tun soll, wenn man zum Beispiel eben in einem Text schreiben will... schließlich erfasst der Browser das als Befehl, und es wird nicht auf der Website dargestellt. Dafür wurden sogenannte Entities erschaffen. Sie umschreiben jene Symbole; das ist jedoch vorerst unwichtig, da man diese Entities nur äußerst selten braucht.
Wenn du möchtest, kannst du den obigen Code schonmal in der Editordatei ausprobieren. Gehe dazu in deinen Ordner, wähle die Datei mit der rechten(!) Maustaste aus, und wähle »Öffnen mit » Editor«... Daraufhin sollte sich der bekannte Editor öffnen. Da wir html-Tags usw. für Cynamite nicht brauchen, kannst du den Code oben einfach reinkopieren; dann Speichern (Kurzform: Strg+S). Schließe den Editor nicht, denn es könnte sein, dass du etwas ändern möchtest. Geh nun wieder in den Ordner, und doppelklicke nun auf die Browserdatei. Nun siehst du das, was später auch in Cynamite ungefähr zu sehen sein wird: Ein Text, ohne Tags, nur reiner Text. Wenn du etwas ändern möchtest, gehe wieder auf die Editor-Datei, ändere sie, speichern, dann gehst du wieder zum Browser, und klickst einfach auf »Aktualisieren«.
! Übrigens: Es ist durchaus möglich Tags IN Tags einzubauen. Das klappt nicht mit jedem Tag, (mit demselben zum Beispiel nicht) aber häufig ist es sogar wichtig!
3. Wie fange ich an?/ Was brauche ich?
» Grundsätzlich solltest du erst anfangen, wenn du überhaupt ein Konzept hast. Damit verhinderst du, dass dein Profil blöd aussieht, dass du während des Arbeitens wie wild nach irgendwelchen Bildern suchst, oder du stundenlang mit dem Text, statt dem Code beschäftigt bist. Suche dir also VORHER Bilder aus, und schreibe vorher auf, was später in deinem Profil stehen soll. Klar, man kann Änderungen während des Codens vornehmen, gar kein Problem. Nur ohne Konzept geht´s nicht. Man muss ja etwas haben, an dem man sich festklammern kann. »So soll es aussehen« sollte es lauten^^
Wenn du Zeit sparen willst, kannst du dir außerdem noch einen sogenannten WYSIWYG-Editor besorgen (WYSIWYG= What You See, Is What You Get, engl.: Was du siehst, ist, was du bekommst). Der übernimmt das Tag-Schreiben, und vielleicht dient er auch als Tag-Bibliothek, je nach dem, was du für einen Editor hast.
4. Tags
» Wir gehen nun auf die einzelnen Befehle ein. Jedes Tag hier ist brauchbar, und sollte immer als Lösung betrachtet werden. Folgende Tags sind übrigens jene, die mit einem Endtag beendet werden müssen. Der Inhalt kommt dann zwischen dem Anfangs- und Endtag.
= Ein Absatzelement erzeugen. Alles in diesem Tag wird in einem Absatz zusammen gefasst. Der Absatz endet mit dem jeweiligen letzten Inhalt. Das Absatzelement braucht KEINE Zeilenumbrüche, denn die erstellt es selber. Das Element passt sich automatisch an die Breite des überliegenden Elements an (bei Cynamite ist die maximale Breite 671px). Man kann also bequem langen Text in diesem Element darstellen. Sollte deswegen immer für Text eingesetzt werden!
= Einen Link erzeugen. Die von diesem Element eingeschlossenen Objekte (Text, Bilder etc.) werden zu einem Link. Wenn der User darauf klickt, gelangt er zu einer neuen Seite. Damit der Browser weiß, wohin die Reise gehen soll, muss die URL-Adresse angegeben werden. Das passiert so:
Link
Das href zeigt dem Browser die Adresse, die vollständig und fehlerfrei in "-Klammern daneben geschrieben wird. In diesem Fall ist es http://www.cynamite.de...
Nun passiert folgendes: Je nachdem, welchen Browser der User benutzt, wird beim Klick auf den Link die neue Website anders geöffnet. Mal wird sie auf derselben Seiten geöffnet, mal wird ein neuer Tab oder gar ein neues Fenster geöffnet. Um festzulegen, dass der Link in einem neuen Tab geöffnet wird (denn das ist am optimalsten), müssen wir zusätzlich zur Adresse das target angeben. Es gibt verschiedene Targets, für uns jetzt _blank interressant:
Link
Der Link würde nun in einem neuen Tab/Fenster geöffnet.
Es gibt aber noch eine andere Art von Links: die internen. Dadurch kannst du eine Navigation per Links durch dein Profil gewähren. Momentan wird ein Profil zu klein sein, damit die Wirkung von Ankerlinks erkennen kannst. Nichtsdestotrotz:
Der Punkt, an dem du den User hinführen willst, wird mit einem
Anstatt Oben kannst du jeden anderen Namen eingeben. Hauptsache, du merkst ihn dir.
Nun erstellst du irgendwo anders einen Link, der in diesem Beispiel so lautet:
Nach oben
Du siehst, anstatt einer Internetadresse, habe ich das Oben verwendet, und ein # davorgetan. Der Browser wird nun, beim Klick auf diesen Link, auf den zuvor bestimmten Punkt springen. Einfach mal mit einem langen und großen Profil ausprobieren: Ganz oben erstellst du den Anker (also ), und ganz unten kommt der Link...
Weitere Tags werden im letzten Thema erklärt.
» Nun folgen jene Tags, die NICHT mit einem Endtag beendet werden müssen, weil das auch kein Sinn macht. Diese werden so beschrieben:
= Ein Zeilenumbruch. Zwar kannst du auch mit einem neuen p-Befehl einen Zeilenumbruch erzeugen, aber ein br erzeugt nur einen einzelnen. Außerdem ist es damit viel bequemer, auch wenn es nicht den Vorstellungen der w3 entspricht...
= Ein Bild einfügen. Anstatt des »...« muss die Adresse angegeben werden. Es sollten nur GIFs, JPEGs, oder PNGs verwendet werden! Möchtest du eigene Bilder verwenden, suche bei Google nach einem Imagehoster. Dort lädst du die Bilder hoch, und kopierst anschließend den Direktlink, und fügst ihn hier ein:
Das src ist sowas ähnliches, wie das href beim a-Befehl. Es soll source (engl.: Quelle) bedeuten, und verlinkt das Bild. Möchtest du das Bild als Link verwenden, umschließe das img-Tag mit a-Tags (und der Linkadresse beim a), und gebe zusätzlich im img-Tag »border="0"« an, damit keine ekligen Rahmen erzeugt werden... Das sieht dann so aus:
Es kann sein, dass der Imagehoster mal nicht funktioniert (weil der Server überlastet ist, o.ä.). Damit die User nun kein komisches »Getrennt«-Symbol sehen müssen, sollte dem Bild ein Alternativ-Name gegeben werden. Dieser erscheint, wenn das Bild nicht geladen werden kann. Diesen erstellst du durch die Eigenschaft: alt="Name". Anstatt Name kommt der alternative Name für dein Bild. So sieht´s dann aus:
5. Beispiel-Profil
» Wir haben zwar noch nicht viel Möglichkeiten, unser Profil zu gestalten (machen wir aber noch, keine Sorge), aber die Grundbefehle, und den Syntax kennen wir. Ich weise nochmal darauf hin, dass es sein kann, dass der Code etwas verfälscht dargestellt wird. [Schau dazu bitte mal in den Komments, ob etwas nicht stimmt]
Fangen wir zunächst mit dem Konzept an, auch wenn es nervt: Ich möchte eine Überschrift, dann einen Absatz, wo ich mich beschreibe, dann eine neue Überschrift, dann möchte ich einen Club erklären, mitsamt Links und Bild. Das ganze wird in Standardschrift sein; ohne Farbe, oder sonstige Gestaltung. Wie schon erwähnt, wir wollen erstmal die Syntax kapieren. Ich werde jede Stelle einzeln durchgehen. Zum Schluss folgt der gesamte Code, den du auch kopieren kannst...
Schritt 1 ? Die erste Überschrift
Dazu bedienen wir uns einfach dem p-Befehl. Zwar erzeugt dieser Absätze, aber für eine Überschrift reicht es allemal. Also schreiben wir erstmal , gefolgt von einem , denn wir wollen nur diese Überschrift in dem Absatz haben. Nun schreiben wir zwischen beiden Tags den gewünschten Überschriftstext, also zum Beispiel Willkommen auf meinem Profil!
Nun haben wir die Überschrift... Wir können den Text übrigens ausrichten! Dazu bedienen wir uns einem sogenannten Attribut. Attribute erweitern die Einstellungen für ein Tag. Beinah jedes Tag kann mit Attributen modifiziert werden, was auch extrem wichtig und notwendig ist. Attribute werden im Anfangs-Tag (also in dem Falle ) eingefügt. Es können mehrere Attribute eingesetzt werden, die durch ein einfaches Leerzeichen getrennt werden. Attribute werden so geschrieben: ... Für jedes Tag gibt es unterschiedliche Attribute. Hier findest du eine Liste, die aber momentan erstmal zu viel ist für unsere Vorhaben (also heb den Link für später auf). Wir wollen nun den Text mittig ausrichten. Das Attribut dafür heißt »align«, die Variablen sind »right« »left« »center« »justify«. Wir wollen Center, also schreiben wir: ... Zusammengefasst sieht der Code nun so aus: Willkommen auf meinem Profil!... Probier den Code ruhig aus. Beachte immer, dass alle Tags geschlossen sind, alle Wörter richtig geschrieben, Leerzeichen nicht vergessen, das = nicht vergessen, und das center schön mit "-Klammern einschließen! Am Ende haben wir in der Browservorschau (also Datei speichern, sie normal öffnen... oder wenn schon offen »Aktualisieren« klicken) einen mittig ausgerichteten Text. Nun folgt der Absatz zu meiner Person...
Schritt 2 ? Der erste Absatz
Und zwar machen wir genau dasselbe. Unter der Überschrift schreiben wir wieder ... wohl gemerkt, wenn du im Editor Leerzeichen oder Zeilenumbrüche erstellst, werden die vom Browser ignoriert! Du kannst also jeden Befehl in einer neuen Zeile schreiben, so wie hier:
Text
Nun schreibst du einfach den gewünschten Text zwischen die Tags. Am Ende wird ein neuer Absatz im Browser erzeugt.
Schritt 3 ? Clubbeschreibung mit Bildern und Links
Nun folgt ein neuer Absatz mit Text. Also wieder dasselbe Spielchen, wie oben. Doch diesmal wollen wir noch ein Bild einfügen. Zuvor suchen wir uns das Bild, damit wir die Adresse rauskriegen. Haben wir eins gefunden (wenn´s geht, nur eigene Bilder, oder welche von Cynamite... wegen Copyrights), dann rechtsklicken wir darauf, und wählen »Grafikadresse kopieren«. Jetzt geht´s wieder in den Editor. Der Text sollte schon stehen. Dann erstellen wir folgenden Befehl IM Text (ja, richtig gelesen^^): ... Klicke im Editor nun zwischen die beiden "-Klammern und drücke die Strg-Taste und die V-Taste gleichzeitig (also der Kurzbefehl für Einfügen). Nun sollte die Adresse, des zuvor gewählten Bildes zu sehen sein. Speicher ab, und schau im Browser nach. Wenn du noch mit dem Internet verbunden bist, sollte das Bild zu sehen sein. (wenn nicht, schau nach, ob du alles richtig geschrieben hast. Zwischen den "-Klammern sollten keine Leerzeichen sein!)
Nun haben wir das Bild... Jetzt wollen wir aber noch einen Link zum Club erstellen. Dazu geh wieder zu Cynamite.de, suche einen Link zu deinem Club, und rechtsklicke au ihn. Wähle »Linkadresse kopieren«. Dann geht´s wieder zum Editor. Schreibe am Ende deines Textes den Befehl , damit ein Zeilenumbruch erstellt wird. Nun schreibe einen Link. Der Befehl lautet a, also ... Du siehst, der Tag muss geschlossen werden. Das heißt, zwischen den Tags kann etwas hin, und zwar das Wort, dass zum Link werden soll. Idealerweise ist es der Name des Clubs, also Clubname... Nun klickst du wieder im Editor zwischen den "-Klammern und drückst wieder Strg+V (Einfügen). Fertig. Um nochmal sicher zu gehen, so sieht der Link ungefähr aus: Clubname
