Vor­be­rei­tun­gen

Host Pro­vi­der

Um ei­ne Ho­me­pa­ge ins In­ter­net zu brin­gen, braucht man ei­nen Spei­cher­platz, der stän­dig ans In­ter­net an­ge­schlos­sen ist. Theo­re­tisch geht das mit dem ei­ge­nen Com­pu­ter und ei­ner Fla­tra­te, bes­ser ist es aber, wenn man sich ei­ne Do­main bei ei­nem ent­spre­chen­den An­bie­ter - dem Host - be­sorgt. Für un­se­ren Kurs ge­nügt ei­ne kosten­lo­se Do­main.

Be­gin­nen Sie mit den Vor­be­rei­tun­gen früh, da man manch­mal auf die Reak­tio­nen der Pro­vi­der war­ten muss. Sinn­voll ist es, die Vor­be­rei­tun­gen mit den fol­gen­den HTML-Ü­bun­gen zu mi­schen.

  • Prü­fen Sie, ob Sie von Ih­rem Ar­beit­splatz aus E-Mails ab­ru­fen kön­nen.
  • Wenn Sie noch kei­ne E-Mail-Adres­se ha­ben, bean­tra­gen Sie ei­ne kosten­lo­se E-Mail-Adres­se z.B. bei ya­hoo.­de , gmx.­de , web.­de ,..
  • Bean­tra­gen Sie Spei­cher­platz für Ih­re erste ei­ge­ne Ho­me­pa­ge bei ei­nem Web­host, kosten­los zB. bei..

Die erste HTML-Sei­te

Da­mit man mit ei­ner HTML-Sei­te nicht bei Adam und Eva an­fan­gen muss, star­ten wir mit ei­ner Muster­sei­te und ver­än­dern die­se. Die­ses Ver­fah­ren ist auch spä­ter geeig­net, weil man nicht je­de Sei­te mit ei­nem lee­ren Blatt be­ginnt.

  • La­den Sie die HTML-Bei­spiel­sei­te her­un­ter, spei­chern Sie sie in ei­nem Ord­ner, zB. H:\Ho­me­pa­ge., und ent­pa­cken Sie sie.
  • Un­ter­su­chen Sie die HTML-Da­tei nach den An­wei­sun­gen auf dem Auf­ga­ben­blatt (PDF).

Ach­tung: Ver­wen­den Sie hier­zu mög­lichst nicht den MS In­ter­net Ex­plo­rer, weil die­ser die Da­tei beim Ab­spei­chern ver­än­dert und sei­ne ei­ge­ne Duft­mar­ken hin­ter­lässt.

Hilfs­mit­tel

Ei­ne Liste der von mir be­vor­zug­ten Pro­gram­me fin­den Sie hier .

FTP-Pro­gramm

Um ei­ne Ho­me­pa­ge ins In­ter­net zu brin­gen, be­nö­tigt man ein so­ge­nann­tes FTP-Pro­gramm. In un­se­rem Fall ist dies nicht er­for­der­lich, weil die Gra­tis-Hosts ih­re ei­ge­nen Mög­lich­kei­ten an­bie­ten, Ho­me­pa­ge-Da­teien hoch­zu­la­den.

Add-Ons zum Mo­zil­la Fi­re­fox

Der Mo­zil­la Fi­re­fox bie­tet ei­ni­ge schö­ne Hilfs­mit­tel zum Un­ter­su­chen von Ho­me­pa­ges an. Pro­bie­ren Sie es aus:

HTML-Edi­tor

Ei­ne Ho­me­pa­ge kann man in HTML (Hy­per Text Mar­kup Lan­gua­ge) mit je­dem ein­fa­chen Edi­tor, zB. Word­pad, erstel­len. Ein­fa­cher geht es, wenn man ei­nen spe­ziel­len HTML-Edi­tor ver­wen­det, die es in sehr un­ter­schied­li­cher Leistungs­fä­hig­keit gibt. Die­sen Kurs füh­re ich mit dem HTML-Edi­tor Pha­se 5 durch, weil die­ses für pri­va­te An­wen­dun­gen kosten­lo­se Pro­gramm ei­ner­seits sehr leistungs­fä­hig ist, an­de­rer­seits aber auch das Ver­ste­hen von HTML för­dert.

  • La­den Sie HTML-Edi­tor Pha­se 5 bei qhaut her­un­ter. Pha­se 5 wur­de ur­sprün­glich von Ul­li Mey­bohm ent­wi­ckelt, jetzt wird es von Hans-Die­ter Ber­retz gep­flegt.
  • Rich­ten Sie im HTML-Edi­tor Pha­se 5 ein Pro­jekt ein: Pro­jekt - Ein­stel­lun­gen - Ver­zeich­nis­se - Stam­mord­ner. (zB: H:\Ho­me­pa­ge) - Start­sei­te: (zB. H:\Ho­me­pa­ge\in­dex.html)

Ei­ne Über­sicht über HTML-Edi­to­ren fin­den Sie bei SELFHTML . (04/2007)

Ein­stieg in HTML mit dem HTML-Edi­tor Pha­se 5: Bil­der ein­fü­gen

Warn­hin­weis

Bil­der, die aus dem In­ter­net ge­la­den oder aus Druck­wer­ken ein­ges­cannt wur­den, un­ter­lie­gen in der Re­gel dem Ur­he­ber­recht. Das heiß­t, Sie dür­fen die­se Bil­der nicht oh­ne Er­laub­nis des Rech­tein­ha­bers auf Ih­re Ho­me­pa­ge stel­len.

Auch selbst fo­to­gra­fier­te Bil­der dür­fen nicht oh­ne wei­te­res ver­wen­det wer­den:

  • Fo­tos von Men­schen dür­fen oh­ne Er­laub­nis die­ser Per­son nicht ins In­ter­net gestellt wer­den. Aus­nah­men gibt es nur für Per­so­nen des öf­fent­li­chen Le­bens, wie dem Bun­de­skanz­ler oder ei­nem be­kann­ten Sport­ler.
  • Fo­tos von ur­he­ber­recht­lich ein­ge­schränk­ten Wer­ken, z.B. dem Pi­cas­so, der im Mu­seum hängt, dür­fen nur mit der Er­laub­nis der Rech­tein­ha­ber ver­öf­fent­licht wer­den..

Kei­ne Pro­ble­me hat man mit selbst ge­zeich­ne­ten Bil­dern oder Fo­tos von Mo­ti­ven, die nicht dem Ur­he­ber­recht un­ter­lie­gen.

Da ich aber kein Recht­san­walt bin, dür­fen Sie sich auf die­se An­ga­ben nicht ver­las­sen !

Bil­der vor­be­rei­ten

Be­vor man Bil­der in ein HTML-Do­ku­ment ein­fügt, muss man sich die Ei­ge­nar­ten von In­ter­net und Bil­dern vor Au­gen füh­ren.

  • Je­de In­ter­net-Sei­te muss durch Lei­tun­gen mit be­grenz­ter Ka­pa­zi­tät über­tra­gen wer­den. Des­halb soll­ten Do­ku­men­te so klein wie mög­lich ge­hal­ten wer­den, weil Sur­fer von lan­gen War­te­zei­ten ab­ge­schreckt wer­den.
  • Ge­ra­de Bil­der sind oft sehr groß und be­nö­ti­gen lan­ge La­de­zei­ten.
  • Je­des La­yout wird letz­tend­lich beim Le­ser er­zeugt und hängt da­von ab, wel­che Bild­schir­mau­flö­sung und wel­chen Brow­ser (Konque­rer, Mo­zil­la, MS In­ter­net Ex­plo­rer, Nets­ca­pe Na­vi­ga­tor, Ope­ra..) der Le­ser ver­wen­det. Die ver­schie­de­nen Brow­ser sind lei­der noch weit da­von ent­fernt, die glei­chen In­ter­pre­ta­tio­nen ei­ner Web­sei­te zu lie­fern. Und aus­ge­rech­net der Brow­ser mit der wei­testen Ver­brei­tung hält sich am we­nigsten an die "Norm".
  • Brow­ser kön­nen nicht al­le Bild­for­ma­te ver­ar­bei­ten. Die ge­bräuch­lichsten Bild­for­ma­te sind *.jpg (für Fo­tos), *.­gif (für Zeich­nun­gen und für ani­mier­te Darstel­lun­gen) und *.png.
  • Schon das Ver­klei­nern ei­nes Bil­des er­for­dert kom­ple­xe ma­the­ma­ti­sche Ope­ra­tio­nen, die von gu­ten Gra­fik-Pro­gram­men (The Gimp (kosten­los !). Co­rel­Draw, PaintS­hop­Pro, Pho­toIm­pact, Pho­toS­hop..) sicht­bar bes­ser ge­löst wer­den als von Brow­sern oder Scan­nern.

