Manche Texte sehen aus wie eine "Buchstabenwüste": Keine Überschriften, keine Absätze, keine Hervorhebungen wie fett, kursiv, unterstrichen, Farben u.ä., keine Bilder, keine Struktur - abschreckend und mühsam zu lesen. Wer "freundlicher" mit seinen Lesern umgehen will, findet hier konkrete Hilfen. Freundlicher können eBayer sein, der mit ihren Angeboten Kunden gewinnen wollen, oder Blogger, die ihre Leser besser informieren / überzeugen wollen; das können alle "Autoren" (Schreibende) sein, die - nicht als Programmierer - im Internet schreiben.

Diese Anleitung ist für Autoren geeignet, die gelegentlich ihre Texte attraktiver gestalten wollen, als es mit den Standards möglich ist. Sie können z.B. den Großteil Ihrer Texte mit ihrem vertrauten System schreiben und - an den kritischen Stellen - um HTML- und CSS-Befehle ergänzen.

Meist kann der Autor zwischen zwei Möglichkeiten wählen: "normal" und "HTML". "Normal" ist ähnlich zu bedienen wie z.B. in Textprogrammen, es fehlen aber wesentliche Merkmale, z.B. Einbettung von Hintergründen, Rahmen, Bildern, Videos, Tabellen, Links. WordPress nennt diese Art "visuell", eBay nennt sie "Standard", der Fachbegriff ist "WYSIWYG" (What You See Is What You Get - du siehst, was du bekommst). Wenn Ihnen "normal" nicht genügt, arbeiten Sie mit "HTML".

Beispiel 1: WordPress "visuelle" Gestaltung

Beispiel 2: eBay "Standard"-Gestaltung
eBay

HTML und CSS sind die "Sprachen" für die Gestaltung von Webseiten, die von Browsern erkannt und dargestellt werden. Hier sind die wichtigsten HTML- und CSS-Befehle zusammengestellt, die aus einer "Textwüste" einen besser lesbaren Text machen.

Wenn der Autor keine Formatierbefehle festlegt, werden die Texte trotzdem dargestellt - im Standard-Format. Das kann für "empfindsame" oder verwöhnte Leser abschreckend sein. Auf den Computer (im Browser) des Autors wird es wahrscheinlich ganz anders aussehen als beim Leser. Probieren Sie es mal aus!

HTML ist keine Programmiersprache

"HTML" ist die Abkürzung von "Hypertext Markup Language" - deutsch: "Hypertext-Auszeichnungssprache". Mit HTML lassen sich Texte so auszeichnen ("ergänzen", "beschildern"), dass die Inhalte gegliedert werden, dass sie Bilder, Hyperlinks, Audios, Videos u.a. transportieren können. Die Befehle werden in den Text eingebettet, der Browser kann aus dem "trockenen" Text eine multimediale Seite machen. HTML als Auszeichnungssprache wird nicht "programmiert", sondern schlicht "geschrieben". Das macht ihren Einsatz ziemlich leicht.

Jeder Befehl (englisch "tag" = Markierung) wird zwischen spitze Klammern geschrieben, damit er als Befehl erkannt wird. Die meisten Befehle treten paarweise auf - als "öffnender" und "schließender" Befehl. Der "öffnende" Befehl muss dort stehen, wo seine Wirksamkeit beginnt, wo der Effekt "eingeschaltet" wird. Der "schließende" Befehl steht, wo die Wirksamkeit des "öffnenden" Befehls enden soll, wo der Effekt "ausgeschaltet" wird. Das Öffnen sieht etwa so aus: <befehl>, das Schließen sieht ähnlich aus, aber mit zusätzlichem Schrägstrich vor dem Befehl: </befehl>.

Ein Beispiel ist der Befehl b (von englisch "bold" = fett)

So soll es aussehen (das Wort "fett" in Fettschrift):

Ein Wort wird fett geschrieben.

Um das zu erreichen, muss der öffnende Befehl  dort stehen, wo die Fettschrift beginnt; der schließende Befehl  beendet die Fettschrift, danach geht es mit der Normalschrift (nicht fett) weiter. Daraus ergibt sich dieser Befehl:

Ein Wort wird fett geschrieben.

Manche öffnende Befehle können um Zusatzinfos ("Attribute" mit "Wertzuweisungen") ergänzt werden. Sie werden hinter den Befehl und vor die schließende spitze Klammer geschrieben in der Form <befehl attribut="wertzuweisung">. Z.B. lauten die "nackten" Befehle (ohne Zusatzinfos) für Beginn (öffnend) und Ende (schließend) eines Absatzes

Dazwischen kann ein ein- oder mehrzeiliger Text stehen. Zum "Standard-Format" für den Absatz-Befehl gehören z.B. Schriftformate, linksbündige Textausrichtung sowie Abstände vor und nach dem Absatz. Standard-Formate können durch individuelle Formate ersetzt werden, so kann z.B. die Ausrichtung mit dem Attribut "align" gesteuert werden, die zentrierte Ausrichtung wird mit mit der Wertzuweisung "center" zum align-Attribut gesteuert.

So soll es aussehen:

Zentrierter Text

Das ist der Befehl:

Zentrierter Text

Attribute und Wertzuweisungen müssen nicht gesondert "geschlossen" werden. Das erledigt der schließende Befehl gleich mit, in diesem Beispiel . Ergebnis: Hier endet die Zentrierung, der nächste Abbsatz hat wieder die Standard-Einstellung linksbündig.

oben

CSS ergänzt HTML

CSS ist die Abkürzung von "Cascading Style Sheets" - deutsch: Gestaltungsvorlagen mit stufenweiser "Vererbung" von Eigenschaften. CSS wird dort eingesetzt, wo HTML an seine Grenzen stößt, CSS ergänzt die Sprache HTML (ohne HTML würde CSS nicht funktionieren).

Diese Festlegungen können an unterschiedlichen Stellen gespeichert werden (dezentral, zentral, "halbzentral"). Sie werden dann in der Seite dort eingesetzt, wo die Eigenschaften benötigt werden. Die Wirkungsweise am "Einsatzort" (also an der Stelle innerhalb einer Seite, wo der HTML-Befehl um die Leistungsfähigkeit von CSS ergänzt werden soll) ist unabhängig vom Ort der Speicherung. Die Art des Aufrufs hängt vom Ort der Speicherung ab.

Dezentrale Speicherung

Die dezentrale Speicherung ist gut für einzelne Seiten geeignet, z.B. bei einem eBay-Angebot oder einem Blog-Beitrag. Sie ist die Form, die hier beschrieben wird.

Die Formatier-Anweisung steht an genau am Einsatzort. Die CSS-Anweisungen sind Attribute innerhalb von HTML-Tags, in der Form style="Eigenschaft:Wert;". Sie wirken vom öffnenden bis zum schließenden HTML-Befehl. Beispiel:

So soll es aussehen:

Ein Wort in roter Schrift

Das ist der Befehl:

Ein Wort in roter Schrift

Die Elemente des Befehls bedeuten ("von außen nach innen"):

ist der HTML-Befehl für das Format innerhalb einer Zeile
style=" " ist das CSS-Attribut zum HTML-Befehl 
color:red; ist eine CSS-Angabe, bestehend aus Eigenschaft (color) und Wert (red)
roter ist der zu formatierende Text.

Ein HTML-Befehl kann mehrere Attribute haben, eines davon als CSS-Attribut (style=""). Das CSS-Attribut kann mehrere CSS-Angaben (Kombinationen von Eigenschaft und Wert) haben, z.B. Schriftfarbe, -größe, -art.

Zentrale Speicherung

Diese Form ist geeignet, wenn ein ganzer Internet-Auftritt im einheitlichen Stil formatiert werden soll. Die vermindert die Anzahl nötiger Definitionen und macht dadurch den Code übersichtlicher und anpassungsfreundlicher.

Die Formatierbefehle werden zentral in einem separaten Dokument gespeichert. Dann können sie vom Einsatzort aus aufgerufen werden, auch wenn der sich in einem anderen Dokument (auf einer anderen Seite) befindet.

Die zentrale Speicherung wird hier nicht weiter betrachtet.

