| JeskoForscher {Moderator} |
  Anzahl der Beiträge : 296
Anmeldedatum : 04.08.15
Alter : 23
Ort : Weg hinter den Tempel
 |  Thema: HTML - Tabellen und Boxen Fr 01 Jan 2016, 18:11 | |
| Huhu Gast! :3 In diesem Tutorial möchte ich dir mal einen kleinen, begrenzten Einblick in die Weiten des HTML Universums geben. Dieser Einblick bezieht sich jedoch lediglich auf die Anwendung innerhalb von Foren, beispielsweise für Posts, Beziehungskästen, Tagebücher, etc... Da ich das Ganze selbst noch nicht allzu lange praktiziere und ich es mir mehr oder weniger teilweise selbst beigebracht habe, solltest du besser nicht allzu viel von mir erwarten. Trotzdem gebe ich mir Mühe, dass alles klar und verständlich ankommt. Sollte dies einmal nicht der Fall sein, fragt mich einfach. (: Zunächst einmal: Was ist HTML?»Die Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), abgekürzt HTML, ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt.« [Quelle: Wikipedia] HTML-DokumenteSo viel zu einer ersten Definition, die uns nicht wirklich weiterbringt (was aber nicht daran liegt, dass es Wikipedia ist :D). Zwar ist ein HTML-Dokument für uns hier nicht wirklich relevant, aber meine Wenigkeit wird sich auch dazu kurz äußern. Ein HTML-Dokument besteht aus drei Teilen: der Dokumenttypdeklaration (Doctype), dem HTML-Kopf (head) und dem HTML-Körper (body). Diese werden grundsätzlich immer so angegeben, wie es gleich zu sehen ist – wobei der Doctype von der HTML-Version abhängig ist und daher variiert: - Code:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel der Webseite</title> <!-- weitere Kopfinformationen --> <!-- Kommentare werden im Browser nicht angezeigt. --> </head> <body> <p>Inhalt der Webseite</p> </body> </html> Bis hierhin sind die Informationen für das Anwenden innerhalb eines Forums allerdings nicht zu gebrauchen, da wir ja keine ganze Webseite in einem Post erstellen wollen und können (bis hierhin stammt mein Wissen auch nicht aus dem eigenen Köpfchen :D). Das Anwenden im ForumEinfache BefehleWie du womöglich schon bemerkt hast, wird die Randinformation immer mit einem Namen bezeichnet und für gewöhnlich so angegeben: - Code:
-
<Name> </Name> Alles was dann in diese Information rein gehört, bzw. so ausgeführt werden soll, wie es die Information vorgibt, wird zwischen die beiden Bestandteile geschrieben. Beispiele dafür wären unter anderem: - Code:
-
<center>TEXT</center> Der Befehl Center bewirkt, dass der Text zentriert angezeigt wird. - Code:
-
<blockquote>TEXT</blockquote> Dagegen bewirkt ein Blockquote, dass der Text in einem Block angezeigt wird. Natürlich kannst du solche Befehle beliebig kombinieren, indem du sie einfach zusammen schreibst: - Code:
-
<center><blockquote>TEXT</blockquote></center> Nun werden beide Befehle ineinander ausgeführt. Wichtig ist, dass du dabei die Reihenfolge der Befehle beantwortest: Würdest du den Center in den Blockquote schreiben, wäre nur die Schrift innerhalb des Blockquotes zentriert, dieser selbst allerdings nicht. In diesem Fall ist das aber nur theoretisch, da ein Blockquote immer zentriert ausgelegt ist, während bei einer Tabelle eben Beschriebens passieren würde. Deshalb ist es wichtig, immer die Befehle, die sich auf alles beziehen, außen zu schreiben, und diejenigen, die sich auf einen Teil innerhalb dessen beziehen, auch da rein zu schreiben. Haben die beiden Befehle nichts miteinander zu tun, dann müssen sie auch nicht ineinander geschrieben werden. Jetzt ist dir vielleicht schon aufgefallen, dass es viele verschieden Befehle für alles gibt. Leider kann ich hier nicht alle aufschreiben, aber wenn du Tante Google um Rat fragst, müsste sie dir dabei helfen. Vorteilhaft wäre es natürlich, die wichtigsten Befehle auswendig zu lernen, da es einfach behindert, ständig nachgucken zu müssen. Ebenfalls wichtig ist, dass hier am Besten immer mit Kleinbuchstaben gearbeitet wird – Großbuchstaben gehen auch, aber nicht immer, weshalb es besser ist, diese wegzulassen. Tabellen, Boxen, etc.Im Prinzip sind Tabellen und Boxen vom gesamten Aussehen dasselbe. Eine Tabelle bietet euch lediglich mehr Funktionen als eine Box. Dementsprechend sind Boxen einfacher und weniger komplex, weshalb ich mit diesen einfach mal anfange. BoxenDas Grundgerüst einer Box wird mit dem Befehl Div angegeben. Dieser Befehl unterscheidet sich jedoch von den eben angegebenen, da wir ja die Merkmale und Eigenschaften der Box angegeben müssen; bei Center war ja zum Beispiel die Funktion direkt gegeben. - Code:
-
<div style="BESCHREIBUNG DER BOX">TEXT</div> Da uns dieser Code noch keine wirkliche Beschreibung der Box liefert, zeigt er auch nichts an. In welcher Reihenfolge diese Beschreibung angegeben ist, ist egal. Trotzdem ist es vorteilhaft, mit den grundlegenden Dingen zu beginnen. Diese sind unter anderem die Breite und die Höhe. Beide werden in Pixeln angegeben; der Befehl für die Breite lautet width, der Befehl für die Höhe height. Trotzdem zeigt die Box uns noch nichts an, da wir weder eine Umrandung, noch einen Hintergrund angegeben haben. Diese passen sich in dem Fall dem vom Forum vorgegebenen an. Deshalb geben wir auch gleich die Hintergrundfarbe und eine Umrandung mit an. Die Hintergrundfarbe wird in Farbcodes angegeben, die Umrandung dagegen besitzt viele Funktionen, wie zum Beispiel Farbe (Farbcodes), Dicke (Pixel) und Art der Umrandung (Eigennamen); der Befehl für die Hintergrundfarbe lautet background-color, der Befehl für die Umrandung border. Das ganze klingt jetzt noch ziemlich schwierig, weshalb ich euch den Code erst einmal zeige. - Code:
-
<div style="width: 300px; height: 100px; background-color: #ffffff; border: 5px solid #00ffff">TEXT</div> Die einzelnen Befehle werden immer mit einem Semikolon (;) abgetrennt, während hinter den Befehl ein Doppelpunkt kommt, der vor der Ausführung dieses Befehls steht. Pixel werden mit px abgekürzt, Farbcodes bekommen ein # und anschließend der Farbcode, der aus Buchstaben und/oder Zahlen bestehen kann. Im Border steht immer zuerst die Größe bzw. Dicke der Umrandung, dann die Art der Umrandung, die in verschiedenen Eigennamen angegeben wird, von denen es auch einige gibt, und anschließend kommt die Farbe. Farben werden also immer mit # und dem Farbcode angegeben. Das Ganze sollte dann übrigens so aussehen: TEXT Der Vorteil ist: Ihr könnt im Style-Bereich einer Box Befehle wie ganz oben (z.B. wie der Text ausgelegt ist) angeben und müsst sie nicht extra im Code notieren. In einer Box kann man also auch unter anderem angegeben, wie der Text ausgelegt ist. Das funktioniert mit dem Befehl text-align. Angegeben wird das dann wieder mit Eigennamen wie left (links), center (zentriert), right (rechts) oder justify (Block). Man kann also so vieles vorgeben, dass es schon nahezu unmöglich ist, alles hier zu notieren. Natürlich steht dir Tante Google dabei wie immer hilfsbereit zur Seite. TabellenTabellen funktionieren genauso wie Boxen: du musst nur das div durch table ersetzen und innerhalb der Tabelle tr und td für die Zeile und Spalte angeben. - Code:
-
<table style="width: 300px; height: 100px; background-color: #ffffff; border: 5px solid #00ffff">
<tr>
<td>
TEXT
</td>
</tr>
</table> Willst du nun, dass deine Tabelle in Spalten und Zeilen gegliedert ist, so bleibt das Grundgerüst in etwa gleich: - Code:
-
<table style="width: 300px; height: 100px; background-color: #ffffff; border: 5px solid #00ffff">
<tr>
<td>
TEXT (Spalte 1, Zeile 1)
</td>
<td>
TEXT (Spalte 2, Zeile 1)
</td>
<td>
TEXT (Spalte 3, Zeile 1)
</td>
</tr>
<tr>
<td>
TEXT (Spalte 1, Zeile 2)
</td>
<td>
TEXT (Spalte 2, Zeile 2)
</td>
<td>
TEXT (Spalte 3, Zeile 2)
</td>
</tr>
</table> | TEXT (Spalte 1, Zeile 1) | TEXT (Spalte 2, Zeile 1) | TEXT (Spalte 3, Zeile 1) | | TEXT (Spalte 1, Zeile 2) | TEXT (Spalte 2, Zeile 2) | TEXT (Spalte 3, Zeile 2) |
Willst du also nur eine Zeile, so reicht ein tr, in den du für jede Spalte, die du willst einen td schreibst, den du dann wieder schließt und für die nächste Spalte erneut hinschreibst. Sind alle Spalten pro Zeile angegeben, schließt du den tr und eröffnest für die nächste Zeile einen Neuen. Soll deine Zeile nun aber einen anderen Hintergrund haben, ergänzt du wie bei dem table einen Style-Bereich und notierst dort die Hintergrundfarbe, wie eben beschrieben. - Code:
-
<table style="width: 300px; height: 100px; background-color: #ffffff; border: 5px solid #00ffff">
<tr style="background-color: #000000">
<td>
TEXT (Spalte 1, Zeile 1)
</td>
<td>
TEXT (Spalte 2, Zeile 1)
</td>
<td>
TEXT (Spalte 3, Zeile 1)
</td>
</tr>
<tr>
<td>
TEXT (Spalte 1, Zeile 2)
</td>
<td>
TEXT (Spalte 2, Zeile 2)
</td>
<td>
TEXT (Spalte 3, Zeile 2)
</td>
</tr>
</table> | TEXT (Spalte 1, Zeile 1) | TEXT (Spalte 2, Zeile 1) | TEXT (Spalte 3, Zeile 1) | | TEXT (Spalte 1, Zeile 2) | TEXT (Spalte 2, Zeile 2) | TEXT (Spalte 3, Zeile 2) |
Und schon hast du die Zeile schwarz gemacht. Soll das Ganze nur eine Spalte betreffen, fügst den Style-Bereich einfach bei dem jeweiligen td ein. AbschlussIch hoffe, ihr konntet einigermaßen etwas damit anfangen und hattet Spaß beim Lesen. Wichtig ist, dass ihr euch beim Coden Zeit nehmt und Ruhe habt: nur ein Fehler könnte alles zerstören; und ich weiß aus persönlicher Erfahrung, dass es nervig ist den Fehler zu suchen. Schaut euch also alles genau an, setzt Leerzeichen nur da, wo ich es getan habe, lasst sie dort weg, wo ich es auch getan habe, etc. Vielleicht füge ich auch ein paar Ergänzungen in diesem Thread ein, wenn es etwas gibt, das ich dir ebenfalls erklären möchte. Dann wünsche ich euch viel Spaß beim Coden! LG, Berry. :3 |
|