Für Bil­der be­deu­tet dies, dass man sie nicht grö­ßer lässt als un­be­dingt nö­tig. Ver­klei­nern der Bil­der soll­te man ei­nem gu­ten Gra­fik­pro­gramm und nicht dem Scan­ner oder ei­nem Brow­ser über­las­sen. Die beste Bildqua­li­tät bei nie­drigsten Da­ten­ra­ten er­hält man , wenn man ein Bild mit höchst­mög­li­cher Auf­lö­sung ein­scannt und dann von ei­nem gu­ten Gra­fik­pro­gramm auf die Grö­ße her­un­ter rech­nen lässt, die beim Le­ser an­ge­zeigt wer­den soll.

schlechtes Beispiel für einen Scan mit niedriger Auflösunggutes Beispiel für einen Scan mit hoher Auflösung und Umrechnung durch ein GrafikprogrammDas Bild links wur­de mit ge­rin­ger Auf­lö­sung (25 dpi) ges­cannt. (Ge­nau ge­nom­men wur­de es vom Scan­ner mit ma­xi­ma­ler Auf­lö­sung ges­cannt und dann von sei­ner Soft­wa­re auf 25d­pi (146x205 Pi­xel) ver­klei­nert.)
Das Bild rechts wur­de mit ma­xi­ma­ler Auf­lö­sung (300 dpi) ges­cannt und dann von ei­nem ural­ten Gra­fik-Pro­gramm (PaintS­hop­Pro4) auf die Grö­ße 142x200 Pi­xel ge­rech­net.

Deut­lich er­kenn­bar ist die bes­se­re Qua­li­tät des rech­ten Bil­des.
Ein wei­te­rer Nach­teil des Scan­ners ist es, dass man die Grö­ße 142x200 nicht ge­zielt er­zeu­gen kann, weil er nicht über die nö­ti­gen Ab­stu­fun­gen ver­fügt.


Die schlech­teste al­ler mög­li­chen Lö­sun­gen ist es, dem Le­ser ein gro­ßes Bild zu schi­cken, und es dann von des­sen Brow­ser klein rech­nen zu las­sen. Das gro­ße Bild ver­stopft die Te­le­fon­lei­tun­gen, und der Brow­ser ver­schlech­tert die Qua­li­tät.

Tech­nik

Die Auf­lö­sung kann man mit je­dem bes­se­ren Gra­fik­pro­gramm ver­än­dern. Bei­spie­le:

  • Ado­be Pho­tos­hop ele­ments 2.0: Bild - ska­lie­ren
  • Co­rel Pho­to Paint: Bild - Bild neu erstel­len
  • The Gimp: Bild - Bild ska­lie­ren
  • Ulead Pho­toim­pact 8: For­mat - Ima­ge Si­ze

Bil­der ein­fü­gen

Screenshot von Phase 5 beim Einfügen eines Bildes

Zum Ein­fü­gen ei­nes Bil­des mit dem HTML-Edi­tor Pha­se 5 ge­hen Sie wie folgt vor:

  • Spei­chern Sie die Bild­da­tei im Pro­jekt­ver­zeich­nis des HTML-Edi­tors ein, zB. H:\Ho­me­pa­ge
  • Set­zen Sie den Cur­sor im HTML-Do­ku­ment dort hin, wo das Bild ein­ge­setzt wer­den soll
  • Fü­gen Sie aus dem Da­tei­ma­na­ger das Bild01.jpg mit ei­nem lin­ken Maus­klick ein
  • oder wäh­len Sie auf Bild01.jpg das Kon­text­me­nu (sie­he Bild). Kon­text­me­nus wer­den mit ei­nem rech­ten Maus­klick auf ein ele­ment auf­ge­ru­fen, in die­sem Fall auf den Da­tei­na­men.

Es er­scheint das Bild-Tag, das im Fol­gen­den er­klärt wird:

<img src="Bild/Bild01.jpg" width="421" height="185" alt="">

  • img scr="Bild/Bild01.jpg" : zeigt an, dass ei­ne Bild folgt, und gibt den re­la­ti­ven Pfad an.
    Der Da­tei­na­me "Bild01.jpg" ist ungeschickt gewählt, weil die Bilder-Suchmaschine von Google unter anderem auch den Dateinamen auswertet. Es ist also sinnvoll, hier eine aussagekräftigere Bezeichnung zu wählen.
  • width="421" height="185" : Pha­se 5 hat die Ori­gi­nal­grö­ße des Bil­des ein­ge­setzt.
    Än­dern Sie die Grö­ße nicht, weil sonst der Brow­ser die Gra­fik um­rech­net und die Qua­li­tät ver­schlech­tert. Wenn Sie das Bild in ei­ner an­de­ren Grö­ße als der Ori­gi­nal­grö­ße ha­ben wol­len, soll­ten Sie es vor­her mit ei­nem Gra­fik­pro­gramm um­rech­nen.
    Lö­schen Sie die Grö­ße­nan­ga­be auch nicht, denn wenn der Brow­ser Hö­he und Brei­te des Bil­des kennt, setzt er den Text auf der Sei­te gleich rich­tig und der Be­su­cher der Sei­te hat wäh­rend der La­de­zeit des Bil­des schon mal was zu le­sen.
  • Screenshot von Phase 5 beim Einfügen eines Bildes mit Rand Im Bild rechts wur­de sty­le="outline:2px solid;" hin­zu­ge­fügt, so­dass es mit Rah­men dar­gestellt wird.
  • alt="Screenshot von Phase 5 beim Einfügen eines Bildes" : In­ner­halb der An­füh­rungs­zei­chen kann man ei­nen al­ter­na­ti­ven Text ein­ge­ben, der an­ge­zeigt wird, bis das Bild ge­la­den ist. Der al­ter­na­ti­ve Text ist be­son­ders wich­tig für Seh­be­hin­der­te Be­su­cher der Sei­te, den die­se kön­nen viel­leicht das Bild nicht er­ken­nen, aber sich den al­ter­na­ti­ven Text von ei­nem Pro­gramm vor­le­sen las­sen.
    Beach­ten Sie, dass HTML-Edi­tor Pha­se 5 ei­ne klei­ne Ma­cke hat: Sie dür­fen kei­nen Zei­le­num­bruch in­ner­halb des <alt="">-Tags setzen, auch nicht im Quelltext.
    MS IE6 zeigt den al­ter­na­ti­ve Text auch an, wäh­rend man mit dem Maus­zei­ger kurz über dem Bild ver­weilt. Das ist prak­tisch, aber ent­spricht nicht den W3C-Kon­ven­tio­nen. Wenn Sie die­se Funk­tion für al­le Brow­ser er­rei­chen wol­len, ver­wen­den Sie das <­tit­le="">-Tag

Bil­der aus­rich­ten mit Tex­tum­lauf

Um Bil­der links oder rechts aus­zu­rich­ten bei gleich­zei­ti­gem Tex­tum­lauf, kann man im <img scr>-Tag den Be­fehl class="boxlage_links bildbox" bzw. class="boxlage_rechts" ein­fü­gen.

Symbol Text links ausrichtenclass="boxlage_links bildbox" rich­tet das Bild am lin­ken Sei­ten­rand aus und lässt den Text rechts um das Bild flie­ßen. Das Tag für das Bild links lau­tet kom­plett <img src="Bild/Bild02.jpg"... class="boxlage_links bildbox" > .

