[Versionen] - [Seite bearbeiten]

Kleine Einführung in Html [Diskussion]

Aktuelle Version

HTML für Zirkel-Tafeln

Inhaltsverzeichnis

HTML

HTML ist das erste, was man lernen sollte, wenn man Websiten programmieren will. Hier auf Animexx wird in den Tafeln von Zirkeln auch HTML benutzt, sofern es aktiviert wurde.

Unterstreichen

Zum Unterstreichen verwendet ihr das Tag <u></u>:

Wie es dargestellt wird	Was du schreibst
Ich bin unterstrichen...ich will auch T_T	<u>Ich bin unterstrichen</u>...ich will auch T_T

Fett

Um Text Fett zu machen verwendet ihr das Tag <b></b> (für bold = Englisch: Fett):

Wie es dargestellt wird	Was du schreibst
Ich bin fett ich nicht...	<b>Ich bin fett</b> ich nicht...

Kursiv

Um Text Kursiv zu machen verwendet ihr das Tag <i></i> (für italic = Englisch: Kursiv):

Wie es dargestellt wird	Was du schreibst
Ich bin Kursiv ich nicht...	<i>Ich bin Kursiv</i> ich nicht...

Zeilenumbruch

Um einen Zeilenumbruch einzufügen verwendet das Tag <br />:

Wie es dargestellt wird	Was du schreibst
Gleich folgt ein Umbruch	Gleich folgt ein<br/>Umbruch

Meißt macht man hinter dem <br/> auch noch einen normalen Umbruch (also Enter-Taste drücken) damit man auch im HTML-Code den Überblick behält:

Wie es dargestellt wird	Was du schreibst
Gleich folgt ein Umbruch	Gleich folgt ein<br/> Umbruch

Bilder

Bilder fügt ihr mit dem Tag <img> ein:

Wie es dargestellt wird	Was du schreibst
Fehlendes Bild Angels_feather.jpg Bild:Angels_feather.jpg	<img src="http://animexx.onlinewelten.com/wiki/upload/a/a6/Angels_feather.jpg">

Falls ihr XHTML-konform schreiben wollt, müsst ihr das Tag etwas umändern:

<img src="http://animexx.onlinewelten.com/wiki/upload/a/a6/Angels_feather.jpg" />

Alleinstehende Tags, bekommen hinten noch " /" reingeschrieben!

Dieses Tag hat auch ein Attribut, in diesem Fall src (source = Englisch: Quelle), dort müsst ihr den Link zu dem Bild eingeben. Um Bilder einbinden zu können, müssen diese also irgendwo unter einem Link verfügbar sein!

Tabellen

Tabellen bestehen aus Zeilen und Spalten. Um eine Tabelle anzulegen verwendet ihr das Tag <table></table>, sowie das Tag <tr></tr> und td></td>:

Wie es dargestellt wird

Was du schreibst

1. Spalte und 1. Zeile	2. Spalte und 1. Zeile
1. Spalte und 2. Zeile	2. Spalte und 2. Zeile

<table>
<tr><td>1. Spalte und 1. Zeile</td><td>2. Spalte und 1. Zeile</td></tr>
<tr><td>1. Spalte und 2. Zeile</td><td>2. Spalte und 2. Zeile</td></tr>
</table>

Letzte Änderungen

Hilfe
Spezialseiten

