Kleine Einführung in Html [Diskussion]
Version vom 14:20, 30. Apr 2005 GhostGambler (Beiträge) ← Vorige Änderung |
Aktuelle Version cato (Beiträge) |
||
Zeile 1: | Zeile 1: | ||
+ | {{R-Box|INHALT=<div style="text-align:center;">'''HTML für Zirkel-Tafeln'''</div>}} | ||
+ | |||
+ | {{Infoseiten}} | ||
+ | |||
+ | |||
=== HTML === | === 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. | + | 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. |
==== Tags ==== | ==== Tags ==== | ||
- | In HTML gibt es sogennante "Tags". Ein Tage steht entweder alleine, so wie der Tag für den Zeilenumbruch <nowiki> </nowiki> oder es besteht aus einem Start- und einem End-Tag. | + | 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. | Die Start-/End-Tags werden auf alles angewendet, was sich zwischen ihnen befindet. | ||
- | |||
{| width="100%" | {| width="100%" | ||
| width="40%" | | | width="40%" | | ||
Zeile 14: | Zeile 18: | ||
|- | |- | ||
| align="center" | | | align="center" | | ||
- | normal <u>unterstrichen</u> normal Das war ein Umbruch | + | normal <u>unterstrichen</u> normal<br />Das war ein Umbruch |
| bgcolor="#FFFFFF" | | | bgcolor="#FFFFFF" | | ||
- | <pre>normal <u>unterstrichen</u> normal Das war ein Umbruch</pre> | + | <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. | 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. | ||
Zeile 63: | Zeile 67: | ||
==== Zeilenumbruch ==== | ==== Zeilenumbruch ==== | ||
- | Um einen Zeilenumbruch einzufügen verwendet das Tag <nowiki> </nowiki>: | + | Um einen Zeilenumbruch einzufügen verwendet das Tag <nowiki><br /></nowiki>: |
{| width="100%" | {| width="100%" | ||
| width="40%" | | | width="40%" | | ||
Zeile 71: | Zeile 75: | ||
|- | |- | ||
| align="center" | | | align="center" | | ||
- | Gleich folgt ein Umbruch | + | Gleich folgt ein<br/>Umbruch |
| bgcolor="#FFFFFF" | | | bgcolor="#FFFFFF" | | ||
- | <pre>Gleich folgt ein Umbruch</pre> | + | <pre>Gleich folgt ein<br/>Umbruch</pre> |
|} | |} | ||
- | Meißt macht man hinter dem <nowiki> </nowiki> auch noch einen normalen Umbruch (also Enter-Taste drücken) damit man auch im HTML-Code den Überblick behält: | + | 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="100%" | ||
| width="40%" | | | width="40%" | | ||
Zeile 83: | Zeile 87: | ||
|- | |- | ||
| align="center" | | | align="center" | | ||
- | Gleich folgt ein | + | Gleich folgt ein<br/> |
Umbruch | Umbruch | ||
| bgcolor="#FFFFFF" | | | bgcolor="#FFFFFF" | | ||
- | <pre>Gleich folgt ein | + | <pre>Gleich folgt ein<br/> |
Umbruch</pre> | Umbruch</pre> | ||
|} | |} | ||
Zeile 99: | Zeile 103: | ||
|- | |- | ||
| align="center" | | | align="center" | | ||
- | [[Bild:Angels_feather.jpg]] <small>Der blaue Rahmen um das Bild herum ist Wiki-bedingt!</small> | + | [[Bild:Angels_feather.jpg]] |
| bgcolor="#FFFFFF" | | | bgcolor="#FFFFFF" | | ||
- | <pre><img src="http://animexx.4players.de/wiki/upload/a/a6/Angels_feather.jpg"></pre> | + | <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: | <small>Falls ihr XHTML-konform schreiben wollt, müsst ihr das Tag etwas umändern: | ||
- | <pre><img src="http://animexx.4players.de/wiki/upload/a/a6/Angels_feather.jpg" /></pre> Alleinstehende Tags, bekommen hinten noch " /" reingeschrieben!</small> | + | <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! | 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! | ||
Zeile 129: | Zeile 133: | ||
</table></pre> | </table></pre> | ||
|} | |} | ||
- | Ihr müsst also einfach eine Tabelle mit <nowiki><table></table></nowiki> bilden. In einer Tabelle könnt ihr mit <nowiki><tr></tr></nowiki> eine Reihe anfangen und in einer Reihe könnt ihr mit <nowiki><td></td></nowiki> einzelne Zellen anlegen. | + | |
+ | [[Kategorie:Computer]] |
Aktuelle Version
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.
Tags
In HTML gibt es sogennante "Tags". Ein Tage steht entweder alleine, so wie der Tag für den Zeilenumbruch <br /> oder es besteht aus einem Start- und einem End-Tag.
Die Start-/End-Tags werden auf alles angewendet, was sich zwischen ihnen befindet.
Wie es dargestellt wird |
Was du schreibst |
normal unterstrichen normal |
normal <u>unterstrichen</u> normal<br />Das war ein Umbruch |
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 <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 |
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 |
Gleich folgt ein<br/> Umbruch |
Bilder
Bilder fügt ihr mit dem Tag <img> ein:
Wie es dargestellt wird |
Was du schreibst |
Fehlendes Bild |
<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 | ||||
|
<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 |