Symbol Text rechts ausrichtenPha­se 5 bie­tet kei­nen spe­ziel­len Knopf, um Bil­der aus­zu­rich­ten. Man muss den Be­fehl al­so ent­we­der ein­tip­pen oder, wenn man ihn ver­ges­sen hat, sich mit den But­tons zum Aus­rich­ten von Ab­sät­zen be­hel­fen (sie­he Bil­der links und rechts). Die­ser Knopf fügt den Be­fehl <­div class="boxlage_links bildbox" ></­div> ein, von dem al­le au­ßer den fett ge­setz­ten Zei­chen ge­löscht wer­den müs­sen.

class="boxlage_rechts" setzt das Bild nach rechts. Das Tag für das Bild links lau­tet kom­plett <img src="Bild/Bild02.jpg"... class="boxlage_links bildbox" > .

Wenn man den Text ne­ben ei­nem Bild been­den möch­te, setzt man das Tag <br clear="all"> . Dann be­ginnt der fol­gen­de Text erst nach dem Bild. Die­ses Tag wird von Pha­se 5 nicht un­ter­stützt und muss ein­ge­tippt wer­den.


Zu­sätz­li­che Funk­tio­nen

Screenshot von Phase 5 beim Einfügen eines Bildes mit Rand (border=2)Auch Pha­se 5 kann nicht al­les, ei­ni­ge Funk­tio­nen müs­sen von Hand ein­ge­tra­gen wer­den

  • tit­le="Bild mit den Tags hspace und vspace" : Wenn man mit dem Maus­zei­ger kurz über dem Bild ver­weilt, er­scheint der Text "Bild mit den Tags hspace und vspace" Das <title="">-Tag innerhalb des <img src=".."> entspricht zwar nicht den HTML-Konventionen, sondern gilt erst ab XHTML, wird aber von allen großen Browsern korrekt angezeigt. Leider wird es von Phase 5 nicht unterstützt und muss von Hand eingetippt werden. Das ist aber verziehen, schließlich bringen wir die Versionen ein bis­schen dur­chei­nan­der.
  • sty­le="margin:50px; " : lässt links und rechts ne­ben dem Bild 50 Pi­xel Ab­stand. Da­durch sind Bild und Text nicht so eng bei­nan­der.
  • vspa­ce="20" : lässt über und un­ter dem Bild 20 Pi­xel Ab­stand.

Gro­ße Bild­da­teien an­bie­ten

Gro­ße Bild­da­teien ha­ben Vor­tei­le, wenn es auf De­tail­schär­fe und Auf­lö­sung an­kommt. Aber die Ent­schei­dung, ob De­tail­schär­fe oder kur­ze La­de­zeit wich­ti­ger ist, kann und soll­te man im In­ter­net dem Le­ser über­las­sen.
Da­zu stellt man ein klei­nes Bild mit kur­zer La­de­zeit ins In­ter­net (im Bei­spiel 100x78 Pi­xel mit 3kB). Von die­sem klei­nen Bild legt man ei­nen Link zu ei­ner hoch auf­ge­lösten Ver­sion des glei­chen Bil­des (im Bei­spiel 1929x1502 Pi­xel mit 402kB). Mit dem klei­nen Bild wird die Ge­duld des Le­sers beim Auf­bau der Sei­te nicht über­for­dert, und wenn der Le­ser es ge­nauer se­hen will, kann er das de­tail­rei­che Bild ab­ru­fen.

Bei­spiel:

Bild eines glühenden Pleuels das scheinbar direkt aus der Gesenkschmiede kommt

Quell­text:

<a href="Bild/Pleuel-groß.jpg">

<img src="Bild/Pleuel-klein.jpg" width="100" height="78" alt="geschmiedetes Pleuel" class="boxlage_rechts" >

</a>

Hin­wei­se:

Ein Bild mit Link er­zeugt man, in­dem man zu­nächst das Bild in zwei ver­schie­de­nen Auf­lö­sun­gen be­reit stellt. Dann setzt man das klei­ne Bild mit dem <img scr> -Tag in das Do­ku­ment ein und po­si­tio­niert es (gelb). An­schlie­ßend mar­kiert man den kom­plet­ten <img scr> -Tag und fügt dann den Link (oran­ge) auf das gro­ße Bild ein.
Kli­cken Sie auf das klei­ne Bild !

Bild­for­ma­te

Die klas­si­schen Bild­for­ma­te für Web­sei­ten sind JPG, GIF und PNG.

  • JPG kom­pri­miert die Bil­der mit Ver­lusten.
    Vor­teil: Fo­tos und an­de­re Bil­der mit viel­en Far­ben wer­den ziem­lich klein. Die Kom­pres­sions­ver­luste scha­den hier nicht, weil es nicht auf je­den ein­zel­nen Bild­punkt an­kommt.
    Nach­teil: Bei Bil­dern mit gro­ßen Flä­chen in ein­heit­li­chen Far­ben fal­len die Kom­pres­sions­ver­luste auf, weil ein­zel­ne Farb­punk­te ver­fäscht wer­den. Des­halb wer­den Gra­fi­ken, tech­ni­schen Zeich­nun­gen, Screens­hots, Texts­cans usw. mit JPG un­scharf.
    Au­ßer­dem kann JPG in sel­te­nen Fäl­len auch Vi­ren tran­spor­tie­ren.
  • GIF kom­pri­miert Bil­der oh­ne Ver­luste. Au­ßer­dem kön­nen GIFs auch ani­miert sein.
    Vor­teil: Gra­fi­ken, tech­ni­schen Zeich­nun­gen, Screens­hots, Texts­cans blei­ben mit GIF scharf. Wenn die Zeich­nun­gen nur we­ni­ge Far­ben und grö­ße­re Flä­chen mit ein­heit­li­chen Far­ben ent­hal­ten, z.B. ei­ne tech­ni­sche Zeich­nung (s/w) wer­den GIF-Da­teien noch klei­ner als JPG.
    Nach­teil: Fo­tos und an­de­re Bil­der mit viel­en Far­ben blei­ben sehr groß.
    Das GIF-For­mat ist nicht frei. Wenn man kei­ne GIF-Li­zenz hat bzw. kein Gra­fik­pro­gramm mit ei­ner sol­chen Li­zenz hat, kann Pro­ble­me be­kom­men.
  • PNG ist ein neues freies For­mat, das be­lie­big ein­ge­setzt wer­den kann.

Tipp

The Gimp ist ein gu­tes Gra­fik­pro­gramm und kostet nichts. Wa­rum Geld zah­len oder klauen, wenn es kosten­los und le­gal geht? Statt­des­sen ein­fach 'Gimp' und 'Down­load' goo­geln ! es wur­de ur­sprün­glich für Li­nux ent­wi­ckelt, gibt es aber jetzt auch für Win­dows. Wer bei­de Be­triebs­syste­me ein­setzt, muss al­so sein Gra­fik­pro­gramm nicht wech­seln.

Ta­bel­len

Mit Ta­bel­len kann man Da­ten op­tisch struk­tu­rie­ren, des­halb wer­den sie ger­ne ge­nutzt, um La­youts zu gestal­ten. Ger­ne ist aber nicht gut, denn für Seh­be­hin­der­te kann La­yout mit Ta­bel­len sehr un­ü­ber­sicht­lich wer­den, des­halb soll­ten Ta­bel­len nur für Ta­bel­len ver­wen­det wer­den.
Im Ge­gen­satz zu Listen kön­nen Ta­bel­len­Ele­men­te auch ne­be­nei­nan­der plat­zie­ren. Des­halb brau­chen sie auch mehr Tags.

Symbolleiste Tabellen

Zum Ein­fü­gen und Bear­bei­ten von Ta­bel­len stellt Pha­se 5 ei­ne Sym­bol­leiste zur Ver­fü­gung (sie­he Bild rechts).

Die Sym­bol­leiste ist so dar­gestellt, dass mit Klick auf das Ein­fü­gen -Sym­bol ei­ne Ta­bel­le mit 3 Spal­ten und 2 Zei­len ein­ge­fügt wird.
Pro­bie­ren Sie es aus, und be­trach­ten Sie das Er­geb­nis.