"Halbzentrale" Speicherung

"Halbzentral" ist kein Fachausdruck in der CSS-Welt, er soll nur die besondere Position der Formatierbefehle beschreiben: Die Befehle werden weder im zentralen Dokument noch am Einsatzort gespeichert, sondern innerhalb einer Seite (eines "Dokuments").

Ein Beispiel: Wenn die Formatierung bei litfas.de nicht zentral wäre, könnten "seitenweite" Befehle etwa so aussehen:

Beginn der Definitionen:	<style type="text/css">
Schriftart Verdana für alle Texte (falls nicht installiert: Arial, serifenlos):	a,h1,h2,h3,td,li,p {font-family: Verdana, Arial, sans-serif}
Schriftgrad 12 pt für Links, Absätze, Tabellen, Aufzählungen	a,p,td,li {font-size: 12pt;}
Schriftfarbe blau für Überschriften 1., 3. und 4. Ordnung	h1,h3,h4 {color:#0A4F8E;}
Schriftfarbe dunkelrot für Überschrift 2. Ordnung	h2 {color:#DD0000;}
Ende der Definitionen:	</style>

Achtung: Die Klammern sind geschweift{}, nicht rund().

Für Einsteiger mag es verwirrend sein, dass manche Effekte wahlweise in HTML- oder in CSS-Formatierungen möglich sind. Z.B. kann Fettschrift mit dem HTML-Befehl  oder dem CSS-Attribut style="font-weight:bold;" geöffnet werden. Der Grund: Die beiden Sprachen wurden unabhängig voneinander entwickelt. Nun haben Sie die freie Auswahl - der Effekt ist der gleiche.

oben

Eindeutige Farbbezeichnungen

Farben können mit ihren englisch-sprachigen Namen festgelegt werden, z.B. hier als Farbnamen für Vordergrund (z.B. Schrift, Rahmenlinien) und Hintergrund. Eine kleine Auswahl:

Vordergrund: red green blue yellow white silver black
Hintergrund: red green blue yellow white silver black

Es gibt viel mehr Farbnamen, aber die sind z.T. sehr lang (z.B. "lightgoldenrodyellow") und verleiten zu Erinnerungs- und Tippfehlern, ihre Anwendung ist eher selten.

"Handlicher" sind Farbcodes. Die folgende Tabelle zeigt die 216 "websicheren" Farben (von insgesamt etwa 16,8 Mio Farben) sowie 36 (von insgesamt 256) Grau-Stufen (von schwarz bis weiß). Hinweis: Die Darstellung zeigt den Farbcode auf dem Hintergrund, der dem Code entspricht; die Schriftfarbe in dieser Tabelle wechselt nur wegen der Lesbarkeit.

 #000000 

 #330000 

 #660000 

 #990000 

 #CC0000 

 #FF0000 

 #000000 

 #000033 

 #330033 

 #660033 

 #990033 

 #CC0033 

 #FF0033 

 #060606 

 #000066 

 #330066 

 #660066 

 #990066 

 #CC0066 

 #FF0066 

 #0D0D0D 

 #000099 

 #330099 

 #660099 

 #990099 

 #CC0099 

 #FF0099 

 #141414 

 #0000CC 

 #3300CC 

 #6600CC 

 #9900CC 

 #CC00CC 

 #FF00CC 

 #1C1C1C 

 #0000FF 

 #3300FF 

 #6600FF 

 #9900FF 

 #CC00FF 

 #FF00FF 

 #232323 

 #003300 

 #333300 

 #663300 

 #993300 

 #CC3300 

 #FF3300 

 #2A2A2A 

 #003333 

 #333333 

 #663333 

 #993333 

 #CC3333 

 #FF3333 

 #323232 

 #003366 

 #333366 

 #663366 

 #993366 

 #CC3366 

 #FF3366 

 #393939 

 #003399 

 #333399 

 #663399 

 #993399 

 #CC3399 

 #FF3399 

 #404040 

 #0033CC 

 #3333CC 

 #6633CC 

 #9933CC 

 #CC33CC 

 #FF33CC 

 #484848 

 #0033FF 

 #3333FF 

 #6633FF 

 #9933FF 

 #CC33FF 

 #FF33FF 

 #4F4F4F 

 #006600 

 #336600 

 #666600 

 #996600 

 #CC6600 

 #FF6600 

 #565656 

 #006633 

 #336633 

 #666633 

 #996633 

 #CC6633 

 #FF6633 

 #5E5E5E 

 #006666 

 #336666 

 #666666 

 #996666 

 #CC6666 

 #FF6666 

 #656565 

 #006699 

 #336699 

 #666699 

 #996699 

 #CC6699 

 #FF6699 

 #6C6C6C 

 #0066CC 

 #3366CC 

 #6666CC 

 #9966CC 

 #CC66CC 

 #FF66CC 

 #747474 

 #0066FF 

 #3366FF 

 #6666FF 

 #9966FF 

 #CC66FF 

 #FF66FF 

 #7B7B7B 

 #009900 

 #339900 

 #669900 

 #999900 

 #CC9900 

 #FF9900 

 #828282 

 #009933 

 #339933 

 #669933 

 #999933 

 #CC9933 

 #FF9933 

 #898989 

 #009966 

 #339966 

 #669966 

 #999966 

 #CC9966 

 #FF9966 

 #919191 

 #009999 

 #339999 

 #669999 

 #999999 

 #CC9999 

 #FF9999 

 #989898 

 #0099CC 

 #3399CC 

 #6699CC 

 #9999CC 

 #CC99CC 

 #FF99CC 

 #9F9F9F 

 #0099FF 

 #3399FF 

 #6699FF 

 #9999FF 

 #CC99FF 

 #FF99FF 

 #A7A7A7 

 #00CC00 

 #33CC00 

 #66CC00 

 #99CC00 

 #CCCC00 

 #FFCC00 

 #AEAEAE 

 #00CC33 

 #33CC33 

 #66CC33 

 #99CC33 

 #CCCC33 

 #FFCC33 

 #B5B5B5 

 #00CC66 

 #33CC66 

 #66CC66 

 #99CC66 

 #CCCC66 

 #FFCC66 

 #BDBDBD 

 #00CC99 

 #33CC99 

 #66CC99 

 #99CC99 

 #CCCC99 

 #FFCC99 

 #C4C4C4 

 #00CCCC 

 #33CCCC 

 #66CCCC 

 #99CCCC 

 #CCCCCC 

 #FFCCCC 

 #CBCBCB 

 #00CCFF 

 #33CCFF 

 #66CCFF 

 #99CCFF 

 #CCCCFF 

 #FFCCFF 

 #D3D3D3 

 #00FF00 

 #33FF00 

 #66FF00 

 #99FF00 

 #CCFF00 

 #FFFF00 

 #DADADA 

 #00FF33 

 #33FF33 

 #66FF33 

 #99FF33 

 #CCFF33 

 #FFFF33 

 #E1E1E1 

 #00FF66 

 #33FF66 

 #66FF66 

 #99FF66 

 #CCFF66 

 #FFFF66 

 #E9E9E9 

 #00FF99 

 #33FF99 

 #66FF99 

 #99FF99 

 #CCFF99 

 #FFFF99 

 #F0F0F0 

 #00FFCC 

 #33FFCC 

 #66FFCC 

 #99FFCC 

 #CCFFCC 

 #FFFFCC 

 #F7F7F7 

 #00FFFF 

 #33FFFF 

 #66FFFF 

 #99FFFF 

 #CCFFFF 

 #FFFFFF 

 #FFFFFF 

Hintergrund-Information: Die Codes sind nicht willkürlich. Jede Farbe in diesem "RGB"-Farbmodell besteht aus den Komponenten Rot, Grün und Blau. Deren Anteile werden mit einer "Mengenangabe" dargestellt. Verbreitet ist die hier benutzte "hexadezimale" Form (es geht auch prozentual oder dezimal). Die hexadezimalen Zeichen 0 1 2 3 4 5 6 7 8 9 A B C D E F entsprechen den 16 dezimalen Werten von 0 bis 15 (0=Null ist auch ein Wert). Für jede RGB-Komponente werden hier zwei Zeichen benutzt, also von "00" bis "FF", das entspricht 16*16=256 dezimalen Werten (0 bis 255) für jede Komponente, insgesamt ergeben sich daraus 256*256*256=16.777.216 Farben und Helligkeiten. Wenn die RGB-Anteile gleich groß sind, ergibt sich ein Grau-Ton: "Ganz wenig" von jeder Komponente ("000000") ergibt schwarz, "ganz viel" von jeder Komponente ("FFFFFF") ergibt weiss, alles dazwischen ist grau. Das Zeichen # ("Raute") am Anfang macht den Wert als Farbcode erkennbar.

oben

Befehlstabelle

Sie können den Code der rechten Spalte markieren und in Ihr Angebot kopieren. Bitte beachten Sie ggf. die Hinweise in der linken Spalte und passen Sie die Texte Ihrem Bedarf an. Viel Erfolg beim Probieren! Und wenn es mal nicht klappt, probieren Sie es - leicht verändert - gleich noch einmal: Buchstabendreher, Befehle nicht richtig "verschachtelt", Komma oder Semikolon vergessen, Klammer vergessen ... Manchmal liegt es am Browser, der einen Befehl anders interpretiert als andere Browser.

Um diesen Effekt zu erreichen ↓

geben Sie diesen Befehl ↓

Überschriften

<h1>, <h2> etc.

Überschrift 1. Ordnung

Überschrift 2. Ordnung

Überschrift 3. Ordnung

bis

Überschrift 6. Ordnung

Überschriften sind reine HTML-Befehle.

Befehle

<h1>Überschrift 1. Ordnung</h1>

  <h2>Überschrift 2. Ordnung</h2>

  <h3>Überschrift 3. Ordnung</h3>

bis

  <h6>Überschrift 6. Ordnung</h6>

Schriftgröße relativ

In der Überschrift ein Wort kleiner.

Im Absatz ein Wort größer.

Befehle

                
  <h3>In der Überschrift ein <span style="font-size:60%">Wort</span> kleiner.</h3>

  <p>Im Absatz ein <span style="font-size:180%">Wort</span> größer.</p>

fett kursiv unterstrichen

normal Fettschrift normal
normal kursiv normal
normal unterstrichen normal
normal fett kursiv normal
normal fett unterstrichen normal
normal kursiv unterstrichen normal
normal fett kursiv unterstrichen normal

Befehle

                
          normal <b>Fettschrift</b> normal
  
normal <i>kursiv</i> normal
  
normal <u>unterstrichen</u> normal
  
normal <b><i>fett kursiv</i></b> normal
  
normal <b><u>fett unterstrichen</u></b> normal
  
normal <i><u>kursiv unterstrichen</u></i> normal
  
normal <b><i><u>fett kursiv unterstrichen</u></i></b> normal

Schriftfarben

style="color:;"

Ein Wort in roter Schrift
grün
blau
grau

Befehle

Ein Wort in<span style = "color: red;"> roter </span>Schrift<br>
  
<span style="color: green;">grün</span><br>
  
<span style="color: blue;">blau</span><br>
  
<span style="color: silver;">grau</span>

Hintergrundfarbe

style="background-color:;"

normal weiße Schrift auf rotem Grund normal

Manchmal gibt es Konflikte zwischen unterschiedlich definierten Hintergründen. Evtl. kann man eine Hintergrundfarbe "ausschalten" mit dem Befehl style = "background-color: transparent;", der Wert "transparent" wird dann wie eine Farbe benutzt.

Befehle

normal

  <span style = "background-color:red; color:white;">

  weiße Schrift auf rotem Grund

  </span>

  normal

Zeilenumbruch

Ein
einziges Wort eines Textes in der ersten Zeile, ohne Zeilenabstand weiter in der nächsten Zeile.

Hierzu gibt es keinen "schließenden" Befehl.

Befehle

<p>Ein<br>

  einziges Wort eines Textes in der ersten Zeile, ohne Zeilenabstand weiter in der nächsten Zeile.</p>

Absatz

Absatz mit normalem mehrzeiligem Fließtext und Abstand zum vorigen bzw. nächsten Absatz.

Weiter mit einem neuen Absatz.

Befehle

<p>Absatz mit normalem mehrzeiligem Fließtext und Abstand zum 
  vorigen bzw. nächsten Absatz.</p>


  <p>Weiter mit einem neuen Absatz.</p>

Textausrichtung

align=""

Zentrierte Überschrift

Dies ist ein zentrierter Absatz, der je nach verfügbarem Platz ein- oder mehrzeilig ist. Dabei werden alle Zeilen zentriert.

Rechtsbündiger Absatz.

Dies ist ein Absatz im Blocksatz, der je nach verfügbarem Platz ein- oder mehrzeilig ist. Dabei werden alle Zeilen links- und rechtsbündig ausgerichtet.

Befehle

<h3 align="center">Zentrierte Überschrift</h3>

  <p align="center">Dies ist ein zentrierter Absatz, der je nach verfügbarem Platz ein- oder mehrzeilig ist. 
  Dabei werden alle Zeilen zentriert.</p>

  <p align="right">Rechtsbündiger Absatz.</p>

  <p align="justify">Dies ist ein Absatz im Blocksatz, der je nach verfügbarem Platz ein- oder mehrzeilig ist. Dabei werden alle Zeilen links- und rechtsbündig ausgerichtet.</p>

Leerzeichen

Ziel: 5-stelliger Abstand zwischen "[" und "]"
Ergebnis mit 5 Leerzeichen: [ ]
Ergebnis mit 5 "geschützten" Leerzeichen: [ ]

Von einer Reihe normaler "ungeschützter" Leerzeichen wird nur eins gezeigt.

Befehle

                
  Ziel: 5-stelliger Abstand zwischen "[" und "]"<br>

  Ergebnis mit 5 Leerzeichen: [     ]<br>

  Ergebnis mit 5 "geschützten" Leerzeichen: [&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]

Aufzählung

kurzer Text
der Text kann aber auch viel länger sein und über mehrere Zeilen gehen
nochmal kurz

Befehle

     <ul>

           <li>kurzer Text</li>

           <li>der Text kann aber auch viel länger sein und über mehrere Zeilen gehen</li>

           <li>nochmal kurz</li>

     </ul>

Inhalt verbergen

Einen Absatz verbergen: Normal wird Selbstabholung und versicherter Versand zur Auswahl angeboten, diesmal nur Selbstabholung.

Selbstabholung

Verborgen wird "Versicherter Versand". Dieser Inhalt wird nicht ganz entfernt, damit er beim nächsten Angebot wieder aktiviert werden kann.

Achtung: Die Befehle folgen nicht den Schreibregeln anderer öffnender / schließender Befehle.

Befehle

                
  <p>Einen Absatz verbergen: Normal wird Selbstabholung und versicherter Versand zur Auswahl angeboten, 
  diesmal nur Selbstabholung.</p>

  <p>Selbstabholung</p>

  <!--

  <p>Versicherter Versand</p>

  -->

Horizontale Linie

<hr>

Eine horizontale Linie nach einem Absatz, weil danach ein Themenwechsel kommt.

Noch ein Absatz - neues Thema

Hierzu gibt es keinen "schließenden" Befehl.

Befehle

                
  <p>Eine horizontale Linie nach einem Absatz, weil danach ein Themenwechsel kommt.</p>

  <hr>

  <p>Noch ein Absatz - neues Thema</p>

Rahmen

style="border:;"

Ein Objekt (z.B. ein Bild, eine Tabelle, ein Bereich o.ä.) kann mit einem Rahmen beliebiger Farbe und Breite umgeben werden. Hier: Der ganze Absatz mit einer roten 5px durchgehenden Linie.

Die padding-Anweisung padding:6px; im style-Attribut sichert einen Innen-Abstand von 6 Pixel Breite und verhindert, dass der Text den Rahmen berührt.

Befehle

                
  <p style="border: red 5px solid;padding:6px;">Ein Objekt (z.B. ein Bild, eine Tabelle, ein Bereich o.ä.) 
  kann mit einem Rahmen beliebiger Farbe und Breite umgeben werden. Hier: 
  Der ganze Absatz mit einer roten 5px durchgehenden Linie.</p>
                

Bereich

Bereich

Alles im Bereich folgt den gleichen Regeln, z.B. hier stehen die Überschrift und die folgenden Absätze auf hellblauem Hintergrund mit dunkelblauem Rahmen.

Außen-Abstand zur Umgebung: 20px.

Innen-Abstand zum Inhalt: 20px.

Der Außenabstand wird mit der margin-Anweisung im style-Attribut festgelegt, der Innenabstand mit der padding-Anweisung.

Befehle

                
  <div style="background-color: #D7E6FD; border: solid 1px #0000B9; margin: 20px; padding: 20px;">

  <h1>Bereich</h1>

  <p>Alles im Bereich folgt den gleichen Regeln, z.B. hier stehen die Überschrift und die folgenden Absätze
  auf hellblauem Hintergrund mit dunkelblauem Rahmen.</p>

  <p>Außen-Abstand zur Umgebung: 20px.</p>

  <p>Innen-Abstand zum Inhalt: 20px.</p>

  </div>

Bild einbinden

<img>

Ein Bild zeigen, das auf eigenem Webspace (nicht beim Internet-Partner) gespeichert ist.

Die genaue Internet-Adresse des Bildes und der Bildname müssen bekannt sein. Seiten werden schneller aufgebaut, wenn Breite und Höhe vorgegeben werden ("width" und "height"). Der beschreibende Text "alt" wird gezeigt, wenn es mit dem Bild mal Probleme gibt.

Zum img-Befehl gibt es keinen "schließenden" Befehl.

Befehle

<p>Ein Bild zeigen, das auf eigenem Webspace (nicht beim Internet-Partner) 
  gespeichert ist.</p>


  <img src = "http://litfas.de/ebay/vorlage.jpg" width="400" height="192" alt="beschreibender Text">

Text umfließt ein Bild

Ein Bild vom eigenen Webspace soll von einem Text umflossen werden: Bild links oben in der Ecke, Text rechts davon und darunter. Das Bild soll oben soviel Abstand haben, dass es bündig mit dem Text abschließt. Rechts und unten soll der Abstand so groß sein, dass der Text das Bild nicht berührt. Links ist kein zusätzlicher Abstand nötig.

Das Attribut width="80" beschreibt die Breite des Bildes in Pixeln. Es kann die dargestellte Bildgröße verändern. Achtung: Vergrößerungen verschlechtern die Bildqualität!

Wenn das Bild rechts stehen soll, ändern Sie das align-Attribut in align="right".

Welche Abstände passen, können Sie ausprobieren. Zur Orientierung: Eine Zeile hat etwa die Höhe von 12 px. Die Abstände im "margin"-Befehl werden im Uhrzeigersinn angegeben: Oben Rechts Unten Links, in diesem Beispiel: style="margin:20px 10px 5px 0;"

Befehle

                
  <img src= "http://litfas.de/computertreff/clown80.jpg"
  width="80" align="left" 
  style="margin:20px 10px 5px 0;">


  <p>Ein Bild vom eigenen Webspace soll von einem Text umflossen werden: 
  Bild links oben in der Ecke, Text rechts davon und darunter. Das Bild soll oben soviel Abstand haben, 
  dass es bündig mit dem Text abschließt. Rechts und unten soll der Abstand so groß sein, 
  dass der Text das Bild nicht berührt. Links ist kein zusätzlicher Abstand nötig.</p>
                

Tabelle

Eine Tabelle mit 3 Zeilen und 2 Spalten, zentriert, Rahmen und Linien, Innenabstand 10 pt

Zeile 1 Spalte A	Zeile 1 Spalte B
Zeile 2 Spalte A	Zeile 2 Spalte B
Zeile 3 Spalte A	Zeile 3 Spalte B

Das Attribut "border" beschreibt den äußeren Rahmen der Tabelle, die Wertzuweisung ist die Linienstärke. Das Attribut "rules" mit dem Wert "all" zeichnet alle waagerechten und senkrechten Innenlinien der Tabelle (wenn der Browser das erkennt und darstellt).

Befehle

                
   <p>Eine Tabelle mit 3 Zeilen und 2 Spalten, zentriert, Rahmen und Linien, Innenabstand 10 pt</p>

   <table align="center" border="1" rules="all" cellpadding="10">

       <tr>

           <td>Zeile 1 Spalte A</td>

           <td>Zeile 1 Spalte B</td>

       </tr>

       <tr>

           <td>Zeile 2 Spalte A</td>

           <td>Zeile 2 Spalte B</td>

       </tr>

       <tr>

           <td>Zeile 3 Spalte A</td>

           <td>Zeile 3 Spalte B</td>

       </tr>

     </table>

oben

Sie können Ihren Text offline vorbereiten

Beim Schreiben haben Sie meist die Wahl, Ihren Text zwischendurch in einer "Vorschau" zu prüfen oder ihn für die Veröffentlichung hochzuladen / freizuschalten / zu publizieren. Das sollten Sie erst tun, wenn Sie mit dem Ergebnis zufrieden sind. Andernfalls könnte Ihr Beitrag unvollständig oder fehlerhaft lesbar sein - vielleicht ist das peinlich oder missverständlich.

Sie können Ihren Text aber auch offline mit Ihrem Browser prüfen. Sie können z.B. auf einem Computer vorbereiten, die Datei transportieren und auf einem anderen Computer veröffentlichen. So geht es:

Zum Beispiel eBay:
Wenn Ihr Angebot ungefähr so aussehen soll

Angebot

Absatz mit normalem mehrzeiligem Fließtext und einem Wort mit fetter Schrift

Aufzählung:

Position 1
Position 2

braucht Ihr Browser eine Datei, die z.B. unter diesem Namen gespeichert ist: angebot.html

Anfangs- und Endbefehle Diese Befehle entfernen Sie bitte vor dem Einstellen des Textes, denn bei Ihrem Internet-Partner sind sie bereits vorhanden. (Sie können versuchen, für den Test auf diese Befehle zu verzichten, vielleicht kommt Ihr Browser damit zurecht.)

Formale Anforderungen

Für die Darstellung von Texten im Internet wird der Dateityp .HTML oder .HTM benutzt. Benutzen Sie kein Textprogramm wie WORD, dessen Dateitypen (.DOC oder .DOCX) werden vom Browser nicht verstanden. Um eine "saubere" HTML-Datei zu erzeugen, können Sie z.B. das Programm "Editor" benutzen. Vergeben Sie beim Speichern die Dateinamenerweiterung HTML. Nennen Sie die Datei z.B. angebot.html.

Browser erkennen nur aus HTML- und CSS-Befehlen, wie die Seite gestaltet werden soll. Sie erkennen z.B. nicht, dass Sie mit mehreren Leerzeichen Abstände erzeugen wollen (gezeigt wird nur 1 Leerzeichen) oder ob Sie Zeilenumbrüche eingefügt haben (gezeigt wird durchlaufender Text). Daher können Sie Leerzeichen und Zeilenumbrüche so einsetzen, dass Sie selbst Ihren Angebots-Entwurf gut und übersichtlich lesen können.

Sie können Ihren gestalteten Text mit Ihrem Browser (z.B. Internet Explorer, Firefox etc.) offline prüfen und überarbeiten, bevor Sie den Text für die Veröffentlichung freigeben. Sie rufen dazu die Datei mit Ihrem Browser auf:

Datei > öffnen > angebot.html

Das können Sie so oft wiederholen, bis Sie mit der Darstellung zufrieden sind.

Vollständige Infos

Hier wurde nur ein Auszug der wichtigsten Befehle für Internet-Seiten zusammengestellt. Mit dieser Auswahl sollten Sie aber die meisten Anforderungen erfüllen können. Sie werden es erleben: "Appetit kommt beim Essen".

Eine umfassende Dokumentation zu HTML und CSS finden Sie bei SELFHTML.
Weiterführende Infos zu CSS finden Sie bei Wikipedia und css4you.

oben

Infos