html Tutorial 3 von 4 - Bilder

Und wie versprochen geht es schon weiter mit dem html Tutorial.
Als erstes hatten wir die Grundlagen und anschließend die Tabellen, jetzt wollen wir uns das Einfügen von Bildern näher anschauen. Es gibt verschiedene Arten Bilder einzufügen. Ich werde euch zwei bzw. drei Varianten zeigen.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.

1. Variante
<*img alt="Dateiname [kann man aber auch ignorieren]" src="Link" style="border-radius:Abrundungsradius%; border-style:solid; height:Höhepx; margin:5px; width:Breitepx" />

Damit bekommt ihr runde oder abgerundete Bilder hin, indem ihr den Radius einstellst.

Radius auf 10%	Radius auf 30%	Radius auf 50%

2. Variante
<*img src="Link" />

Damit setzt ihr ein einfaches Bild rein in Originalgröße, mit der Erweiterung style="width:Weitepx" könnt ihr auch die Größe einstellen. Das ganze sähe dann so aus:
<*img src="Link" style="width: Weitepx" />
3. Variante
<*a href="Link"><*img alt="Dateiname [kann man auch ignorieren]" src="Link" style="width: Weitepx;" />
Hierbei verlinkt ihr ein Bild. Ihr könnt zB. den Direktlink des Bildes angeben, damit man das Bild anklicken und es sich in Originalgröße anschauen kann. Ihr könnt aber auch den Link im a href Bereich austauschen und zu einer anderen Webseite verlinken. Das gleiche funktioniert auch mit dem Mail verlinken. Dabei tauscht ihr einfach den Link im a href Bereich durch mailto:Mailadresse aus. So macht man zB. auch Buttons.

    mit Direktlink zum Bild                           mit verlinkter Mailadresse
So das war auch schon der dritte Teil des Tutorials. Im nächsten geht es dann mit einem Scrollfeld und dem Spoilerbutton zum Aufklappen weiter.

html Tutorial 2 von 4 - Tabellen

Und wie versprochen geht es schon weiter mit dem html Tutorial.

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.
Fangen wir mit einer einfachen Tabelle an.
 Beispiel:
 <*table border="Zahl von 0 bis ..."> [mit der Zahl könnt ihr die Umrandung eurer Tabelle ändern]
  <*tbody>
    <*tr> [Tabellenzeile]
      <*td> [Tabellenspalte, 
                       hiervon könnt ihr so viele nebeneinander setzen, wie in euer Fenster passt.]
              dein Text
      </*td> 
    </*tr>
  </*tbody> 
</*table>
und so sieht das Ganze dann aus hier mit zwei Zeilen à zwei Spalten

mit border="0"       Text1 Text2 Text3 Text4

mit border="1"       Text1 Text2 Text3 Text4

mit border="2"        Text1 Text2 Text3 Text4

mit border="3" Text1 Text2 Text3 Text4

Wie ihr seht wird die Umrandung stärker, je höher ihr mit dem border geht.
Soweit zur einfachen Tabelle. Wir wollen aber nun keine einfache Tabelle, sondern eine Tabelle mit Hintergrundbild.
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
anschließend geht es wie oben weiter.
Das ganze geht natürlich auch noch weiter, so dass wir in die vorhandene Tabelle mit Hintergrundbild eine weitere Tabelle setzen können. Das sieht dann wie folgt aus:
<*table border="0" cellspacing="30" style="background-image: url(Link); height: Höhepx; margin-left: auto; margin-right: auto; width: Breitepx;>
  <*tbody>
    <*tr>
      <*table>
        <*tbody>
          <*tr>
            <*td>
              Text
            </*td>
          </*tr>
        </ *tbody>
      </*table>
    </*tr>
  </*tbody>
</*table>

So könnte das Ganze dann aussehen

So .... das war es vorerst mit den Tabellen. Im nächsten Part dieses vierteiligen Tutorials zeige ich euch drei verschiedene Möglichkeiten Bilder im htmlmodus zu platzieren.

html Tutorial 1 von 4 - Grundlagen

Meiner Erfahrung nach haben sehr viele Probleme damit ihre htmlcodes zu programieren, bzw wissen einfach nicht wie es geht. Ich habe gerade einer Freundin erklärt wie sie ihre Beschreibung für ihr RPG auf Animexx programmieren muss und dachte, dass es vielleicht einigen hilft, wenn ich hier einfach mal das Wichtigste zusammen trage. Die html Codes funktionieren natürlich nicht nur auf Animexx, sondern auch unter anderem hier bei Blogger.
Ich werde das ganze allerdings nicht als einen Post machen, denn das wäre wirklich etwas zu viel auf einmal.
Daher habe ich überlegt, dass ich das Tutorial in vier Einzelposts aufteilen werde.
1. Grundlagen
2. Tabellen
3. Bilder
4. Scrollen und Spoilerbutton

In den folgenden Codes müsst ihr euch den * wegdenken, den trage ich in den Beispielen ein, damit ihr die Codes lesen könnt. In den Klammern [ ] sind kurze Erklärungen zum Code.
Wir fangen heute mit den Grundlagen an.

zum Fett schreiben   <*b>Text</*b>

zum kursiv schreiben   <*i>Text</*i>

zum Unterstreichen   <*u>Text</*u>

zum Durchstreichen   <*strike>Text</*strike>

zum _unter setzen   <*sub>Text</*sub>

zum ^hoch setzen   <*sup>Text</*sup>

zum Einfärben   <*span style="color:#Farbnummer">Text</*span>
die Farbnummer findet ihr zB. in Photoshop, indem ihr mit Doppelklick auf eure Vorder- oder Hintergrundfarbe klickt und dann eure Farbe auswählt. Die Farbnummer steht nun ganz unten.
zum Größe verändern   <*span style="font-size:Größepx">Text</*span>

um ein Wort mit einer Webseite zu verlinken   <*a href="Link" target="_blank">Text</*a>

um Worte mit einer Mailadresse zu verlinken   <*a href="Emailadresse" target="_blank">Text</*a>

Das war der erste Teil des Tutorials. Im nächsten Teil zeige ich euch dann wie man Tabellen einfügt.