Ta­bel­len­struk­tur

Bei­spiel:

Über­schrift Spal­te 1 Über­schrift Spal­te 2 Über­schrift Spal­te 3
Zei­le 1; Spal­te 1 Zei­le 1; Spal­te 2 Zei­le 1; Spal­te 3
Zei­le 2; Spal­te 1 Zei­le 2; Spal­te 2 Zei­le 2; Spal­te 3

Hin­wei­se:

Im Quell­text er­kennt man die Struk­tur der Tags. Von au­ßen nach in­nen sind an­geord­net:

<­ta­ble>..</­ta­ble>
mar­kie­ren An­fang und En­de ei­ner Ta­bel­le.
Der Be­fehl bor­der im <­ta­ble>-Tag be­wirkt, dass die Ta­bel­len­gren­zen mit Li­nien an­ge­zeigt wer­den. Man kann den Be­fehl auch we­glas­sen.
Zwi­schen den bei­den Ta­bel­len-Tags ste­hen die Zei­len-Tags für die Zei­len von oben nach un­ten
<tr>..</tr>
mar­kie­ren An­fang und En­de ei­ner Zei­le
Zwi­schen den bei­den Zei­len-Tags ste­hen die Zel­len-Tags für die Zel­len von links nach rechts
<td>..</td>
mar­kie­ren An­fang und En­de ei­ner Zel­le
Zwi­schen den bei­den Zel­len-Tags ste­hen al­le Zel­le­nin­for­ma­tio­nen.
In die Zel­len kön­nen Text, Listen, Bil­der, wei­te­re Ta­bel­len usw. ein­ge­fügt wer­den.
<th>..</th>
ist ein Son­der­fall der Zel­len-Tags <td>..</td> und wird oft in der ersten Zei­le für Über­schrif­ten ver­wen­det. Die <th> wer­den von neue­ren W3C-Stan­dards emp­foh­len, weil sie die Les­bar­keit von Ta­bel­len spe­ziel­le für Seh­be­hin­der­te er­leich­tern. Man soll­te sie des­halb kon­sequent ver­wen­den, muss sie aber bei Pha­se 5 ge­son­dert ein­set­zen.

Quell­text:

<­ta­ble bor­der>
<tr>
<th>Ü­ber­schrift Spal­te 1</th>
<th>Ü­ber­schrift Spal­te 2</th>
<th>Ü­ber­schrift Spal­te 3</th>
</tr>
<tr>
<td>Zei­le 1; Spal­te 1</td>
<td>Zei­le 1; Spal­te 2</td>
<td>Zei­le 1; Spal­te 3</td>
</tr>
<tr>
<td>Zei­le 2; Spal­te 1</td>
<td>Zei­le 2; Spal­te 2</td>
<td>Zei­le 2; Spal­te 3</td>
</tr>
</­ta­ble>

Far­ben in Ta­bel­len

Symbol Farbe in Tabellen

Ei­ne nack­te Ta­bel­le kann man mit Far­ben, Rah­men und Ab­stän­den auf­pep­pen.

Das Fär­ben von Ta­bel­len wird von Pha­se 5 un­ter­stützt. Set­zen Sie den Cur­sor hin­ter das Wort ta­ble im <­ta­ble> -Tag, fü­gen Sie ein Leer­zei­chen ein, und drü­cken Sie das Sym­bol Git­ter­far­be .
Im <­ta­ble> -Tag er­schei­nen jetzt ei­ni­ge lee­re Ar­gu­men­te, die noch mit Far­ban­ga­ben aus­ge­füllt wer­den müs­sen:

<­ta­ble sty­le="background:" bordercolor="" bordercolorlight="" bordercolordark="">

Symbolleiste Farben


HTML-Edit Pha­se 5 un­ter­stützt auch die Aus­wahl von Far­ben mit der Re­gister­kar­te Co­lors (sie­he oben).
Set­zen Sie den Cur­sor zwi­schen die An­füh­rungs­zei­chen, und kli­cken Sie auf die ge­wünsch­te Far­be.
Die vor­ge­ge­be­nen Far­ben sind al­ler­dings sehr in­ten­siv. Wenn Sie wei­che­re Farb­tö­ne be­vor­zu­gen, kön­nen Sie sie mit dem Sym­bol Far­be ein­fü­gen (sie­he Mar­kie­rung) selbst mi­schen. Es bleibt auch die Mög­lich­keit, den Farb­co­de ma­nuell ein­zu­tip­pen, und zwar he­xa­de­zi­mal (z.B. sty­le="background:#ff0000") mit dem vorangestellten Doppelkreuz # oder dezimal ohne Vorzeichen (z.B. style="background:32568"). Man kann auch einige Farben im Klartext eingeben, z.B. sty­le="background:azure" , sty­le="background:khaki" , sty­le="background:maroon" usw.

Bei­spiel:

Zei­le 1, Spal­te 1 Zei­le 1, Spal­te 2 Zei­le 1, Spal­te 3
Zei­le 2, Spal­te 1 Zei­le 2, Spal­te 2 Zei­le 2, Spal­te 3

Hin­wei­se:

sty­le="background:yellow" im <­ta­ble>-Tag gibt die Hin­ter­grund­far­be gelb für die gan­ze Ta­bel­le an.
sty­le="background:#ffcccc" im <tr>-Tag gibt die Hin­ter­grund­far­be ro­sa für ei­ne Zei­le an.
sty­le="background:#maroon" im <td>-Tag gibt die Hin­ter­grund­far­be Ma­ro­ni für ei­ne Zel­le an.

Die je­weils letz­te Far­ban­ga­be gilt, des­halb kann die Far­be ei­ner Zel­le von der der Ta­bel­le ab­wei­chen.

Rah­men­far­ben bor­der­co­lor="" bordercolorlight="" bordercolordark="" : Hier ar­bei­tet Pha­se 5 un­lo­gisch, denn die Rah­men­far­ben wer­den erst dar­gestellt, wenn man den Be­fehl für Rah­men ein­ge­tippt hat ! Er­gän­zen Sie den Be­fehl bor­der im <­ta­ble> -Tag.
Die ver­schie­de­nen Rah­men­far­ben wir­ken an ver­schie­de­nen Stel­len des Rah­mens und wer­den auch noch un­ter­schied­lich von den Brow­sern in­ter­pre­tiert. Pro­bie­ren Sie es aus, oder las­sen Sie die Rah­men­far­ben ganz weg. Mit dem Be­fehl bor­der wird auf je­den Fall ein Rah­men um die Zel­len ge­zeich­net.

Quell­text:

<­ta­ble sty­le="background:yellow" border="3">
<tr>
<td>Zei­le 1, Spal­te 1</td>
<td>Zei­le 1, Spal­te 2</td>
<td>Zei­le 1, Spal­te 3</td>
</tr>
<tr sty­le="background:ffcccc">
<td>Zei­le 2, Spal­te 1</td>
<td sty­le="background:maroon">Zeile 2, Spalte 2</td>
<td>Zei­le 2, Spal­te 3</td>
</tr>
</­ta­ble>

Rah­men und Ab­stän­de in Ta­bel­len

An­de­re For­ma­te in Ta­bel­len wer­den von Pha­se 5 nicht un­ter­stützt und müs­sen ma­nuell im <­ta­ble>-Tag ein­ge­tippt wer­den. Die meisten For­ma­te funk­tio­nie­ren auch im <tr>- bzw. <td>-Tag se­lek­tiv für Zei­len bzw. Zel­len. Die fol­gen­de Liste ist nicht vollstän­dig.

Bei­spiel:

Zei­le 1, Spal­te 1 Zei­le 1, Spal­te 2 Zei­le 1, Spal­te 3
Zei­le 2, Spal­te 1    

Hin­wei­se:

Rah­men­brei­te bor­der="10" zeich­net um die Zel­len ei­nen Rah­men mit der Brei­te 10 Pi­xel. Der Rah­men wird nicht von je­dem Brow­ser dar­gestellt, wenn die Zel­le leer ist (Mit­te un­ten). Wenn Sie ei­ne lee­re Zel­le mit Rah­men wün­schen, müs­sen Sie min­destens ein ge­schütz­tes Leer­zei­chen ein­set­zen. Dies kann man in HTML Edit Pha­se 5 mit Strg-Leer­taste er­zeu­gen. Es sieht dann aus wie in der letz­ten Zel­le des Quell­tex­tes, al­ler­dings oh­ne Leer­zei­chen.

Ran­dabstand cell­pad­ding="5" be­wirkt ei­nen Ab­stand zwi­schen dem Zel­len­rand und dem Zel­le­nin­halt.

Zel­le­nabstand cell­spa­cing="15" lässt ei­nen Ab­stand zwi­schen den Zel­len und wirkt et­wa wie ei­ne Ver­brei­te­rung des Rah­mens.

Quell­text:

<­ta­ble sty­le="background:#ffffcc" border="10" cellpadding="5" cellspacing="15">
<tr>
<td>Zei­le 1, Spal­te 1</td>
<td>Zei­le 1, Spal­te 2</td>
<td>Zei­le 1, Spal­te 3</td>
</tr>
<tr>
<td>Zei­le 2, Spal­te 1</td>
<td></td>
<td> </td>
</tr>
</­ta­ble>

Ta­bel­len- und Spal­ten­brei­te

Die Brei­te gan­zer Ta­bel­len und der ein­zel­nen Spal­ten kann man in Pro­zent oder in Pi­xel an­ge­ben.

  • Die An­ga­be in Pi­xel hat den Vor­teil, dass die Brei­te fest vor­ge­ge­ben ist und die Ta­bel­le beim Le­ser die glei­che Grö­ße wie beim Au­tor hat.
    Wenn aber der Le­ser ei­ne an­de­re Bild­schir­mau­flö­sung ver­wen­det, wird ent­we­der sein Bild­schirm nicht aus­ge­nutzt oder über­for­dert, d.h. der Le­ser muss scrol­len, und das ist un­an­ge­nehm.
  • Die An­ga­be in Pro­zent hat den Vor­teil, dass sich die Ta­bel­len­brei­te an die Bild­schir­mau­flö­sung beim Le­ser an­passt und ihn voll aus­nut­zen kann.
    Nach­tei­lig ist, dass sich Zel­len­brei­ten, Zei­le­num­brü­che und An­ord­nun­gen von Gra­fi­ken stark ver­schie­ben kön­nen.
  • Wenn es um rei­ne Tex­tin­for­ma­tio­nen geht, emp­feh­le ich die An­ga­ben in Pro­zent.
    Wenn das La­yout wich­tig ist, soll­te man die Ma­ße in Pi­xel an­ge­ben, da­mit das La­yout (ei­ni­ger­ma­ßen) er­hal­ten bleibt.

Bei­spiel 1:

Zei­le 1, Spal­te 1 Zei­le 1, Spal­te 2
Zei­le 2, Spal­te 1 Zei­le 2, Spal­te 2

Hin­wei­se:

Im Ta­bel­len-Tag <­ta­ble> ist die Ta­bel­len­brei­te mit width="50%" an­ge­ge­ben. Des­halb be­legt das Bei­spiel ins­ge­samt die Hälf­te der ver­füg­ba­ren Brei­te ne­ben dem Quell­text. Mit wür­de die Ta­bel­le die gan­ze Brei­te aus­fül­len, wie es in den Bei­spie­len wei­ter un­ten der Fall ist.

In den ersten Zel­len-Tags <td> ist die Spal­ten­brei­te mit width="25%" bzw. width="75%" fest­ge­legt. Da­mit nimmt die 1. Spal­te 25% der Ta­bel­len­brei­te ein, wäh­rend die 2. Spal­te die rest­li­chen 75% Ta­bel­len­brei­te nutzt. Die Spal­ten­brei­te muss in der ersten Zei­le an­ge­ge­ben wer­den, die dar­un­ter lie­gen­den Zel­len pas­sen sich au­to­ma­tisch an.

Wenn kei­ne Spal­ten­brei­te an­ge­ge­ben ist, legt sie der Brow­ser nach dem In­halt fest. Wenn dann in der nächsten Zei­le ei­ne Spal­ten­brei­te an­ge­ge­ben ist, wird sie vom Brow­ser ig­no­riert. Pro­ble­ma­tisch wird es, wenn die obersten Zel­len zu­sam­men­ge­fasst sind. Dann soll­te man die Spal­ten­brei­te so­wohl in den zu­sam­men­ge­fassten Zel­len als auch in den dar­un­ter Lie­gen­den an­ge­ben.

Al­le Brei­te­nan­ga­ben kön­nen oh­ne Pro­zent­zei­chen auch in Pi­xel an­ge­ge­ben wer­den, z.B. <­ta­ble width="700">

Quell­text:

<­ta­ble sty­le="background:orange" width="50%" border>

<tr>

<td width="25%">Zeile 1, Spalte 1</td>
<td width="75%">Zeile 1, Spalte 2</td>

</tr>
<tr>
<td>Zei­le 2, Spal­te 1</td>
<td>Zei­le 2, Spal­te 2</td>
</tr>
</­ta­ble>

Zel­len zu­sam­men­fas­sen

In­ner­halb ei­ner Ta­bel­le kön­nen meh­re­re Zel­len zu­sam­men­ge­fasst wer­den. Der zu­sam­men­ge­fasste Be­reich muss rech­te­ckig sein. Die Zu­sam­men­fas­sung steht in der ersten Zel­le oben links. Die an­de­ren Zel­len, die in der ersten zu­sam­men­ge­fasst sind, wer­den nicht mehr co­diert.

Bei­spiel 1:

Zel­len zu­sam­men­ge­fasst Zei­le 1, Spal­te 3
Zei­le 2, Spal­te 1 Zei­le 2, Spal­te 2 Zei­le 2, Spal­te 3

Hin­wei­se:

Hier sind die ersten bei­den Zel­len der ersten Zei­le zu­sam­men­ge­fasst. Im ersten Zel­len-Tag <td> steht der Be­fehl col­span="2" , der be­deu­tet, dass die­se und die nächste Zel­le rechts da­ne­ben zu­sam­men­ge­fasst sind. Es wer­den al­so 2 Spal­ten (col) in ei­ner Zel­le zu­sam­men­ge­fasst. Das <td> -Tag der nächsten Spal­te ent­fällt.

Quell­text:

<­ta­ble sty­le="background:orange" border>
<tr>

<td col­span="2" style="background:yellow">Zellen..</td>

es fehlt: <td>Zei­le 1, Spal­te 2</td>

<td>Zei­le 1, Spal­te 3</td>
</tr>
<tr>
<td>Zei­le 2, Spal­te 1</td>
<td>Zei­le 2, Spal­te 2</td>
<td>Zei­le 2, Spal­te 3</td>
</tr>
</­ta­ble>

Bei­spiel 2:

Spal­te 1, Zel­len zu­sam­men­ge­fasst Zei­le 1, Spal­te 2 Zei­le 1, Spal­te 3
Zei­le 2, Spal­te 2 Zei­le 2, Spal­te 3

Hin­wei­se:

Hier sind die Zel­len der ersten Spal­te zu­sam­men­ge­fasst. Im ersten Zel­len-Tag <td> steht der Be­fehl row­span="2" , der be­deu­tet, dass die­se und die nächste Zel­le dar­un­ter zu­sam­men­ge­fasst wer­den. Es wer­den al­so 2 Zei­len (row) in ei­ner Zel­le zu­sam­men­ge­fasst. In der nächsten Zei­le ent­fällt das erste <td> -Tag.

Quell­text:

<­ta­ble sty­le="background:orange" border>
>
<tr>

<td row­span="2" style="background:yellow">Spalte 1...</td>

<td>Zei­le 1, Spal­te 2</td>
<td>Zei­le 1, Spal­te 3</td>
</tr>
<tr>

es fehlt: <td>Zei­le 1, Spal­te 2</td>
<td>Zei­le 2, Spal­te 2</td>
<td>Zei­le 2, Spal­te 3</td>
</tr>
</­ta­ble>