-Das hier soll eine kleine Hilfe werden für die, die noch nicht viel bzw. keine Ahnung von Html haben. Mit Html kann man Tafelseiten gestalten (Dick, kursiv, Unterstrichen ...) oder auch Links klickbar machen oder gar kleine Bilder (die bereits auf Webspace liegen) in die Tafel aufnehmen. Vorsicht! Ihr müsst Html in den Tafel erst aktivieren bevor all diese Funktionen hier funktionieren.
+{{R-Box|INHALT=<div style="text-align:center;">'''HTML für Zirkel-Tafeln'''</div>}}
-'''Ok gehen wir zu den Befehlen über:'''
+{{Infoseiten}}
-Die Befehle müssen immer vor die formatierten Zeilen und dahinter eingegeben werden.
-<nowiki><b>blablablaTextTextText</b>   -   fettgedruckter Text</nowiki>
+=== HTML ===
-<nowiki><u>blablablaTextTextText</u>   -   unterstrichener Text</nowiki>
+HTML ist das erste, was man lernen sollte, wenn man Websiten programmieren will. Hier auf Animexx wird in den Tafeln von Zirkeln auch HTML benutzt, sofern es aktiviert wurde.
-<nowiki><i>blablablaTextTextText</i>   -   kursiver Text</nowiki>
-<nowiki><center>blablablaTextTextText</center>   -   Der Text ist zentriert</nowiki>
-<nowiki><"br">   -   ohne Anführungszeichen! Fügt an beliebiger Stelle einen Zeilenumbruch ein</nowiki>
-Work in Progress. Hab heut keine Zeit mehr :)
+==== Tags ====
+In HTML gibt es sogennante "Tags". Ein Tage steht entweder alleine, so wie der Tag für den Zeilenumbruch <nowiki><br /></nowiki> oder es besteht aus einem Start- und einem End-Tag.
+Die Start-/End-Tags werden auf alles angewendet, was sich zwischen ihnen befindet.
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+normal <u>unterstrichen</u> normal<br />Das war ein Umbruch
+| bgcolor="#FFFFFF" |
+<pre>normal <u>unterstrichen</u> normal<br />Das war ein Umbruch</pre>
+|}
+Man sieht zuerst die Verwendung des Tags zum Unterstreichen, welches aus Start- und End-Tag besteht, und dann die Verwendung des alleinstehenden Tags für einen Zeilenumbruch.
+==== Unterstreichen ====
+Zum Unterstreichen verwendet ihr das Tag <nowiki><u></u></nowiki>:
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+<u>Ich bin unterstrichen</u>...ich will auch T_T
+| bgcolor="#FFFFFF" |
+<pre><u>Ich bin unterstrichen</u>...ich will auch T_T</pre>
+|}
+==== Fett ====
+Um Text Fett zu machen verwendet ihr das Tag <nowiki><b></b></nowiki> (für bold = Englisch: Fett):
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+<b>Ich bin fett</b> ich nicht...
+| bgcolor="#FFFFFF" |
+<pre><b>Ich bin fett</b> ich nicht...</pre>
+|}
+==== Kursiv ====
+Um Text Kursiv zu machen verwendet ihr das Tag <nowiki><i></i></nowiki> (für italic = Englisch: Kursiv):
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+<i>Ich bin Kursiv</i> ich nicht...
+| bgcolor="#FFFFFF" |
+<pre><i>Ich bin Kursiv</i> ich nicht...</pre>
+|}
+==== Zeilenumbruch ====
+Um einen Zeilenumbruch einzufügen verwendet das Tag <nowiki><br /></nowiki>:
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+Gleich folgt ein<br/>Umbruch
+| bgcolor="#FFFFFF" |
+<pre>Gleich folgt ein<br/>Umbruch</pre>
+|}
+Meißt macht man hinter dem <nowiki><br/></nowiki> auch noch einen normalen Umbruch (also Enter-Taste drücken) damit man auch im HTML-Code den Überblick behält:
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+Gleich folgt ein<br/>
+Umbruch
+| bgcolor="#FFFFFF" |
+<pre>Gleich folgt ein<br/>
+Umbruch</pre>
+|}
+==== Bilder ====
+Bilder fügt ihr mit dem Tag <img> ein:
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+[[Bild:Angels_feather.jpg]]
+| bgcolor="#FFFFFF" |
+<pre><img src="http://animexx.onlinewelten.com/wiki/upload/a/a6/Angels_feather.jpg"></pre>
+|}
+<small>Falls ihr XHTML-konform schreiben wollt, müsst ihr das Tag etwas umändern:
+<pre><img src="http://animexx.onlinewelten.com/wiki/upload/a/a6/Angels_feather.jpg" /></pre> Alleinstehende Tags, bekommen hinten noch " /" reingeschrieben!</small>
+Dieses Tag hat auch ein Attribut, in diesem Fall src (source = Englisch: Quelle), dort müsst ihr den Link zu dem Bild eingeben. Um Bilder einbinden zu können, müssen diese also irgendwo unter einem Link verfügbar sein!
+==== Tabellen ====
+Tabellen bestehen aus Zeilen und Spalten. Um eine Tabelle anzulegen verwendet ihr das Tag <nowiki><table></table></nowiki>, sowie das Tag <nowiki><tr></tr></nowiki> und <nowiki>td></td></nowiki>:
+{| width="100%"
+| width="40%" |
+<small>'''Wie es dargestellt wird'''</small>
+| width="60%" |
+<small>'''Was du schreibst'''</small>
+|-
+| align="center" |
+<table>
+<tr><td>1. Spalte und 1. Zeile</td><td>2. Spalte und 1. Zeile</td></tr>
+<tr><td>1. Spalte und 2. Zeile</td><td>2. Spalte und 2. Zeile</td></tr>
+</table>
+| bgcolor="#FFFFFF" |
+<pre>
+<table>
+<tr><td>1. Spalte und 1. Zeile</td><td>2. Spalte und 1. Zeile</td></tr>
+<tr><td>1. Spalte und 2. Zeile</td><td>2. Spalte und 2. Zeile</td></tr>
+</table></pre>
+|}
+[[Kategorie:Computer]]

Wie es dargestellt wird	Was du schreibst
normal unterstrichen normal Das war ein Umbruch	normal <u>unterstrichen</u> normal<br />Das war ein Umbruch