Silenthardware & Dirkvader Forum: Tutorial: Systemvorstellung optisch ansprechender machen - Silenthardware & Dirkvader Forum

Zum Inhalt wechseln

Seite 1 von 1
  • Du kannst kein neues Thema erstellen
  • Dieses Thema ist geschlossen

Tutorial: Systemvorstellung optisch ansprechender machen ein kleiner HTML Leitfaden Thema bewerten: -----

#1 Mitglied ist offline   hamuchen 

  • Forenadministration
  • Galerie anzeigen
  • Gruppe: Admin
  • Beiträge: 7.658
  • Registriert: 26-November 04
  • Gender:Male
  • Location:Lübeck
  • Interests:Fotografie, Testberichte ;)
  • CPU:Q9550 @ 3,2GHz (Mugen 2)
  • VGA:5770 1GB @ 915/1400MHz (Musashi)
  • HDD:OCZ Vertex 2 (60GB) & 2TB Samsung
  • MOBO:Gigabyte EP45-UD3LR
  • RAM:4x2GB Corsair XMS2
  • Case:LianLi P60 Armorsuit
  • Netzteil:Enermax PRO82+ 385W (modded)

  Geschrieben 01. Juni 2006, 16:11

Einleitung


Ihr fragt euch, wie ihr eure Systemvorstellung optisch ansprechender gestalten könnt? Dann seid ihr hier genau richtig. Denn dies solle ein kleiner Leitfaden dafür sein.

Da das Forum - wie fast jede Internetseite - aus HTML zusammengesetzt ist, wäre es gut, wenn ihr schon ein paar Vorkenntnisse in diese Richtung hast. Wobei das bisschen HTML dieser Formatierung nicht wirklich schwer zu lernen ist. Sogar Anfänger sollten damit zurecht kommen.


Die Vorbereitung


Es gibt ein paar grundlegende Dinge, die zu klären sind. Als erstes müsst ihr den Beitrag im richtigen Antwortmodus (Add Reply) und nicht mit der Schnellanwort (Fast Reply erstellen. Da müsst ihr dem Forum mitteilen, dass ihr euren Beitrag in HTML schreibt, dabei gibt es zwei Unterschiede.
Zunächst ist in jedem Beitrag HTML aus. Um dies einzuschalten, müsst ihr es folgendermaßen auswählen.

Angehängtes Bild: 2008_01_26_200355.png Angehängtes Bild: 2008_01_26_200414.png


Der Unterschied zwischen "Raw" und "Auto" ist einzig und allein der, dass ihr beim Raw-Modus jeden Absatz einzeln kennzeichnen müsst. Leider spinnt der Auto-Modus manchmal, außerdem will ich mir nicht in mein html reinfuschen lassen, also benutze ich mal den Raw-Modus.


Die HTML-Befehle



Teil I: Grundlagen


Nun sind eigentlich schon alle Einstellungen vorgenommen und man kann anfangen mit HTML zu arbeiten. Dazu fangen wir mal einfach an.

Um einen neuen Absatz zu machen, gibt es folgenden Befehl:
<br/>
Da ihr ja den Raw-Modus gewählt habt, müsst ihr das wirklich bei jedem kleinen Absatz am Ende der Zeile machen.

Um einen so schön weiß hinterlegten Text zu machen, schließt ihr den Text in folgende Bezeichner ein:
<p>Hier kommt der Text rein</p>


Da HTML überzählige Leerzeichen einfach verschluckt, müsst ihr für mehrere Leerzeichen hintereinander diese Buchstabenfolge eingeben:

Dies waren die grundlegenden Befehle. Hiermit kann man schon mal ein wenig arbeiten, aber so richtig super wird das auch noch nicht. Da fehlt noch was. Und dazu kommen wir jetzt.

Teil II: Überschriften


Um schöne Überschriften zu gestalten, müsst ihr auch nur die Forensoftware richtig nutzen. Denn hier sind schon verschiedene Styles festgelegt.

<h1>Überschrift 1</h1>

Überschrift 1


<h2>Überschrift 2</h2>

Überschrift 2


<h3>Überschrift 3</h3>

Überschrift 3


<h4>Überschrift 4</h4>

Überschrift 4


<h5>Überschrift 5</h5>
Überschrift 5

<h6>Überschrift 6</h6>
Überschrift 6

Die ersten zwei Überschriften sind ganz nett, aber ich finde die Nummer 3 und 4 besonders Ansprechend. Deswegen nehme ich sie auch immer. Aber probiert ruhig weiter aus. Sonst sieht ja hier alles gleich aus und das ist ja auch langweilig. ;)

Teil III: Eine Tabelle


Um jetzt noch eine Tabelle zu erstellen, sollten schon ein paar mehr Kenntnisse vorhanden sein. Ich benutze immer folgende Tabelle und erweitere sie immer um den unteren Part. Hier sollte schon ein bisschen mehr Ahnung vorhanden sein, darum spare ich mir mal die Erklärungen! :P

<table width="90%" border="0"><tr><th>Überschrift 1. Spalte</th><th>Überschrift 2. Spalte</th></tr><tr><td><b>Text</b></td><td>Text</td></tr><tr><td><b>Text</b></td><td>Text</td></tr></table>


Dabei kommt folgendes raus:

Überschrift 1. Spalte Überschrift 2. Spalte
Text Text
Text Text


Teil IV: Bildergalerie


Um eine Bildergalerie zu erstellen hab ich mir folgenden Maske gebastelt:

	<table width="90%" border="0">	  <tr>		<td width="30%">Bild 1</td>		<td width="30%">Bild 2</td>		<td width="30%">Bild 3</td>	  </tr>	  <tr>		<td><i>Kommentar Bild 1</i></td>		<td><i>Kommentar Bild 2</i></td>		<td><i>Kommentar Bild 3</i></td>	  </tr>	  <tr>		<td>Bild 4</td>		<td>Bild 5</td>		<td>Bild 6</td>	  </tr>	  <tr>		<td><i>Kommentar Bild 4</i></td>		<td><i>Kommentar Bild 5</i></td>		<td><i>Kommentar Bild 6</i></td>	  </tr>	</table>


Bild 1 Bild 2 Bild 3
Kommentar Bild 1 Kommentar Bild 2 Kommentar Bild 3
Bild 4 Bild 5 Bild 6
Kommentar Bild 4 Kommentar Bild 5 Kommentar Bild 6


SystemvorstellungenTutorials
Acer Aspire One Modding
Der Lian-Li-Schwarzarbeiter
HTPC: Sugo-Ringer
Silent Internet Laptop (ausgemustert)
Mein Rechenknecht (alt)
Umgebauter Multitainer als HTPC (sehr alt)
Wassergekühlter Dragon (schon antik)
Bilder einfügen (Wie kommen die Bilder eigentlich in die Posts?)
Systemvorstellung optisch ansprechender machen (kleiner HTML Leitfaden)
IDE-Kabel kürzen (Wie einfach kann das System aufgeräumter sein?)
Lüfter mit Steg entkoppeln (am Beispiel YateLoon D12SL-12)
Lüfteradapter modifizieren (Lüfter auf 5V und 12V mit Tachosignal)
0

Thema verteilen:


Seite 1 von 1
  • Du kannst kein neues Thema erstellen
  • Dieses Thema ist geschlossen

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0