Bei­spiel 3:

Zei­le 1, Spal­te 1 Zei­le 1, Spal­te 2 Zei­le 1, Spal­te 3
Zei­le 2, Spal­te 1 Zei­le 2, Spal­te 2
Zei­le 3, Spal­te 1

Hin­wei­se:

Die Ta­bel­le besteht aus 3 Zei­len und 3 Spal­ten, von de­nen die 4 Zel­len rechts un­ten zu­sam­men­ge­fasst sind.

In der ersten Zel­le des zu­sam­men­ge­fassten Be­rei­ches (= oben links) wird mit row­span und col­span an­ge­ge­ben, wie viele Zel­len zu­sam­men­ge­fasst sind. In den fol­gen­den Spal­ten und Zei­len müs­sen na­tür­lich die Zel­len feh­len, die in der Zu­sam­men­fas­sung ent­hal­ten sind.

Quell­text:

<­ta­ble sty­le="background:orange" border=1">
<tr>
<td>Zei­le 1, Spal­te 1</td>
<td>Zei­le 1, Spal­te 2</td>
<td>Zei­le 1, Spal­te 3</td>
</tr>
<tr>
<td>Zei­le 2, Spal­te 1</td>

<td col­span="2" rowspan="2" style="background:yellow">Zeile 2, Spalte 2</td>

es fehlt: <td></td> (Zel­le 2. Zei­le rechts)

</tr>
<tr>
<td>Zei­le 3, Spal­te 1</td>

es fehlt: <td></td><td></td> (Zel­len 3. Zei­le Mit­te und rechts)
</tr>
</­ta­ble>

Ta­bel­len in Ta­bel­len

In­ner­halb ei­ner Ta­bel­len­zel­le kann ei­ne wei­te­re Ta­bel­le ein­ge­fügt wer­den.
Sol­che ver­schach­tel­ten Ta­bel­len er­mög­li­chen es bei­spiels­wei­se, links ei­ne Lin­kliste und rechts die Haupt­sei­te dar­zustel­len oh­ne Fra­mes zu ver­wen­den. Fra­mes mö­gen auf den den ersten Blick ele­gan­ter wir­ken, aber sie ha­ben ei­ni­ge prak­ti­sche Nach­tei­le, we­gen der ich auf Fra­mes ver­zich­te.

Auch das hier vor­lie­gen­de La­yout mit Bei­spiel und Quell­text ne­be­nei­nan­der ha­be ich frü­her mit ver­schach­tel­ten Ta­bel­len er­zeugt. Inz­wi­schen ver­wen­de ich für mehr­spal­ti­gen Satz CSS (Cas­ca­ding Sty­le Sheets), weil es kür­zer, über­sicht­li­cher und leich­ter zu pfle­gen ist.

Bei­spiel:

Pleuel

Die Pleuel­sei­te

Lin­kliste
Link1
Link2
heu­te Neuig­keit 2
gestern Neuig­keit 1

Hin­wei­se:

Hier se­hen Sie ei­ne oran­ge un­ter­leg­te Ta­bel­le. In die Zel­le un­ten rechts wur­de ei­ne wei­te­re Ta­bel­le ein­ge­fügt, die gelb (yel­low) un­ter­legt ist.

Ver­schach­te­lun­gen sind in be­lie­bi­ger Tie­fe mög­lich und er­mög­li­chen kom­pli­zier­te La­youts. Aber dies ist nicht emp­feh­lens­wert, denn Seh­be­hin­der­te kön­nen sich nur den Quell­text vor­le­sen las­sen und ver­lie­ren bei mehr­fach ver­schach­tel­ten Ta­bel­len leicht die Zuord­nung, wo die Tex­te ste­hen. Es ist des­halb bes­ser, kom­ple­xe La­youts mit CSS zu plat­zie­ren.

Quell­text:

<­ta­ble sty­le="background:orange" ">
<tr>
<td> <img src="Pleuel.jpg" width="100" height="78"> </td>
<td><h2>Die Pleuel­sei­te</h2></td>
</tr>
<tr>
<td>Lin­kliste<br>Link1<br>Link2<br>Link3</td>
<td>

<­ta­ble sty­le="background:yellow" >
<tr>
<td>­heu­te</td>
<td>Neuig­keit 2</td>
</tr>
<tr>
<td>­gestern</td>
<td>Neuig­keit 1</td>
</tr>
</­ta­ble>

</td>
</tr>
</­ta­ble>

Auf­zäh­lun­gen und Listen

Auf­zäh­lun­gen und Listen be­nö­ti­gen meh­re­re Tags, die inei­nan­der ver­schach­telt wer­den:

  • Die ge­sam­te Liste ist von Tags ein­ge­rahmt, die den Listen­typ an­ge­ben,
    • <ul>..</ul> für un­sor­tier­te Listen
    • <ol>..</ol> für sor­tier­te Listen
    • <dl>..</dl> für De­fi­ni­tions­listen
  • Je­de Stri­chauf­zäh­lung ist noch­mals ein­ge­rahmt, z.B. <­li>..</­li>.
  • Ei­ne un­sor­tier­te Liste hat den fol­gen­den Auf­bau
    <ul> mit oder oh­ne Text
    <­li>Stri­chauf­zäh­lung 1</­li>
    <­li>Stri­chauf­zäh­lung 2</­li>
    ...
    </ul>

Bei­spiel im Brow­ser:

Bei Auf­zäh­lun­gen bzw. Listen un­ter­schei­det HTML:

  • un­sor­tier­te Listen (ul )
  • sor­tier­te Listen (ol statt ul )
  • De­fi­ni­tions­listen (dl statt ul )
  • Me­nu­listen (me­nu statt ul )

HTML-Quell­text:

<p>Bei Auf­zäh­lun­gen bzw. Listen un­ter­schei­det HTML:</p>
<ul>
<­li>un­sor­tier­te Listen (ul )</­li>
<­li>­sor­tier­te Listen (ol statt ul )</­li>
<­li>De­fi­ni­tions­listen (dl statt ul )</­li>
<­li>Me­nu­listen (me­nu statt ul )</­li>
</ul>

Symbolleiste ListenPha­se 5 un­ter­stützt den Auf­bau von Listen mit ei­ner Sym­bol­leiste (sie­he Bild rechts). Der Auf­bau von Listen wird im fol­gen­den Ka­pi­tel am Bei­spiel von un­sor­tier­ten Listen er­klärt.


Un­sor­tier­te Listen

Symbol ungeordnete Listen (das Listenzeichen bleibt gleich)

Die­ser Text steht noch vor der Liste in­ner­halb von <p>Text</p>.
Die Liste be­ginnt man mit dem dar­gestell­ten But­ton, der Tags für un­sor­tier­te Listen <ul>..</ul> ein­fügt. Nach die­sem Tags muss ein Listen­tag fol­gen:

  • Die­ser Text steht in­ner­halb der Tags für die erste Stri­chauf­zäh­lung <­li>Text</­li> und ist des­halb hin­ter ei­nem Listen­zei­chen ein­ge­rückt.
  • Symbol Listenzeichen (= neuer Punkt der Strichaufzählung)Pha­se 5 un­ter­stützt das Ein­set­zen der <­li> -Tags mit ei­ner Sym­bol­leiste (sie­he Bild rechts).
  • Die ge­schweif­te Klam­mer um das <­li> -Tag im Sym­bol deu­tet an, dass die <­li> -Tags in­ner­halb der <ul>..</ul> -Tags ste­hen müs­sen.
  • Für je­de Stri­chauf­zäh­lung be­nö­tigt man ein neues <­li>..</­li> -Tag.
  • Man kann Auf­zäh­lun­gen auch schach­teln, in­dem man zwi­schen die <­li> -Tags ei­ne neue Auf­zäh­lung setzt. Die fol­gen­de Na­mens­liste ist ei­ne Liste in der Liste:
    • Meier
    • Mül­ler
    • Schul­ze
  • Die Bul­lets (Zei­chen vor der Stri­chauf­zäh­lung) wer­den von je­dem Brow­ser in an­de­rer Wei­se dar­gestellt (Punk­te, Krei­se, Ka­ros..).
  • Man kann das ge­wünsch­te Auf­zäh­lungs­zei­chen im Listen-Tag <ul> fest­le­gen. Da dies von Pha­se 5 nicht er­gänzt wird, muss man die Be­feh­le hin­ter ul ein­tip­pen:
    • <ul ty­pe=­cir­cle> oder
    • <ul ty­pe=squa­re> oder
    • <ul ty­pe=­disc>
  • Die vor­ige Un­ter­auf­zäh­lung besteht aus 3 Un­ter­auf­zäh­lun­gen, da­mit drei ver­schie­de­ne Bul­lets dar­gestellt wer­den. Beach­ten Sie den Quell­text.

