 |
|||||||||||||||||||||||||||||||||||||||||||||||||
| www.my-mode.com > tutorial > text | |||||||||||||||||||||||||||||||||||||||||||||||||
|
text ist das mit abstand dominierende element bei cHTML. klar, dass sich somit auch die meisten tags auf die auszeichnung des textes beziehen. und wie immer ist es nicht sicher, ob jeder browser bzw. jedes handy die tags gleich interpretiert. somit gilt auch hier wieder "weniger ist mehr". Dennoch wird, ist und bleibt dieses Kapitel das umfangreichste.
also legen wir los. sonderzeichen - fangen wir mit den eigenarten einer sprache an. im deutschen sind das die umlaute bzw. sonderzeichen. und so wie man mit den japanischen kanjis tricks braucht, um sie dem computer zu verklickern (wen es interessiert, der kann ja mal google zum thema 32-bit-zeichen-codierung oder JIS anwerfen), gibt's diese tricks auch fuer umlaute in html (und damit auch in cHTML). die folgende tabelle zeigt, wie das jeweilige zeichen in HTML notiert, also fuer den computer zurechtgetrickst wird:
nur fuer layoutspezialisten: es gibt weitere maskierungen, die bindestriche oder leerzeichen jeweils in der breite eines "m" oder "n" erzeugen, wichtig z.b. wenn man mit proportionalen schriften arbeitet. da ein handy jedoch die seite in seiner eigenen handy-alles-ist-gleich-breit-schrift (nicht-proportionale schrift) anzeigt, koennen wir diese maskierungen hier getrost beiseite lassen. ein beispiel: "Auf die innere Größe kommt es an!" sagte er sich, und ärgerte sich trotzdem über alle Maßen. saehe in html dann so aus: "Auf die innere Größe kommt es an!" sagte er sich, und ärgerte sich trotzdem über alle Maßen. das immer von hand einzugeben ist natuerlich muehsam. viele html-editoren erledigen das aber ohnehin automatisch. wir sind nun also in der lage, alle zeichen darstellen zu koennen. was aber, wenn eine neue zeile begonnen werden soll? zeilenumbruch - normalerweise bricht ja der text je nach displaygroesse automatisch um, braucht man jedoch einen absatz, dann erledigt diesen das tag <br>fuer uns. alles was nach ihm kommt, wird eine zeile tiefer angezeigt. man muss den zeilenumbruch im code selbst nicht ausfuehren, sondern kann direkt nach dem tag weiterschreiben. dennoch empfiehlt es sich der besseren uebersicht wegen, auch im code den zeilenwechsel "mitzumachen". das tag kennt die attribute clear= all | left | rightdie bestimmen, wo ein um eine graphik oder ein objekt fliessender text fortgesetzt wird. wer es genauer wissen will, mag ein wenig damit spielen, ich gehe hier nicht naeher darauf ein. textausrichtung - nicht immer soll der text linksbuendig angezeigt werden, eine ueberschrift macht sich durchaus auch mittig gut, ein datum ist oft auch rechtsbuendig nicht deplatziert. auch in cHTML ist soetwas moeglich. das tag <div>...</div>mit seinen attributen align="right | center | left"hilft uns hier weiter. wirklich sinnvoll sind dabei nur "right" und "middle", linksbuendig ist der text ja auch so. ein kleines beispiel fuer einen rechtsbuendigen text: <div align="right">Ein rechtsbündiger Text.</div>im sinne von schmalen codes sei noch darauf hingewiesen, dass fuer eine mittige aussrichtung nicht unbedingt die zeile <div align="center">...</div>notwendig ist. das tag <center>...</center>funktioniert genauso gut und spart schon wieder wertvolle bytes. besondere textauszeichnung - die schriftart von handys ist meist proportional, das heisst, jeder buchstabe ist gleich breit. die folgenden tags zur auszeichnung von besonderen abschnitten sind daher nur beschraenkt sinnvoll fuer telefone. da sie aber bestandteil von cHTML sind, will ich sie nicht unerwaehnt lassen. das tag <blockquote>...</blockquote>wird zum beispiel zur auszeichnung von zitaten benutzt, jeder browser reagiert jedoch anders darauf. meist wird der text in proportionaler schrift dargestellt. da die handyschrift ohnehin proportional ist, bleibt das tag oft wirkungslos. einen textblock kann man mit <p>...</p>definieren, er laesst sich mit dem attribut align= right | center | leftentsprechend ausrichten. will man einen text exakt mit allen eingegebenen sonderzeichen wiedergeben, so hilft einem das tag <plaintext>...</plaintext>weiter - prima z.b., wenn man programmcode veroeffentlichen will. das tag <pre>...</pre>funktioniert im endeffekt wie das <plaintext>-tag, gibt aber zusaetzlich zu allen sonderzeichen auch noch leerzeichen und zeilenumbrueche wie eingegeben wieder. farbige schrift - i-modeTM-handys haben farbdisplays, also waere es nicht schlecht, wenn man den schriften auch eine passende farbe geben koennte. nichts einfacher als das, das tag <font>...</font>hat das attribut color="#XXXXXX"dabei geben die sechs "X" den gewuenschten rgb-farbwert in hexadezimalschreibweise an. man kann aber statt dessen auch einen festen, in html 3.2 definierten farbwert mit namen zuweisen. somit haben die zeilen <font color="green">Das ist ein grüner Text.</font>und <font color="#008000">Das ist ein grüner Text.</font>absolut den gleichen effekt. mehr zum thema farben findet sich im bereich layout. listen - "ordnung ist das halbe leben" sagt ein sprichwort, und im bereich edv gilt das gleich nochmal. um dinge strukturiert wiederzugeben, bietet cHTML gleich drei listenarten an - eine liste ist eine art aufzaehlung. die einfachste liste ist eine unnummerierte liste und hat folgende struktur: <ul> <li>eintrag 1</li> <li>eintrag 2</li> <li>und so weiter...</li> </ul>die tags <ul>...</ul>schliessen die liste ein, die einzelnen eintraege der liste werden mit <li>...</li>definiert. das ergebnis ist eine unnummerierte liste mit schmuckpunkten:
statt des <ul>-tags kann man auch die tags <dir>...</dir>oder <menu>...</menu>verwenden, der effekt ist der gleiche. nun, wenn es unnummerierte listen gibt, dann gibt es sicher auch nummerierte listen, die dann wie folgt aussehen: <ol> <li>eintrag 1</li> <li>eintrag 2</li> <li>und so weiter...</li> </ol>quasi das selbe wie vor, nur eben mit einem <ol>...</ol>das <ol>-tag kennt in cHTML zwei attribute. type=1 | A | a start=xdabei legt "type" die art der nummerierung fest, also 1, 2, 3 oder a, b, c bzw. A, B, C. "start" wiederum gibt vor, wo die nummerierung beginnen soll, sinnvoll zum beispiel, wenn man die liste unterbrechen will. ein beispiel soll auch hier zeigen, wie es aussehen kann: <ol type=A start=3> <li>eintrag 1</li> <li>eintrag 2</li> <li>und so weiter...</li> </ol>bringt als ergebnis:
weil wir schon bei abgedrehtem sind, auch in cHTML funktionieren sogenannte definitionslisten, listen, in denen aehnlich tabellen zum beispiel begriffe und ihre erklaerung angeordnet werden koennen. die struktur sieht so aus: <dl> <dt>begriff 1<dd>erklaerung 1 <dt>begriff 2<dd>erklaerung 2 <dt>usw. ... <dd>und so weiter ... </dl>eingeschlossen in die tags <dl>...</dl>zeichnet das tag <dt>das zu definierende wort aus, das tag <dd>die definition. jetzt bleibt es am i-modeTM-autoren, dafuer eine sinnvolle anwendung zu finden. spezialeffekte - ja, die gibts auch. und sparsam richtig eingesetzt machen die sich auch echt gut - der eyecatcher schlechthin. zuerst waere da das blink-tag, dass seinem namen gerecht wird - und die schrift blinken laesst. prima zum beispiel, wenn man z.b. auf einen ablaufenden termin hinweisen will. so stehts im code: <blink>...</blink>leider gibts noch keine moeglichkeit, die blinkfrequenz anzugeben... der zweite effekt ist laufschrift, erzeugt mit dem tag <marquee>...</marquee>und hier hat man auch ein paar moeglichkeiten, in das erscheinen der laufschrift einzugreifen. dazu stehen einem folgende attribute zur verfuegung: behavior="scroll | slide | alternate""scroll" laesst die schrift wie man es von einem ticker kennt durchlaufen. "slide" stopt den textfluss, sobald das letzte zeichen angezeigt wird bzw. bei kurzen texten das erste den anderen rand erreicht hat. "alternate" wechselt, sobald das letzte zeichen angezeigt wurde oder, wieder bei kurzen texten, das erste über das ganze display gewandert ist, die laufrichtung. direction="left | right"mit "left" oder "right" kann man die laufrichtung des textes festlegen. loop=x"x" steht dabei für die zahl der gewuenschten durchlaeufe. leider ist bei 16 schon die obergrenze erreicht. auch sonst gibt es noch ein paar einschraenkungen. der marquee-tag wird nur mit max. 64 bytes fertig - also ist im allgemeinen nach 64 zeichen schluss (bei kanjis dementsprechen nach 32 zeichen). ausserdem darf der marquee-tag nicht zwischen anderen tags stehen. in einer liste z.b. funktioniert er nicht. maximal vier marquee-tags koennen gleichzeitig auf einer seite laufen - das reicht auch, denke ich. ein beispiel fuer den einsatz. die zeilen <marquee direction="right"
behavior="alternate"
loop=10>
???
</marquee>
lassen die drei fragezeichen zuerst nach rechts wandern wegen des direction-attributes, am rand angekommen machen sie kehrt und wandern zurueck - wegen des alternate-attributes. dank der loop-angabe geht das 10 mal so. man kann das auch alles in eine zeile schreiben.
als zweites beispiel hier der code der entsprechenen my-mode beispielseite:
<html>
<head>
<title>effekte</title>
<meta http-equiv="Content-Type"
content="text/html ; charset=ISO-8859-1">
</head>
<body>
<img src="lg2a.gif" width="75" height="27">
<br>
<br>texteffekte
<hr>
wenn ein text
<br><blink>blinkt</blink>,
<br>dann faellt das auf - nervt vielleicht aber auch.
moeglich wird das mit
<br><blink>...</blink>
<hr>
<marquee loop=10>laufschrift fuer den my-mode ticker...</marquee>
<hr>ist auch recht cool, und dank
<br><marquee>...</marquee>
<br>machbar. sie darf aber nicht laenger als 64 bytes
bzw. zeichen sein.
<hr>
<a href="133.html" accesskey=1>1 - zurueck</a>
<br><a href="133.html" accesskey=0>0 - start</a>
<hr>
<center>
copyright (c)
<br>2002
<br>christian seyfarth
</center>
</body>
</html>
der code ist der besseren lesbarkeit wegen noch nicht optimiert! mehr dazu im bereich codeoptimierung.
|
||||||||||||||||||||||||||||||||||||||||||||||||