Sor­tier­te Listen

Symbole geordnete Listen (das Listenzeichen zählt mit)

Sor­tier­te Listen ver­wen­den zäh­len­de Listen­zei­chen, z.B. 1-2-3 oder a-b-c.
Im Quell­text un­ter­schei­den sie sich durch durch das Listen-Tag <ol> statt <ul> . Im <ol> -Tag wird zu­sätz­lich an­ge­ge­ben, wel­cher Art die Bul­lets sind. Die­se Funk­tion wird von Pha­se 5 un­ter­stützt (sie­he Bild rechts), man muss sich die Be­feh­le im Ein­zel­nen al­so nicht mer­ken.
Das Listen-Tag <­li> bleibt wie bei un­sor­tier­ten Listen, auch Ver­schach­te­lung ist mög­lich.

Bei­spiel:

  1. Meier
  2. Mül­ler
  3. Schul­ze

De­fi­ni­tions­listen

Symbole Definitionsliste (= zweigeteilte Liste mit Begriff und Definition; siehe Beispiel)

De­fi­ni­tions­listen ver­wen­den pro Stri­chauf­zäh­lung zwei Ein­trä­ge, z.B. ei­nen Be­griff und sei­ne De­fi­ni­ton.
Als Listen-Tag wird <dl>..</dl> ver­wen­det und als Strich­listen-Tags <dt>Be­griff</dt> und <dd>De­fi­ni­tion</dd>.
Die Funk­tion wird von Pha­se 5 un­ter­stützt. Mit dem lin­ken mar­kier­ten Sym­bol setzt Pha­se 5 ei­ne De­fi­ni­tions­liste mit ei­ner Stri­chauf­zäh­lung ein, mit dem rech­ten mar­kier­ten Sym­bol setzt Pha­se 5 ei­ne zu­sätz­li­che Stri­chauf­zäh­lung ein. Da­mit un­ter­schei­det sich die­se Funk­tion von un­sor­tier­ten und sor­tier­ten Listen, die oh­ne die erste Stri­chauf­zäh­lung ein­ge­setzt wer­den. Ei­ne wei­te­res De­tail er­scheint selt­sam: Pha­se 5 setzt die bei­den Stri­chauf­zäh­lungs-Tags <dt> und <dd> oh­ne End-Tag </dt> und </dd> ein. Man muss die End-Tags aber nicht nach­tra­gen, es scheint auch so mit den Brow­sern zu funk­tio­nie­ren.

Bei­spiel:

Re
Streck­gren­ze in N/mm² bzw. MPa
Rp0,2
Dehn­gren­ze in N/mm² bzw. MPa
Rm
Zug­festig­keit in N/mm² bzw. MPa

Me­nü­listen

Me­nu­listen wer­den hier nicht be­spro­chen, weil sie von den meisten Brow­sern nicht dar­gestellt wer­den.

Das Letz­te:: For­ma­tie­ren von Text mit <­font>-Tags und At­tri­bu­ten

Warn­hin­weis

Her­zlich will­kom­men, Dr. Fran­kenstein,
hier wird be­schrie­ben, wie die Monster des In­ter­nets er­schaf­fen wer­den. Hier ler­nen Sie kein so­li­des HTML und das Beste wä­re, sie zö­gen so­gleich von dan­nen. Aber ich glau­be nicht, dass Sie der Ver­su­chung wi­derste­hen kön­nen, auch wenn das Ziel wahr­lich kein Baum der Weis­heit ist.

Das For­ma­tie­ren von Tex­ten mit <­font>-Tags ist das Ge­gen­teil ei­ner gu­ten HTML-Pro­gram­mie­rung und in neue­ren Stan­dards wird aus­drück­lich emp­foh­len, dass man da­rauf ver­zich­tet. Des­halb hat­te ich ei­gent­lich ge­plant, die­se Met­ho­de im Gift­schrank zu las­sen und gar nicht erst zu be­kannt zu ma­chen, aber..

Mei­ne ak­tuel­le Klien­tel ist un­ge­dul­dig und tut sich schwer, län­ge­re Vor­be­rei­tun­gen zu tref­fen oh­ne schnel­le Er­geb­nis­se. Da­rü­ber hin­aus ha­ben sie ei­ne über­durch­schnitt­li­che Feh­lerquo­te, und ich müsste viel Un­­ter­richts­zeit mit Feh­ler­su­che ver­brin­gen. Da­ge­gen ist das <­font>-Tag re­la­tiv ein­fach zu hand­ha­ben und die Er­geb­nis­se un­mit­tel­bar zu se­hen. Des­halb bei­ße ich in den sau­ren Ap­fel.

Für gu­te Pro­gram­mie­rer und sol­che, die es wer­den wol­len, gibt es min­destens zwei Grün­de, von <­font> die Fin­ger zu las­sen:

  • Seh­be­hin­der­te und Such­ma­schi­ne in­te­res­siert nicht, ob ein Text her­vor­ge­ho­ben ist (groß, fett, bunt, blin­kend..), son­dern, wa­rum ein Text her­vor­ge­ho­ben ist (Über­schrift, Zi­tat, Quel­le­nan­ga­be..).
  • Bei um­fan­grei­che­ren We­bauf­trit­ten ist es sehr um­ständ­lich, <­font>-Tags zu pfle­gen, d.h. ein ein­heit­li­ches De­sign zu er­rei­chen oder gar das De­sign zu wech­seln.

Des­halb soll­ten Sie die­se Sei­te gar nicht erst le­sen !

Vor­ge­hens­wei­se

Screenshot des Schrift-Menüs beim HTML-Editor Phase 5

Das <­font>-Tag ist ei­ne Met­ho­de, um kur­ze Tex­tab­schnit­te zu for­ma­tie­ren. For­ma­tie­ren be­deu­tet, dass Schrif­tart, - grö­ße, -far­be usw. fest­ge­legt wer­den. Der Text­be­reich, der ein bestimm­tes For­mat er­hal­ten soll, wird zwi­schen <­font> und </­font> ge­setzt. Im vor­de­ren <­font>-Tag wird an­ge­ge­ben, wel­ches For­mat der Text­be­reich er­hal­ten soll.
Län­ge­re Tex­tab­schnit­te for­ma­tiert man in den <p>-, <h1>-, usw.-Tags am besten mit CSS.

Bei­spiel: Sie möch­ten, dass das Wort rot in ro­ter Far­be an­ge­zeigt wird.

Wenn Sie dies im HTML-Edi­tor Pha­se 5 mit Hil­fe ei­nes <­font>-Tags tun wol­len, ge­hen Sie wie folgt vor:

  • Mar­kie­ren Sie das Wort rot im Quell­text, in­dem Sie mit ge­drück­ter lin­ker Maustaste da­rü­ber fah­ren.
  • Wäh­len Sie in der Me­nü­leiste Schrift - Schrift­far­be - ro­tes Feld an­kli­cken - OK .
  • Im Quell­text steht nun <­font co­lor="#FF0000">rot</font>.
  • Im Brow­ser er­scheint das Wort rot in ro­ter Far­be.

Schrift­grö­ße

Die Schrift­grö­ße wird mit dem Wert si­ze=".." und einer Zahl angegeben.
Man kann die Schrift­grö­ße ab­so­lut an­ge­ben mit si­ze="1".. size="7".
Man kann die Schrift­grö­ße auch re­la­tiv zur ak­tuel­len Schrift­grö­ße an­ge­ben. In die­sem Fall schreibt man ein Vor­zei­chen zur Zahl: si­ze="+2" macht die Schrift größer, size="-2" macht die Schrift kleiner. Die Werte können von size="-2".. size="+4" reichen.

Bei­spiel im Brow­ser Bei­spiel im Quell­text
"Am Größten" <­font si­ze="+4">
"Sehr groß" <­font si­ze="+3">
"Größer" <­font si­ze="+2">
"Groß" <­font si­ze="+1">
"Kleiner" <­font si­ze="-1">
"Am Kleinsten" <­font si­ze="-2">
si­ze="7" <­font si­ze="7">
si­ze="6" <­font si­ze="6">
si­ze="5" <­font si­ze="5">
si­ze="4" <­font si­ze="4">
si­ze="3" <­font si­ze="3">
si­ze="2" <­font si­ze="2">
si­ze="1" <­font si­ze="1">

Tipp

Ach­ten Sie da­rauf, dass die Schrift­grö­ßen nicht zu klein sind, da­mit auch Seh­be­hin­der­te den Text le­sen kön­nen. Bei mo­der­nen Brow­sern kann zwar der Sur­fer die an­ge­zeig­te Grö­ße der Schrift leicht än­dern, aber der Brow­ser mit der wei­testen Ver­brei­tungs­grad ist nicht mo­dern.

Das funk­tio­niert so:
Mo­zil­la Fi­re­fox 1 und Ope­ra 7: Maus­räd­chen bei ge­drück­ter [Strg]-Taste dre­hen.
Nets­ca­pe Na­vi­ga­tor 7: [Strg] [+] bzw. [Strg]-[-] ist schon we­ni­ger kom­for­ta­bel
MS In­ter­net Ex­plo­rer 6: Maus­räd­chen bei ge­drück­ter [Strg]-Taste dre­hen funk­tio­niert nur bei ver­al­te­ten <­font>-Tags, aber nicht bei mo­der­nen CSS.

Schrif­tart

Die Schrif­tart wird mit dem Wert fa­ce=".." und ihrem Namen angeben.

Bei­spiel im Quell­text : <­font fa­ce="COURIER NEW">Schriftart Courier New</font>>
Bei­spiel im Brow­ser : Schrif­tart Cou­rier New

Tipp

Den­ken Sie da­ran, dass der Sur­fer Ih­re tol­le Schrif­tart nur dann le­sen kann, wenn sie auch auf sei­nem Rech­ner instal­liert ist. Ver­wen­den Sie des­halb kei­ne ex­oti­schen Schrif­tar­ten.

Schrift­far­be

Screenshot des Menüs Colors des HTML-Editors Phase 5Die Schrift­far­be wird mit dem Wert co­lor=".." und der Farbe angegeben. Die Farbe kann beim HTML-Editor Phase 5 aus einer Farbtafel ausgewählt werden und wird dann wahlweise mit dem hexadezimalen RGB-Farbcode oder dem amerikanischen Begriff für die Farbe eingetragen.
Die An­ga­be des Na­mens scheint ein­fa­cher zu sein, aber der he­xa­de­zi­ma­le Farb­co­de kann al­le Far­ben darstel­len, auch in al­ten Brow­sern.
Im Screens­hot rechtS ist ge­zeigt, wo zwi­schen den Va­rian­ten um­ge­schal­tet wer­den kann. Es kön­nen auch ei­ge­ne Farb­ta­bel­len erstellt wer­den.

Schrift­far­be Bei­spiel im Brow­ser Bei­spiel im Quell­text
he­xa­de­zi­ma­ler Farb­co­de Schrift­far­be blau <­font co­lor="#0000FF">Schriftart Courier New</font>>
ame­ri­ka­ni­sche Farb­be­zeich­nung Corn­flo­wer­blue <­font co­lor="cornflowerblue">Cornflowerblue"</font>

Tipp

Der he­xa­de­zi­ma­le RGB-Farb­co­de besteht aus 6 Zif­fern von 0.. 16, wo­bei man für die Zah­len 10.. 16 die Buchsta­ben A.. F ver­wen­det.
Der ro­te Far­ban­teil steht in den ersten bei­den Zif­fern, hier #FF0000.
Der grü­ne Far­ban­teil steht in den mit­tle­ren bei­den Zif­fern, hier #00FF00.
Der blaue Far­ban­teil steht in den letz­ten bei­den Zif­fern, hier #0000FF.
Gel­be Far­be wird aus rot und grün ge­mischt, hier #FFFF00.
?? Far­be (am. fuch­sia) wird aus blau und rot ge­mischt, hier #FF00FF.
Die hell­blaue Far­be wird aus grün und blau ge­mischt, hier #00FFFF.
Wei­ße Far­be (weiß) ist auf wei­ßem Hin­ter­grund nicht les­bar und besteht aus ei­ner Mi­schung al­ler Far­ben, hier #FFFFFF.
Wenn man statt FF klei­ne­re Zah­len (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e) ein­setzt, er­ge­ben sich al­le mög­li­chen Farb­mi­schun­gen.

Sonsti­ge At­tri­bu­te

Sonsti­ge For­ma­te wer­den nicht mit <­font>-Tags, son­dern mit spe­ziel­len At­tri­bu­ten ver­ge­ben. Bei­spie­le:

Fett im Brow­ser und im Quell­text: <b>Fett</b>

Kur­siv im Brow­ser und im Quell­text: <i>Kur­siv</i>

Un­ter­stri­chen im Brow­ser und im Quell­text: <u>­Un­ter­stri­chen</u>

Hoch­gestellt im Brow­ser und im Quell­text: <­sup>Hoch­gestellt</­sup>

Tief­gestellt im Brow­ser und im Quell­text: <­sub>Tief­gestellt</­sub>

Blin­kend im Brow­ser und im Quell­text: <­blink>­Blin­kend</­blink>

Lauf­schrift im Brow­ser und im Quell­text: <­marquee>Lauf­schrift</­marquee>

Tipp

Hoch­gestellt und Tief­gestellt kön­nen sinn­voll ein­ge­setzt wer­den

Fett , Kur­siv , Un­ter­stri­chen sind zwei­fel­haft und
Blin­kend und Lauf­schrift kön­nen nur schwer aus­ge­druckt wer­den.
Hier tut der MS In­ter­net Ex­plo­rer 6 ein­mal et­was Sinn­vol­les: Er ver­steht den Be­fehl nicht und stellt Blin­kend ru­hig:-)

Links

  • SELFHTML ak­tuell von Ste­fan Münz ist wohl der Klas­si­ker un­ter den Sei­ten zu HTML. Hier fin­den Sie her­aus, wie Sie Ih­re Sei­te nach Ih­ren Ideen gestal­ten kön­nen. (04/2002)
  • https://www.­zum.­de/Fae­cher/­kur­se/­boeing/ Nor­bert Boeing bie­tet ei­nen wei­te­ren Kurs zum HTML-Edi­tor Pha­se 5. (04/2007)
  • Der CSS Zen Gar­den de­monstriert Bei­spie­le für CSS-De­sign. Die HTML- und CSS-Quell­co­des kön­nen her­un­ter ge­la­den wer­den. (02/2004)
  • Link : Down­load des HTM-Edi­tor Pha­se 5 von Ul­li Mey­bohm. (07/2016)
  • Die gol­de­nen Re­geln für schlech­tes HTML von Ste­fan Kar­zau­nin­kat listet die Sün­den in der Web­sei­ten­gestal­tung auf. (04/2002)

Li­te­ra­tur­hin­wei­se

Es sind nicht im­mer die neuesten Aus­ga­ben auf­ge­führt.

Data-Becker: HTML XML

F. Harms, D. Koch, O. Kür­ten: Das gro­ße Buch HTML & XML

2000, 871 Sei­ten, DATA BECKER Düs­sel­dorf
49,95 DM (2000)

Hanke: Homepages

Jo­hann-Ch­ristian Han­ke: Ho­me­pa­ges für Fort­ge­schrit­te­ne

2000, 78 Sei­ten, KnowWa­re Ham­burg
8,- DM (2000)